dbox / spike-css-standards

A rock solid plugin pack for postcss

Spike CSS Standards

A standard plugin pack for postcss

Installation

npm install spike-css-standards -S

Usage

This is nothing more than a light wrapper around a postcss configuration object. Options are filtered into their appropriate plugins internally. All are optional.

const postcss = require('postcss')
const cssStandards = require('spike-css-standards')

const standards = cssStandards(/* options */)
// returns { parser: 'xxx', plugins: ['xxx'] }

postcss(standards.plugins)
  .process(/* css string */, { parser: standards.parser })
  .then((res) => { console.log(res.content) })

By default, the css standard plugin pack includes:

• sugarss, whitespace-based html, similar to jade/pug
• postcss-import, like require for css
• rucksack, collection of syntax sugar for css
• autoprefixer, automatic vendor prefixing
• postcss-attribute-case-insensitive, allows case insensitive attr selectors
• postcss-calc, reduces calc expression where possible
• postcss-color-function, polyfill for color-mod function
• postcss-color-gray, polyfill for gray function
• postcss-color-hex-alpha, polyfill for rgba hex notations
• postcss-color-hsl, polyfill for new hsl syntax
• postcss-color-hwb, polyfill for hue whiteness blackness function
• postcss-color-rebeccapurple, polyfill for rebeccapurple color
• postcss-color-rgb, polyfill for css module level 4 rgb function
• postcss-custom-media, polyfill for custom media queries
• postcss-custom-properties, polyfill for css variables
• postcss-custom-selectors, polyfill for custom selectors
• postcss-font-family-system-ui,
• postcss-font-variant, polyfill for generic system-ui font definition
• postcss-image-set-polyfill, polyfills image-set for resolution detection
• postcss-media-minmax, nice syntax sugar for media queries from media queries level 4 spec
• postcss-nesting, polyfill for css nesting module level 3
• postcss-property-lookup, sugar for referencing other properties
• postcss-pseudo-class-any-link, polyfills :any-link pseudo-class
• postcss-selector-matches, polyfills :matches pseudo-class
• postcss-selector-not, polyfills :not pseudo-class
• cssnano, minifies css, toggled with the minify option which is false by default

Any of these plugins can be customized by passing the options described below. You can also add additional postCSS plugins (like the popular lost grid, for example) on top of this package:

const cssStandards = require('spike-css-standards')
const lost = require('lost')

const css = cssStandards()
css.plugins.push(lost())

Options

Name	Description	Default
root	Root used to resolve path(s) from
path	A path to a folder or an array of paths, telling postcss-import where to look for sss or css files to @import.
rucksack	Options passed directly to rucksack
postcssImport	Options passed to postcss-import
autoprefixer	Options passed to autoprefixer
attributeCaseInsensitive	Options passed to postcss-attribute-case-insensitive
calc	Options passed to postcss-calc
colorFunction	Options passed to postcss-color-function
colorGray	Options passed to postcss-color-gray
colorHexAlpha	Options passed to postcss-color-hex-alpha
colorHsl	Options passed to postcss-color-hsl
colorHwb	Options passed to postcss-color-hwb
colorRebeccapurple	Options passed to postcss-color-rebeccapurple
colorRgb	Options passed to postcss-color-rgb
customMedia	Options passed to postcss-custom-media
customProperties	Options passed to postcss-custom-properties
customSelectors	Options passed to postcss-custom-selectors
fontFamilySystemUi	Options passed to postcss-font-family-system-ui
fontVariant	Options passed to postcss-font-variant
propertyLookup	Options passed to postcss-property-lookup
imageSet	Options passed to postcss-image-set-polyfill
mediaQueriesRange	Options passed to postcss-media-minmax
nesting	Options passed to postcss-nesting
pseudoClassAnyLink	Options passed to postcss-pseudo-class-any-link
pseudoClassMatches	Options passed to postcss-selector-matches
pseudoClassNot	Options passed to postcss-selector-not
cssnano	Options passed to cssnano
parser	custom css parser if desired. pass false to use the default css parser	sugarss
minify	Minifies the css output by removing excess spaces and line breaks	false
appendPlugins	Adds a single plugin or array of plugins after all the defaults
prependPlugins	Adds a single plugin or array of plugins before all the defaults

License & Contributing

• Details on the license can be found here
• Details on running tests and contributing can be found here