Skip to content

Commit 570cd1e

Browse files
jescalanjescalan
authored
CssNext Replacement (#26)
1 parent 240464c commit 570cd1e

File tree

5 files changed

+447
-234
lines changed

5 files changed

+447
-234
lines changed

‎README.md

Lines changed: 50 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,12 @@
55
[![dependencies](https://img.shields.io/david/static-dev/spike-css-standards.svg?style=flat-square)](https://david-dm.org/static-dev/spike-css-standards)
66
[![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)
77

8-
standard plugin pack for postcss
9-
10-
> **Note:** This project is in early development, and versioning is a little different. [Read this](http://markup.im/#q4_cRZ1Q) for more details.
11-
8+
A standard plugin pack for postcss
129

1310
### Installation
1411

1512
`npm install spike-css-standards -S`
1613

17-
> **Note:** This project is compatible with node v6+ only
18-
1914
### Usage
2015

2116
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 */)
2823
// returns { parser: 'xxx', plugins: ['xxx'] }
2924

3025
postcss(standards.plugins)
31-
.process(someCss, { parser: standards.parser })
26+
.process(/* css string */, { parser: standards.parser })
3227
.then((res) => { console.log(res.content) })
3328

3429
```
3530

3631
By default, the css standard plugin pack includes:
3732

38-
- [sugarss](https://github.com/postcss/sugarss), provided as default parser
39-
- [postcss-import](https://github.com/postcss/postcss-import), default settings
40-
- [postcss-cssnext](http://cssnext.io/), default settings
41-
- [rucksack](https://simplaio.github.io/rucksack/), default settings
42-
- [cssnano](http://cssnano.co/), toggled with the `minify` option which is false by default
33+
- [sugarss](https://github.com/postcss/sugarss), whitespace-based html, similar to jade/pug
34+
- [postcss-import](https://github.com/postcss/postcss-import), like `require` for css
35+
- [rucksack](https://simplaio.github.io/rucksack/), collection of syntax sugar for css
36+
- [autoprefixer](https://github.com/postcss/autoprefixer), automatic vendor prefixing
37+
- [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)
38+
- [postcss-calc](https://github.com/postcss/postcss-calc), reduces calc expression where possible
39+
- [postcss-color-function](https://github.com/postcss/postcss-color-function), polyfill for [color-mod function](https://drafts.csswg.org/css-color/#modifying-colors)
40+
- [postcss-color-gray](https://github.com/postcss/postcss-color-gray), polyfill for [gray function](https://drafts.csswg.org/css-color/#grays)
41+
- [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)
42+
- [postcss-color-hsl](https://github.com/dmarchena/postcss-color-hsl), polyfill for [new hsl syntax](https://drafts.csswg.org/css-color/#the-hsl-notation)
43+
- [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)
44+
- [postcss-color-rebeccapurple](https://github.com/postcss/postcss-color-rebeccapurple), polyfill for [rebeccapurple color](https://drafts.csswg.org/css-color/#valdef-color-rebeccapurple)
45+
- [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)
46+
- [postcss-custom-media](https://github.com/postcss/postcss-custom-media), polyfill for [custom media queries](https://drafts.csswg.org/mediaqueries-5/#custom-mq)
47+
- [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties), polyfill for [css variables](https://www.w3.org/TR/css-variables/)
48+
- [postcss-custom-selectors](https://github.com/postcss/postcss-custom-selectors), polyfill for [custom selectors](https://drafts.csswg.org/css-extensions/#custom-selectors)
49+
- [postcss-font-family-system-ui](https://github.com/JLHwung/postcss-font-family-system-ui),
50+
- [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
51+
- [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
52+
- [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)
53+
- [postcss-nesting](https://github.com/jonathantneal/postcss-nesting), polyfill for [css nesting module level 3](http://tabatkins.github.io/specs/css-nesting/)
54+
- [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)
55+
- [postcss-selector-matches](https://github.com/postcss/postcss-selector-matches), polyfills [:matches pseudo-class](https://drafts.csswg.org/selectors-4/#matches)
56+
- [postcss-selector-not](https://github.com/postcss/postcss-selector-not), polyfills [:not pseudo-class](https://drafts.csswg.org/selectors-4/#negation)
57+
- [cssnano](http://cssnano.co/), minifies css, toggled with the `minify` option which is false by default
4358

4459
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:
4560

@@ -57,10 +72,30 @@ css.plugins.push(lost())
5772
| ---- | ----------- | ------- |
5873
| **root** | Root used to resolve `path`(s) from | |
5974
| **path** | A path to a folder or an array of paths, telling postcss-import where to look for sss or css files to `@import`. | |
60-
| **browsers** | Browser support provided to [autoprefixer](http://cssnext.io/usage/#browsers) | `> 1%, last 2 versions, Firefox ESR` |
61-
| **features** | Enable or disable [cssnext features](http://cssnext.io/usage/#features) | |
62-
| **warnForDuplicates** | Enable or disable [cssnext duplicate warnings](http://cssnext.io/usage/#warnforduplicates) | `true` |
6375
| **rucksack** | Options passed directly to [rucksack](http://simplaio.github.io/rucksack/docs/#options) | |
76+
| **postcssImport** | Options passed to [postcss-import](https://github.com/postcss/postcss-import) | |
77+
| **autoprefixer** | Options passed to [autoprefixer](https://github.com/postcss/autoprefixer) | |
78+
| **attributeCaseInsensitive** | Options passed to [postcss-attribute-case-insensitive](https://github.com/Semigradsky/postcss-attribute-case-insensitive) | |
79+
| **calc** | Options passed to [postcss-calc](https://github.com/postcss/postcss-calc) | |
80+
| **colorFunction** | Options passed to [postcss-color-function](https://github.com/postcss/postcss-color-function) | |
81+
| **colorGray** | Options passed to [postcss-color-gray](https://github.com/postcss/postcss-color-gray) | |
82+
| **colorHexAlpha** | Options passed to [postcss-color-hex-alpha](https://github.com/postcss/postcss-color-hex-alpha) | |
83+
| **colorHsl** | Options passed to [postcss-color-hsl](https://github.com/dmarchena/postcss-color-hsl) | |
84+
| **colorHwb** | Options passed to [postcss-color-hwb](https://github.com/postcss/postcss-color-hwb) | |
85+
| **colorRebeccapurple** | Options passed to [postcss-color-rebeccapurple](https://github.com/postcss/postcss-color-rebeccapurple) | |
86+
| **colorRgb** | Options passed to [postcss-color-rgb](https://github.com/dmarchena/postcss-color-rgb) | |
87+
| **customMedia** | Options passed to [postcss-custom-media](https://github.com/postcss/postcss-custom-media) | |
88+
| **customProperties** | Options passed to [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties) | |
89+
| **customSelectors** | Options passed to [postcss-custom-selectors](https://github.com/postcss/postcss-custom-selectors) | |
90+
| **fontFamilySystemUi** | Options passed to [postcss-font-family-system-ui](https://github.com/JLHwung/postcss-font-family-system-ui) | |
91+
| **fontVariant** | Options passed to [postcss-font-variant](https://drafts.csswg.org/css-fonts-4/#system-ui-def) | |
92+
| **imageSet** | Options passed to [postcss-image-set-polyfill](https://github.com/SuperOl3g/postcss-image-set-polyfill) | |
93+
| **mediaQueriesRange** | Options passed to [postcss-media-minmax](https://github.com/postcss/postcss-media-minmax) | |
94+
| **nesting** | Options passed to [postcss-nesting](https://github.com/jonathantneal/postcss-nesting) | |
95+
| **pseudoClassAnyLink** | Options passed to [postcss-pseudo-class-any-link](https://github.com/jonathantneal/postcss-pseudo-class-any-link) | |
96+
| **pseudoClassMatches** | Options passed to [postcss-selector-matches](https://github.com/postcss/postcss-selector-matches) | |
97+
| **pseudoClassNot** | Options passed to [postcss-selector-not](https://github.com/postcss/postcss-selector-not) | |
98+
| **cssnano** | Options passed to [cssnano](http://cssnano.co/) | |
6499
| **parser** | custom css parser if desired. pass `false` to use the default css parser | `sugarss` |
65100
| **minify** | Minifies the css output by removing excess spaces and line breaks | `false` |
66101
| **appendPlugins** | Adds a single plugin or array of plugins after all the defaults | |

‎lib/index.js

Lines changed: 44 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,27 @@
1-
const sugarss = require('sugarss')
1+
let sugarss = require('sugarss')
22
let postcssImport = require('postcss-import')
3-
let cssnext = require('postcss-cssnext')
3+
let customProperties = require('postcss-custom-properties')
4+
let calc = require('postcss-calc')
5+
let imageSet = require('postcss-image-set')
6+
let nesting = require('postcss-nesting')
7+
let customMedia = require('postcss-custom-media')
8+
let mediaQueriesRange = require('postcss-media-minmax')
9+
let customSelectors = require('postcss-custom-selectors')
10+
let attributeCaseInsensitive = require('postcss-attribute-case-insensitive')
11+
let colorRebeccapurple = require('postcss-color-rebeccapurple')
12+
let colorHwb = require('postcss-color-hwb')
13+
let colorHsl = require('postcss-color-hsl')
14+
let colorRgb = require('postcss-color-rgb')
15+
let colorGray = require('postcss-color-gray')
16+
let colorHexAlpha = require('postcss-color-hex-alpha')
17+
let colorFunction = require('postcss-color-function')
18+
let fontFamilySystemUi = require('postcss-font-family-system-ui')
19+
let fontVariant = require('postcss-font-variant')
20+
let pseudoClassMatches = require('postcss-selector-matches')
21+
let pseudoClassNot = require('postcss-selector-not')
22+
let pseudoClassAnyLink = require('postcss-pseudo-class-any-link')
423
let rucksack = require('rucksack-css')
24+
let autoprefixer = require('autoprefixer')
525

626
/**
727
* Primary export, formats options and returns an object with intelligent
@@ -25,12 +45,31 @@ module.exports = (options = {}) => {
2545

2646
// standard options merge
2747
const importOpt = selectKeys(options, ['root', 'path'])
28-
const cssnextOpt = selectKeys(options, ['browsers', 'features', 'warnForDuplicates'])
2948

3049
// define default plugin list
3150
const plugins = [
3251
postcssImport(importOpt),
33-
cssnext(cssnextOpt),
52+
customProperties(options.customProperties),
53+
calc(options.calc),
54+
imageSet(options.imageSet),
55+
nesting(options.nesting),
56+
customMedia(options.customMedia),
57+
mediaQueriesRange(options.mediaQueriesRange),
58+
customSelectors(options.customSelectors),
59+
attributeCaseInsensitive(options.attributeCaseInsensitive),
60+
colorRebeccapurple(options.colorRebeccapurple),
61+
colorHwb(options.colorHwb),
62+
colorHsl(options.colorHsl),
63+
colorRgb(options.colorRgb),
64+
colorGray(options.colorGray),
65+
colorHexAlpha(options.colorHexAlpha),
66+
colorFunction(options.colorFunction),
67+
fontFamilySystemUi(options.fontFamilySystemUi),
68+
fontVariant(options.fontVariant),
69+
pseudoClassMatches(options.pseudoClassMatches),
70+
pseudoClassNot(options.pseudoClassNot),
71+
pseudoClassAnyLink(options.pseudoClassAnyLink),
72+
autoprefixer(options.autoprefixer),
3473
rucksack(options.rucksack)
3574
]
3675

@@ -44,7 +83,7 @@ module.exports = (options = {}) => {
4483
}
4584

4685
// add cssnano if minify config present
47-
if (options.minify) plugins.push(require('cssnano')())
86+
if (options.minify) plugins.push(require('cssnano')(options.cssnano))
4887

4988
return {parser, plugins}
5089
}

‎package.json

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,30 @@
88
},
99
"bugs": "https://github.com/static-dev/spike-css-standards/issues",
1010
"dependencies": {
11+
"autoprefixer": "^7.1.1",
1112
"cssnano": "^3.7.4",
12-
"postcss-cssnext": "^2.11.0",
13+
"postcss-attribute-case-insensitive": "^2.0.0",
14+
"postcss-calc": "^6.0.0",
15+
"postcss-color-function": "^4.0.0",
16+
"postcss-color-gray": "^4.0.0",
17+
"postcss-color-hex-alpha": "^3.0.0",
18+
"postcss-color-hsl": "^2.0.0",
19+
"postcss-color-hwb": "^3.0.0",
20+
"postcss-color-rebeccapurple": "^3.0.0",
21+
"postcss-color-rgb": "^2.0.0",
22+
"postcss-custom-media": "^6.0.0",
23+
"postcss-custom-properties": "^6.0.1",
24+
"postcss-custom-selectors": "^4.0.1",
25+
"postcss-font-family-system-ui": "^2.0.1",
26+
"postcss-font-variant": "^3.0.0",
27+
"postcss-image-set": "^1.0.0",
28+
"postcss-image-set-polyfill": "^0.3.5",
1329
"postcss-import": "^10.0.0",
30+
"postcss-media-minmax": "^3.0.0",
31+
"postcss-nesting": "^4.0.1",
32+
"postcss-pseudo-class-any-link": "^4.0.0",
33+
"postcss-selector-matches": "^3.0.1",
34+
"postcss-selector-not": "^3.0.1",
1435
"rucksack-css": "^0.9.1",
1536
"sugarss": "^1.0.0"
1637
},

‎test/index.js

Lines changed: 149 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,155 @@ test('passes import opts correctly', (t) => {
1919
undo()
2020
})
2121

22-
test('passes cssnext opts correctly', (t) => {
23-
const undo = cssStandardsRewired.__set__('cssnext', (opts) => {
24-
t.is(opts.browsers, 'test')
25-
t.is(opts.features, 'test')
26-
t.is(opts.warnForDuplicates, 'test')
22+
test('passes customProperties opts correctly', (t) => {
23+
const undo = cssStandardsRewired.__set__('customProperties', (opts) => {
24+
t.is(opts, 'test')
25+
})
26+
cssStandardsRewired({ customProperties: 'test' })
27+
undo()
28+
})
29+
30+
test('passes calc opts correctly', (t) => {
31+
const undo = cssStandardsRewired.__set__('calc', (opts) => {
32+
t.is(opts, 'test')
33+
})
34+
cssStandardsRewired({ calc: 'test' })
35+
undo()
36+
})
37+
38+
test('passes imageSet opts correctly', (t) => {
39+
const undo = cssStandardsRewired.__set__('imageSet', (opts) => {
40+
t.is(opts, 'test')
41+
})
42+
cssStandardsRewired({ imageSet: 'test' })
43+
undo()
44+
})
45+
46+
test('passes nesting opts correctly', (t) => {
47+
const undo = cssStandardsRewired.__set__('nesting', (opts) => {
48+
t.is(opts, 'test')
49+
})
50+
cssStandardsRewired({ nesting: 'test' })
51+
undo()
52+
})
53+
54+
test('passes mediaQueriesRange opts correctly', (t) => {
55+
const undo = cssStandardsRewired.__set__('mediaQueriesRange', (opts) => {
56+
t.is(opts, 'test')
57+
})
58+
cssStandardsRewired({ mediaQueriesRange: 'test' })
59+
undo()
60+
})
61+
62+
test('passes customSelectors opts correctly', (t) => {
63+
const undo = cssStandardsRewired.__set__('customSelectors', (opts) => {
64+
t.is(opts, 'test')
65+
})
66+
cssStandardsRewired({ customSelectors: 'test' })
67+
undo()
68+
})
69+
70+
test('passes attributeCaseInsensitive opts correctly', (t) => {
71+
const undo = cssStandardsRewired.__set__('attributeCaseInsensitive', (opts) => {
72+
t.is(opts, 'test')
73+
})
74+
cssStandardsRewired({ attributeCaseInsensitive: 'test' })
75+
undo()
76+
})
77+
78+
test('passes colorRebeccapurple opts correctly', (t) => {
79+
const undo = cssStandardsRewired.__set__('colorRebeccapurple', (opts) => {
80+
t.is(opts, 'test')
81+
})
82+
cssStandardsRewired({ colorRebeccapurple: 'test' })
83+
undo()
84+
})
85+
86+
test('passes colorHwb opts correctly', (t) => {
87+
const undo = cssStandardsRewired.__set__('colorHwb', (opts) => {
88+
t.is(opts, 'test')
89+
})
90+
cssStandardsRewired({ colorHwb: 'test' })
91+
undo()
92+
})
93+
94+
test('passes colorRgb opts correctly', (t) => {
95+
const undo = cssStandardsRewired.__set__('colorRgb', (opts) => {
96+
t.is(opts, 'test')
97+
})
98+
cssStandardsRewired({ colorRgb: 'test' })
99+
undo()
100+
})
101+
102+
test('passes colorGray opts correctly', (t) => {
103+
const undo = cssStandardsRewired.__set__('colorGray', (opts) => {
104+
t.is(opts, 'test')
27105
})
28-
cssStandardsRewired({
29-
browsers: 'test',
30-
features: 'test',
31-
warnForDuplicates: 'test'
106+
cssStandardsRewired({ colorGray: 'test' })
107+
undo()
108+
})
109+
110+
test('passes colorHexAlpha opts correctly', (t) => {
111+
const undo = cssStandardsRewired.__set__('colorHexAlpha', (opts) => {
112+
t.is(opts, 'test')
113+
})
114+
cssStandardsRewired({ colorHexAlpha: 'test' })
115+
undo()
116+
})
117+
118+
test('passes colorFunction opts correctly', (t) => {
119+
const undo = cssStandardsRewired.__set__('colorFunction', (opts) => {
120+
t.is(opts, 'test')
121+
})
122+
cssStandardsRewired({ colorFunction: 'test' })
123+
undo()
124+
})
125+
126+
test('passes fontFamilySystemUi opts correctly', (t) => {
127+
const undo = cssStandardsRewired.__set__('fontFamilySystemUi', (opts) => {
128+
t.is(opts, 'test')
129+
})
130+
cssStandardsRewired({ fontFamilySystemUi: 'test' })
131+
undo()
132+
})
133+
134+
test('passes fontVariant opts correctly', (t) => {
135+
const undo = cssStandardsRewired.__set__('fontVariant', (opts) => {
136+
t.is(opts, 'test')
137+
})
138+
cssStandardsRewired({ fontVariant: 'test' })
139+
undo()
140+
})
141+
142+
test('passes pseudoClassMatches opts correctly', (t) => {
143+
const undo = cssStandardsRewired.__set__('pseudoClassMatches', (opts) => {
144+
t.is(opts, 'test')
145+
})
146+
cssStandardsRewired({ pseudoClassMatches: 'test' })
147+
undo()
148+
})
149+
150+
test('passes pseudoClassNot opts correctly', (t) => {
151+
const undo = cssStandardsRewired.__set__('pseudoClassNot', (opts) => {
152+
t.is(opts, 'test')
153+
})
154+
cssStandardsRewired({ pseudoClassNot: 'test' })
155+
undo()
156+
})
157+
158+
test('passes pseudoClassAnyLink opts correctly', (t) => {
159+
const undo = cssStandardsRewired.__set__('pseudoClassAnyLink', (opts) => {
160+
t.is(opts, 'test')
161+
})
162+
cssStandardsRewired({ pseudoClassAnyLink: 'test' })
163+
undo()
164+
})
165+
166+
test('passes autoprefixer opts correctly', (t) => {
167+
const undo = cssStandardsRewired.__set__('autoprefixer', (opts) => {
168+
t.is(opts, 'test')
32169
})
170+
cssStandardsRewired({ autoprefixer: 'test' })
33171
undo()
34172
})
35173

@@ -43,12 +181,12 @@ test('passes rucksack opts correctly', (t) => {
43181

44182
test('default plugins working', (t) => {
45183
const out = cssStandards()
46-
t.is(out.plugins.length, 3)
184+
t.is(out.plugins.length, 23)
47185
})
48186

49187
test('minify option working', (t) => {
50188
const out = cssStandards({ minify: true })
51-
t.is(out.plugins.length, 4)
189+
t.is(out.plugins.length, 24)
52190
t.is(out.plugins[out.plugins.length - 1].postcssPlugin, 'cssnano')
53191
})
54192

0 commit comments

Comments
 (0)