Ts-transform-css-modules-next NPM

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

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
})