Use CSS in JS with postcss-js in webpack
npm i --save-dev css-in-js-loader
If you're using babel to process your Javascript then postcss-loader only transforms .js files one level deep, i.e. it doesn't transform that file's imports.
Put css-in-js between your CSS and JS loaders. css-in-js-loader detects if the file is a .js file and converts it to CSS using postcss-js so you can use your CSS loaders (e.g. postcss-loader) normally.
Example webpack configuration:
{
loaders: [
{ test: /\.css$/, loader: 'css!postcss!css-in-js!babel' },
{ test: /\.css\.js$/, loader: 'css!postcss!css-in-js!babel' },
{ test: /\.js$/, loader: 'babel' },
],
}
Now you can write CSS in JS:
import { minWidth } from './utils/media';
import { lap } from './breakpoints';
export default {
'.root': {
background: 'blue',
[minWidth(lap)]: {
background: 'red',
},
},
};
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4