https://github.com/deamme/ts-transform-css-modules-next

Transforms styleName to atomic CSS className using compile time CSS module resolution.
https://github.com/deamme/ts-transform-css-modules-next

Last synced: 3 months ago
JSON representation

Transforms styleName to atomic CSS className using compile time CSS module resolution.

• Host: GitHub
• URL: https://github.com/deamme/ts-transform-css-modules-next
• Owner: deamme
• License: mit
• Created: 2018-01-19T11:13:31.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-09-02T17:54:30.000Z (over 6 years ago)
• Last Synced: 2024-09-27T08:02:25.939Z (4 months ago)
• Language: TypeScript
• Size: 112 KB
• Stars: 11
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ts-transform-css-modules-next

[![travis](https://travis-ci.org/deamme/ts-transform-classcat.svg?branch=master)](https://travis-ci.org/deamme/ts-transform-classcat)

[![npm version](https://badge.fury.io/js/ts-transform-css-modules-next.svg)](https://badge.fury.io/js/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](https://medium.com/@Deam/css-modules-next-intro-a4ab14fe572f).

### Before transpilation:

index.tsx

```javascript

import './styles.styl'





```

styles.styl

```css

.button {

  width: 4rem;

  height: 1rem;

  background-color: black;

}

```

### After transpilation:


index.jsx

```javascript





```

Outputs a prettified styles.css and a minified styles.min.css

```css

.a {

  width: 4rem;

}

.b {

  height: 1rem;

}

.c {

  background-color: black;

}

```

# Install

`yarn add -D ts-transform-css-modules-next typescript`


## General usage

```javascript

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:

- [babel-plugin-react-css-modules](https://github.com/gajus/babel-plugin-react-css-modules)

- [ts-transform-css-modules](https://github.com/longlho/ts-transform-css-modules)

- [Styletron](https://github.com/rtsao/styletron)

- [Fela](https://github.com/rofrischmann/fela)

- [Tachyons](https://github.com/tachyons-css/tachyons)