Merge pull request #95 from cssnext/rgba-fallback

Added: color-rgba-fallback PostCSS Plugin

Author: MoOx

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 1.3.0 - 2015-04-15
+
+- Added: hexadecimal fallback for rgba() color
+
 # 1.2.3 - 2015-04-10
 
 - Fixed: --watch doesn't output console.log() related to watcherd/unwatched files anymore

README.md

@@ -63,6 +63,8 @@ Follow [@cssnext on Twitter](https://twitter.com/cssnext) to get the latest news
 ([⇗](https://github.com/robwierzbowski/node-pixrem))
 * [pseudo-elements](http://www.w3.org/TR/css3-selectors/#pseudo-elements)
 ([⇗](https://github.com/axa-ch/postcss-pseudoelements))
+* [rgba()](http://www.w3.org/TR/css3-color/)
+([⇗](https://github.com/postcss/postcss-color-rgba-fallback))
 ### Bonus features
 
 _<small>The features below are considered as bonus since it's totally not related to CSS specs</small>._
@@ -252,6 +254,7 @@ Here are all the available features:
 - `filter`
 - `rem`
 - `pseudoElements`
+- `colorRgba`
 - `autoprefixer`
 
 _Note: order is important to get everything working correctly._

index.js

@@ -24,6 +24,7 @@ var caniuseFeaturesMap = {
   // fontVariant: [null],
   // filter: [null], // @todo can be done using a callback, this is only used for Firefox < 35
   pseudoElements: ["css-gencontent"],
+  colorRgba: ["css3-colors"],
   rem: ["rem"],
   // autoprefixer: [null] // will always be null since autoprefixer does the same game as we do
 }
@@ -44,6 +45,7 @@ var features = {
   filter: function(options) { return require("pleeease-filters")(options)},
   rem: function(options) { return require("pixrem")(options)},
   pseudoElements: function(options) { return require("postcss-pseudoelements")(options)},
+  colorRgba: function(options) { return require("postcss-color-rgba-fallback")(options)},
   autoprefixer: function(options) { return require("autoprefixer-core")(options).postcss}
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cssnext",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "description": "Use tomorrow's CSS syntax, today",
   "keywords": [
     "css",
@@ -44,6 +44,7 @@
     "postcss-color-hex-alpha": "^1.1.0",
     "postcss-color-hwb": "^1.1.0",
     "postcss-color-rebeccapurple": "^1.1.0",
+    "postcss-color-rgba-fallback": "^1.0.0",
     "postcss-custom-media": "^1.3.0",
     "postcss-custom-properties": "^3.0.0",
     "postcss-custom-selectors": "^1.1.0",

test/fixtures/cases/example.css

@@ -58,3 +58,8 @@ a::before,
 a::after {
   content: "pseudo-elements"
 }
+
+/* rgba() fallback */
+.color {
+  background: rgba(153, 221, 153, 0.8);
+}

test/fixtures/cases/example.expected.css

@@ -4,6 +4,7 @@
 
 /* some var() & calc() */
 body {
+  color: #123456;
   color: rgba(18, 52, 86, 0.47059);
 
   font-size: 16px;
@@ -33,7 +34,7 @@ a {
   -webkit-transition: color 1s;
           transition: color 1s; /* autoprefixed ! */
 }
-a:hover { color: rgba(255, 255, 255, 0.5) }
+a:hover { color: #FFFFFF; color: rgba(255, 255, 255, 0.5) }
 a:active { color: rgb(102, 51, 153) }
 a:visited { color: rgb(89, 142, 153) }
 
@@ -69,3 +70,9 @@ a:before,
 a:after {
   content: "pseudo-elements"
 }
+
+/* rgba() fallback */
+.color {
+  background: #99DD99;
+  background: rgba(153, 221, 153, 0.8);
+}

test/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);
+}

test/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);
+}