minify-cssinjs-loader
A webpack loader to minify your css-in-js.
Install
yarn add -D minify-cssinjs-loader # or npm i -D minify-cssinjs-loader
Why
before:
let cls1 = css` color: red; .cls1 { display: block; background: url('...') no-repeat; & > h2 { color: red; font-size: px; }}`
after:
let cls1 = css`color:red;.cls1{display:block;background:url('...') no-repeat;&>h2{color:red;font-size:px;}}`
Usage
awesome-typescript-loader example:
moduleexports = module: rules: test: /\.tsx?$/ use: loader: "awesome-typescript-loader" options: useTranspileModule: true transpileOnly: true declaration: false instance: 'at-loader2' loader: 'minify-cssinjs-loader' options: // default is ['css', 'injectGlobal', /^styled(\.[a-z]+|\(([A-Z][a-z]+|['"][a-z]+["'])\))$/], // you can override or append custom trule default tagRules, // it accepts string/RedExp/Function. // // tagRules: [...], // override default rules. // tagRules: defaultTagRules.concat(...), // append new rules // recast: { ... }, custom parameters passed to recast(https://github.com/benjamn/recast). loader: "awesome-typescript-loader" options: target: 'ESNEXT' declaration: !__DEV__ useTranspileModule: __DEV__
babel-loader example:
moduleexports = module: rules: test: /\.tsx?$/ use: loader: "awesome-typescript-loader" options: useTranspileModule: true transpileOnly: true declaration: false instance: 'at-loader2' loader: 'minify-cssinjs-loader'
License
MIT