Permalink
Browse files

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
  • Loading branch information...
jonathanong committed Dec 14, 2013
1 parent ba80ebe commit c72f8be04720055fb8a4f8e5dbd068a6ea648846
View
@@ -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
==================
View
224 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
View
@@ -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"
]
}
View
@@ -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()
View
@@ -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;
View
@@ -1,13 +0,0 @@
-
-button {
- background: linear-gradient(#eee, #ddd);
-}
-
-button.round {
- border-radius: 50%;
- background-image: radial-gradient(#cde6f9, #81a8cb);
-}
-
-body {
- background: -webkit-linear-gradient(#fff, #eee);
-}
View
@@ -1,11 +0,0 @@
-
-var rework = require('..')
- , read = require('fs').readFileSync;
-
-var css = rework(read('examples/gradients.css', 'utf8'))
- .vendors(['-webkit-', '-moz-'])
- .use(rework.prefixValue('linear-gradient'))
- .use(rework.prefixValue('radial-gradient'))
- .toString()
-
-console.log(css);
View
@@ -1,4 +0,0 @@
-@keyframes animation {
- from { opacity: 0; border-radius: 5px }
- to { opacity: 1; border-radius: 5px }
-}
View
@@ -1,12 +0,0 @@
-
-var rework = require('..')
- , read = require('fs').readFileSync;
-
-var css = rework(read('examples/keyframes.css', 'utf8'))
- .vendors(['-webkit-', '-moz-', '-ms-'])
- .use(rework.keyframes())
- .use(rework.opacity())
- .use(rework.prefix('border-radius'))
- .toString()
-
-console.log(css);
Oops, something went wrong.

0 comments on commit c72f8be

Please sign in to comment.