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, '2xl': '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, '2xl': '0.1em' }
   } 
  })
);