rework - npm Package Compare versions

Comparing version 0.20.3 to 1.0.0

index.js

 
-module.exports = require('./lib/rework');
+/**
+ * Module dependencies.
+ */
+
+var css = require('css');
+var parse = css.parse;
+var stringify = css.stringify;
+
+/**
+ * Expose `rework`.
+ */
+
+exports = module.exports = rework;
+
+/**
+ * Initialize a new stylesheet `Rework` with `str`.
+ *
+ * @param {String} str
+ * @param {Object} options
+ * @return {Rework}
+ * @api public
+ */
+
+function rework(str, options) {
+  return new Rework(parse(str, options));
+}
+
+/**
+ * Initialize a new stylesheet `Rework` with `obj`.
+ *
+ * @param {Object} obj
+ * @api private
+ */
+
+function Rework(obj) {
+  this.obj = obj;
+}
+
+/**
+ * Use the given plugin `fn(style, rework)`.
+ *
+ * @param {Function} fn
+ * @return {Rework}
+ * @api public
+ */
+
+Rework.prototype.use = function(fn){
+  fn(this.obj.stylesheet, this);
+  return this;
+};
+
+/**
+ * Stringify the stylesheet.
+ *
+ * @param {Object} options
+ * @return {String}
+ * @api public
+ */
+
+Rework.prototype.toString = function(options){
+  options = options || {};
+  var result = stringify(this.obj, options);
+  if (options.sourcemap && !options.sourcemapAsObject) {
+    result = result.code + '\n' + sourcemapToComment(result.map);
+  }
+  return result;
+};
+
+/**
+ * Convert sourcemap to base64-encoded comment
+ *
+ * @param {Object} map
+ * @return {String}
+ * @api private
+ */
+
+function sourcemapToComment(map) {
+  var convertSourceMap = require('convert-source-map');
+  var content = convertSourceMap.fromObject(map).toBase64();
+  return '/*# sourceMappingURL=data:application/json;base64,' + content + ' */';
+}

package.json

 {
   "name": "rework",
-  "version": "0.20.3",
-  "description": "CSS manipulations built on CSSOM",
+  "version": "1.0.0",
+  "description": "Plugin framework for CSS preprocessing",
+  "main": "index",
+  "files": [
+    "index.js"
+  ],
+  "dependencies": {
+    "css": "^2.0.0",
+    "mime": "^1.2.11",
+    "debug": "*",
+    "convert-source-map": "^0.3.3"
+  },
+  "devDependencies": {
+    "mocha": "*",
+    "should": "*"
+  },
+  "scripts": {
+    "test": "mocha --require should --reporter spec"
+  },
   "keywords": [
@@ -10,3 +27,2 @@ "css",
     "transform",
-    "browser",
     "server"
@@ -18,22 +34,3 @@ ],
     "url": "git://github.com/reworkcss/rework.git"
-  },
-  "dependencies": {
-    "css": "1.6.0",
-    "color-parser": "0.1.0",
-    "hsb2rgb": "1.0.2",
-    "mime": "1.2.11",
-    "debug": "*",
-    "rework-inherit": "~0.2.1",
-    "rework-visit": "1.0.0",
-    "convert-source-map": "~0.3.1"
-  },
-  "devDependencies": {
-    "mocha": "*",
-    "should": "*"
-  },
-  "main": "index",
-  "scripts": {
-    "prepublish": "make rework.js",
-    "test": "mocha --require should --reporter spec"
   }
-}
+}

Readme.md

@@ -1,502 +0,76 @@
-# rework [![Build Status](https://travis-ci.org/reworkcss/rework.png)](https://travis-ci.org/visionmedia/rework)
+# rework [![Build Status](https://travis-ci.org/reworkcss/rework.png)](https://travis-ci.org/reworkcss/rework)
 
-  CSS manipulations built on [css](https://github.com/visionmedia/css),
-  allowing you to automate vendor prefixing, create your own properties,
-  inline images, anything you can imagine! Also works in the browser as
-  a [component](https://github.com/component/component).
+CSS manipulations built on [`css`](https://github.com/reworkcss/css), allowing
+you to automate vendor prefixing, create your own properties, inline images,
+anything you can imagine!
 
+Please refer to [`css`](https://github.com/reworkcss/css) for AST documentation
+and to report parser/stringifier issues.
+
 ## Installation
 
-with node:
-
     $ npm install rework
 
-or in the browser with component:
+## Usage
 
-    $ component install visionmedia/rework
+```js
+var rework = require('rework');
+var pluginA = require('pluginA');
+var pluginB = require('pluginB');
 
-or in the browser with the stand-alone build ./rework.js referencing the `rework` global.
+rework('body { font-size: 12px; }', { source: 'source.css' })
+  .use(pluginA)
+  .use(pluginB)
+  .toString({ sourcemap: true })
+```
 
-## Links
-
-  - [rework mixins](https://github.com/visionmedia/rework-mixins)
-  - [significant whitespace](https://github.com/visionmedia/css-whitespace) - nested and indented syntax like Stylus and SASS
-  - third-party [plugins and utilities](https://github.com/visionmedia/rework/wiki/Plugins-and-Utilities)
-
-## Built with rework
-
-  - [styl](https://github.com/visionmedia/styl) - CSS preprocessor built on 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
-
 ## API
 
-### rework(css)
+### rework(code, [options])
 
-  Return a new `Rework` instance for the given string of `css`.
+Accepts a CSS string and returns a new `Rework` instance. The `options` are
+passed directly to `css.parse`.
 
 ### Rework#use(fn)
 
-  Use the given plugin `fn`. A rework "plugin" is simply
-  a function accepting the stylesheet object and `Rework` instance,
-  view the definitions in `./lib/plugins` for examples.
+Use the given plugin `fn`. A rework "plugin" is simply a function accepting the
+stylesheet root node and the `Rework` instance.
 
-### Rework#toString(options)
+### Rework#toString([options])
 
-  Return the string representation of the manipulated css. Optionally
-  you may compress the output with `.toString({ compress: true })` and/or generate an inline source map with `.toString({ sourcemap: true })`
+Returns the string representation of the manipulated CSS. The `options` are
+passed directly to `css.stringify`.
 
+Unlike `css.stringify`, if you pass `sourcemap: true` a string will still be
+returned, with the source map inlined. Also use `sourcemapAsObject: true` if
+you want the `css.stringify` return value.
+
 ## Plugins
 
-  The following plugins are bundled with `rework`:
+Rework has a rich collection of plugins and mixins. Browse all the [Rework
+plugins](https://www.npmjs.org/search?q=rework) available on npm.
 
-  - [extend](#extend) — add `extend: selector` support
-  - [ease](#ease) — several additional easing functions
-  - [at2x](#at2x) — serve high resolution images
-  - [prefixSelectors](#prefixselectorsstring) — add prefixes to selectors
-  - [colors](#colors) — add colour helpers like `rgba(#fc0, .5)`
-  - [mixin](#mixinobject) — add custom property logic with mixing
-  - [function](#functionobject) — Add user-defined CSS functions
-  - [references](#references) — add property references support `height: @width` etc
-  - [url](#urlfn) - rewrite `url()`s with a given function
-  - third-party [plugins](https://github.com/visionmedia/rework/wiki/Plugins-and-Utilities)
+Plugins of particular note:
 
-### .extend()
+- [at2x](https://github.com/reworkcss/rework-plugin-at2x/) – serve high resolution images
+- [calc](https://github.com/reworkcss/rework-calc) – resolve simple `calc()` expressions
+- [colors](https://github.com/reworkcss/rework-plugin-colors/) – add colour helpers like `rgba(#fc0, .5)`
+- [ease](https://github.com/reworkcss/rework-plugin-ease/) – several additional easing functions
+- [extend](https://github.com/reworkcss/rework-inherit/) – `extend: selector` support
+- [function](https://github.com/reworkcss/rework-plugin-function/) – user-defined CSS functions
+- [import](https://github.com/reworkcss/rework-import) – read and inline css via `@import`
+- [inline](https://github.com/reworkcss/rework-plugin-inline) – inline assets as dataURI with base64 encoding
+- [mixin](https://github.com/reworkcss/rework-plugin-mixin/) – custom property logic with mixins
+- [references](https://github.com/reworkcss/rework-plugin-references/) – property references like `height: @width`
+- [url](https://github.com/reworkcss/rework-plugin-url/) – rewrite `url()`s with a given function
+- [variables](https://github.com/reworkcss/rework-vars/) – W3C-style variables
 
-  Add support for extending existing rulesets:
+## Built with rework
 
-```css
+- [styl](https://github.com/visionmedia/styl)
+- [rework-pure-css](https://github.com/ianstormtaylor/rework-pure-css)
+- [rework-suit](https://github.com/suitcss/rework-suit)
+- [resin](https://github.com/topcoat/resin)
+- [Myth](https://github.com/segmentio/myth)
 
-button {
-  padding: 5px 10px;
-  border: 1px solid #eee;
-  border-bottom-color: #ddd;
-}
-
-.green {
-  background: green;
-  padding: 10px 15px
-}
-
-a.join {
-  extend: button;
-  extend: .green;
-}
-
-a.button,
-input[type='submit'],
-input[type='button'] {
-  extend: button
-}
-```
-
-yields:
-
-```css
-
-button,
-a.button,
-input[type='submit'],
-input[type='button'],
-a.join {
-  padding: 5px 10px;
-  border: 1px solid #eee;
-  border-bottom-color: #ddd;
-}
-
-.green,
-a.join {
-  background: green;
-  padding: 10px 15px
-}
-```
-
-  Optionally selectors may be prefixed with `%` to create sass-style "placeholder"
-  selectors, which do not become part of the output. For example:
-
-```css
-%dark-button {
-  background: black;
-}
-
-%dark-button:hover {
-  background: rgba(0,0,0,.5);
-}
-
-%dark-button:hover .icon {
-  color: rgba(255,255,255,.5);
-}
-
-button,
-.actions a {
-  extend: %dark-button;
-  padding: 5px 10px;
-}
-```
-
-yields:
-
-```css
-button,
-.actions a {
-  background: black
-}
-
-button:hover,
-.actions a:hover {
-  background: rgba(0,0,0,.5)
-}
-
-button:hover .icon,
-.actions a:hover .icon {
-  color: rgba(255,255,255,.5)
-}
-
-button,
-.actions a {
-  padding: 5px 10px
-}
-```
-
-This plugin is stored in its own repo at [jonathanong/rework-inherit](https://github.com/jonathanong/rework-inherit).
-Please delegate any issues with `.extend()` to that repository instead of rework.
-
-### .ease()
-
-  Adds the following list of additional easing functions:
-
-  - `ease-in-out-back` -- `cubic-bezier(0.680, -0.550, 0.265, 1.550)`
-  - `ease-in-out-circ` -- `cubic-bezier(0.785, 0.135, 0.150, 0.860)`
-  - `ease-in-out-expo` -- `cubic-bezier(1.000, 0.000, 0.000, 1.000)`
-  - `ease-in-out-sine` -- `cubic-bezier(0.445, 0.050, 0.550, 0.950)`
-  - `ease-in-out-quint` -- `cubic-bezier(0.860, 0.000, 0.070, 1.000)`
-  - `ease-in-out-quart` -- `cubic-bezier(0.770, 0.000, 0.175, 1.000)`
-  - `ease-in-out-cubic` -- `cubic-bezier(0.645, 0.045, 0.355, 1.000)`
-  - `ease-in-out-quad` -- `cubic-bezier(0.455, 0.030, 0.515, 0.955)`
-  - `ease-out-back` -- `cubic-bezier(0.175, 0.885, 0.320, 1.275)`
-  - `ease-out-circ` -- `cubic-bezier(0.075, 0.820, 0.165, 1.000)`
-  - `ease-out-expo` -- `cubic-bezier(0.190, 1.000, 0.220, 1.000)`
-  - `ease-out-sine` -- `cubic-bezier(0.390, 0.575, 0.565, 1.000)`
-  - `ease-out-quint` -- `cubic-bezier(0.230, 1.000, 0.320, 1.000)`
-  - `ease-out-quart` -- `cubic-bezier(0.165, 0.840, 0.440, 1.000)`
-  - `ease-out-cubic` -- `cubic-bezier(0.215, 0.610, 0.355, 1.000)`
-  - `ease-out-quad` -- `cubic-bezier(0.250, 0.460, 0.450, 0.940)`
-  - `ease-in-back` -- `cubic-bezier(0.600, -0.280, 0.735, 0.045)`
-  - `ease-in-circ` -- `cubic-bezier(0.600, 0.040, 0.980, 0.335)`
-  - `ease-in-expo` -- `cubic-bezier(0.950, 0.050, 0.795, 0.035)`
-  - `ease-in-sine` -- `cubic-bezier(0.470, 0.000, 0.745, 0.715)`
-  - `ease-in-quint` -- `cubic-bezier(0.755, 0.050, 0.855, 0.060)`
-  - `ease-in-quart` -- `cubic-bezier(0.895, 0.030, 0.685, 0.220)`
-  - `ease-in-cubic` -- `cubic-bezier(0.550, 0.055, 0.675, 0.190)`
-  - `ease-in-quad` -- `cubic-bezier(0.550, 0.085, 0.680, 0.530)`
-
-  To view them online visit [easings.net](http://easings.net/).
-
-### .at2x()
-
-  Adds `at-2x` keyword to `background` and `background-image`
-  declarations to add retina support for images.
-
-```css
-.logo {
-  background-image: url('component.png') at-2x;
-  width: 289px;
-  height: 113px
-}
-```
-
-yields:
-
-```css
-.logo {
-  background-image: url('component.png');
-  width: 289px;
-  height: 113px
-}
-
-@media all and (-webkit-min-device-pixel-ratio: 1.5) {
-  .logo {
-    background-image: url("[e-mail]");
-    background-size: contain
-  }
-}
-```
-
-### .prefixSelectors(string)
-
-  Prefix selectors with the given `string`.
-
-```css
-h1 {
-  font-weight: bold;
-}
-
-a {
-  text-decoration: none;
-  color: #ddd;
-}
-```
-
-yields:
-
-```css
-#dialog h1 {
-  font-weight: bold;
-}
-
-#dialog a {
-  text-decoration: none;
-  color: #ddd;
-}
-```
-
-### .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.
-
-  The receiver (`this`) is the `Rework` instance, allowing the mixin to reference
-  properties such as the vendor `.prefixes` array.
-
-```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
-}
-```
-
-  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)
-
-  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);
-}
-```
-
-  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()
-```
-
-```css
-input {
-  top: divide(subtract(30, floor(multiply(20, 10))), 2);
-}
-```
-
-  Would yield:
-
-```css
-input {
-  top: -85;
-}
-```
-
-### .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
-}
-```
-
-### .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);
-}
-```
-
-### .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 course, 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…");
-}
-```
-
-### .url(fn)
-
-  Map `url()` calls. Replace all `url()`s using a given function.
-
-```js
-var css = rework(read(css))
-  .use(rework.url(function(url){
-    return 'http://example.com' + url;
-  }))
-  .toString()
-```
-
-```css
-body {
-  background: url(/images/bg.png);
-}
-```
-
-yields:
-
-```css
-body {
-  background: url(http://example.com/images/bg.png);
-}
-```
-
 ## License
@@ -507,7 +81,20 @@
 Copyright (c) 2012 - 2013 TJ Holowaychuk <[e-mail]>
+Copyright (c) 2014 Contributors
 
-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:
+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 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.
+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.

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dependency count

4

decreased by-50%

Number of low quality alerts

0

decreased by-100%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

6282

decreased by-93.52%

Number of package files

3

decreased by-85.71%

Lines of code

68

decreased by-97.73%

Number of lines in readme file

100

decreased by-80.51%

Dependency changes

• + Addedatob@2.1.2(transitive)

• + Addedcss@2.2.4(transitive)

• + Addeddecode-uri-component@0.2.2(transitive)

• + Addedinherits@2.0.4(transitive)

• + Addedmime@1.6.0(transitive)

• + Addedresolve-url@0.2.1(transitive)

• + Addedsource-map@0.6.1(transitive)

• + Addedsource-map-resolve@0.5.3(transitive)

• + Addedsource-map-url@0.4.1(transitive)

• + Addedurix@0.1.0(transitive)

• - Removedcolor-parser@0.1.0

• - Removedhsb2rgb@1.0.2

• - Removedrework-inherit@~0.2.1

• - Removedrework-visit@1.0.0

• - Removedamdefine@1.0.1(transitive)

• - Removedcolor-parser@0.1.0(transitive)

• - Removedcss@1.6.0(transitive)

• - Removedcss-parse@1.7.0(transitive)

• - Removedcss-stringify@1.4.1(transitive)

• - Removedhsb2rgb@1.0.2(transitive)

• - Removedmime@1.2.11(transitive)

• - Removedrework-inherit@0.2.3(transitive)

• - Removedrework-visit@1.0.0(transitive)

• - Removedsource-map@0.1.43(transitive)

• Updatedconvert-source-map@^0.3.3

• Updatedcss@^2.0.0

• Updatedmime@^1.2.11