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

| 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