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.
Enabling and disabling 
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
  }
}
Overwriting
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 * }
  }
}
Extending
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 helper
const { 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