Skip to content
Transforms styleName to atomic CSS className using compile time CSS module resolution.
TypeScript CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
src
tests
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
package.json
tsconfig.json

README.md

ts-transform-css-modules-next

travis npm version

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:

You can’t perform that action at this time.