https://github.com/stephan-evers/babel-plugin-transform-styl-modules

Transforms "styl" tagged template literals into css modules.
https://github.com/stephan-evers/babel-plugin-transform-styl-modules

babel css-modules postcss stylus template-literals

Last synced: 7 days ago
JSON representation

Transforms "styl" tagged template literals into css modules.

• Host: GitHub
• URL: https://github.com/stephan-evers/babel-plugin-transform-styl-modules
• Owner: stephan-evers
• License: mit
• Created: 2019-03-14T13:08:58.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-03-14T13:29:03.000Z (almost 6 years ago)
• Last Synced: 2024-12-15T07:09:00.852Z (11 days ago)
• Topics: babel, css-modules, postcss, stylus, template-literals
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/babel-plugin-transform-styl-modules
• Size: 2.93 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

# babel-plugin-transform-styl-modules

> Transforms "styl" tagged template literals into css modules. 🚀

Write your stylus code this way:

```javascript

  const css = styl`

    .your-class

      background: tomato

  `

```

And it will be transpiled into:

```javascript

  const css = {

    'your-class': '_your-class_'

  }

```

It exports the generated css into the `/.modules` folder where your .babelrc is found.

## Usage

For an explanation of css-modules go [here](https://github.com/css-modules/css-modules) and for stylus-lang [here](http://stylus-lang.com).

#### Install

1. Install via yarn or npm

  ```bash

  yarn add --dev babel-plugin-transform-styl-modules

  ```

  ```bash

  npm install --save-dev babel-plugin-transform-styl-modules

  ```

2. Add to babel configuration (usually in .babelrc)

  ```JSON

  {

    "plugins": [

      ["transform-styl-modules", { "dest": "any/dir" }]

    ]

  }

  ```

  The "dest"-parameter is optional. You can use it to pipe the generated output into your watch-directory for your build process.

#### Basic example

Write some front-end component:

```javascript

// cwd/path/to/component/Icon.js

import {h} from 'your-favorite-framework' // react/vue whatever

const css = styl`

  .icon

    fill: currentColor

    // ... rest of your styles

`

export default ({href}) =>

  h('svg', {class: css.icon},

    h('use', {href: href}))

```

After transpiling:

```javascript

// CWD/path/to/component/Icon.js

import {h} from 'your-favorit-framework' // react/vue whatever

const css = {

  'icon': '_icon_11j4s_1'

}

`

export default ({href}) =>

  h('svg', {class: css.icon},

    h('use', {href: href}))

```

Generates the following files:

```css

// CWD/any/dir/.modules/path/to/component/Icon.css

._icon_11j4s_1 {

  fill: currentColor

}

```

```Stylus

// CWD/any/dir/.modules/bundle.styl

@require "./**/*.css"

```

Include these files into your build pipeline.

## Limitations

Global styles are currently ignored 😢

## License

MIT