Socket
Socket
Sign inDemoInstall

rework

Package Overview
Dependencies
21
Maintainers
2
Versions
45
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.18.3 to 0.19.0

9

component.json
{
"name": "rework",
"version": "0.18.3",
"version": "0.19.0",
"description": "CSS manipulations built on CSSOM",

@@ -20,6 +20,4 @@ "keywords": ["css", "manipulation", "preprocess", "transform"],

"lib/visit.js",
"lib/properties.js",
"lib/plugins/function.js",
"lib/plugins/url.js",
"lib/plugins/vars.js",
"lib/plugins/ease.js",

@@ -29,8 +27,5 @@ "lib/plugins/at2x.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"
]
}

32

History.md
0.18.3 / 2013-10-18
0.19.0 / 2013-12-22
===================
* 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. #121 @rschmukler
0.18.3 / 2013-10-18
==================

@@ -7,3 +21,3 @@

0.18.2 / 2013-10-16
0.18.2 / 2013-10-16
==================

@@ -14,3 +28,3 @@

0.18.1 / 2013-09-03
0.18.1 / 2013-09-03
==================

@@ -20,3 +34,3 @@

0.18.0 / 2013-09-02
0.18.0 / 2013-09-02
==================

@@ -26,3 +40,3 @@

0.17.4 / 2013-08-22
0.17.4 / 2013-08-22
==================

@@ -33,3 +47,3 @@

0.17.3 / 2013-07-28
0.17.3 / 2013-07-28
==================

@@ -39,3 +53,3 @@

0.17.2 / 2013-07-10
0.17.2 / 2013-07-10
==================

@@ -45,3 +59,3 @@

0.17.1 / 2013-07-03
0.17.1 / 2013-07-03
==================

@@ -51,3 +65,3 @@

0.17.0 / 2013-06-18
0.17.0 / 2013-06-18
==================

@@ -54,0 +68,0 @@

24

lib/plugins/at2x.js

@@ -45,6 +45,4 @@

