Added: pseudoelements PostCSS Plugin

Close #81

Author: magsout

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 1.2.0 - 2015-04-02
+
+- Added: pseudoElements single colon fallback for pseudoElements double colons
+
 # 1.1.0 - 2015-03-05
 
 - Added: `--config` CLI option

README.md

@@ -18,7 +18,7 @@ The official name is **cssnext**, which should never be capitalized, especially
 [Why](#why) | [Features](#features) | [Limitations](#limitations) | [Installation](#installation)| [CLI Usage](#cli) | [Node.js API](#nodejs-api) | [Contribute](#contributing)
 --- | --- | --- | --- | --- | --- | ---
 
---- 
+---
 
 ## Why
 
@@ -61,7 +61,8 @@ Follow [@cssnext on Twitter](https://twitter.com/cssnext) to get the latest news
 ([⇗](https://github.com/iamvdo/pleeease-filters))
 * [rem](http://www.w3.org/TR/css3-values/#rem-unit) units
 ([⇗](https://github.com/robwierzbowski/node-pixrem))
-
+* [pseudo-elements](http://www.w3.org/TR/css3-selectors/#pseudo-elements)
+([⇗](https://github.com/axa-ch/postcss-pseudoelements))
 ### Bonus features
 
 _<small>The features below are considered as bonus since it's totally not related to CSS specs</small>._
@@ -250,6 +251,7 @@ Here are all the available features:
 - `fontVariant`
 - `filter`
 - `rem`
+- `pseudoElements`
 - `autoprefixer`
 
 _Note: order is important to get everything working correctly._

index.js

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cssnext",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Use tomorrow's CSS syntax, today",
   "keywords": [
     "css",
@@ -50,6 +50,7 @@
     "postcss-font-variant": "^1.0.0",
     "postcss-import": "^5.0.0",
     "postcss-media-minmax": "^1.1.0",
+    "postcss-pseudoelements": "^2.1.1",
     "postcss-url": "^2.0.0",
     "read-file-stdin": "^0.2.0",
     "to-slug-case": "^0.1.2",

test/fixtures/cases/example.css

@@ -52,3 +52,9 @@ table {
 .sepia {
   filter: sepia(.8);
 }
+
+/* pseudo-elements */
+a::before,
+a::after {
+  content:"pseudo-elements"
+}

test/fixtures/features/pseudo-elements.css

@@ -0,0 +1,6 @@
+.foo::after {
+	content:"pseudoelement"
+}
+.foo::before {
+	content:"pseudoelement"
+}

test/fixtures/features/pseudo-elements.expected.css

@@ -0,0 +1,6 @@
+.foo:after {
+	content:"pseudoelement"
+}
+.foo:before {
+	content:"pseudoelement"
+}