Docz-plugin-css NPM

docz-plugin-css

Docz plugin to parse css files inside your documents

npm.io

Examples

Instalation

First of all, install plugin:

$ yarn add docz-plugin-css --dev

After that, use the plugin on your doczrc.js:

// doczrc.js
import { css } from 'docz-plugin-css'

export default {
  plugins: [
    css({
      preprocessor: 'postcss',
      cssmodules: true,
      loaderOpts: {
        /* whatever your preprocessor loader accept */
      }
    })
  ]
}

Choosing PostCSS, Sass, Less or Stylus

Do you can choose how preprocessor your bundler will use just by changing the preprocessor property at the plugin definition:

// doczrc.js
import { css } from 'docz-plugin-css'

export default {
  plugins: [
    css({
      preprocessor: 'sass'
    })
  ]
}

Using CSS Modules

To use css modules, just turn on cssmodules property on your project configuration:

// doczrc.js
import { css } from 'docz-plugin-css'

export default {
  plugins: [
    css({
      preprocessor: 'sass',
      cssmodules: true
    })
  ]
}

After that, to import styles from css modules, just use .module.{preprocessor-ext} on your files

---
name: Button
----

import { Playground } from 'docz'

import { Button } from './Button'
import { styles } from './styles.module.css'

# Button

Example of Button component with custom class!

<Playground>
  <Button className={styles.custom}>
    Click me
  </Button>
</Playground>

If you don't pass .module in front of the preprocessor extension, bundler will don't parse your css as cssmodule!

Multiple pre-processor

You can still use multiple pre-processor together in the same configuration:

// doczrc.js
import { css } from 'docz-plugin-css'

export default {
  plugins: [
    css({ preprocessor: 'sass' }),
    css({ preprocessor: 'stylus' }),
  ]
}