A babel plugin for dash-ui
npm install babel-plugin-dash
A babel plugin for dash-ui
npm i -D babel-plugin-dash
- [x] Minifies styles created with styles(), styles.one(), styles.cls(), styles.keyframes(), and styles.insertGlobal()
- [x] Minifies styles created with useGlobal() when used with babel-plugin-dash
- [x] Minifies styles created with @dash-ui/mq instances
- [x] Minifies styles created with @dash-ui/responsive instances
- [x] Transforms style objects to CSS strings for faster runtime compilation and better minification
- [x] Injects /#__PURE__/ flag comments to mark styles() and styles.one() for dead code elimination
Basic usage
``js`
// babel.config.js
module.exports = {
plugins: ['dash'],
}
With a custom styles instance
`jsdefault
// babel.config.js
module.exports = {
plugins: [
[
'dash',
{
instances: {
// Transforms based on the export in src/stylessrc/react-styles
// i.e. import styles from './styles'
styles: ['./src/styles'],
// If using babel-plugin-dash
// Transforms based on the named exports in default
// i.e. import {useStyle} from './react-styles'
react: ['./src/react-styles'],
// If using @dash-ui/mq
// Transforms based on the export in src/mqdefault
// i.e. import mq from './mq'
mq: ['./src/mq'],
// If using @dash-ui/responsive
// Transforms based on the export in src/responsiveStyles`
// i.e. import responsiveStyles from './responsiveStyles'
responsive: ['./src/responsiveStyles'],
},
},
],
],
}
With a custom styles instance and named export
`jsstyles
// babel.config.js
module.exports = {
plugins: [
[
'dash',
{
instances: {
// Transforms based on the export in src/stylesmq
// i.e. import {styles} from './styles'
styles: {'./src/styles': 'styles'},
// If using @dash-ui/mq
// Transforms based on the export in src/stylesresponsiveStyles
// i.e. import {mq} from './styles'
mq: {'./src/styles': 'mq'},
// If using @dash-ui/mq
// Transforms based on the export in src/styles`
// i.e. import {responsiveStyles} from './styles'
responsive: {'./src/styles': 'responsiveStyles'},
},
},
],
],
}
| 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). |
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.
Again, I couldn't have embarked on this plugin without the @emotion-js team putting in
a load of work to kick it off.
MIT