Merge pull request #7 from jedmao/plugins

MoOx · MoOx · commit 0e3abb694215 · 2015-09-10T07:58:49.000+02:00
Add plugins
diff --git a/package.json b/package.json
@@ -32,15 +32,36 @@
     "!**/__tests__"
   ],
   "dependencies": {
-    "postcss": "^5.0.4"
+    "autoprefixer": "^6.0.2",
+    "caniuse-api": "^1.3.2",
+    "pixrem": "^2.0.0",
+    "pleeease-filters": "^1.0.1",
+    "postcss": "^5.0.4",
+    "postcss-calc": "^5.0.0",
+    "postcss-color-function": "^2.0.0",
+    "postcss-color-gray": "^3.0.0",
+    "postcss-color-hex-alpha": "^2.0.0",
+    "postcss-color-hwb": "^2.0.0",
+    "postcss-color-rebeccapurple": "^2.0.0",
+    "postcss-color-rgba-fallback": "^2.0.0",
+    "postcss-custom-media": "^5.0.0",
+    "postcss-custom-properties": "^5.0.0",
+    "postcss-custom-selectors": "^3.0.0",
+    "postcss-font-variant": "^2.0.0",
+    "postcss-media-minmax": "^2.1.0",
+    "postcss-pseudo-class-any-link": "^1.0.0",
+    "postcss-pseudoelements": "^3.0.0",
+    "postcss-selector-matches": "^2.0.0",
+    "postcss-selector-not": "^2.0.0"
   },
   "devDependencies": {
     "babel": "^5.8.23",
     "babel-eslint": "^4.1.1",
     "babel-tape-runner": "^1.2.0",
     "eslint": "^1.3.1",
     "rimraf": "^2.4.3",
-    "tape": "^4.2.0"
+    "tape": "^4.2.0",
+    "to-slug-case": "^0.1.2"
   },
   "scripts": {
     "prebabelify": "rimraf lib",
diff --git a/src/__tests__/fixtures/features/autoprefixer.css b/src/__tests__/fixtures/features/autoprefixer.css
@@ -0,0 +1,8 @@
+* {
+  transition: transform 1s;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg) }
+  100% { transform: rotate(360deg) }
+}
diff --git a/src/__tests__/fixtures/features/autoprefixer.expected.css b/src/__tests__/fixtures/features/autoprefixer.expected.css
@@ -0,0 +1,14 @@
+* {
+  -webkit-transition: -webkit-transform 1s;
+          transition: transform 1s;
+}
+
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) }
+  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) }
+}
+
+@keyframes spin {
+  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) }
+  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) }
+}
diff --git a/src/__tests__/fixtures/features/calc.css b/src/__tests__/fixtures/features/calc.css
@@ -0,0 +1,3 @@
+html {
+  font-size: calc(1em * 2)
+}
diff --git a/src/__tests__/fixtures/features/calc.expected.css b/src/__tests__/fixtures/features/calc.expected.css
@@ -0,0 +1,3 @@
+html {
+  font-size: 2em
+}
diff --git a/src/__tests__/fixtures/features/color-function.css b/src/__tests__/fixtures/features/color-function.css
@@ -0,0 +1,3 @@
+body {
+  background: color(rgb(102, 51, 153) a(90%))
+}
diff --git a/src/__tests__/fixtures/features/color-function.expected.css b/src/__tests__/fixtures/features/color-function.expected.css
@@ -0,0 +1,3 @@
+body {
+  background: rgba(102, 51, 153, 0.9)
+}
diff --git a/src/__tests__/fixtures/features/color-gray.css b/src/__tests__/fixtures/features/color-gray.css
@@ -0,0 +1,3 @@
+.bar {
+  color: gray(255, 50%);
+}
diff --git a/src/__tests__/fixtures/features/color-gray.expected.css b/src/__tests__/fixtures/features/color-gray.expected.css
@@ -0,0 +1,3 @@
+.bar {
+  color: rgba(255, 255, 255, 0.5);
+}
diff --git a/src/__tests__/fixtures/features/color-hex-alpha.css b/src/__tests__/fixtures/features/color-hex-alpha.css
@@ -0,0 +1,3 @@
+body {
+  background: #9d9c
+}
diff --git a/src/__tests__/fixtures/features/color-hex-alpha.expected.css b/src/__tests__/fixtures/features/color-hex-alpha.expected.css
@@ -0,0 +1,3 @@
+body {
+  background: rgba(153, 221, 153, 0.8)
+}
diff --git a/src/__tests__/fixtures/features/color-hwb.css b/src/__tests__/fixtures/features/color-hwb.css
@@ -0,0 +1,3 @@
+body {
+  background: hwb(0, 20%, 40%)
+}
diff --git a/src/__tests__/fixtures/features/color-hwb.expected.css b/src/__tests__/fixtures/features/color-hwb.expected.css
@@ -0,0 +1,3 @@
+body {
+  background: rgb(153, 51, 51)
+}
diff --git a/src/__tests__/fixtures/features/color-rebeccapurple.css b/src/__tests__/fixtures/features/color-rebeccapurple.css
@@ -0,0 +1,3 @@
+body {
+  background: rebeccapurple
+}
diff --git a/src/__tests__/fixtures/features/color-rebeccapurple.expected.css b/src/__tests__/fixtures/features/color-rebeccapurple.expected.css
@@ -0,0 +1,3 @@
+body {
+  background: rgb(102, 51, 153)
+}
diff --git a/src/__tests__/fixtures/features/color-rgba.css b/src/__tests__/fixtures/features/color-rgba.css
@@ -0,0 +1,4 @@
+.foo {
+  background: rgba(153, 221, 153, 0.8);
+  border: solid 1px rgba(100,102,103,.3);
+}
diff --git a/src/__tests__/fixtures/features/color-rgba.expected.css b/src/__tests__/fixtures/features/color-rgba.expected.css
@@ -0,0 +1,6 @@
+.foo {
+  background: #99DD99;
+  background: rgba(153, 221, 153, 0.8);
+  border: solid 1px #646667;
+  border: solid 1px rgba(100,102,103,.3);
+}
diff --git a/src/__tests__/fixtures/features/custom-media.css b/src/__tests__/fixtures/features/custom-media.css
@@ -0,0 +1,5 @@
+@custom-media --small-viewport (max-width: 30em);
+
+@media (--small-viewport) {
+  /* styles for small viewport */
+}
diff --git a/src/__tests__/fixtures/features/custom-media.expected.css b/src/__tests__/fixtures/features/custom-media.expected.css
@@ -0,0 +1,5 @@
+
+
+@media (max-width: 30em) {
+  /* styles for small viewport */
+}
diff --git a/src/__tests__/fixtures/features/custom-properties.css b/src/__tests__/fixtures/features/custom-properties.css
@@ -0,0 +1,7 @@
+:root {
+  --color: #e00
+}
+
+body {
+  color: var(--color)
+}
diff --git a/src/__tests__/fixtures/features/custom-properties.expected.css b/src/__tests__/fixtures/features/custom-properties.expected.css
@@ -0,0 +1,5 @@
+
+
+body {
+  color: #e00
+}
diff --git a/src/__tests__/fixtures/features/custom-selectors.css b/src/__tests__/fixtures/features/custom-selectors.css
@@ -0,0 +1,5 @@
+@custom-selector :--heading h1, h2, h3, h4, h5, h6;
+
+article :--heading + p{
+  margin-top: 0;
+}
diff --git a/src/__tests__/fixtures/features/custom-selectors.expected.css b/src/__tests__/fixtures/features/custom-selectors.expected.css
@@ -0,0 +1,8 @@
+article h1 + p,
+article h2 + p,
+article h3 + p,
+article h4 + p,
+article h5 + p,
+article h6 + p{
+  margin-top: 0;
+}
diff --git a/src/__tests__/fixtures/features/filter.css b/src/__tests__/fixtures/features/filter.css
@@ -0,0 +1,3 @@
+.blur {
+  filter: blur(4px);
+}
diff --git a/src/__tests__/fixtures/features/filter.expected.css b/src/__tests__/fixtures/features/filter.expected.css
@@ -0,0 +1,4 @@
+.blur {
+  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="4" /></filter></svg>#filter');
+  filter: blur(4px);
+}
diff --git a/src/__tests__/fixtures/features/font-variant.css b/src/__tests__/fixtures/features/font-variant.css
@@ -0,0 +1,7 @@
+h2 {
+  font-variant-caps: small-caps;
+}
+
+table {
+  font-variant-numeric: lining-nums;
+}
diff --git a/src/__tests__/fixtures/features/font-variant.expected.css b/src/__tests__/fixtures/features/font-variant.expected.css
@@ -0,0 +1,9 @@
+h2 {
+  font-feature-settings: "c2sc";
+  font-variant-caps: small-caps;
+}
+
+table {
+  font-feature-settings: "lnum";
+  font-variant-numeric: lining-nums;
+}
diff --git a/src/__tests__/fixtures/features/media-queries-range.css b/src/__tests__/fixtures/features/media-queries-range.css
@@ -0,0 +1,2 @@
+@media screen and (width >= 500px) and (width <= 1200px) {}
+@media screen and (500px <= width <= 1200px) {}
diff --git a/src/__tests__/fixtures/features/media-queries-range.expected.css b/src/__tests__/fixtures/features/media-queries-range.expected.css
@@ -0,0 +1,2 @@
+@media screen and (min-width: 500px) and (max-width: 1200px) {}
+@media screen and (min-width: 500px) and (max-width: 1200px) {}
diff --git a/src/__tests__/fixtures/features/pseudo-class-any-link.css b/src/__tests__/fixtures/features/pseudo-class-any-link.css
@@ -0,0 +1,3 @@
+nav :any-link > span {
+  background-color: yellow;
+}
diff --git a/src/__tests__/fixtures/features/pseudo-class-any-link.expected.css b/src/__tests__/fixtures/features/pseudo-class-any-link.expected.css
@@ -0,0 +1,3 @@
+nav :link > span,nav :visited > span {
+  background-color: yellow;
+}
diff --git a/src/__tests__/fixtures/features/pseudo-class-matches.css b/src/__tests__/fixtures/features/pseudo-class-matches.css
@@ -0,0 +1,3 @@
+p:matches(:first-child, .specific) {
+  color: red;
+}
diff --git a/src/__tests__/fixtures/features/pseudo-class-matches.expected.css b/src/__tests__/fixtures/features/pseudo-class-matches.expected.css
@@ -0,0 +1,3 @@
+p:first-child, p.specific {
+  color: red;
+}
diff --git a/src/__tests__/fixtures/features/pseudo-class-not.css b/src/__tests__/fixtures/features/pseudo-class-not.css
@@ -0,0 +1,3 @@
+p:not(:first-child, .specific) {
+  background: blue;
+}
diff --git a/src/__tests__/fixtures/features/pseudo-class-not.expected.css b/src/__tests__/fixtures/features/pseudo-class-not.expected.css
@@ -0,0 +1,3 @@
+p:not(:first-child):not(.specific) {
+  background: blue;
+}
diff --git a/src/__tests__/fixtures/features/pseudo-elements.css b/src/__tests__/fixtures/features/pseudo-elements.css
@@ -0,0 +1,6 @@
+.foo::after {
+	content:"pseudoelement"
+}
+.foo::before {
+	content:"pseudoelement"
+}
diff --git a/src/__tests__/fixtures/features/pseudo-elements.expected.css b/src/__tests__/fixtures/features/pseudo-elements.expected.css
@@ -0,0 +1,6 @@
+.foo:after {
+	content:"pseudoelement"
+}
+.foo:before {
+	content:"pseudoelement"
+}
diff --git a/src/__tests__/fixtures/features/rem.css b/src/__tests__/fixtures/features/rem.css
@@ -0,0 +1,11 @@
+.sky {
+  margin: 2.5rem 2px 3em 100%;
+  color: blue;
+}
+
+@media screen and (min-width: 20rem) {
+  .leaf {
+    margin-bottom: 1.333rem;
+    font-size: 1.5rem;
+  }
+}
diff --git a/src/__tests__/fixtures/features/rem.expected.css b/src/__tests__/fixtures/features/rem.expected.css
@@ -0,0 +1,12 @@
+.sky {
+  margin: 40px 2px 3em 100%;
+  margin: 2.5rem 2px 3em 100%;
+  color: blue;
+}
+
+@media screen and (min-width: 20rem) {
+  .leaf {
+    margin-bottom: 1.333rem;
+    font-size: 1.5rem;
+  }
+}
diff --git a/src/__tests__/option.browsers.js b/src/__tests__/option.browsers.js
@@ -0,0 +1,62 @@
+import tape from "tape"
+
+import cssnext from ".."
+
+tape("cssnext browsers option", function(t) {
+
+  // no recent browser need pixrem
+  const remInput = "body{font-size:2rem}"
+  t.equal(
+    cssnext({ browsers: "last 1 version" }).process(remInput).css,
+    remInput,
+    "should not enable px fallback when all browsers support it"
+  )
+
+  const customPropsInput = ":root{--foo:bar}baz{qux:var(--foo)}"
+  const customPropsOutput = "baz{qux: bar}"
+
+  // fx 30 doesn't handle custom prop
+  t.equal(
+    cssnext({ browsers: "Firefox >= 30" }).process(customPropsInput).css,
+    customPropsOutput,
+    "should enable custom properties when browsers do not support it"
+  )
+
+  // fx 31 handle custom prop
+  t.equal(
+    cssnext({ browsers: "Firefox >= 31" }).process(customPropsInput).css,
+    customPropsInput,
+    "should NOT enable custom properties when browsers support it"
+  )
+
+  // fx 31 support but not IE 8
+  t.equal(
+    cssnext({ browsers: "Firefox >= 31, IE 8" }).process(customPropsInput).css,
+    customPropsOutput,
+    "should enable custom properties when at least one browsers do not " +
+      "support it"
+  )
+
+  t.end()
+})
+
+tape("cssnext browsers option propagation", function(t) {
+  const input = "body{transition: 1s}"
+  const output = "body{-webkit-transition: 1s;transition: 1s}"
+
+  // Safari 6 need -webkit prefix
+  t.equal(
+    cssnext({ browsers: "Safari 6" }).process(input).css,
+    output,
+    "should propagate browsers option to autoprefixer"
+  )
+
+  // Safari 6.1 do not need -webkit prefix
+  t.equal(
+    cssnext({ browsers: "Safari 6.1" }).process(input).css,
+    input,
+    "should propagate browsers option to autoprefixer"
+  )
+
+  t.end()
+})
diff --git a/src/__tests__/option.features.js b/src/__tests__/option.features.js
@@ -0,0 +1,62 @@
+/**
+ * Test dependencies
+ */
+import test from "tape"
+import { join } from "path"
+
+import utils from "./utils"
+import cssnext, { features } from ".."
+
+/**
+ * Features tests
+ */
+import toSlug from "to-slug-case"
+const testFeature = function(
+  t,
+  feature,
+  version,
+  source,
+  input,
+  expected
+) {
+  const options = { features: { } }
+
+  // disable all features
+  Object.keys(features).forEach(function(key) {
+    options.features[key] = false
+  })
+
+  const css = cssnext(options).process(input).css
+  t.notEqual(
+    css,
+    expected,
+    version + ": should not add " + feature + " support if disabled"
+  )
+  t.equal(
+    css,
+    input,
+    version + ": should not modify input if  " + feature + " is disabled"
+  )
+
+  // enable only the one we want to test...
+  options.features[feature] = true
+
+  t.equal(
+    cssnext(options).process(input).css.trim(),
+    expected.trim(),
+    version + ": should add " + feature + " support"
+  )
+}
+
+Object.keys(features).forEach(function(name) {
+  const slug = toSlug(name)
+  const source = utils.fixturePath(join("features", slug))
+  const input = utils.readFixture(join("features", slug))
+  const expected = utils.readFixture(join("features", slug + ".expected"))
+
+  test(slug, function(t) {
+    testFeature(t, name, "node.js", source, input, expected)
+
+    t.end()
+  })
+})
diff --git a/src/__tests__/utils/index.js b/src/__tests__/utils/index.js
diff --git a/src/features-activation-map.js b/src/features-activation-map.js
diff --git a/src/features.js b/src/features.js
diff --git a/src/index.js b/src/index.js

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+html {`
	`2`	`+ font-size: calc(1em * 2)`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+body {`
	`2`	`+ background: color(rgb(102, 51, 153) a(90%))`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+body {`
	`2`	`+ background: rgba(102, 51, 153, 0.9)`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.bar {`
	`2`	`+ color: gray(255, 50%);`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.bar {`
	`2`	`+ color: rgba(255, 255, 255, 0.5);`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+body {`
	`2`	`+ background: #9d9c`
	`3`	`+}`