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
<div styleName="button" class="test"><div/>
styles.styl
After transpilation:
index.jsx
<div className="test a b c"><div/>
Outputs a prettified styles.css and a minified styles.min.css
Install
yarn add -D ts-transform-css-modules-next
General usage
const transformCSS = default;
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: