```shell npm install styled-suitcss ## yarn add styled-suitcss ```
``shell`
npm install styled-suitcssyarn add styled-suitcss
The sole purpose of this library is to generate html & css libraries or snippets of code.
Modern technologies and concepts have enabled us to have a pretty good control over dependencies
and scopes. When these advantages can't be used due to the production environment we face the
same issue that led us to creating these concepts.
React helped us get rid of HTML templates and allowed us to define a virtual DOM that could be extended
with JavaScript.
If we remove the entire logic besides the rendering we can still use this main advantage to generate HTML.
> This library is not intended to be used with Reacts mechanism.
> It attempts to use React to generate HTML and allow setting dynamic states
The idea of CSS in JS has worn many faces, none of which ever convinced us. Whe the idea of using
JavaScript template helpers, things changed. Before it had not been possible to have such a reliable
dependency management and styling scope without injecting inline styles.
Let's again take away most of the logic here and focus on the basic idea: "define/extend styles on a component level"
and use this feature to generate plain CSS.
> This library does not use styled-components.
> It attempts to mock certain API points but only supports some basic features (some modified)
Over time we have seen numerous naming conventions to ensure human readable scoped selectors.
Suitcss has done a very nice job of adapting this idea so we decided to use its naming conventions.
> This library does not use suitcss.
> It attempts to follow their naming conventions
We do not advise the use for production purpose.
`bash`
extract-styled-suitcss "lib/patterns/*/.js"
`bash`
extract-styled-suitcss "lib/patterns/*/.js" --outDir path/to/dist
## extract-styled-suitcss "lib/patterns/*/.js" -o path/to/dist
> Look at the examples
> or tests for more detail.
`jsx
import styled from "styled-suitcss";
export const Button = styled.button({
_namespace: "my",
_name: "Button"
})
padding: 0.5em 1em;
background: #ddd;
color: #000;
font-size: 1em;
border: 1px solid #aaa;
border-radius: 3px;
&:hover {
background-color: #ccc;
};`
> one file per snippet
`html`
`css
.my-Button {
padding: 0.5em 1em;
background: #ddd;
color: #000;
font-size: 1em;
border: 1px solid #aaa;
border-radius: 3px;
}
.my-Button:hover {
background-color: #ccc;
}
``