spike-css-standards v4.1.1

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 css, similar to sass/stylus
• 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

License & Contributing

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