Configuration

While Pollen provides a default bundle of robust, useful low-level variables to build your project with (under pollen-css/pollen.css). It also comes with a build tool to generate your own custom design system instead.
Start by creating a config file in the root of your project that exports either a function or an object. See the full list of configuration options below.
The config file can be in CommonJS or ESM format, and will automatically be loaded with any of the following filenames:
pollen.config.{js|cjs|mjs}
pollenrc.{js|cjs|mjs}
pollen.config.js
module.exports = {
  // Config options
}
Once you have a configuration file, run the included pollen CLI tool. Either install pollen-css globally, or run the tool in an NPM script or with npx.
Global install
Local install
$ npm i -g pollen-css
$ pollen
npm i pollen-css
npx pollen
Then import/link to the output stylesheet in your project instead of the default Pollen export
Javascript
HTML
import './pollen.css'
<link rel="stylesheet" href="/pollen.css" />
Managing Pollen builds in production
Since the output CSS is a generated file, we recommend excluding this output from version control like git and running the pollen build tool along with the rest of your build pipeline, in a CI step or similar. You can do this with a prebuild script in package.json
package.json
{
  "scripts": {
    "prebuild": "pollen"
  }
}
Config options
Option
Default
Description
output
./pollen.css
File path of the generated Pollen stylesheet and optional JSON schema
selector
:root
CSS selector to scope Pollen's variables to
modules
Pollen default values
Pollen module configuration, see Configuring Modules​
media
undefined
Media queries, see Media & Supports​
supports
undefined
Supports queries, see Media & Supports​
module.exports = {
  output: './styles/pollen.css',
  modules: {
    // Module config
  }
}
CLI options
Option
Default
Description
-c, --config
./pollen.config.js
Path to your Pollen config file
-o, --output
Value of output in config file
File path to generated Pollen stylesheet
pollen -c ./pollen-dev.config.js -o ./styles/pollen-dev.css
Exporting a JSON schema
The output option in Pollen's config also accepts an object with a json field, which will generate a JSON schema of your design system. This is useful for internal documentation if your module configuration differs significantly from Pollen's defaults, which are documented here.
module.exports = {
  output: {
    css: './styles/pollen.css',
    json: './docs/pollen.json'
  }
}
Changing the CSS selector
By default Pollen scopes all its variables to :root. This is generally what you want, it will make your style variables available globally through your site, polyfill-able for IE11, and easy to reactively modify with media queries and javascript. 
However you can change this with the selector option in Pollen's config, a potential use-case is to make it :host for a shadow DOM, or a HTML element if you want to scope Pollen to part of your project
module.exports = {
  selector: '.scoped'
}
Typescript support
Pollen exports its config as a Config type, which you can use to annotate your config file with JSDoc typings
/** @type {import('pollen-css').Config} */
module.exports = {}
Alternatively use the included defineConfig() helper to get typescript support without JSDoc annotation
const { defineConfig } = require('pollen-css/utils');
​
module.exports = defineConfig({ ... });

Option	Default	Description
`output`	`./pollen.css`	File path of the generated Pollen stylesheet and optional JSON schema
`selector`	`:root`	CSS selector to scope Pollen's variables to
`modules`	Pollen default values	Pollen module configuration, see Configuring Modules
`media`	`undefined`	Media queries, see Media & Supports
`supports`	`undefined`	Supports queries, see Media & Supports

Option	Default	Description
`-c`, `--config`	`./pollen.config.js`	Path to your Pollen config file
`-o`, `--output`	Value of `output` in config file	File path to generated Pollen stylesheet

Last modified 1yr ago