├── .gitignore ├── .jshintrc ├── .travis.yml ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── index.js ├── package.json └── test ├── fixtures ├── expected.css ├── import.css └── original.css └── test.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | test/tmp 3 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "es5": true, 4 | "esnext": true, 5 | "bitwise": false, 6 | "curly": false, 7 | "eqeqeq": true, 8 | "eqnull": true, 9 | "immed": true, 10 | "indent": 2, 11 | "latedef": false, 12 | "laxcomma": true, 13 | "newcap": true, 14 | "noarg": true, 15 | "undef": true, 16 | "strict": true, 17 | "trailing": true, 18 | "smarttabs": true, 19 | "white": true, 20 | "predef": [ 21 | "describe", 22 | "it" 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "0.10" 4 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | === HEAD 2 | 3 | === 4.0.0 (July 1, 2014) 4 | 5 | * Update 'rework-calc' to 1.x.x. 6 | * Update 'rework-suit-conformance' to 0.4.x. 7 | 8 | === 3.1.0 (June 24, 2014) 9 | 10 | * Update 'rework-npm' to 1.x.x. 11 | 12 | === 3.0.0 (June 20, 2014) 13 | 14 | * Support passing of `options`. 15 | * Add 'rework-ie-limits'. 16 | * Add 'rework-npm'. 17 | * Add 'rework-suit-conformance'. 18 | * Add 'rework-custom-media' to support custom media queries. 19 | * Update 'rework-opacity' to 0.2.x. 20 | * Update 'rework-vars' to 3.x.x. 21 | * Update 'rework' to 1.x.x. 22 | 23 | === 2.0.0 (April 21, 2014) 24 | 25 | * Update 'rework-vars' to 3.0.x. 26 | 27 | === 1.0.0 (February 6, 2014) 28 | 29 | * Focus the module on being an optionated bundle of Rework plugins. 30 | * Remove 'autoprefixer' as it's no longer available as a Rework plugin. 31 | 32 | === 0.5.0 (January 3, 2014) 33 | 34 | * Rename the 'compile' method to 'process'. 35 | * Use 'rework-mixin-opacity' to transform 'opacity'. 36 | 37 | === 0.4.1 (December 18, 2013) 38 | 39 | * Update 'autoprefixer' to 0.8.20131213 40 | 41 | === 0.4.0 (December 18, 2013) 42 | 43 | * Add 'rework-calc'. 44 | * Update 'rework-vars' to 2.0.x. 45 | 46 | === 0.3.0 (December 1, 2013) 47 | 48 | * Update 'rework-vars' to 1.1.0. 49 | 50 | === 0.2.0 (November 21, 2013) 51 | 52 | * Support use as a Rework plugin. 53 | * Change the input from a file path to a String. 54 | 55 | === 0.1.1 (November 21, 2013) 56 | 57 | * Simplify IE 8 opacity declaration. 58 | * Fix creation of debugging `compiled.css` file. 59 | 60 | === 0.1.0 (November 21, 2013) 61 | 62 | * Initial release. 63 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) Nicolas Gallagher 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of 4 | this software and associated documentation files (the "Software"), to deal in 5 | the Software without restriction, including without limitation the rights to 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 7 | of the Software, and to permit persons to whom the Software is furnished to do 8 | so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # rework-suit (DEPRECATED) 2 | 3 | **Use the [suitcss-preprocessor](https://github.com/suitcss/preprocessor) which now makes use of [postcss](https://github.com/postcss/postcss) directly.** 4 | 5 | [![Build Status](https://secure.travis-ci.org/suitcss/rework-suit.png?branch=master)](http://travis-ci.org/suitcss/rework-suit) 6 | 7 | A [Rework](https://github.com/reworkcss/rework) plugin for use with 8 | [SUIT CSS](https://github.com/suitcss/suit). 9 | 10 | ## Installation 11 | 12 | Install with npm: 13 | 14 | ``` 15 | npm install --save-dev rework-suit 16 | ``` 17 | 18 | ## Use 19 | 20 | As a Rework plugin: 21 | 22 | ```js 23 | var css = fs.readFileSync('build/build.css', 'utf8').toString(); 24 | 25 | var processed = rework(css) 26 | .use(suit(options)) 27 | .toString(); 28 | ``` 29 | 30 | Where `options` has properties `alias`, `root`, and `shim` corresponding to the 31 | options available in [rework-npm](https://github.com/reworkcss/rework-npm). 32 | 33 | ## Features 34 | 35 | * [rework-vars](https://github.com/reworkcss/rework-vars): use [W3C-style CSS Variables](http://www.w3.org/TR/css-variables/). 36 | * [rework-custom-media](https://github.com/reworkcss/rework-custom-media): use [W3C-style CSS Custom Media Queries](http://dev.w3.org/csswg/mediaqueries/#custom-mq). 37 | * [rework-npm](https://github.com/reworkcss/rework-npm): an `@import` inliner. 38 | * [rework-calc](https://github.com/reworkcss/rework-calc): resolve basic `calc()` expressions. 39 | * [rework-suit-conformance](https://github.com/suitcss/rework-suit-conformance): SUIT CSS conformance checks on imported files. 40 | * [rework-ie-limits](https://github.com/reworkcss/rework-ie-limits): IE selector limit check. 41 | 42 | Original: 43 | 44 | ```css 45 | @import "normalize.css"; 46 | 47 | @custom-media --narrow-viewport all and (min-width:300px); 48 | 49 | :root { 50 | --color: green; 51 | --width: 100px; 52 | } 53 | 54 | @media (--narrow-viewport) { 55 | .example { 56 | /* simple variable */ 57 | color: var(--color); 58 | /* variable with fallback */ 59 | outline: var(--outline, 1px solid red); 60 | /* calc */ 61 | width: calc(var(--width) * 2); 62 | } 63 | } 64 | ``` 65 | 66 | yields: 67 | 68 | ```css 69 | /* …inlined normalize.css source code… */ 70 | 71 | @media all and (min-width:300px) { 72 | .example { 73 | /* simple variable */ 74 | color: green; 75 | /* variable with fallback */ 76 | outline: 1px solid red; 77 | /* calc */ 78 | width: 200px; 79 | } 80 | } 81 | ``` 82 | 83 | ## Testing 84 | 85 | Install all dependencies and run the tests: 86 | 87 | ``` 88 | npm install && npm test 89 | ``` 90 | 91 | Watch and re-run the tests: 92 | 93 | ``` 94 | npm run watch 95 | ``` 96 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * Module dependencies 5 | */ 6 | 7 | var calc = require('rework-calc'); 8 | var conformance = require('rework-suit-conformance'); 9 | var customMedia = require('rework-custom-media'); 10 | var inliner = require('rework-npm'); 11 | var limits = require('rework-ie-limits'); 12 | var rework = require('rework'); 13 | var vars = require('rework-vars'); 14 | 15 | /** 16 | * Module exports 17 | */ 18 | 19 | module.exports = suit; 20 | 21 | /** 22 | * Apply rework plugins to a rework instance; export as a rework plugin 23 | * 24 | * @param {String} ast Rework AST 25 | * @param {Object} reworkObj Rework instance 26 | */ 27 | 28 | function suit(options) { 29 | options = options || {}; 30 | // for backwards compatibility with rework-npm < 1.0.0 31 | options.root = options.root || options.dir; 32 | 33 | return function (ast, reworkObj) { 34 | reworkObj 35 | // inline imports 36 | .use(inliner({ 37 | alias: options.alias, 38 | prefilter: function (css) { 39 | // per-file conformance checks 40 | return rework(css).use(conformance).toString(); 41 | }, 42 | root: options.root, 43 | shim: options.shim, 44 | })) 45 | // check if the number of selectors exceeds the IE limit 46 | .use(limits) 47 | // custom media queries 48 | .use(customMedia) 49 | // variables 50 | .use(vars()) 51 | // calc 52 | .use(calc); 53 | }; 54 | } 55 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rework-suit", 3 | "description": "Rework plugin for SUIT CSS", 4 | "version": "4.0.0", 5 | "main": "index.js", 6 | "files": [ 7 | "index.js" 8 | ], 9 | "dependencies": { 10 | "rework": "^1.0.0", 11 | "rework-calc": "^1.0.0", 12 | "rework-custom-media": "~0.1.0", 13 | "rework-ie-limits": "~0.1.1", 14 | "rework-npm": "^1.0.0", 15 | "rework-suit-conformance": "~0.4.0", 16 | "rework-vars": "^3.1.1" 17 | }, 18 | "devDependencies": { 19 | "mocha": "~1.14.0", 20 | "suitcss-utils-align": "0.1.1" 21 | }, 22 | "scripts": { 23 | "test": "mocha --no-colors", 24 | "watch": "mocha --watch --reporter spec" 25 | }, 26 | "repository": { 27 | "type": "git", 28 | "url": "git://github.com/suitcss/rework-suit.git" 29 | }, 30 | "author": "Nicolas Gallagher", 31 | "license": "MIT" 32 | } 33 | -------------------------------------------------------------------------------- /test/fixtures/expected.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Test for import 3 | */ 4 | 5 | .imported { 6 | padding: 0; 7 | } 8 | 9 | /** 10 | * Vertical alignment utilities 11 | * Depends on an appropriate `display` value. 12 | */ 13 | 14 | .u-alignBaseline { 15 | vertical-align: baseline !important; 16 | } 17 | 18 | .u-alignBottom { 19 | vertical-align: bottom !important; 20 | } 21 | 22 | .u-alignMiddle { 23 | vertical-align: middle !important; 24 | } 25 | 26 | .u-alignTop { 27 | vertical-align: top !important; 28 | } 29 | 30 | /** 31 | * Test for custom-media 32 | */ 33 | 34 | @media (min-width:400px) { 35 | .TestMedia { 36 | color: red; 37 | } 38 | } 39 | 40 | @media screen and (min-width:800px) { 41 | .TestMedia { 42 | color: green; 43 | } 44 | } 45 | 46 | /** 47 | * Test for variables 48 | */ 49 | 50 | 51 | 52 | .TestVariables { 53 | border: 5px solid red; 54 | color: #069; 55 | outline: 1px solid rgba(0, 0, 255, 0.5); 56 | } 57 | 58 | /** 59 | * Test for calc 60 | */ 61 | 62 | .TestCalc { 63 | width: 200px; 64 | } 65 | -------------------------------------------------------------------------------- /test/fixtures/import.css: -------------------------------------------------------------------------------- 1 | .imported { 2 | padding: 0; 3 | } 4 | -------------------------------------------------------------------------------- /test/fixtures/original.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Test for import 3 | */ 4 | 5 | @import "./import"; 6 | @import "suitcss-utils-align"; 7 | 8 | /** 9 | * Test for custom-media 10 | */ 11 | 12 | @custom-media --small-viewport (min-width:400px); 13 | @custom-media --large-viewport screen and (min-width:800px); 14 | 15 | @media (--small-viewport) { 16 | .TestMedia { 17 | color: red; 18 | } 19 | } 20 | 21 | @media (--large-viewport) { 22 | .TestMedia { 23 | color: green; 24 | } 25 | } 26 | 27 | /** 28 | * Test for variables 29 | */ 30 | 31 | :root { 32 | --border: 5px solid red; 33 | --color: #069; 34 | --width: 100px; 35 | } 36 | 37 | .TestVariables { 38 | border: var(--border, 1px solid rgba(255, 0, 0, 0.5)); 39 | color: var(--color); 40 | outline: var(--outline, 1px solid rgba(0, 0, 255, 0.5)); 41 | } 42 | 43 | /** 44 | * Test for calc 45 | */ 46 | 47 | .TestCalc { 48 | width: calc(var(--width) * 2); 49 | } 50 | -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var assert = require('assert'); 4 | var fs = require('fs'); 5 | var rework = require('rework'); 6 | var suit = require('../index'); 7 | 8 | describe('suit()', function () { 9 | var expected = fs.readFileSync('test/fixtures/expected.css', 'utf-8').toString().trim(); 10 | var original = fs.readFileSync('test/fixtures/original.css', 'utf-8').toString().trim(); 11 | var options = {}; 12 | 13 | it('generates the expected output', function () { 14 | var actual = rework(original, { source: 'test/fixtures/expected.css' }) 15 | .use(suit(options)) 16 | .toString() 17 | .trim(); 18 | 19 | assert.equal(actual, expected); 20 | }); 21 | }); 22 | --------------------------------------------------------------------------------