Awesome
rework-suit (DEPRECATED)
Use the suitcss-preprocessor which now makes use of postcss directly.
A Rework plugin for use with SUIT CSS.
Installation
Install with npm:
npm install --save-dev rework-suit
Use
As a Rework plugin:
var css = fs.readFileSync('build/build.css', 'utf8').toString();
var processed = rework(css)
.use(suit(options))
.toString();
Where options
has properties alias
, root
, and shim
corresponding to the
options available in rework-npm.
Features
- rework-vars: use W3C-style CSS Variables.
- rework-custom-media: use W3C-style CSS Custom Media Queries.
- rework-npm: an
@import
inliner. - rework-calc: resolve basic
calc()
expressions. - rework-suit-conformance: SUIT CSS conformance checks on imported files.
- rework-ie-limits: IE selector limit check.
Original:
@import "normalize.css";
@custom-media --narrow-viewport all and (min-width:300px);
:root {
--color: green;
--width: 100px;
}
@media (--narrow-viewport) {
.example {
/* simple variable */
color: var(--color);
/* variable with fallback */
outline: var(--outline, 1px solid red);
/* calc */
width: calc(var(--width) * 2);
}
}
yields:
/* …inlined normalize.css source code… */
@media all and (min-width:300px) {
.example {
/* simple variable */
color: green;
/* variable with fallback */
outline: 1px solid red;
/* calc */
width: 200px;
}
}
Testing
Install all dependencies and run the tests:
npm install && npm test
Watch and re-run the tests:
npm run watch