0.0.2 • Published 7 years ago
css-to-js-loader v0.0.2
CSS-in-JS? Not yet.
Most of libraries just create stylesheets for you. From pure CSS or pure JS code.
CSS-to-JS
This webpack loader actually converts CSS code into the JavaScript. Not just provide classNames, but wraps everything with client-side CSS-in-JS libraries.
Supported APIs
Styled-Components
Example
Given css:
.h1 {
color: #F00;
}
.P {
font-size: 14px;
color: #0F0;
--css-to-js-component: div;
}
And JS
import { h1, P } from '!css-to-js-loader!./style.css'
// h1 is styled.css
// you can use h1 as mixin
const H1 = styled.div`${h1};`;
// and P is the real styled-component
const App = () => <P>I am Component!</P>
Thus allows you to write more modular code. And keep all CSS inside CSS.
mixins
.h {
font-size: 10px;
}
.h1 {
--css-in-js-mixin: ".h"; /** same as LESS mixins. In css way **/
color: #F00;
}
Existing CSS libraries.
To manage existing libraries see *-mixins
Licence
MIT