Merge pull request #5 from AoDev/update-postcss-plugin

Include breaking change: Use postcss plugin system

.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+node_js:
+  - "node"
+  - "iojs"
+before_install: npm install -g grunt-cli

README.md

@@ -14,25 +14,29 @@ It's very simple: pass him a list of selectors that you want to exclude and it w
 I've found some cases where this approach is easier than using more powerful tools like uncss.
 Use what's best for you and give some feedback :)
 
-CSS Byebye is built with postcss [postcss](https://github.com/postcss/postcss).
+CSS Byebye is built with [postcss](https://github.com/postcss/postcss).
 
-Note: A grunt task for CSS Byebye is currently being developed.
+A grunt task for CSS Byebye exists: [grunt-css-byeby](https://github.com/AoDev/grunt-css-byebye).
 
 
-API
------
+Usage
+------
 
-CSS Byebye is a CSS post processor built with `postcss`; part of its API is defined as in the [postcss docs](https://github.com/postcss/postcss).
+CSS Byebye is a CSS post processor and a `postcss` plugin;
+read the [postcss docs](https://github.com/postcss/postcss/blob/master/docs/api.md) for more details.
 
-It exposes a `process` method with the following signature:
+**Run it as indicated in postcss docs:**
 
 ```js
-process(css, options)
+postcss(cssbyebye(options)).process(css)
 ```
 
 * css is your stylesheet
 * options is an object that has at least the `rulesToRemove` property defined.
 
+
+### options
+
 `rulesToRemove` is an array of `strings` or `regular expressions` (selectors).
 
 If you provide a string, it will remove the rule(s) for this exact selector.
@@ -41,12 +45,13 @@ If you provide a string, it will remove the rule(s) for this exact selector.
 ### Examples ###
 
 ```js
+var postcss = require('postcss')
 var cssbyebye = require('css-byebye')
 
 var css = 'a { font-size: 12px; } .hello .h1 { background: red } .world { color: blue }'
 var rulesToRemove = ['.hello .h1', '.world']
-
-var result = cssbyebye.process(css, { rulesToRemove: rulesToRemove, map: false })
+var options = { rulesToRemove: rulesToRemove, map: false }
+var result = postcss(cssbyebye(options)).process(css)
 ```
 
 `result` will be an object like this:
@@ -74,7 +79,12 @@ that contains the `.world` class.
 Changelog
 ----------
 
-### 2015-10-19 v0.2.0
+### 2015-06-09 v1.0.0
+* **Breaking changes** and bumped to 1.0.0
+* Update to last postCSS version
+* Now can be piped with other postCSS plugins
+
+### 2014-10-19 v0.2.0
 * The default behaviour is to match the exact selector when a string is given.
 * Added the possibility to match with regular expressions.
 

lib/css-byebye.js

@@ -1,9 +1,26 @@
+/**
+ * @module css-byebye
+ */
 
+
+var postcss = require('postcss')
+
+
+/**
+ * Escape a string so that it can be turned into a regex
+ * @param  {String} str String to transform
+ * @return {String}     Escaped string
+ */
 function escapeRegExp(str) {
   return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
 }
 
 
+/**
+ * Turn strings from rules to remove into a regexp to concat them later
+ * @param  {Mixed Array} rulesToRemove
+ * @return {RegExp Array}
+ */
 function regexize(rulesToRemove) {
   var rulesRegexes = []
   for (var i = 0, l = rulesToRemove.length; i < l; i++) {
@@ -18,6 +35,11 @@ function regexize(rulesToRemove) {
 }
 
 
+/**
+ * Concat various regular expressions into one
+ * @param  {RegExp Array} regexes
+ * @return {RegExp}       concatanated regexp
+ */
 function concatRegexes(regexes) {
 
   var rconcat = ''
@@ -35,34 +57,37 @@ function concatRegexes(regexes) {
 }
 
 
-var postcss = require('postcss')
+/**
+ * Return the actual postcss plugin to remove rules from the css
+ */
+var cssbyebye = postcss.plugin('css-byebye', function (options) {
 
-var cssbyebye = postcss(function (css, options) {
+  return function byebye(css) {
+    var remregexes = regexize(options.rulesToRemove)
+    var regex = concatRegexes(remregexes)
+    var count = 0
 
-  var remregexes = regexize(options.rulesToRemove)
-  var regex = concatRegexes(remregexes)
-  var count = 0
+    var filterRule = function filterRule(rule) {
 
-  var filterRule = function filterRule(rule) {
+      var selectors = rule.selectors
+      var filtered = []
 
-    var selectors = rule.selectors
-    var filtered = []
+      for (var j = 0, len = selectors.length; j < len; j++) {
+        if (selectors[j].match(regex) === null)
+          filtered.push(selectors[j])
+      }
 
-    for (var j = 0, len = selectors.length; j < len; j++) {
-      if (selectors[j].match(regex) === null)
-        filtered.push(selectors[j])
+      if (filtered.length > 1)
+        rule.selector = filtered.join(', ')
+      else if (filtered.length == 1)
+        rule.selector = filtered[0].trim()
+      else {
+        rule.removeSelf()
+      }
     }
 
-    if (filtered.length > 1)
-      rule.selector = filtered.join(', ')
-    else if (filtered.length == 1)
-      rule.selector = filtered[0].trim()
-    else {
-      rule.removeSelf()
-    }
+    css.eachRule(filterRule)
   }
-
-  css.eachRule(filterRule)
 })
 
 

package.json

@@ -17,7 +17,7 @@
   "author": "Kevin Purnelle <kevin.purnelle@gmail.com> (http://kevinpurnelle.com/)",
   "license": "MIT",
   "dependencies": {
-    "postcss": "^2.2.4"
+    "postcss": "^4.1.11"
   },
   "devDependencies": {
     "chai": "^1.9.1",

test/spec.js

@@ -1,6 +1,7 @@
 
 var assert = require('assert')
 var cssbyebye = require('../lib/css-byebye')
+var postcss = require('postcss')
 
 describe('cssbyebye', function () {
 
@@ -9,7 +10,8 @@ describe('cssbyebye', function () {
     var css = 'a { font-size: 12px; } .hello .h1 { background: red } .world { color: blue }'
     var rulesToRemove = ['.hello .h1', '.world']
     var expected = 'a { font-size: 12px; }'
-    var result = cssbyebye.process(css, { rulesToRemove: rulesToRemove, map: false })
+    var options = { rulesToRemove: rulesToRemove, map: false }
+    var result = postcss(cssbyebye(options)).process(css)
 
     assert.strictEqual(result.css, expected)
     done()
@@ -20,7 +22,8 @@ describe('cssbyebye', function () {
     var css = '.hello .world, .title, #id { color: red }'
     var rulesToRemove = ['.hello .world']
     var expected = '.title, #id { color: red }'
-    var result = cssbyebye.process(css, { rulesToRemove: rulesToRemove, map: false })
+    var options = { rulesToRemove: rulesToRemove, map: false }
+    var result = postcss(cssbyebye(options)).process(css)
 
     assert.strictEqual(result.css, expected)
     done()
@@ -30,8 +33,9 @@ describe('cssbyebye', function () {
 
     var css = '.item {} .item .desc { background: red } .list .item {}'
     var rulesToRemove = [/^\.item/]
-    var expected =  ' .list .item {}'
-    var result = cssbyebye.process(css, { rulesToRemove: rulesToRemove, map: false })
+    var expected =  '.list .item {}'
+    var options = { rulesToRemove: rulesToRemove, map: false }
+    var result = postcss(cssbyebye(options)).process(css)
 
     assert.strictEqual(result.css, expected)
     done()