module.exports = function(vendors) {
return function(style, rework){
vendors = vendors || rework.prefixes;
module.exports = function() {
return function(style){
style.rules.forEach(function(rule){

@@ -55,8 +53,10 @@ if (!rule.declarations) return;

rule.declarations.filter(backgroundWithURL).forEach(function(decl){
rule.declarations.filter(backgroundWithHiResURL).forEach(function(decl){
if ('comment' == decl.type) return;
// parse url
var i = decl.value.indexOf('url(');
var url = stripQuotes(decl.value.slice(i + 4, decl.value.indexOf(')', i)));
var val = decl.value.replace(/\s+(at-2x)\s*(;|$)/, '$2');
decl.value = val;
var i = val.indexOf('url(');
var url = stripQuotes(val.slice(i + 4, val.indexOf(')', i)));
var ext = path.extname(url);

@@ -96,7 +96,2 @@

};
return function(style, rework) {
vendors = vendors || rework.prefixes;
visit(style.rules, style);
};
};

@@ -108,6 +103,7 @@

function backgroundWithURL(decl) {
function backgroundWithHiResURL(decl) {
return ('background' == decl.property
|| 'background-image' == decl.property)
&& ~decl.value.indexOf('url(');
&& ~decl.value.indexOf('url(')
&& ~decl.value.indexOf('at-2x');
}

@@ -114,0 +110,0 @@

9

lib/plugins/colors.js

@@ -18,3 +18,3 @@

/**
* Converts RGBA(color, alpha) to the corrosponding RGBA(r, g, b, a) equivalent.
* Converts RGBA(color, alpha) to the corrosponding RGBA(r, g, b, a) equivalent.
*

@@ -27,7 +27,8 @@ * background: rgba(#eee, .5)

rgba: function(color, alpha){
var args;
if (2 == arguments.length) {
var c = parse(color.trim());
var args = [c.r, c.g, c.b, alpha];
args = [c.r, c.g, c.b, alpha];
} else {
var args = [].slice.call(arguments);
args = [].slice.call(arguments);
}

@@ -67,3 +68,3 @@

: parseFloat(alpha, 10);
alpha = String(alpha).replace(/^0+\./, '.');

@@ -70,0 +71,0 @@

2

lib/plugins/ease.js

@@ -61,3 +61,3 @@

module.exports = function() {
return function(style, rework){
return function(style){
visit.declarations(style, substitute);

@@ -64,0 +64,0 @@ }

83

lib/plugins/function.js

@@ -16,7 +16,7 @@

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){
for (var name in functions) {
func(declarations, name, functions[name], args);
}
func(declarations, functions, functionMatcher, args);
});

@@ -27,13 +27,2 @@ }

/**
* Escape regexp codes in string.
*
* @param {String} s
* @api private
*/
function escape(s) {
return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
}
/**
* Visit declarations and apply functions.

@@ -43,2 +32,3 @@ *

* @param {Object} functions
* @param {RegExp} functionMatcher
* @param {Boolean} [parseArgs]

@@ -48,14 +38,61 @@ * @api private

function func(declarations, name, func, parseArgs) {
function func(declarations, functions, functionMatcher, parseArgs) {
if (false !== parseArgs) parseArgs = true;
var regexp = new RegExp(escape(name) + '\\(([^\)]+)\\)', 'g');
declarations.forEach(function(decl){
if ('comment' == decl.type) return;
if (!~decl.value.indexOf(name + '(')) return;
decl.value = decl.value.replace(regexp, function(_, args){
if (!parseArgs) return func.call(decl, strip(args));
args = args.split(/,\s*/).map(strip);
return func.apply(decl, args);
});
var generatedFuncs = [], result, generatedFunc;
while (decl.value.match(functionMatcher)) {
decl.value = decl.value.replace(functionMatcher, function(_, name, args){
if (parseArgs) {
args = args.split(/\s*,\s*/).map(strip);
} else {
args = [strip(args)];
}
// Ensure result is string
result = '' + functions[name].apply(decl, args);
// Prevent fall into infinite loop like this:
//
// {
// url: function(path) {
// return 'url(' + '/some/prefix' + path + ')'
// }
// }
//
generatedFunc = {from: name, to: name + getRandomString()};
result = result.replace(functionMatcherBuilder(name), generatedFunc.to + '($2)');
generatedFuncs.push(generatedFunc);
return result;
});
}
generatedFuncs.forEach(function(func) {
decl.value = decl.value.replace(func.to, func.from);
})
});
}
/**
* Build function regexp
*
* @param {String} name
* @api private
*/
function functionMatcherBuilder(name) {
// /(?!\W+)(\w+)\(([^()]+)\)/
return new RegExp("(?!\\W+)(" + name + ")\\(([^\(\)]+)\\)");
}
/**
* get random string
*
* @api private
*/
function getRandomString() {
return Math.random().toString(36).slice(2);
}

1

lib/plugins/mixin.js

@@ -6,3 +6,2 @@

var utils = require('../utils');
var visit = require('../visit');

@@ -9,0 +8,0 @@

2

lib/plugins/references.js

@@ -28,3 +28,3 @@

module.exports = function() {
return function(style, rework){
return function(style){
visit.declarations(style, substitute);

@@ -31,0 +31,0 @@ }

1

lib/plugins/url.js

@@ -6,3 +6,2 @@

var utils = require('../utils');
var func = require('./function');

@@ -9,0 +8,0 @@

32

lib/rework.js

@@ -24,3 +24,6 @@

exports.properties = require('./properties');
exports.__defineGetter__('properties', function () {
console.warn('rework.properties has been removed.');
return [];
})

@@ -68,2 +71,4 @@ /**

*
* Deprecated as of https://github.com/visionmedia/rework/issues/126.
*
* @param {Array} prefixes

@@ -75,2 +80,3 @@ * @return {Rework}

Rework.prototype.vendors = function(prefixes){
console.warn('rework.vendors() is deprecated. Please see: https://github.com/visionmedia/rework/issues/126.');
this.prefixes = prefixes;

@@ -98,15 +104,28 @@ return this;

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.

@@ -117,3 +136,4 @@ */

exports.inline = require('./plugins/inline');
} catch (err) {};
} catch (err) {}
function noop(){}

4

package.json
{
"name": "rework",
"version": "0.18.3",
"version": "0.19.0",
"description": "CSS manipulations built on CSSOM",

@@ -16,3 +16,3 @@ "keywords": ["css", "manipulation", "preprocess", "transform"],

"hsb2rgb": "1.0.2",
"mime": "1.2.9",
"mime": "1.2.11",
"debug": "*",

@@ -19,0 +19,0 @@ "rework-inherit": "0.2.1",

401

Readme.md

@@ -1,2 +0,2 @@

# rework
# rework [![Build Status](https://travis-ci.org/visionmedia/rework.png)](https://travis-ci.org/visionmedia/rework)

@@ -24,3 +24,3 @@ CSS manipulations built on [css](https://github.com/visionmedia/css),

- [significant whitespace](https://github.com/visionmedia/css-whitespace) - nested and indented syntax like Stylus and SASS
- third-party [plugins](https://github.com/visionmedia/rework/wiki/Plugins)
- third-party [plugins and utilities](https://github.com/visionmedia/rework/wiki/Plugins-and-Utilities)

@@ -31,2 +31,6 @@ ## Built with rework

- [autoprefixer](https://github.com/ai/autoprefixer) - prefixer based on the Can I Use database
- [rework-pure-css](https://github.com/ianstormtaylor/rework-pure-css) - bleeding-edge, spec-compliant CSS
- [rework-suit](https://github.com/suitcss/rework-suit) - CSS preprocessor for SUIT
- [resin](https://github.com/topcoat/resin) - Opinionated CSS preprocessor for Topcoat
- [Myth] (https://github.com/segmentio/myth) - CSS preprocessor built using Rework

@@ -39,8 +43,2 @@ ## API

### 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)

@@ -63,7 +61,4 @@

- [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)`

@@ -74,3 +69,3 @@ - [mixin](#mixinobject) — add custom property logic with mixing

- [url](#urlfn) - rewrite `url()`s with a given function
- third-party [plugins](https://github.com/visionmedia/rework/wiki/Plugins)
- third-party [plugins](https://github.com/visionmedia/rework/wiki/Plugins-and-Utilities)

@@ -208,10 +203,10 @@ ### .extend()

### .at2x([vendors])
### .at2x()
Add retina support for images, with optional `vendor` prefixes,
defaulting to `.vendors()`.
Adds `at-2x` keyword to `background` and `background-image`
declarations to add retina support for images.
```css
.logo {
background-image: url('component.png');
background-image: url('component.png') at-2x;
width: 289px;

@@ -239,86 +234,2 @@ height: 113px

### .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)

@@ -401,2 +312,34 @@

You may also return array values to expand to several definitions of the property:
```
function display(type) {
if ('flex' == type) {
return {
display: [
'-webkit-flex',
'-moz-flex',
'-webkit-flexbox',
'flex'
]
}
}
return {
display: type
}
}
```
Would yield:
```css
.myclass {
display: -webkit-flex;
display: -moz-flex;
display: -webkit-flexbox;
display: flex;
}
```
### .function(object)

@@ -436,20 +379,18 @@

You may also return array values to expand to several definitions of the property:
Nested functions works well too:
```javascript
var css = rework(css)
.use(rework.function(
subtract: function(a, b) { return a - b },
multiply: function(a, b) { return a * b },
divide: function(a, b) { return a / b },
floor: Math.floor
))
.toString()
```
function display(type) {
if ('flex' == type) {
return {
display: [
'-webkit-flex',
'-moz-flex',
'-webkit-flexbox',
'flex'
]
}
}
return {
display: type
}
```css
input {
top: divide(subtract(30, floor(multiply(20, 10))), 2);
}

@@ -461,7 +402,4 @@ ```

```css
.myclass {
display: -webkit-flex;
display: -moz-flex;
display: -webkit-flexbox;
display: flex;
input {
top: -85;
}

@@ -520,55 +458,2 @@ ```

### .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)

@@ -605,3 +490,3 @@

Map `url()` calls. Replace all `url()`s using a given function.
```js

@@ -629,166 +514,12 @@ var css = rework(read(css))

## Example
## License
example.js:
(The MIT License)
```js
var rework = require('rework')
, read = require('fs').readFileSync
, str = read('example.css', 'utf8');
Copyright (c) 2012 - 2013 TJ Holowaychuk <tj@vision-media.ca>
var css = rework(str)
.vendors(['-webkit-', '-moz-'])
.use(rework.keyframes())
.use(rework.prefix('border-radius'))
.toString()
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
console.log(css);
```
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
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
properties for positions, allowing you to write
them as follows:
```css
#logo {
absolute: top left;
}
#logo {
relative: top 5px left;
}
#logo {
fixed: top 5px left 10px;
}
```
yielding:
```css
#logo {
position: absolute;
top: 0;
left: 0
}
#logo {
position: relative;
top: 5px;
left: 0
}
#logo {
position: fixed;
top: 5px;
left: 10px
}
```
This is how you could define the plugin:
```js
var rework = require('rework')
, read = require('fs').readFileSync;
function positions() {
var positions = ['absolute', 'relative', 'fixed'];
return function(style){
style.rules.forEach(function(rule){
rule.declarations.forEach(function(decl, i){
if (!~positions.indexOf(decl.property)) return;
var args = decl.value.split(/\s+/);
var arg, n;
// remove original
rule.declarations.splice(i, 1);
// position prop
rule.declarations.push({
property: 'position',
value: decl.property
});
// position
while (args.length) {
arg = args.shift();
n = parseFloat(args[0]) ? args.shift() : 0;
rule.declarations.push({
property: arg,
value: n
});
}
});
});
}
}
var css = rework(read('positions.css', 'utf8'))
.use(positions())
.toString()
console.log(css);
```
## License
MIT
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
lib/plugins/keyframes.js
lib/plugins/prefix-value.js
lib/plugins/prefix.js
lib/plugins/vars.js
lib/properties.js
test.js
testing/index.css
testing/index.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc