rework - npm Package Compare versions

Comparing version 0.13.2 to 0.14.0

component.json

 {
   "name": "rework",
-  "version": "0.13.2",
+  "version": "0.14.0",
   "description": "CSS manipulations built on CSSOM",
   "keywords": ["css", "manipulation", "preprocess", "transform"],
   "dependencies": {
-    "visionmedia/css": "1.0.7",
+    "visionmedia/css": "1.0.8",
     "visionmedia/debug": "*",
@@ -18,2 +18,3 @@ "component/color-parser": "0.1.0",
     "lib/properties.js",
+    "lib/plugins/function.js",
     "lib/plugins/url.js",
@@ -20,0 +21,0 @@ "lib/plugins/vars.js",

History.md

 
-0.13.2 / 2013-02-28 
+0.14.0 / 2013-04-10
 ==================
 
+  * add `rework.inline()` to encode images to base64
+  * add `rework.function(obj)`
+  * add var(object) support
+  * add rework.properties array
+  * remove unprefixed CSS3 properties
+  * update css
+  * fix colors() when multiple rgba() calls are in one property value
+
+0.13.2 / 2013-02-28
+==================
+
   * add ./rework.js stand-alone build
   * refactor positions example with visitor
 
-0.13.1 / 2013-02-26 
+0.13.1 / 2013-02-26
 ==================
@@ -13,3 +24,3 @@
 
-0.13.0 / 2013-02-26 
+0.13.0 / 2013-02-26
 ==================
@@ -25,3 +36,3 @@
 
-0.12.2 / 2013-02-12 
+0.12.2 / 2013-02-12
 ==================
@@ -32,3 +43,3 @@
 
-0.12.1 / 2013-02-08 
+0.12.1 / 2013-02-08
 ==================
@@ -38,3 +49,3 @@
 
-0.12.0 / 2013-01-16 
+0.12.0 / 2013-01-16
 ==================
@@ -44,3 +55,3 @@
 
-0.11.0 / 2013-01-16 
+0.11.0 / 2013-01-16
 ==================
@@ -51,3 +62,3 @@
 
-0.10.2 / 2012-12-14 
+0.10.2 / 2012-12-14
 ==================
@@ -58,3 +69,3 @@
 
-0.10.1 / 2012-12-11 
+0.10.1 / 2012-12-11
 ==================
@@ -64,3 +75,3 @@
 
-0.10.0 2012-12-10 
+0.10.0 2012-12-10
 ==================
@@ -72,3 +83,3 @@
 
-0.9.2 / 2012-12-05 
+0.9.2 / 2012-12-05
 ==================
@@ -78,3 +89,3 @@
 
-0.9.1 / 2012-12-04 
+0.9.1 / 2012-12-04
 ==================
@@ -84,3 +95,3 @@
 
-0.9.0 / 2012-11-30 
+0.9.0 / 2012-11-30
 ==================
@@ -93,3 +104,3 @@
 
-0.8.0 / 2012-11-21 
+0.8.0 / 2012-11-21
 ==================
@@ -100,3 +111,3 @@
 
-0.7.0 / 2012-10-10 
+0.7.0 / 2012-10-10
 ==================
@@ -107,3 +118,3 @@
 
-0.6.1 / 2012-10-06 
+0.6.1 / 2012-10-06
 ==================
@@ -114,3 +125,3 @@
 
-0.6.0 / 2012-10-06 
+0.6.0 / 2012-10-06
 ==================
@@ -122,3 +133,3 @@
 
-0.5.1 / 2012-09-18 
+0.5.1 / 2012-09-18
 ==================
@@ -129,3 +140,3 @@
 
-0.5.0 / 2012-09-17 
+0.5.0 / 2012-09-17
 ==================
@@ -135,3 +146,3 @@
 
-0.4.1 / 2012-09-17 
+0.4.1 / 2012-09-17
 ==================
@@ -141,3 +152,3 @@
 
-0.4.0 / 2012-09-17 
+0.4.0 / 2012-09-17
 ==================
@@ -147,3 +158,3 @@
 
-0.3.0 / 2012-09-06 
+0.3.0 / 2012-09-06
 ==================
@@ -153,3 +164,3 @@
 
-0.2.0 / 2012-09-04 
+0.2.0 / 2012-09-04
 ==================
@@ -159,3 +170,3 @@
 
-0.1.2 / 2012-09-01 
+0.1.2 / 2012-09-01
 ==================
@@ -165,3 +176,3 @@
 
-0.1.1 / 2012-09-01 
+0.1.1 / 2012-09-01
 ==================
@@ -171,5 +182,5 @@
 
-0.1.0 / 2012-09-01 
+0.1.0 / 2012-09-01
 ==================
 
   * add .prefixSelectors(str) plugin

lib/plugins/colors.js

@@ -7,3 +7,3 @@
 var parse = require('color-parser')
-  , visit = require('../visit');
+  , functions = require('./function');
 
@@ -26,48 +26,14 @@ /**
 module.exports = function() {
-  return function(style, rework){
-    visit.declarations(style, substitute);
-  }
+  return functions({
+    rgba: function(color, alpha){
+      if (2 == arguments.length) {
+        var c = parse(color.trim());
+        var args = [c.r, c.g, c.b, alpha];
+      } else {
+        var args = [].slice.call(arguments);
+      }
+      
+      return 'rgba(' + args.join(', ') + ')';
+    }
+  });
 };
-
-/**
- * Substitute easing functions.
- *
- * @api private
- */
-
-function substitute(declarations) {
-  for (var i = 0; i < declarations.length; ++i) {
-    var decl = declarations[i];
-    var val = decl.value;
-    var index = val.indexOf('rgba');
-    if (-1 == index) continue;
-
-    // grab rgba(...) value
-    var rgba = val.slice(index, val.indexOf(')', index));
-
-    // arity > 2
-    if (rgba.split(',').length > 2) continue;
-
-    // color
-    var c = rgba.slice(rgba.indexOf('(') + 1, rgba.indexOf(',')).trim();
-    c = parse(c);
-
-    // alpha
-    var a = rgba.slice(rgba.indexOf(',') + 1, rgba.length);
-    a = parseFloat(a);
-
-    // format
-    c = 'rgba('
-      + c.r
-      + ','
-      + c.g
-      + ','
-      + c.b
-      + ','
-      + a
-      + ')';
-
-    // replace
-    decl.value = val.replace(rgba + ')', c);
-  }
-}

lib/plugins/extend.js

@@ -1,2 +0,1 @@
-
 /**
@@ -14,12 +13,24 @@ * Module dependencies.
   debug('use extend');
-  return function(style, rework){
+  return function(style, rework) {
     var map = {};
-    style.rules.forEach(function(rule){
-      if (!rule.declarations) return;
-      rule.selectors.forEach(function(sel, i){
+    var rules = style.rules.length;
+
+    for (var j = 0; j < rules; j++) {
+      var rule = style.rules[j];
+      if (!rule || !rule.selectors) return;
+
+      // map selectors
+      rule.selectors.forEach(function(sel, i) {
         map[sel] = rule;
         if ('%' == sel[0]) rule.selectors.splice(i, 1);
       });
+
+      // visit extend: properties
       visit(rule, map);
-    });
+
+      // clean up empty rules
+      if (!rule.declarations.length) {
+        style.rules.splice(j--, 1);
+      }
+    };
   }
@@ -47,3 +58,3 @@ };
     var keys = Object.keys(map);
-    keys.forEach(function(key){
+    keys.forEach(function(key) {
       if (0 != key.indexOf(val)) return;
@@ -53,3 +64,3 @@ var extend = map[key];
       debug('extend %j with %j', rule.selectors, extend.selectors);
-      extend.selectors = extend.selectors.concat(rule.selectors.map(function(sel){
+      extend.selectors = extend.selectors.concat(rule.selectors.map(function(sel) {
         return sel + suffix;
@@ -56,0 +67,0 @@ }));

lib/plugins/keyframes.js

 
 /**
  * Prefix keyframes.
- * 
+ *
  *   @keyframes animation {
@@ -9,3 +9,3 @@ *     from {
  *     }
- *   
+ *
  *     to {
@@ -15,5 +15,5 @@ *       opacity: 1;
  *   }
- * 
+ *
  * yields:
- * 
+ *
  *   @keyframes animation {
@@ -23,3 +23,3 @@ *     from {
  *     }
- *   
+ *
  *     to {
@@ -29,3 +29,3 @@ *       opacity: 1;
  *   }
- * 
+ *
  *   @-webkit-keyframes animation {
@@ -35,3 +35,3 @@ *     from {
  *     }
- *   
+ *
  *     to {
@@ -41,3 +41,3 @@ *       opacity: 1;
  *   }
- * 
+ *
  */
@@ -44,0 +44,0 @@

lib/plugins/opacity.js

 
 /**
  * Add IE opacity support.
- * 
+ *
  *   ul {
  *     opacity: 1 !important;
  *   }
- * 
+ *
  * yields:
- * 
+ *
  *   ul {
@@ -16,3 +16,3 @@ *     opacity: 1 !important;
  *   }
- * 
+ *
  */
@@ -19,0 +19,0 @@

lib/plugins/prefix-selectors.js

 
 /**
  * Prefix selectors with `str`.
- * 
+ *
  *    button {
  *      color: red;
  *    }
- * 
+ *
  * yields:
- * 
+ *
  *    #dialog button {
  *      color: red;
  *    }
- * 
+ *
  */
@@ -16,0 +16,0 @@

lib/plugins/url.js

@@ -7,3 +7,3 @@
 var utils = require('../utils')
-  , visit = require('../visit');
+  , func = require('./function');
 
@@ -26,13 +26,7 @@ /**
 module.exports = function(fn) {
-  return function(style, rework){
-    visit.declarations(style, function(declarations){
-      declarations.forEach(function(decl, i){
-        if (!~decl.value.indexOf('url(')) return;
-        decl.value = decl.value.replace(/url\(([^)]+)\)/g, function(_, url){
-          url = utils.stripQuotes(url);
-          return 'url("' + fn(url) + '")';
-        });
-      });
-    });
-  }
+  return func({ url: url });
+
+  function url(path){
+    return 'url("' + fn(path) + '")';
+  };
 };

lib/plugins/vars.js

@@ -27,4 +27,4 @@
 
-module.exports = function() {
-  var map = {};
+module.exports = function(map) {
+  map = map || {};
 
@@ -34,2 +34,3 @@ function replace(str) {
       var val = map[name];
+      if (!val) throw new Error('variable "' + name + '" is undefined');
       if (val.match(/\bvar\(/)) val = replace(val);
@@ -36,0 +37,0 @@ return val;

lib/properties.js

@@ -18,6 +18,3 @@
   'background-visibility',
-  'background-clip',
   'background-composite',
-  'background-origin',
-  'background-size',
   'blend-mode',
@@ -28,5 +25,2 @@ 'border-bottom-left-radius',
   'border-image',
-  'border-radius',
-  'border-top-left-radius',
-  'border-top-right-radius',
   'border-vertical-spacing',
@@ -42,3 +36,2 @@ 'box-align',
   'box-reflect',
-  'box-shadow',
   'box-sizing',
@@ -45,0 +38,0 @@ 'clip-path',

lib/rework.js

@@ -95,2 +95,3 @@
 exports.mixin = exports.mixins = require('./plugins/mixin');
+exports.function = exports.functions = require('./plugins/function');
 exports.prefix = require('./plugins/prefix');
@@ -108,1 +109,2 @@ exports.colors = require('./plugins/colors');
 exports.vars = require('./plugins/vars');
+exports.inline = require('./plugins/inline');

package.json

 {
   "name": "rework",
-  "version": "0.13.2",
+  "version": "0.14.0",
   "description": "CSS manipulations built on CSSOM",
@@ -11,5 +11,6 @@ "keywords": ["css", "manipulation", "preprocess", "transform"],
   "dependencies": {
-    "css": "1.0.7",
+    "css": "1.1.0",
     "commander": "1.0.4",
     "color-parser": "0.1.0",
+    "mime": "1.2.9",
     "debug": "*"
@@ -21,3 +22,6 @@ },
   },
-  "main": "index"
+  "main": "index",
+  "scripts": {
+    "test": "mocha --require should --reporter spec"
+  }
 }

Readme.md

 # rework
 
-  CSS manipulations built on [css](//github.com/visionmedia/css),
+  CSS manipulations built on [css](https://github.com/visionmedia/css),
   allowing you to automate vendor prefixing, create your own properties,
@@ -24,2 +24,3 @@ inline images, anything you can imagine! Also works in the browser as
   - [significant whitespace](https://github.com/visionmedia/css-whitespace)
+  - third-party [plugins](https://github.com/visionmedia/rework/wiki/Plugins)
 
@@ -83,3 +84,3 @@ ## rework(1)
   - [url](#urlcallback) — rewrite `url()`s with a callback function
-  - [vars](#vars) — add css variable support
+  - [vars](#varsobject) — add css variable support
   - [keyframes](#keyframesvendors) — add __@keyframe__ vendor prefixing
@@ -485,2 +486,36 @@ - [colors](#colors) — add colour helpers like `rgba(#fc0, .5)`
 
+### .function(object)
+
+  Add user-defined CSS functions.
+
+  For example create `black(0.5)` shortcut, to replace
+  long `rgba(0, 0, 0, 0.5)`.
+
+```js
+var css = rework(css)
+  .use(rework.function({ black: black }))
+  .toString()
+
+function black(opacity) {
+  return 'rgba(0, 0, 0, ' + opacity + ')';
+}
+```
+
+  User code will receive CSS arguments and replace user-defined function
+  by returned code.
+
+```css
+input {
+  box-shadow: 0 0 5px black(0.7);
+}
+```
+
+yields:
+
+```css
+input {
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
+}
+```
+
 ### .references()
@@ -518,7 +553,7 @@
 
-### .vars()
+### .vars([object])
 
   Add variable support. Note that this does not cascade like the CSS variable
   spec does, thus this is _not_ some sort of fallback mechanism, just a useful
-  feature.
+  feature. Optionally you may pass an `object` of variables from js-land.
 
@@ -636,2 +671,30 @@ ```css
 
+### .inline(dir)
+
+  Inline files from `dir` directly to CSS. Replace `inline(path)` to Data URI
+  with base64 encoding of file. It is useful for small images and fonts.
+
+  Of cource, you can use inline only with node. It is not available
+  in the browser with component.
+
+```js
+var css = rework(read(css))
+  .use(rework.inline('images/', 'fonts/'))
+  .toString()
+```
+
+```css
+.logo {
+  background: inline(icons/logo.png);
+}
+```
+
+yields:
+
+```css
+.logo {
+  background: url("data:image/png;base64,iVBORw0…");
+}
+```
+
 ## Example
@@ -638,0 +701,0 @@

testing/index.js

@@ -5,88 +5,9 @@
 var str = fs.readFileSync('testing/index.css', 'utf8');
-var whitespace = require('css-whitespace');
 
-var mixins = require('rework-mixins');
-
 var vendors = ['-ms-', '-moz-', '-webkit-'];
 
-var props = [
-  '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-clip',
-  'background-composite',
-  'background-origin',
-  'background-size',
-  'blend-mode',
-  'border-bottom-left-radius',
-  'border-bottom-right-radius',
-  'border-fit',
-  'border-image',
-  'border-radius',
-  'border-top-left-radius',
-  'border-top-right-radius',
-  'border-vertical-spacing',
-  'box-align',
-  'box-direction',
-  'box-flex',
-  'box-flex-group',
-  'box-lines',
-  'box-ordinal-group',
-  'box-orient',
-  'box-pack',
-  'box-reflect',
-  'box-shadow',
-  'box-sizing',
-  'clip-path',
-  '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'
-];
-
-str = whitespace(str);
-
 str = rework(str)
   .vendors(vendors)
   .use(rework.colors())
-  .use(rework.references())
-  .use(rework.keyframes())
-  .use(rework.ease())
-  .use(rework.prefixValue('transform'))
-  .use(rework.prefix(props))
-  .use(rework.mixin(mixins))
-  .use(rework.at2x())
+  .use(rework.prefix('linear-gradient'))
   .toString();
@@ -93,0 +14,0 @@

No alert changes

Improved metrics

Total package byte prevSize

45044

increased by2.83%

Number of package files

31

increased by10.71%

Number of lines in readme file

860

increased by7.9%

Worsened metrics

Dependency count

5

increased by25%

Lines of code

993

decreased by-2.65%

Number of low supply chain risk alerts

3

increased by50%

Dependency changes

• + Addedmime@1.2.9

• + Addedcss@1.1.0(transitive)

• + Addedcss-parse@1.2.0(transitive)

• + Addedcss-stringify@1.1.0(transitive)

• + Addedmime@1.2.9(transitive)

• - Removedcss@1.0.7(transitive)

• - Removedcss-parse@1.0.4(transitive)

• - Removedcss-stringify@1.0.4(transitive)

• Updatedcss@1.1.0