rework - npm Package Compare versions

Comparing version 0.8.0 to 0.9.0

component.json

 {
   "name": "rework",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "CSS manipulations built on CSSOM",
@@ -5,0 +5,0 @@ "keywords": ["css", "manipulation", "preprocess", "transform"],

History.md

 
+0.9.0 / 2012-11-30 
+==================
+
+  * add mixin support
+  * add property reference support
+  * add rgba(color, a) plugin
+  * add gradient support. Closes #12
+
 0.8.0 / 2012-11-21 
@@ -3,0 +11,0 @@ ==================

lib/plugins/prefix-value.js

 
 /**
  * Prefix `value`.
- * 
+ *
  *    button {
  *      transition: height, transform 2s, width 0.3s linear;
  *    }
- * 
+ *
  * yields:
- * 
+ *
  *    button {
@@ -16,3 +16,3 @@ *      -webkit-transition: height, -webkit-transform 2s, width 0.3s linear;
  *    }
- * 
+ *
  */
@@ -34,7 +34,14 @@
         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
+            ? vendor + decl.property
+            : decl.property;
+
           rule.declarations.splice(i++, 0, {
-            property: vendor + decl.property,
+            property: prop,
             value: decl.value.replace(value, vendor + value)
@@ -41,0 +48,0 @@ });

lib/rework.js

@@ -82,3 +82,6 @@
 exports.media = require('./plugins/media');
+exports.mixin = require('./plugins/mixin');
 exports.prefix = require('./plugins/prefix');
+exports.colors = require('./plugins/colors');
+exports.references = require('./plugins/references');
 exports.prefixValue = require('./plugins/prefix-value');
@@ -85,0 +88,0 @@ exports.prefixSelectors = require('./plugins/prefix-selectors');

package.json

 {
   "name": "rework",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "CSS manipulations built on CSSOM",
@@ -12,3 +12,4 @@ "keywords": ["css", "manipulation", "preprocess", "transform"],
     "css": "1.0.7",
-    "commander": "1.0.4"
+    "commander": "1.0.4",
+    "color-parser": "0.0.1"
   },
@@ -15,0 +16,0 @@ "devDependencies": {

Readme.md

@@ -18,2 +18,7 @@ # rework
 
+## Links
+
+  - [rework mixins](https://github.com/visionmedia/rework-mixins)
+  - [significant whitespace](https://github.com/visionmedia/css-whitespace)
+
 ## rework(1)
@@ -78,2 +83,5 @@
   - [keyframes](#keyframesvendors) — add __@keyframe__ vendor prefixing
+  - [colors](#colors) — add colour helpers like `rgba(#fc0, .5)`
+  - [references](#references) — add property references support `height: @width` etc
+  - [mixin](#mixinobjects) — add custom property logic with mixing
 
@@ -219,2 +227,46 @@ ### .media(obj)
 
+  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)
@@ -283,2 +335,80 @@
 
+### .mixin(object)
+
+  Add user-defined mixins, functions that are invoked for a given property, and
+  passed the value. Returning an object that represents one or more properties.
+
+  For example the following `overflow` mixin allows the designer
+  to utilize `overflow: ellipsis;` to automatically assign associated
+  properties preventing wrapping etc.
+
+```js
+var css = rework(css)
+  .use(rework.mixin({ overflow: ellipsis }))
+  .toString()
+
+function ellipsis(type) {
+  if ('ellipsis' == type) {
+    return {
+      'white-space': 'nowrap',
+      'overflow': 'hidden',
+      'text-overflow': 'ellipsis'
+    }
+  }
+
+  return type;
+}
+```
+
+  Mixins in use look just like regular CSS properties:
+
+```css
+
+h1 {
+  overflow: ellipsis;
+}
+```
+
+yields:
+
+```css
+h1 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis
+}
+```
+
+### .references()
+
+  Add property reference support.
+
+```css
+button {
+  width: 120px;
+}
+
+button.round {
+  width: 50px;
+  height: @width;
+  line-height: @height;
+  background-size: @width @height;
+}
+```
+
+yields:
+
+```css
+button {
+  width: 120px
+}
+
+button.round {
+  width: 50px;
+  height: 50px;
+  line-height: 50px;
+  background-size: 50px 50px
+}
+```
+
 ### .vars()
@@ -330,2 +460,20 @@
 
+### .colors()
+
+  Add color manipulation helpers such as `rgba(#fc0, .5)`.
+
+```css
+button {
+  background: rgba(#ccc, .5);
+}
+```
+
+yields:
+
+```css
+button {
+  background: rgba(204, 204, 204, .5);
+}
+```
+
 ### .keyframes([vendors])
@@ -546,29 +694,4 @@
 
-## Links
-
-  - Nodejitsu rework [web service](http://rework.jit.su/) 
-
 ## License 
 
-(The MIT License)
-
-Copyright (c) 2012 TJ Holowaychuk <[e-mail]>
-
-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:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-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.
+  MIT

No alert changes

Improved metrics

Total package byte prevSize

36400

increased by16.05%

Number of package files

23

increased by15%

Lines of code

765

increased by24.39%

Number of lines in readme file

692

increased by21.83%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Addedcolor-parser@0.0.1

• + Addedcolor-parser@0.0.1(transitive)