css-to-js-loader

CSS-in-JS? Not yet.
Most of libraries just create stylesheets for you. From pure CSS or pure JS code. 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

```css .h {

font-size: 10px;

}
.h1 {

--css-in-js-mixin: ".h"; /** same as LESS mixins. In css way **/
color: #F00;

} ``` To manage existing libraries see -mixins - styled-components-mixins MIT