Skip to content
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...
1 parent ba80ebe commit c72f8be04720055fb8a4f8e5dbd068a6ea648846 @jonathanong jonathanong committed
View
12 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
==================
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
7 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"
]
}
View
1 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()
View
14 examples/bench.js
@@ -1,7 +1,7 @@
var rework = require('..')
, read = require('fs').readFileSync
- , str = read('examples/sink.css', 'utf8');
+ , str = read('examples/extend.css', 'utf8');
var times = 2000
, n = times
@@ -9,16 +9,8 @@ var times = 2000
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
13 examples/gradients.css
@@ -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
11 examples/gradients.js
@@ -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
4 examples/keyframes.css
@@ -1,4 +0,0 @@
-@keyframes animation {
- from { opacity: 0; border-radius: 5px }
- to { opacity: 1; border-radius: 5px }
-}
View
12 examples/keyframes.js
@@ -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);
View
14 examples/media.css
@@ -1,14 +0,0 @@
-
-@media phone {
- body {
- background: 'green';
- border-radius: 5px;
- }
-}
-
-@media phone-landscape {
- body {
- background: 'red';
- border-radius: 2px;
- }
-}
View
14 examples/media.js
@@ -1,14 +0,0 @@
-
-var rework = require('..')
- , read = require('fs').readFileSync;
-
-var css = rework(read('examples/media.css', 'utf8'))
- .vendors(['-webkit-', '-moz-'])
- .use(rework.prefix('border-radius'))
- .use(rework.media({
- 'phone': 'only screen and (min-device-width : 320px) and (max-device-width : 480px)',
- 'phone-landscape': '@media only screen and (min-width : 321px)'
- }))
- .toString()
-
-console.log(css);
View
8 examples/opacity.css
@@ -1,8 +0,0 @@
-
-a {
- opacity: .5;
-}
-
-ul {
- opacity: 1 !important;
-}
View
10 examples/opacity.js
@@ -1,10 +0,0 @@
-
-var rework = require('..')
- , read = require('fs').readFileSync;
-
-var css = rework(read('examples/opacity.css', 'utf8'))
- .vendors(['-webkit-', '-moz-'])
- .use(rework.opacity())
- .toString()
-
-console.log(css);
View
2 examples/positions.js
@@ -17,6 +17,7 @@ function positions() {
// position prop
declarations.push({
+ type: 'declaration',
property: 'position',
value: decl.property
});
@@ -26,6 +27,7 @@ function positions() {
arg = args.shift();
n = parseFloat(args[0]) ? args.shift() : 0;
declarations.push({
+ type: 'declaration',
property: arg,
value: n
});
View
5 examples/prefix-value.css
@@ -1,5 +0,0 @@
-.card .wrapper {
- foo: 'bar';
- transition: transform 500ms ease-in-out;
- bar: 'baz';
-}
View
11 examples/prefix-value.js
@@ -1,11 +0,0 @@
-
-var rework = require('..')
- , read = require('fs').readFileSync;
-
-var css = rework(read('examples/prefix-value.css', 'utf8'))
- .vendors(['-webkit-', '-moz-'])
- .use(rework.prefix('transition'))
- .use(rework.prefixValue('transform'))
- .toString()
-
-console.log(css);
View
4 examples/prefix.css
@@ -1,4 +0,0 @@
-.button {
- border-radius: 5px;
- box-shadow: inset 0 0 1px white;
-}
View
11 examples/prefix.js
@@ -1,11 +0,0 @@
-
-var rework = require('..')
- , read = require('fs').readFileSync;
-
-var css = rework(read('examples/prefix.css', 'utf8'))
- .vendors(['-webkit-', '-moz-'])
- .use(rework.prefix('border-radius'))
- .use(rework.prefix('box-shadow'))
- .toString()
-
-console.log(css);
View
331 examples/sink.css
@@ -1,331 +0,0 @@
-@keyframes animation {
- from { opacity: 0; border-radius: 5px }
- to { opacity: 1; border-radius: 5px }
-}
-
-#dialog {
- position: fixed;
- left: 50%;
- top: 150px;
- max-width: 600px;
- min-width: 250px;
- border: 1px solid #eee;
- background: white;
- z-index: 1000;
-}
-
-#dialog .content {
- padding: 15px 20px;
-}
-
-#dialog h1 {
- margin: 0 0 5px 0;
- font-size: 16px;
- font-weight: normal;
-}
-
-#dialog p {
- margin: 0;
- padding: 0;
- font-size: .9em;
-}
-
-#dialog.modal {
- box-shadow: 0 1px 8px 0 black;
-}
-
-/* close */
-
-#dialog .close {
- position: absolute;
- top: 3px;
- right: 10px;
- text-decoration: none;
- color: #888;
- font-size: 16px;
- font-weight: bold;
- display: none;
-}
-
-#dialog.closable .close {
- display: block;
-}
-
-#dialog .close:hover {
- color: black;
-}
-
-#dialog .close:active {
- margin-top: 1px;
-}
-
-/* slide */
-
-#dialog.slide {
- transition: opacity 300ms, top 300ms;
-}
-
-#dialog.slide.hide {
- opacity: 0;
- top: -500px;
-}
-
-/* fade */
-
-#dialog.fade {
- transition: opacity 300ms;
-}
-
-#dialog.fade.hide {
- opacity: 0;
-}
-
-/* scale */
-
-#dialog.scale {
- transition: transform 300ms;
- transform: scale(1);
-}
-
-#dialog.scale.hide {
- transform: scale(0);
-}
-
-#overlay {
- position: fixed;
- top: 0;
- left: 0;
- opacity: 1;
- width: 100%;
- height: 100%;
- background: rgba(0,0,0,.75);
- transition: opacity 300ms;
- z-index: 500;
-}
-
-#overlay.hide {
- pointer-events: none;
- opacity: 0;
-}
-
-.confirmation .actions {
- border-top: 1px solid #eee;
- padding: 5px;
- text-align: right;
- background: #fafafa;
- box-shadow: inset 0 1px 0 white;
-}.color-picker canvas {
- border: 1px solid #888;
-}
-.color-picker canvas:active {
- cursor: none;
-}
-
-#notifications {
- position: fixed;
- top: 10px;
- right: 15px;
-}
-
-#notifications li {
- margin-bottom: 5px;
- list-style: none;
-}
-
-.notification {
- position: relative;
- max-width: 600px;
- min-width: 250px;
- border: 1px solid #eee;
- background: white;
- z-index: 100;
-}
-
-.notification .content {
- padding: 15px 20px;
-}
-
-.notification h1 {
- margin: 0 0 5px 0;
- font-size: 16px;
- font-weight: normal;
-}
-
-.notification p {
- margin: 0;
- padding: 0;
- font-size: .9em;
-}
-
-.notification .close {
- position: absolute;
- top: 5px;
- right: 10px;
- text-decoration: none;
- color: #888;
- display: none;
-}
-
-.notification.closable .close {
- display: block;
-}
-
-.notification .close:hover {
- color: black;
-}
-
-.notification .close:active {
- margin-top: 1px;
-}
-
-/* close */
-
-.notification .close {
- position: absolute;
- top: 3px;
- right: 10px;
- text-decoration: none;
- color: #888;
- font-size: 16px;
- font-weight: bold;
- display: none;
-}
-
-/* slide */
-
-.notification.slide {
- transition: opacity 300ms, top 300ms;
-}
-
-.notification.slide.hide {
- opacity: 0;
- top: -500px;
-}
-
-/* fade */
-
-.notification.fade {
- transition: opacity 300ms;
-}
-
-.notification.fade.hide {
- opacity: 0;
-}
-
-/* scale */
-
-.notification.scale {
- transition: transform 300ms;
- transform: scale(1);
-}
-
-.notification.scale.hide {
- transform: scale(0);
-}
-
-.split-button {
- display: inline-block;
- border: 1px solid #eee;
-}
-
-.split-button a {
- display: inline-block;
- float: left;
- height: 20px;
- line-height: 20px;
- padding: 5px 10px;
- text-decoration: none;
- user-select: none;
-}
-
-.split-button .toggle {
- border-left: 1px solid #eee;
-}
-
-.split-button .toggle span {
- display: block;
- margin-top: 8px;
- border-left: 4px solid transparent;
- border-right: 4px solid transparent;
- border-top: 4px solid #888;
-}
-
-.menu {
- position: absolute;
- top: 0;
- left: 0;
- z-index: 100;
- margin: 0;
- padding: 0;
- background: white;
- border: 1px solid rgba(0,0,0,0.2);
-}
-
-.menu li {
- list-style: none;
-}
-
-.menu li a {
- display: block;
- padding: 5px 30px 5px 12px;
- text-decoration: none;
- border-top: 1px solid #eee;
- color: #2e2e2e;
- outline: none;
-}
-
-.menu li:first-child a {
- border-top: none;
-}
-
-.menu li a:hover,
-.menu li.selected a {
- background: #f1faff;
-}
-
-/* from: http://desandro.github.com/3dtransforms */
-
-.card {
- width: 200px;
- height: 260px;
- position: relative;
- perspective: 800;
-}
-
-.card .wrapper {
- width: 100%;
- height: 100%;
- position: absolute;
- border: 1px solid #eee;
- border-bottom-color: #cacaca;
- border-radius: 3px;
- box-shadow: inset 0 -1px 0 0 white, 0 1px 4px 0 #ddd;
- transform-style: preserve-3d;
- transition: transform 500ms ease-in-out;
-}
-
-.card .face {
- display: block;
- position: absolute;
- width: 100%;
- height: 100%;
- backface-visibility: hidden;
-}
-
-.card .back {
- transform: rotateY(180deg);
-}
-
-.card.flipped .wrapper {
- transform: rotateY(180deg);
-}
-
-/* sideflip effect */
-
-.card.sideflip .wrapper {
- transform-origin: right center;
-}
-
-.card.sideflip.flipped .wrapper {
- transform: translateX(-100%) rotateY(180deg);
-}
View
17 examples/sink.js
@@ -1,17 +0,0 @@
-
-var rework = require('..')
- , read = require('fs').readFileSync;
-
-var css = rework(read('examples/sink.css', 'utf8'))
- .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()
-
-console.log(css);
View
6 lib/plugins/at2x.js
@@ -42,10 +42,8 @@ var query = [
*
*/
-module.exports = function(vendors) {
- return function(style, rework){
- vendors = vendors || rework.prefixes;
-
+module.exports = function() {
+ return function(style){
style.rules.forEach(function(rule){
if (!rule.declarations) return;
View
2 lib/plugins/ease.js
@@ -58,7 +58,7 @@ var keys = Object.keys(ease);
*/
module.exports = function() {
- return function(style, rework){
+ return function(style){
visit.declarations(style, substitute);
}
};
View
2 lib/plugins/function.js
@@ -13,7 +13,7 @@ var strip = utils.stripQuotes;
module.exports = function(functions, args) {
if (!functions) throw new Error('functions object required');
- return function(style, rework){
+ return function(style){
var functionMatcher = functionMatcherBuilder(Object.keys(functions).join('|'));
visit.declarations(style, function(declarations){
View
97 lib/plugins/keyframes.js
@@ -1,97 +0,0 @@
-
-/**
- * Prefix keyframes.
- *
- * @keyframes animation {
- * from {
- * opacity: 0;
- * }
- *
- * to {
- * opacity: 1;
- * }
- * }
- *
- * yields:
- *
- * @keyframes animation {
- * from {
- * opacity: 0;
- * }
- *
- * to {
- * opacity: 1;
- * }
- * }
- *
- * @-webkit-keyframes animation {
- * from {
- * opacity: 0;
- * }
- *
- * to {
- * opacity: 1;
- * }
- * }
- *
- */
-
-module.exports = function(vendors) {
- return function(style, rework){
- vendors = vendors || rework.prefixes;
-
- style.rules.forEach(function(rule){
- if (!rule.keyframes) return;
-
- vendors.forEach(function(vendor){
- if (vendor == rule.vendor) return;
- var clone = cloneKeyframes(rule);
- clone.vendor = vendor;
- style.rules.push(clone);
- });
- });
- }
-};
-
-/**
- * Clone keyframes.
- *
- * @param {Object} rule
- * @api private
- */
-
-function cloneKeyframes(rule) {
- var clone = { name: rule.name };
- clone.type = 'keyframes';
- clone.vendor = rule.vendor;
- clone.keyframes = [];
- rule.keyframes.forEach(function(keyframe){
- clone.keyframes.push(cloneKeyframe(keyframe));
- });
- return clone;
-}
-
-/**
- * Clone `keyframe`.
- *
- * @param {Object} keyframe
- * @api private
- */
-
-function cloneKeyframe(keyframe) {
- var clone = {};
- clone.type = 'keyframe';
- clone.values = keyframe.values.slice();
- clone.declarations = keyframe.declarations.map(function(decl){
- if ('comment' == decl.type) {
- return decl;
- }
-
- return {
- type: 'declaration',
- property: decl.property,
- value: decl.value
- }
- });
- return clone;
-}
View
56 lib/plugins/prefix-value.js
@@ -1,56 +0,0 @@
-
-/**
- * Module dependencies.
- */
-
-var visit = require('../visit');
-
-/**
- * Prefix `value`.
- *
- * button {
- * transition: height, transform 2s, width 0.3s linear;
- * }
- *
- * yields:
- *
- * 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
- * }
- *
- */
-
-module.exports = function(value, vendors) {
- return function(style, rework){
- vendors = vendors || rework.prefixes;
-
- visit.declarations(style, function(declarations){
- for (var i = 0; i < declarations.length; ++i) {
- var decl = declarations[i];
- if ('comment' == decl.type) continue;
- if (!~decl.value.indexOf(value)) continue;
-
- // ignore vendor-prefixed properties
- if ('-' == decl.property[0]) continue;
-
- // ignore vendor-prefixed values
- if (~decl.value.indexOf('-' + value)) continue;
-
- // vendor prefixed props
- vendors.forEach(function(vendor){
- var prop = 'transition' == decl.property || 'transition-property' == decl.property
- ? vendor + decl.property
- : decl.property;
-
- declarations.splice(i++, 0, {
- type: 'declaration',
- property: prop,
- value: decl.value.replace(value, vendor + value)
- });
- });
- }
- });
- }
-};
View
62 lib/plugins/prefix.js
@@ -1,62 +0,0 @@
-
-/**
- * Module dependencies.
- */
-
-var visit = require('../visit');
-
-/**
- * Prefix `prop`.
- *
- * .button {
- * border-radius: 5px;
- * }
- *
- * yields:
- *
- * .button {
- * -webkit-border-radius: 5px;
- * -moz-border-radius: 5px;
- * border-radius: 5px;
- * }
- *
- */
-
-module.exports = function(prop, vendors) {
- var props = Array.isArray(prop)
- ? prop
- : [prop];
-
- return function(style, rework){
- vendors = vendors || rework.prefixes;
- visit.declarations(style, function(declarations, node){
- var only = node.vendor;
- var isKeyframes = !! node.keyframes;
-
- for (var i = 0; i < props.length; ++i) {
- var prop = props[i];
-
- for (var j = 0, len = declarations.length; j < len; ++j) {
- var decl = declarations[j];
- if ('comment' == decl.type) continue;
- if (prop != decl.property) continue;
-
- // vendor prefixed props
- for (var k = 0; k < vendors.length; ++k) {
- if (!only && isKeyframes) continue;
- if (only && only != vendors[k]) continue;
- declarations.push({
- type: 'declaration',
- property: vendors[k] + decl.property,
- value: decl.value
- });
- }
-
- // original prop
- declarations.push(decl);
- declarations.splice(j, 1);
- }
- }
- });
- }
-};
View
2 lib/plugins/references.js
@@ -25,7 +25,7 @@ var visit = require('../visit');
*/
module.exports = function() {
- return function(style, rework){
+ return function(style){
visit.declarations(style, substitute);
}
};
View
5 lib/plugins/vars.js
@@ -1,5 +0,0 @@
-
-module.exports = function(){
- console.warn('Warning: vars() has been removed, please use: https://github.com/visionmedia/rework-vars');
- return function(){}
-};
View
76 lib/properties.js
@@ -1,76 +0,0 @@
-
-/**
- * Prefixed properties.
- */
-
-module.exports = [
- 'animation',
- 'animation-delay',
- 'animation-direction',
- 'animation-duration',
- 'animation-fill-mode',
- 'animation-iteration-count',
- 'animation-name',
- 'animation-play-state',
- 'animation-timing-function',
- 'appearance',
- 'background-visibility',
- 'background-composite',
- 'blend-mode',
- 'border-bottom-left-radius',
- 'border-bottom-right-radius',
- 'border-fit',
- 'border-image',
- 'border-vertical-spacing',
- 'box-align',
- 'box-direction',
- 'box-flex',
- 'box-flex-group',
- 'box-lines',
- 'box-ordinal-group',
- 'box-orient',
- 'box-pack',
- 'box-reflect',
- 'box-sizing',
- 'clip-path',
- 'column-count',
- 'column-width',
- 'column-min-width',
- 'column-width-policy',
- 'column-gap',
- 'column-rule',
- 'column-rule-color',
- 'column-rule-style',
- 'column-rule-width',
- 'column-span',
- 'flex',
- 'flex-basis',
- 'flex-direction',
- 'flex-flow',
- 'flex-grow',
- 'flex-shrink',
- 'flex-wrap',
- 'flex-flow-from',
- 'flex-flow-into',
- 'font-smoothing',
- 'transform',
- 'transform-origin',
- 'transform-origin-x',
- 'transform-origin-y',
- 'transform-origin-z',
- 'transform-style',
- 'transition',
- 'transition-delay',
- 'transition-duration',
- 'transition-property',
- 'transition-timing-function',
- 'user-drag',
- 'user-modify',
- 'user-select',
- 'wrap',
- 'wrap-flow',
- 'wrap-margin',
- 'wrap-padding',
- 'wrap-through',
- 'overflow-scrolling'
-];
View
30 lib/rework.js
@@ -21,7 +21,10 @@ exports.visit = require('./visit');
* Expose prefix properties.
*/
-exports.properties = require('./properties');
+exports.__defineGetter__('properties', function () {
+ console.warn('rework.properties has been removed.');
+ return [];
+})
/**
* Initialize a new stylesheet `Rework` with `str`.
@@ -64,12 +67,15 @@ Rework.prototype.use = function(fn){
* explicit ones may still be passed
* to most plugins.
*
+ * Deprecated as of https://github.com/visionmedia/rework/issues/126.
+ *
* @param {Array} prefixes
* @return {Rework}
* @api public
*/
Rework.prototype.vendors = function(prefixes){
+ console.warn('rework.vendors() is deprecated. Please see: https://github.com/visionmedia/rework/issues/126.');
this.prefixes = prefixes;
return this;
};
@@ -92,17 +98,30 @@ Rework.prototype.toString = function(options){
exports.mixin = exports.mixins = require('./plugins/mixin');
exports.function = exports.functions = require('./plugins/function');
-exports.prefix = require('./plugins/prefix');
exports.colors = require('./plugins/colors');
exports.extend = require('rework-inherit');
exports.references = require('./plugins/references');
-exports.prefixValue = require('./plugins/prefix-value');
exports.prefixSelectors = require('./plugins/prefix-selectors');
-exports.keyframes = require('./plugins/keyframes');
exports.at2x = require('./plugins/at2x');
exports.url = require('./plugins/url');
exports.ease = require('./plugins/ease');
-exports.vars = require('./plugins/vars');
+
+/**
+ * Warn if users try to use removed components.
+ * This will be removed in v1.
+ */
+
+[
+ 'vars',
+ 'keyframes',
+ 'prefix',
+ 'prefixValue',
+].forEach(function (plugin) {
+ exports[plugin] = function () {
+ console.warn('rework.' + plugin + '() has been removed from rework core. Please view https://github.com/visionmedia/rework or https://github.com/visionmedia/rework/wiki/Plugins-and-Utilities.');
+ return noop;
+ };
+});
/**
* Try/catch plugins unavailable in component.
@@ -112,3 +131,4 @@ exports.vars = require('./plugins/vars');
exports.inline = require('./plugins/inline');
} catch (err) {}
+function noop(){}
View
4 test/fixtures/keyframes.css
@@ -1,4 +0,0 @@
-@keyframes animation {
- from { opacity: 0; border-radius: 5px }
- to { opacity: 1; border-radius: 5px }
-}
View
39 test/fixtures/keyframes.out.css
@@ -1,39 +0,0 @@
-@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;
- }
-}
View
12 test/fixtures/prefix-value.css
@@ -1,12 +0,0 @@
-button {
- transition: height, transform 2s, width 0.3s linear;
- background: green;
- transition-property: transform;
-}
-
-@media screen {
- button {
- transition: transform 1s;
- transition-property: transform;
- }
-}
View
20 test/fixtures/prefix-value.out.css
@@ -1,20 +0,0 @@
-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;
- background: green;
- -webkit-transition-property: -webkit-transform;
- -moz-transition-property: -moz-transform;
- transition-property: transform;
-}
-
-@media screen {
- button {
- -webkit-transition: -webkit-transform 1s;
- -moz-transition: -moz-transform 1s;
- transition: transform 1s;
- -webkit-transition-property: -webkit-transform;
- -moz-transition-property: -moz-transform;
- transition-property: transform;
- }
-}
View
4 test/fixtures/prefix.css
@@ -1,4 +0,0 @@
-.button {
- border-radius: 5px;
- box-shadow: inset 0 0 1px white;
-}
View
14 test/fixtures/prefix.media.css
@@ -1,14 +0,0 @@
-
-@media phone {
- body {
- background: 'green';
- border-radius: 5px;
- }
-}
-
-@media phone-landscape {
- body {
- background: 'red';
- border-radius: 2px;
- }
-}
View
18 test/fixtures/prefix.media.out.css
@@ -1,18 +0,0 @@
-
-@media phone {
- body {
- background: 'green';
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- border-radius: 5px;
- }
-}
-
-@media phone-landscape {
- body {
- background: 'red';
- -webkit-border-radius: 2px;
- -moz-border-radius: 2px;
- border-radius: 2px;
- }
-}
View
8 test/fixtures/prefix.out.css
@@ -1,8 +0,0 @@
-.button {
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- border-radius: 5px;
- -webkit-box-shadow: inset 0 0 1px white;
- -moz-box-shadow: inset 0 0 1px white;
- box-shadow: inset 0 0 1px white;
-}
View
77 test/rework.js
@@ -8,8 +8,6 @@ function fixture(name) {
return read('test/fixtures/' + name + '.css', 'utf8').trim();
}
-var vendors = ['-webkit-', '-moz-'];
-
describe('rework', function(){
describe('.properties', function(){
it('should be vendor-prefixed properties', function(){
@@ -26,32 +24,6 @@ describe('rework', function(){
})
})
- describe('.prefixValue(value)', function(){
- it('should prefix the value', function(){
- rework(fixture('prefix-value'))
- .use(rework.prefixValue('transform', vendors))
- .toString()
- .should.equal(fixture('prefix-value.out'));
- })
-
- it('should utilize .vendors()', function(){
- rework(fixture('prefix-value'))
- .vendors(vendors)
- .use(rework.prefixValue('transform'))
- .toString()
- .should.equal(fixture('prefix-value.out'));
- })
-
- it('should support gradients', function(){
- rework(fixture('gradients'))
- .vendors(vendors)
- .use(rework.prefixValue('linear-gradient'))
- .use(rework.prefixValue('radial-gradient'))
- .toString()
- .should.equal(fixture('gradients.out'));
- })
- })
-
describe('.extend()', function(){
it('should allow extending rulesets', function(){
rework(fixture('extend'))
@@ -94,14 +66,11 @@ describe('rework', function(){
describe('.mixin(obj)', function(){
it('should apply properties', function(){
rework(fixture('mixins'))
- .vendors(['-moz-'])
.use(rework.mixin({ overflow: ellipsis }))
.toString().trim()
.should.equal(fixture('mixins.out'));
function ellipsis(type) {
- this.prefixes.should.eql(['-moz-']);
-
if ('ellipsis' == type) {
return {
'white-space': 'nowrap',
@@ -142,7 +111,6 @@ describe('rework', function(){
it('should allow multiple mixins to be used sequentially', function() {
rework(fixture('mixins.multiple'))
- .vendors(['-moz-'])
.use(rework.mixin({
display: display,
overflow: ellipsis
@@ -168,8 +136,6 @@ describe('rework', function(){
}
function ellipsis(type) {
- this.prefixes.should.eql(['-moz-']);
-
if ('ellipsis' == type) {
return {
'white-space': 'nowrap',
@@ -240,39 +206,12 @@ describe('rework', function(){
describe('.at2x()', function(){
it('should add device-pixel-ratio rules', function(){
rework(fixture('at2x'))
- .use(rework.at2x(vendors))
+ .use(rework.at2x())
.toString()
.should.equal(fixture('at2x.out'));
})
})
- describe('.prefix(prop)', function(){
- it('should prefix prop', function(){
- rework(fixture('prefix'))
- .vendors(vendors)
- .use(rework.prefix('border-radius'))
- .use(rework.prefix('box-shadow'))
- .toString()
- .should.equal(fixture('prefix.out'));
- })
-
- it('should support an array of properties', function(){
- rework(fixture('prefix'))
- .vendors(vendors)
- .use(rework.prefix(['border-radius', 'box-shadow']))
- .toString()
- .should.equal(fixture('prefix.out'));
- })
-
- it('should visit @media', function(){
- rework(fixture('prefix.media'))
- .vendors(vendors)
- .use(rework.prefix('border-radius'))
- .toString()
- .should.equal(fixture('prefix.media.out'));
- })
- })
-
describe('.prefixSelectors(str)', function(){
it('should prefix selectors', function(){
rework(fixture('prefix-selectors'))
@@ -282,17 +221,6 @@ describe('rework', function(){
})
})
- describe('.keyframes()', function(){
- it('should prefix keyframes', function(){
- rework(fixture('keyframes'))
- .vendors(vendors)
- .use(rework.keyframes())
- .use(rework.prefix('border-radius'))
- .toString()
- .should.equal(fixture('keyframes.out'));
- })
- })
-
describe('.url(fn)', function(){
it('should map urls', function(){
function rewrite(url) {
@@ -309,7 +237,6 @@ describe('rework', function(){
describe('.ease()', function(){
it('should add additional easing functions', function(){
rework(fixture('easing'))
- .vendors(vendors)
.use(rework.ease())
.toString()
.should.equal(fixture('easing.out'));
@@ -323,7 +250,7 @@ describe('rework', function(){
// .toString()
// .should.equal(fixture('inline.out'));
// })
- //
+ //
// it('should accept dirs in array', function(){
// rework(fixture('inline'))
// .use(rework.inline(['lib/', 'test/fixtures']))

0 comments on commit c72f8be

Please sign in to comment.
Something went wrong with that request. Please try again.