remove all vendor support

- plugins are now noops
- .properties is an empty array
- .vendors() is a noop
- clean up and fix examples, remove old examples
- clean up tests

History.md

@@ -1,9 +1,17 @@
 
-0.19.0 / 2013-12-00
+HEAD
 ==================
 
+ * remove all vendor support. See: [#126](https://github.com/visionmedia/rework/issues/126).
+
+     * deprecated .vendors()
+     * remove .prefix()
+     * remove .prefixValue()
+     * remove .keyframes()
+     * remove .properties
+
  * function: support nested functions #119 @bolasblack
- * at-2x: now requires a `at-2x` tag. breaks backwards compatibility. #121 @rschmukler
+ * at-2x: now requires a `at-2x` tag. #121 @rschmukler
 
 0.18.3 / 2013-10-18
 ==================

Readme.md

@@ -37,12 +37,6 @@ or in the browser with the stand-alone build ./rework.js referencing the `rework
 
   Return a new `Rework` instance for the given string of `css`.
 
-### Rework#vendors(prefixes)
-
-  Define vendor `prefixes` that plugins may utilize,
-  however most plugins do and should accept direct passing
-  of vendor prefixes as well.
-
 ### Rework#use(fn)
 
   Use the given plugin `fn`. A rework "plugin" is simply
@@ -60,11 +54,8 @@ or in the browser with the stand-alone build ./rework.js referencing the `rework
 
   - [extend](#extend) — add `extend: selector` support
   - [ease](#ease) — several additional easing functions
-  - [at2x](#at2xvendors) — serve high resolution images
-  - [prefix](#prefixpropertyproperties-vendors) — add vendor prefixes to properties
-  - [prefixValue](#prefixvaluevalue-vendors) — add vendor prefixes to values
+  - [at2x](#at2x) — serve high resolution images
   - [prefixSelectors](#prefixselectorsstring) — add prefixes to selectors
-  - [keyframes](#keyframesvendors) — add __@keyframe__ vendor prefixing
   - [colors](#colors) — add colour helpers like `rgba(#fc0, .5)`
   - [mixin](#mixinobject) — add custom property logic with mixing
   - [function](#functionobject) — Add user-defined CSS functions
@@ -203,11 +194,10 @@ Please delegate any issues with `.extend()` to that repository instead of rework
 
   To view them online visit [easings.net](http://easings.net/).
 
-### .at2x([vendors])
+### .at2x()
 
   Adds `at-2x` keyword to `background` and `background-image`
-  declarations to add retina support for images, with optional
-  `vendor` prefixes, defaulting to `.vendors()`.
+  declarations to add retina support for images.
 
 ```css
 .logo {
@@ -234,90 +224,6 @@ yields:
 }
 ```
 
-### .prefix(property|properties, [vendors])
-
-  Prefix `property` or array of `properties` with optional `vendors` defaulting to `.vendors()`.
-
-```css
-.button {
-  border-radius: 5px;
-}
-```
-
-yields:
-
-```css
-.button {
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
-}
-```
-
-### .prefixValue(value, [vendors])
-
-  Prefix `value` with optional `vendors` defaulting to `.vendors()`.
-
-```css
-button {
-  transition: height, transform 2s, width 0.3s linear;
-}
-```
-
-yields:
-
-```css
-button {
-  -webkit-transition: height, -webkit-transform 2s, width 0.3s linear;
-  -moz-transition: height, -moz-transform 2s, width 0.3s linear;
-  transition: height, transform 2s, width 0.3s linear
-}
-```
-
-  This works with other values as well, such as gradients. For example:
-
-```js
-.use(rework.prefixValue('linear-gradient'))
-.use(rework.prefixValue('radial-gradient'))
-```
-
-```css
-
-button {
-  background: linear-gradient(#eee, #ddd);
-}
-
-button.round {
-  border-radius: 50%;
-  background-image: radial-gradient(#cde6f9, #81a8cb);
-}
-
-body {
-  background: -webkit-linear-gradient(#fff, #eee);
-}
-```
-
-yields:
-
-```css
-button {
-  background: -webkit-linear-gradient(#eee, #ddd);
-  background: -moz-linear-gradient(#eee, #ddd);
-  background: linear-gradient(#eee, #ddd)
-}
-
-button.round {
-  border-radius: 50%;
-  background-image: -webkit-radial-gradient(#cde6f9, #81a8cb);
-  background-image: -moz-radial-gradient(#cde6f9, #81a8cb);
-  background-image: radial-gradient(#cde6f9, #81a8cb)
-}
-
-body {
-  background: -webkit-linear-gradient(#fff, #eee)
-}
-```
-
 ### .prefixSelectors(string)
 
   Prefix selectors with the given `string`.
@@ -538,59 +444,6 @@ button {
 }
 ```
 
-### .keyframes([vendors])
-
-  Prefix __@keyframes__ with `vendors` defaulting to `.vendors()`.
-  Ordering with `.keyframes()` is important, as other plugins
-  may traverse into the newly generated rules, for example the
-  following will allow `.prefix()` to prefix keyframe `border-radius`
-  property, `.prefix()` is also smart about which keyframes definition
-  it is within, and will not add extraneous vendor definitions.
-
-```js
-var css = rework(read('examples/keyframes.css', 'utf8'))
-  .vendors(['-webkit-', '-moz-'])
-  .use(rework.keyframes())
-  .use(rework.prefix('border-radius'))
-  .toString()
-```
-
-```css
-@keyframes animation {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-```
-
-yields:
-
-```css
-@keyframes animation {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@-webkit-keyframes animation {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-```
-
 ### .inline(dir)
 
   Inline files from `dir` directly to CSS. Replace `inline(path)` to Data URI
@@ -645,77 +498,6 @@ body {
 }
 ```
 
-## Example
-
-example.js:
-
-```js
-var rework = require('rework')
-  , read = require('fs').readFileSync
-  , str = read('example.css', 'utf8');
-
-var css = rework(str)
-  .vendors(['-webkit-', '-moz-'])
-  .use(rework.keyframes())
-  .use(rework.prefix('border-radius'))
-  .toString()
-
-console.log(css);
-```
-
-example.css:
-
-```css
-@keyframes animation {
-  from { opacity: 0; border-radius: 5px }
-  to { opacity: 1; border-radius: 5px }
-}
-```
-
-stdout:
-
-```css
-@keyframes animation {
-  from {
-    opacity: 0;
-    border-radius: 5px
-  }
-
-  to {
-    opacity: 1;
-    border-radius: 5px
-  }
-}
-
-@-webkit-keyframes animation {
-  from {
-    opacity: 0;
-    -webkit-border-radius: 5px;
-    border-radius: 5px
-  }
-
-  to {
-    opacity: 1;
-    -webkit-border-radius: 5px;
-    border-radius: 5px
-  }
-}
-
-@-moz-keyframes animation {
-  from {
-    opacity: 0;
-    -moz-border-radius: 5px;
-    border-radius: 5px
-  }
-
-  to {
-    opacity: 1;
-    -moz-border-radius: 5px;
-    border-radius: 5px
-  }
-}
-```
-
 ## Example Plugin
 
   Suppose for example you wanted to create your own

component.json

@@ -17,18 +17,13 @@
     "lib/rework.js",
     "lib/utils.js",
     "lib/visit.js",
-    "lib/properties.js",
     "lib/plugins/function.js",
     "lib/plugins/url.js",
-    "lib/plugins/vars.js",
     "lib/plugins/ease.js",
     "lib/plugins/at2x.js",
     "lib/plugins/colors.js",
     "lib/plugins/mixin.js",
-    "lib/plugins/keyframes.js",
     "lib/plugins/references.js",
-    "lib/plugins/prefix-selectors.js",
-    "lib/plugins/prefix-value.js",
-    "lib/plugins/prefix.js"
+    "lib/plugins/prefix-selectors.js"
   ]
 }

examples/at2x.js

@@ -3,7 +3,6 @@ var rework = require('..')
   , read = require('fs').readFileSync;
 
 var css = rework(read('examples/at2x.css', 'utf8'))
-  .vendors(['-webkit-', '-moz-'])
   .use(rework.at2x())
   .toString()
 

examples/bench.js

@@ -1,24 +1,16 @@
 
 var rework = require('..')
   , read = require('fs').readFileSync
-  , str = read('examples/sink.css', 'utf8');
+  , str = read('examples/extend.css', 'utf8');
 
 var times = 2000
   , n = times
   , start = new Date;
 
 while (n--) {
   rework(str)
-    .vendors(['-webkit-', '-moz-'])
-    .use(rework.keyframes())
-    .use(rework.prefixValue('transform'))
-    .use(rework.prefix('backface-visibility'))
-    .use(rework.prefix('border-radius'))
-    .use(rework.prefix('transform-origin'))
-    .use(rework.prefix('transform'))
-    .use(rework.prefix('transition'))
-    .use(rework.prefix('box-shadow'))
-    .toString()
+    .use(rework.extend())
+    .toString();
 }
 
 var dur = new Date - start;