What is rework?
Rework is a plugin framework for CSS preprocessing. It allows you to manipulate CSS using JavaScript, providing a way to transform stylesheets with various plugins.
What are rework's main functionalities?
CSS Parsing
Rework can parse CSS strings into an Abstract Syntax Tree (AST), which can then be manipulated programmatically.
const rework = require('rework');
const css = 'body { color: red; }';
const ast = rework(css).toString();
console.log(ast);
CSS Transformation
Rework allows you to transform CSS using plugins. For example, the rework-npm plugin lets you import CSS from npm packages.
const rework = require('rework');
const reworkNPM = require('rework-npm');
const css = '@import "normalize.css";';
const output = rework(css).use(reworkNPM()).toString();
console.log(output);
Vendor Prefixing
Rework can automatically add vendor prefixes to CSS properties using plugins like rework-plugin-prefix.
const rework = require('rework');
const reworkPrefix = require('rework-plugin-prefix');
const css = 'body { display: flex; }';
const output = rework(css).use(reworkPrefix('webkit')).toString();
console.log(output);
Other packages similar to rework
postcss
PostCSS is a tool for transforming CSS with JavaScript plugins. It is more modern and widely used compared to Rework, offering a larger ecosystem of plugins and better performance.
less
Less is a CSS pre-processor that extends the CSS language, adding features like variables, mixins, and functions. Unlike Rework, Less is a full-fledged pre-processor rather than a plugin framework.
sass
Sass is another CSS pre-processor that provides advanced features like variables, nested rules, and mixins. Sass is more feature-rich and has a larger community compared to Rework.
rework
CSS manipulations built on css
, allowing
you to automate vendor prefixing, create your own properties, inline images,
anything you can imagine!
Please refer to css
for AST documentation
and to report parser/stringifier issues.
Installation
$ npm install rework
Usage
var rework = require('rework');
var pluginA = require('pluginA');
var pluginB = require('pluginB');
rework('body { font-size: 12px; }', { source: 'source.css' })
.use(pluginA)
.use(pluginB)
.toString({ sourcemap: true })
API
rework(code, [options])
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 root node and the Rework
instance.
Rework#toString([options])
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
Rework has a rich collection of plugins and mixins. Browse all the Rework
plugins available on npm.
Plugins of particular note:
- at2x – serve high resolution images
- calc – resolve simple
calc()
expressions - colors – color helpers like
rgba(#fc0, .5)
- ease – several additional easing functions
- extend –
extend: selector
support - function – user-defined CSS functions
- import – read and inline CSS via
@import
- inline – inline assets as data URIs
- mixin – custom property logic with mixins
- npm - inline CSS via
@import
using node's module resolver - references – property references like
height: @width
- url – rewrite
url()
s with a given function - variables – W3C-style variables
Built with rework
License
(The MIT License)
Copyright (c) 2012–2013 TJ Holowaychuk tj@vision-media.ca
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:
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.