PostCSS BaseCSS

PostCSS plugin which extracts basic CSS rules for inlining them in your index.html, similar to critical CSS.

Installation

npm install postcss-basecss --save

Usage

postcss([ require('postcss-basecss')(options) ])

Options

Default options:

{
    cssFile:   '',
    htmlFile:  '',
    selectors: [
    ],
    propertiesExclude: [
        'animation[\-a-z]*', 'transition[\-a-z]*',
        'cursor', 'nav[\-a-z]*', 'resize',
        'image[\-a-z]*'
    ],
    includeFontFace: true
}

options.cssFile

Only necessary of you use basecss standalone

options.htmlFile

File, in which the CSS should be included. Needs a head-Element.

options.selectors

Array of selectors for which should be looked. Can contain regular expressions.

For example:

selectors: [
	'.base-',
    '.col-(sm,lg)-',
    'nav', 
    'article'
]

options.propertiesExclude

CSS properties that should be excluded. It's mostly good to leave the default value here, you mostly do not want animations to appear.

options.includeFontFace

Basecss includes by default all @font-face rules in the beginning of the css, so that your fonts get rendered properly. You may want to disable this.

See PostCSS docs for examples for your environment.