Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
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.
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);
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 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 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.
CSS manipulations built on 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.
with node:
$ npm install rework
or in the browser with component:
$ component install visionmedia/rework
or in the browser with the stand-alone build ./rework.js referencing the rework
global.
Return a new Rework
instance for the given string of css
.
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.
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 })
The following plugins are bundled with rework
:
extend: selector
supportrgba(#fc0, .5)
height: @width
etcurl()
s with a given functionAdd support for extending existing rulesets:
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:
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:
%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:
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.
Please delegate any issues with .extend()
to that repository instead of rework.
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.
Adds at-2x
keyword to background
and background-image
declarations to add retina support for images.
.logo {
background-image: url('component.png') at-2x;
width: 289px;
height: 113px
}
yields:
.logo {
background-image: url('component.png');
width: 289px;
height: 113px
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
.logo {
background-image: url("component@2x.png");
background-size: contain
}
}
Prefix selectors with the given string
.
h1 {
font-weight: bold;
}
a {
text-decoration: none;
color: #ddd;
}
yields:
#dialog h1 {
font-weight: bold;
}
#dialog a {
text-decoration: none;
color: #ddd;
}
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.
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:
h1 {
overflow: ellipsis;
}
yields:
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:
.myclass {
display: -webkit-flex;
display: -moz-flex;
display: -webkit-flexbox;
display: flex;
}
Add user-defined CSS functions.
For example create black(0.5)
shortcut, to replace
long rgba(0, 0, 0, 0.5)
.
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.
input {
box-shadow: 0 0 5px black(0.7);
}
yields:
input {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
}
Nested functions works well too:
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()
input {
top: divide(subtract(30, floor(multiply(20, 10))), 2);
}
Would yield:
input {
top: -85;
}
Add property reference support.
button {
width: 120px;
}
button.round {
width: 50px;
height: @width;
line-height: @height;
background-size: @width @height;
}
yields:
button {
width: 120px
}
button.round {
width: 50px;
height: 50px;
line-height: 50px;
background-size: 50px 50px
}
Add color manipulation helpers such as rgba(#fc0, .5)
.
button {
background: rgba(#ccc, .5);
}
yields:
button {
background: rgba(204, 204, 204, .5);
}
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.
var css = rework(read(css))
.use(rework.inline('images/', 'fonts/'))
.toString()
.logo {
background: inline(icons/logo.png);
}
yields:
.logo {
background: url("data:image/png;base64,iVBORw0…");
}
Map url()
calls. Replace all url()
s using a given function.
var css = rework(read(css))
.use(rework.url(function(url){
return 'http://example.com' + url;
}))
.toString()
body {
background: url(/images/bg.png);
}
yields:
body {
background: url(http://example.com/images/bg.png);
}
(The MIT License)
Copyright (c) 2012 - 2013 TJ Holowaychuk tj@vision-media.ca
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.
FAQs
Plugin framework for CSS preprocessing
We found that rework demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.