Configuring Modules
Every module in Pollen can be customised, overwritten, and extended. A module is a collection of CSS variables with the same prefix, eg:
scale
(see Typography), size
(see Layout), etc.Enable and disable whole module by passing
true
or false
to the module in your config. All modules are enabled by default, set any you don't plan on using to false
to further save on bundle size.pollen.config.js
module.exports = {
modules: {
scale: false,
width: false,
color: true
}
}
To overwrite a module, provide an object with all the values you want to use to the module in your config.
pollen.config.js
module.exports = {
modules: {
scale: { /* custom type scale */ },
letter: { /* custom letter spacing scale * }
}
}
Often you'll want to just add or tweak a few values from Pollen's defaults instead of disabling or overwriting outright.
To do this Pollen provides all of its defaults as an argument to a configuration function rather than a plain object. Spread the appropriate key into a new object on the module to extend or overwrite Pollen's defaults.
pollen.config.js
module.exports = (pollen) => ({
modules: {
scale: { ...pollen.scale, '000': '0.6875rem' },
letter: {...pollen.letter, xxl: '0.1em' }
}
});
These defaults are also provided in the
defineConfig
typescript helperconst { defineConfig } = require('pollen-css/utils');
module.exports = defineConfig(pollen => ({
modules: {
scale: { ...pollen.scale, '000': '0.6875rem' },
letter: {...pollen.letter, xxl: '0.1em' }
}
})
);
Last modified 1yr ago