Babel-plugin-dash NPM

Features

Minifies styles created with styles(), styles.one(), styles.cls(), styles.keyframes(), and styles.insertGlobal()
Minifies styles created with useGlobal() when used with babel-plugin-dash
Minifies styles created with @dash-ui/mq instances
Minifies styles created with @dash-ui/responsive instances
Transforms style objects to CSS strings for faster runtime compilation and better minification
Injects /*#__PURE__*/ flag comments to mark styles() and styles.one() for dead code elimination

Quick start

Basic usage

// babel.config.js
module.exports = {
  plugins: ['dash'],
}

With a custom styles instance

// babel.config.js
module.exports = {
  plugins: [
    [
      'dash',
      {
        instances: {
          // Transforms based on the `default` export in `src/styles`
          // i.e. import styles from './styles'
          styles: ['./src/styles'],
          // If using babel-plugin-dash
          // Transforms based on the named exports in `src/react-styles`
          // i.e. import {useStyle} from './react-styles'
          react: ['./src/react-styles'],
          // If using @dash-ui/mq
          // Transforms based on the `default` export in `src/mq`
          // i.e. import mq from './mq'
          mq: ['./src/mq'],
          // If using @dash-ui/responsive
          // Transforms based on the `default` export in `src/responsiveStyles`
          // i.e. import responsiveStyles from './responsiveStyles'
          responsive: ['./src/responsiveStyles'],
        },
      },
    ],
  ],
}

With a custom styles instance and named export

// babel.config.js
module.exports = {
  plugins: [
    [
      'dash',
      {
        instances: {
          // Transforms based on the `styles` export in `src/styles`
          // i.e. import {styles} from './styles'
          styles: {'./src/styles': 'styles'},
          // If using @dash-ui/mq
          // Transforms based on the `mq` export in `src/styles`
          // i.e. import {mq} from './styles'
          mq: {'./src/styles': 'mq'},
          // If using @dash-ui/mq
          // Transforms based on the `responsiveStyles` export in `src/styles`
          // i.e. import {responsiveStyles} from './styles'
          responsive: {'./src/styles': 'responsiveStyles'},
        },
      },
    ],
  ],
}

Options

Option	Description
instances	This option allows `babel-plugin-dash` to know which imports to treat as dash imports and transform as such. This option is only required if you use a custom instance of dash `styles()` created with `createStyles()` or you're importing `@dash-ui/styles` from somewhere other than `@dash-ui/styles`. Relative paths are resolved relative to process.cwd() (the current working directory).

Contributing

This plugin is pretty cool right now, but adding source maps to styles would make it extra cool. I'd also be interested in talking to any babel enthusiasts about making a zero runtime plugin with Dash, even if your support is just words! Hit me up in the issues if you can help.