Awesome
ts-transform-css-modules-next
Transform JSX styleName prop to className corresponding atomic CSS classes. Large projects will benefit greatly because each CSS declaration is being reused effeciently. Check out the introductory blog post.
Before transpilation:
index.tsx
import './styles.styl'
<div styleName="button" class="test"><div/>
styles.styl
.button {
width: 4rem;
height: 1rem;
background-color: black;
}
After transpilation:
index.jsx
<div className="test a b c"><div/>
Outputs a prettified styles.css and a minified styles.min.css
.a {
width: 4rem;
}
.b {
height: 1rem;
}
.c {
background-color: black;
}
Install
yarn add -D ts-transform-css-modules-next typescript
General usage
const transformCSS = require('ts-transform-css-modules-next').default;
transformCSS({
// Preprocessor of choice - "stylus" or "sass"
preprocessor: 'stylus'
// Output path for final CSS output files (styles.css and styles.min.css)
output: resolve(__dirname, './dist')
// Optional global paths for Stylus @import statements
paths: [resolve(__dirname, './styles')],
// Optional global sass/stylus file (you should import normalize.css and custom global classnames here)
globalPath: resolve(__dirname, './styles/globals')
// Optional autoprefix
autoprefix: true
})
Usage
Look into the examples
folder.
To understand commands associated with each project look into package.json
and its scripts.
Webpack example is still work in progress.
Testing
You can run the following command to test: npm test
Adding test cases
Write your test in a .tsx
file and add it to tests/cases
.
Compile with npm test
and look into the tests/temp
and verify.
Overwrite references by running the following command: npm run overwrite-references
Run npm test
again to verify that all tests are passing.
Credits
Heavily inspired by following projects: