@poi/plugin-astroturf

Use astroturf to write CSS in JS with zero-runtime.

Install

yarn add astroturf @poi/plugin-astroturf --dev

How to use

In your poi.config.js:

module.exports = {
  plugins: [
    {
      resolve: '@poi/plugin-astroturf',
      options: {}
    }
  ]
}

Then write css-in-js:

import { css } from 'astroturf'

const style = css`
  .title {
    font-size: 2em;
  }
`
export const App = () => {
  return <div className={style.title}>Hello world</div>
}

Check out astroturf for more usages.

Options

  • loaderOptions: astroturf/loader options
    • loaderOptions.extension: Default .module.css. You can also change it to .scss or .module.scss etc to use CSS pre-processors, but make sure that it ends with .module.xxx if you want CSS modules support.

License

MIT.