CssNext Replacement

README.md

@@ -5,17 +5,12 @@
 [![dependencies](https://img.shields.io/david/static-dev/spike-css-standards.svg?style=flat-square)](https://david-dm.org/static-dev/spike-css-standards)
 [![coverage](https://img.shields.io/coveralls/static-dev/spike-css-standards.svg?style=flat-square)](https://coveralls.io/r/static-dev/spike-css-standards?branch=master)
 
-standard plugin pack for postcss
-
-> **Note:** This project is in early development, and versioning is a little different. [Read this](http://markup.im/#q4_cRZ1Q) for more details.
-
+A standard plugin pack for postcss
 
 ### Installation
 
 `npm install spike-css-standards -S`
 
-> **Note:** This project is compatible with node v6+ only
-
 ### 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.
@@ -28,18 +23,38 @@ const standards = cssStandards(/* options */)
 // returns { parser: 'xxx', plugins: ['xxx'] }
 
 postcss(standards.plugins)
-  .process(someCss, { parser: standards.parser })
+  .process(/* css string */, { parser: standards.parser })
   .then((res) => { console.log(res.content) })
 
 ```
 
 By default, the css standard plugin pack includes:
 
-- [sugarss](https://github.com/postcss/sugarss), provided as default parser
-- [postcss-import](https://github.com/postcss/postcss-import), default settings
-- [postcss-cssnext](http://cssnext.io/), default settings
-- [rucksack](https://simplaio.github.io/rucksack/), default settings
-- [cssnano](http://cssnano.co/), toggled with the `minify` option which is false by default
+- [sugarss](https://github.com/postcss/sugarss), whitespace-based html, similar to jade/pug
+- [postcss-import](https://github.com/postcss/postcss-import), like `require` for css
+- [rucksack](https://simplaio.github.io/rucksack/), collection of syntax sugar for css
+- [autoprefixer](https://github.com/postcss/autoprefixer), automatic vendor prefixing
+- [postcss-attribute-case-insensitive](https://github.com/Semigradsky/postcss-attribute-case-insensitive), allows [case insensitive attr selectors](https://www.w3.org/TR/selectors4/#attribute-case)
+- [postcss-calc](https://github.com/postcss/postcss-calc), reduces calc expression where possible
+- [postcss-color-function](https://github.com/postcss/postcss-color-function), polyfill for [color-mod function](https://drafts.csswg.org/css-color/#modifying-colors)
+- [postcss-color-gray](https://github.com/postcss/postcss-color-gray), polyfill for [gray function](https://drafts.csswg.org/css-color/#grays)
+- [postcss-color-hex-alpha](https://github.com/postcss/postcss-color-hex-alpha), polyfill for [rgba hex notations](https://github.com/postcss/postcss-color-hex-alpha)
+- [postcss-color-hsl](https://github.com/dmarchena/postcss-color-hsl), polyfill for [new hsl syntax](https://drafts.csswg.org/css-color/#the-hsl-notation)
+- [postcss-color-hwb](https://github.com/postcss/postcss-color-hwb), polyfill for [hue whiteness blackness function](https://drafts.csswg.org/css-color/#the-hwb-notation)
+- [postcss-color-rebeccapurple](https://github.com/postcss/postcss-color-rebeccapurple), polyfill for [rebeccapurple color](https://drafts.csswg.org/css-color/#valdef-color-rebeccapurple)
+- [postcss-color-rgb](https://github.com/dmarchena/postcss-color-rgb), polyfill for [css module level 4 rgb function](https://drafts.csswg.org/css-color/#funcdef-rgb)
+- [postcss-custom-media](https://github.com/postcss/postcss-custom-media), polyfill for [custom media queries](https://drafts.csswg.org/mediaqueries-5/#custom-mq)
+- [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties), polyfill for [css variables](https://www.w3.org/TR/css-variables/)
+- [postcss-custom-selectors](https://github.com/postcss/postcss-custom-selectors), polyfill for [custom selectors](https://drafts.csswg.org/css-extensions/#custom-selectors)
+- [postcss-font-family-system-ui](https://github.com/JLHwung/postcss-font-family-system-ui), 
+- [postcss-font-variant](https://drafts.csswg.org/css-fonts-4/#system-ui-def), polyfill for generic [system-ui](https://github.com/JLHwung/postcss-font-family-system-ui) font definition
+- [postcss-image-set-polyfill](https://github.com/SuperOl3g/postcss-image-set-polyfill), polyfills [image-set](https://drafts.csswg.org/css-images-3/#image-set-notation) for resolution detection
+- [postcss-media-minmax](https://github.com/postcss/postcss-media-minmax), nice syntax sugar for media queries from [media queries level 4 spec](https://drafts.csswg.org/mediaqueries/#mq-range-context)
+- [postcss-nesting](https://github.com/jonathantneal/postcss-nesting), polyfill for [css nesting module level 3](http://tabatkins.github.io/specs/css-nesting/)
+- [postcss-pseudo-class-any-link](https://github.com/jonathantneal/postcss-pseudo-class-any-link), polyfills [:any-link pseudo-class](https://drafts.csswg.org/selectors/#any-link-pseudo)
+- [postcss-selector-matches](https://github.com/postcss/postcss-selector-matches), polyfills [:matches pseudo-class](https://drafts.csswg.org/selectors-4/#matches)
+- [postcss-selector-not](https://github.com/postcss/postcss-selector-not), polyfills [:not pseudo-class](https://drafts.csswg.org/selectors-4/#negation)
+- [cssnano](http://cssnano.co/), minifies css, toggled with the `minify` option which is false by default
 
 Any of these plugins can be customized by passing the [options](#options) described below. You can also add additional postCSS plugins (like the popular [`lost`](https://github.com/peterramsing/lost) grid, for example) on top of this package:
 
@@ -57,10 +72,30 @@ css.plugins.push(lost())
 | ---- | ----------- | ------- |
 | **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`. | |
-| **browsers** | Browser support provided to [autoprefixer](http://cssnext.io/usage/#browsers) | `> 1%, last 2 versions, Firefox ESR` |
-| **features** | Enable or disable [cssnext features](http://cssnext.io/usage/#features) | |
-| **warnForDuplicates** | Enable or disable [cssnext duplicate warnings](http://cssnext.io/usage/#warnforduplicates) | `true` |
 | **rucksack** | Options passed directly to [rucksack](http://simplaio.github.io/rucksack/docs/#options) | |
+| **postcssImport** | Options passed to [postcss-import](https://github.com/postcss/postcss-import) | |
+| **autoprefixer** | Options passed to [autoprefixer](https://github.com/postcss/autoprefixer) | |
+| **attributeCaseInsensitive** | Options passed to [postcss-attribute-case-insensitive](https://github.com/Semigradsky/postcss-attribute-case-insensitive) | |
+| **calc** | Options passed to [postcss-calc](https://github.com/postcss/postcss-calc) | |
+| **colorFunction** | Options passed to [postcss-color-function](https://github.com/postcss/postcss-color-function) | |
+| **colorGray** | Options passed to [postcss-color-gray](https://github.com/postcss/postcss-color-gray) | |
+| **colorHexAlpha** | Options passed to [postcss-color-hex-alpha](https://github.com/postcss/postcss-color-hex-alpha) | |
+| **colorHsl** | Options passed to [postcss-color-hsl](https://github.com/dmarchena/postcss-color-hsl) | |
+| **colorHwb** | Options passed to [postcss-color-hwb](https://github.com/postcss/postcss-color-hwb) | |
+| **colorRebeccapurple** | Options passed to [postcss-color-rebeccapurple](https://github.com/postcss/postcss-color-rebeccapurple) | |
+| **colorRgb** | Options passed to [postcss-color-rgb](https://github.com/dmarchena/postcss-color-rgb) | |
+| **customMedia** | Options passed to [postcss-custom-media](https://github.com/postcss/postcss-custom-media) | |
+| **customProperties** | Options passed to [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties) | |
+| **customSelectors** | Options passed to [postcss-custom-selectors](https://github.com/postcss/postcss-custom-selectors) | |
+| **fontFamilySystemUi** | Options passed to [postcss-font-family-system-ui](https://github.com/JLHwung/postcss-font-family-system-ui) | |
+| **fontVariant** | Options passed to [postcss-font-variant](https://drafts.csswg.org/css-fonts-4/#system-ui-def) | |
+| **imageSet** | Options passed to [postcss-image-set-polyfill](https://github.com/SuperOl3g/postcss-image-set-polyfill) | |
+| **mediaQueriesRange** | Options passed to [postcss-media-minmax](https://github.com/postcss/postcss-media-minmax) | |
+| **nesting** | Options passed to [postcss-nesting](https://github.com/jonathantneal/postcss-nesting) | |
+| **pseudoClassAnyLink** | Options passed to [postcss-pseudo-class-any-link](https://github.com/jonathantneal/postcss-pseudo-class-any-link) | |
+| **pseudoClassMatches** | Options passed to [postcss-selector-matches](https://github.com/postcss/postcss-selector-matches) | |
+| **pseudoClassNot** | Options passed to [postcss-selector-not](https://github.com/postcss/postcss-selector-not) | |
+| **cssnano** | Options passed to [cssnano](http://cssnano.co/) | |
 | **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 | |

lib/index.js

@@ -1,7 +1,27 @@
-const sugarss = require('sugarss')
+let sugarss = require('sugarss')
 let postcssImport = require('postcss-import')
-let cssnext = require('postcss-cssnext')
+let customProperties = require('postcss-custom-properties')
+let calc = require('postcss-calc')
+let imageSet = require('postcss-image-set')
+let nesting = require('postcss-nesting')
+let customMedia = require('postcss-custom-media')
+let mediaQueriesRange = require('postcss-media-minmax')
+let customSelectors = require('postcss-custom-selectors')
+let attributeCaseInsensitive = require('postcss-attribute-case-insensitive')
+let colorRebeccapurple = require('postcss-color-rebeccapurple')
+let colorHwb = require('postcss-color-hwb')
+let colorHsl = require('postcss-color-hsl')
+let colorRgb = require('postcss-color-rgb')
+let colorGray = require('postcss-color-gray')
+let colorHexAlpha = require('postcss-color-hex-alpha')
+let colorFunction = require('postcss-color-function')
+let fontFamilySystemUi = require('postcss-font-family-system-ui')
+let fontVariant = require('postcss-font-variant')
+let pseudoClassMatches = require('postcss-selector-matches')
+let pseudoClassNot = require('postcss-selector-not')
+let pseudoClassAnyLink = require('postcss-pseudo-class-any-link')
 let rucksack = require('rucksack-css')
+let autoprefixer = require('autoprefixer')
 
 /**
  * Primary export, formats options and returns an object with intelligent
@@ -25,12 +45,31 @@ module.exports = (options = {}) => {
 
   // standard options merge
   const importOpt = selectKeys(options, ['root', 'path'])
-  const cssnextOpt = selectKeys(options, ['browsers', 'features', 'warnForDuplicates'])
 
   // define default plugin list
   const plugins = [
     postcssImport(importOpt),
-    cssnext(cssnextOpt),
+    customProperties(options.customProperties),
+    calc(options.calc),
+    imageSet(options.imageSet),
+    nesting(options.nesting),
+    customMedia(options.customMedia),
+    mediaQueriesRange(options.mediaQueriesRange),
+    customSelectors(options.customSelectors),
+    attributeCaseInsensitive(options.attributeCaseInsensitive),
+    colorRebeccapurple(options.colorRebeccapurple),
+    colorHwb(options.colorHwb),
+    colorHsl(options.colorHsl),
+    colorRgb(options.colorRgb),
+    colorGray(options.colorGray),
+    colorHexAlpha(options.colorHexAlpha),
+    colorFunction(options.colorFunction),
+    fontFamilySystemUi(options.fontFamilySystemUi),
+    fontVariant(options.fontVariant),
+    pseudoClassMatches(options.pseudoClassMatches),
+    pseudoClassNot(options.pseudoClassNot),
+    pseudoClassAnyLink(options.pseudoClassAnyLink),
+    autoprefixer(options.autoprefixer),
     rucksack(options.rucksack)
   ]
 
@@ -44,7 +83,7 @@ module.exports = (options = {}) => {
   }
 
   // add cssnano if minify config present
-  if (options.minify) plugins.push(require('cssnano')())
+  if (options.minify) plugins.push(require('cssnano')(options.cssnano))
 
   return {parser, plugins}
 }

package.json

@@ -8,9 +8,30 @@
   },
   "bugs": "https://github.com/static-dev/spike-css-standards/issues",
   "dependencies": {
+    "autoprefixer": "^7.1.1",
     "cssnano": "^3.7.4",
-    "postcss-cssnext": "^2.11.0",
+    "postcss-attribute-case-insensitive": "^2.0.0",
+    "postcss-calc": "^6.0.0",
+    "postcss-color-function": "^4.0.0",
+    "postcss-color-gray": "^4.0.0",
+    "postcss-color-hex-alpha": "^3.0.0",
+    "postcss-color-hsl": "^2.0.0",
+    "postcss-color-hwb": "^3.0.0",
+    "postcss-color-rebeccapurple": "^3.0.0",
+    "postcss-color-rgb": "^2.0.0",
+    "postcss-custom-media": "^6.0.0",
+    "postcss-custom-properties": "^6.0.1",
+    "postcss-custom-selectors": "^4.0.1",
+    "postcss-font-family-system-ui": "^2.0.1",
+    "postcss-font-variant": "^3.0.0",
+    "postcss-image-set": "^1.0.0",
+    "postcss-image-set-polyfill": "^0.3.5",
     "postcss-import": "^10.0.0",
+    "postcss-media-minmax": "^3.0.0",
+    "postcss-nesting": "^4.0.1",
+    "postcss-pseudo-class-any-link": "^4.0.0",
+    "postcss-selector-matches": "^3.0.1",
+    "postcss-selector-not": "^3.0.1",
     "rucksack-css": "^0.9.1",
     "sugarss": "^1.0.0"
   },

test/index.js

@@ -19,17 +19,155 @@ test('passes import opts correctly', (t) => {
   undo()
 })
 
-test('passes cssnext opts correctly', (t) => {
-  const undo = cssStandardsRewired.__set__('cssnext', (opts) => {
-    t.is(opts.browsers, 'test')
-    t.is(opts.features, 'test')
-    t.is(opts.warnForDuplicates, 'test')
+test('passes customProperties opts correctly', (t) => {
+  const undo = cssStandardsRewired.__set__('customProperties', (opts) => {
+    t.is(opts, 'test')
+  })
+  cssStandardsRewired({ customProperties: 'test' })
+  undo()
+})
+
+test('passes calc opts correctly', (t) => {
+  const undo = cssStandardsRewired.__set__('calc', (opts) => {
+    t.is(opts, 'test')
+  })
+  cssStandardsRewired({ calc: 'test' })
+  undo()
+})
+
+test('passes imageSet opts correctly', (t) => {
+  const undo = cssStandardsRewired.__set__('imageSet', (opts) => {
+    t.is(opts, 'test')
+  })
+  cssStandardsRewired({ imageSet: 'test' })
+  undo()
+})
+
+test('passes nesting opts correctly', (t) => {
+  const undo = cssStandardsRewired.__set__('nesting', (opts) => {
+    t.is(opts, 'test')
+  })
+  cssStandardsRewired({ nesting: 'test' })
+  undo()
+})
+
+test('passes mediaQueriesRange opts correctly', (t) => {
+  const undo = cssStandardsRewired.__set__('mediaQueriesRange', (opts) => {
+    t.is(opts, 'test')
+  })
+  cssStandardsRewired({ mediaQueriesRange: 'test' })
+  undo()
+})
+
+test('passes customSelectors opts correctly', (t) => {
+  const undo = cssStandardsRewired.__set__('customSelectors', (opts) => {
+    t.is(opts, 'test')
+  })
+  cssStandardsRewired({ customSelectors: 'test' })
+  undo()
+})
+
+test('passes attributeCaseInsensitive opts correctly', (t) => {
+  const undo = cssStandardsRewired.__set__('attributeCaseInsensitive', (opts) => {
+    t.is(opts, 'test')
+  })
+  cssStandardsRewired({ attributeCaseInsensitive: 'test' })
+  undo()
+})
+
+test('passes colorRebeccapurple opts correctly', (t) => {
+  const undo = cssStandardsRewired.__set__('colorRebeccapurple', (opts) => {
+    t.is(opts, 'test')
+  })
+  cssStandardsRewired({ colorRebeccapurple: 'test' })
+  undo()
+})
+
+test('passes colorHwb opts correctly', (t) => {
+  const undo = cssStandardsRewired.__set__('colorHwb', (opts) => {
+    t.is(opts, 'test')
+  })
+  cssStandardsRewired({ colorHwb: 'test' })
+  undo()
+})
+
+test('passes colorRgb opts correctly', (t) => {
+  const undo = cssStandardsRewired.__set__('colorRgb', (opts) => {
+    t.is(opts, 'test')
+  })
+  cssStandardsRewired({ colorRgb: 'test' })
+  undo()
+})
+
+test('passes colorGray opts correctly', (t) => {
+  const undo = cssStandardsRewired.__set__('colorGray', (opts) => {
+    t.is(opts, 'test')
   })
-  cssStandardsRewired({
-    browsers: 'test',
-    features: 'test',
-    warnForDuplicates: 'test'
+  cssStandardsRewired({ colorGray: 'test' })
+  undo()
+})
+
+test('passes colorHexAlpha opts correctly', (t) => {
+  const undo = cssStandardsRewired.__set__('colorHexAlpha', (opts) => {
+    t.is(opts, 'test')
+  })
+  cssStandardsRewired({ colorHexAlpha: 'test' })
+  undo()
+})
+
+test('passes colorFunction opts correctly', (t) => {
+  const undo = cssStandardsRewired.__set__('colorFunction', (opts) => {
+    t.is(opts, 'test')
+  })
+  cssStandardsRewired({ colorFunction: 'test' })
+  undo()
+})
+
+test('passes fontFamilySystemUi opts correctly', (t) => {
+  const undo = cssStandardsRewired.__set__('fontFamilySystemUi', (opts) => {
+    t.is(opts, 'test')
+  })
+  cssStandardsRewired({ fontFamilySystemUi: 'test' })
+  undo()
+})
+
+test('passes fontVariant opts correctly', (t) => {
+  const undo = cssStandardsRewired.__set__('fontVariant', (opts) => {
+    t.is(opts, 'test')
+  })
+  cssStandardsRewired({ fontVariant: 'test' })
+  undo()
+})
+
+test('passes pseudoClassMatches opts correctly', (t) => {
+  const undo = cssStandardsRewired.__set__('pseudoClassMatches', (opts) => {
+    t.is(opts, 'test')
+  })
+  cssStandardsRewired({ pseudoClassMatches: 'test' })
+  undo()
+})
+
+test('passes pseudoClassNot opts correctly', (t) => {
+  const undo = cssStandardsRewired.__set__('pseudoClassNot', (opts) => {
+    t.is(opts, 'test')
+  })
+  cssStandardsRewired({ pseudoClassNot: 'test' })
+  undo()
+})
+
+test('passes pseudoClassAnyLink opts correctly', (t) => {
+  const undo = cssStandardsRewired.__set__('pseudoClassAnyLink', (opts) => {
+    t.is(opts, 'test')
+  })
+  cssStandardsRewired({ pseudoClassAnyLink: 'test' })
+  undo()
+})
+
+test('passes autoprefixer opts correctly', (t) => {
+  const undo = cssStandardsRewired.__set__('autoprefixer', (opts) => {
+    t.is(opts, 'test')
   })
+  cssStandardsRewired({ autoprefixer: 'test' })
   undo()
 })
 
@@ -43,12 +181,12 @@ test('passes rucksack opts correctly', (t) => {
 
 test('default plugins working', (t) => {
   const out = cssStandards()
-  t.is(out.plugins.length, 3)
+  t.is(out.plugins.length, 23)
 })
 
 test('minify option working', (t) => {
   const out = cssStandards({ minify: true })
-  t.is(out.plugins.length, 4)
+  t.is(out.plugins.length, 24)
   t.is(out.plugins[out.plugins.length - 1].postcssPlugin, 'cssnano')
 })