├── .gitignore ├── .travis.yml ├── README.md ├── example ├── index.js └── package.json ├── index.js ├── package.json └── test ├── index.js └── stubs ├── .postcssrc.js ├── dep.css └── postcss-plugin.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log* 3 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "stable" 4 | - "10" 5 | - "8" 6 | - "6" 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # sheetify-postcss 2 | 3 | postcss transform for sheetify, use all the plugins! 4 | 5 | ```shell 6 | npm install --save sheetify-postcss 7 | ``` 8 | 9 | ## usage 10 | 11 | ### programmatic 12 | 13 | ```js 14 | const sheetify = require('sheetify') 15 | const path = require('path') 16 | 17 | const opts = { 18 | transform: [ 19 | [ 20 | 'sheetify-postcss', { 21 | plugins: [ 22 | require('postcss-color-function') 23 | ] 24 | } 25 | ] 26 | ], 27 | basedir: __dirname 28 | } 29 | 30 | browserify('./entry') 31 | .transform(sheetify, opts) 32 | .bundle() 33 | .pipe(process.stdout) 34 | ``` 35 | 36 | ### with `package.json` 37 | 38 | add to your `package.json` `browserify.transform` field: 39 | 40 | ```json 41 | { 42 | "browserify": { 43 | "transform": [ 44 | [ 45 | "sheetify", 46 | { 47 | "transform": [ 48 | [ 49 | "sheetify-postcss", 50 | { 51 | "plugins": [ 52 | "postcss-color-function" 53 | ] 54 | } 55 | ] 56 | ] 57 | } 58 | ] 59 | ] 60 | } 61 | } 62 | ``` 63 | 64 | ### using `.postcssrc` 65 | 66 | Options and plugins can be defined using a config file. Uses [postcss-load-config](https://github.com/michael-ciniawsky/postcss-load-config) which supports `postcss` field in `package.json`, an external JSON or YAML (`.postcssrc`) file as well as JS (`.postcssrc.js` and `postcss.config.js`) file format. 67 | 68 | ```javascript 69 | // .postcssrc.js 70 | module.exports = function (ctx) { 71 | var plugins = [require('postcss-color-function')] 72 | 73 | if (ctx.env !== 'development') { 74 | plugins.push(require('autoprefixer')) 75 | } 76 | 77 | return { 78 | map: ctx.env === 'development' ? 'inline' : false 79 | plugins: plugins 80 | } 81 | } 82 | ``` 83 | 84 | ## license 85 | 86 | The Apache License 87 | 88 | Copyright © 2016 Michael Williams 89 | 90 | Licensed under the Apache License, Version 2.0 (the "License"); 91 | you may not use this file except in compliance with the License. 92 | You may obtain a copy of the License at 93 | 94 | http://www.apache.org/licenses/LICENSE-2.0 95 | 96 | Unless required by applicable law or agreed to in writing, software 97 | distributed under the License is distributed on an "AS IS" BASIS, 98 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 99 | See the License for the specific language governing permissions and 100 | limitations under the License. 101 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | const css = require('sheetify') 2 | 3 | const prefix = css` 4 | :host { 5 | width: 100%; 6 | background: color(red a(90%)) 7 | } 8 | ` 9 | 10 | console.log('prefix', prefix) 11 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "browserify": { 3 | "transform": [ 4 | [ 5 | "sheetify/transform", 6 | { 7 | "use": [ 8 | [ 9 | ".", 10 | { 11 | "plugins": [ 12 | "postcss-color-function" 13 | ] 14 | } 15 | ] 16 | ] 17 | } 18 | ] 19 | ] 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const defined = require('defined') 2 | const postcss = require('postcss') 3 | const extend = require('xtend') 4 | const resolve = require('resolve') 5 | const postcssrc = require('postcss-load-config') 6 | 7 | module.exports = transform 8 | 9 | function transform (filename, source, options, done) { 10 | options = defined(options, {}) 11 | 12 | const basedir = options.basedir 13 | 14 | const plugins = defined(options.plugins, []) 15 | .map(plugin => { 16 | if (typeof plugin === 'string') { 17 | plugin = [plugin] 18 | } 19 | 20 | return { 21 | path: resolve.sync(plugin[0], { basedir }), 22 | options: plugin[1] 23 | } 24 | }) 25 | .map(plugin => require(plugin.path)(plugin.options)) 26 | 27 | const ctx = extend({ 28 | sourcemap: true, 29 | from: filename, 30 | messages: { 31 | browser: true, 32 | console: false 33 | } 34 | }, options) 35 | 36 | delete ctx.plugins 37 | 38 | postcssrc(ctx, basedir).then(compile, function () { 39 | return compile({ options: ctx }) 40 | }).then(function (result) { 41 | done(null, result) 42 | }, done) 43 | 44 | function compile (config) { 45 | return postcss(plugins.concat(config.plugins).filter(Boolean)) 46 | .process(source, config.options) 47 | .then(function (result) { 48 | // Collect imported files for watchify 49 | const files = [filename] 50 | result.messages.forEach(function (msg) { 51 | if (msg.type === 'dependency') { 52 | files.push(msg.file) 53 | } 54 | }) 55 | 56 | return { 57 | css: result.css, 58 | files: files 59 | } 60 | }) 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sheetify-postcss", 3 | "version": "2.0.0", 4 | "description": "postcss transform for sheetify, use all the plugins!", 5 | "main": "index.js", 6 | "scripts": { 7 | "test:unit": "tape test/*.js", 8 | "test:deps": "dependency-check . && dependency-check . --extra --no-dev", 9 | "test:lint": "standard", 10 | "test": "npm-run-all -p test:*", 11 | "example": "browserify example" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/stackcss/sheetify-postcss.git" 16 | }, 17 | "keywords": [], 18 | "author": "Mikey (http://dinosaur.is)", 19 | "license": "Apache-2.0", 20 | "bugs": { 21 | "url": "https://github.com/stackcss/sheetify-postcss/issues" 22 | }, 23 | "homepage": "https://github.com/stackcss/sheetify-postcss#readme", 24 | "devDependencies": { 25 | "browserify": "^16.0.0", 26 | "dependency-check": "^3.4.1", 27 | "npm-run-all": "^4.1.5", 28 | "postcss-color-function": "^4.0.1", 29 | "postcss-import": "^12.0.1", 30 | "pull-test": "^1.2.3", 31 | "sheetify": "^7.2.0", 32 | "standard": "^13.0.2", 33 | "tape": "^4.11.0" 34 | }, 35 | "dependencies": { 36 | "defined": "^1.0.0", 37 | "postcss": "^7.0.17", 38 | "postcss-load-config": "^2.1.0", 39 | "resolve": "^1.11.1", 40 | "xtend": "^4.0.2" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const test = require('tape') 3 | const sheetifyPostcss = require('../') 4 | 5 | test(function (t) { 6 | t.test('module should work with postcss plugins without options', function (t) { 7 | t.plan(2) 8 | 9 | sheetifyPostcss('test.css', '.rule {}', { basedir: __dirname, plugins: ['./stubs/postcss-plugin'] }, (err, result) => { 10 | t.equal(err, null) 11 | t.equal(result.css, '.ok {}') 12 | }) 13 | }) 14 | 15 | t.test('module should work with postcss plugins and their options', function (t) { 16 | t.plan(2) 17 | 18 | sheetifyPostcss('test.css', '.rule {}', { basedir: __dirname, plugins: [['./stubs/postcss-plugin', { has: true }]] }, (err, result) => { 19 | t.equal(err, null) 20 | t.equal(result.css, '.ok-with-options {}') 21 | }) 22 | }) 23 | 24 | t.test('module should respect postcssrc config file', function (t) { 25 | t.plan(2) 26 | 27 | sheetifyPostcss('test.css', '.rule {}', { basedir: path.join(__dirname, 'stubs') }, (err, result) => { 28 | t.equal(err, null) 29 | t.equal(result.css, '.ok-with-postcssrc {}') 30 | }) 31 | }) 32 | 33 | t.test('should report imported files if postcss-import is used', function (t) { 34 | t.plan(3) 35 | 36 | sheetifyPostcss(path.join(__dirname, 'test.css'), '@import "./stubs/dep.css"', { basedir: __dirname, plugins: ['postcss-import'] }, (err, result) => { 37 | t.equal(err, null) 38 | t.equal(result.css, '.dependency {}') 39 | t.deepEqual(result.files, [ 40 | path.join(__dirname, 'test.css'), 41 | path.join(__dirname, 'stubs/dep.css') 42 | ]) 43 | }) 44 | }) 45 | }) 46 | -------------------------------------------------------------------------------- /test/stubs/.postcssrc.js: -------------------------------------------------------------------------------- 1 | var postcss = require('postcss') 2 | 3 | var plugin = postcss.plugin('postcss-plugin', function postcssPlugin () { 4 | return function (root, result) { 5 | root.walkRules('.rule', rule => { 6 | rule.replaceWith(postcss.rule({ selector: '.ok-with-postcssrc' })) 7 | }) 8 | } 9 | }) 10 | 11 | module.exports = { 12 | plugins: [plugin] 13 | } 14 | -------------------------------------------------------------------------------- /test/stubs/dep.css: -------------------------------------------------------------------------------- 1 | .dependency {} 2 | -------------------------------------------------------------------------------- /test/stubs/postcss-plugin.js: -------------------------------------------------------------------------------- 1 | var postcss = require('postcss') 2 | 3 | module.exports = postcss.plugin('postcss-plugin', function postcssPlugin (options) { 4 | options = options || {} 5 | 6 | return function (root, result) { 7 | root.walkRules('.rule', rule => { 8 | rule.replaceWith(postcss.rule({ selector: options.has ? '.ok-with-options' : '.ok' })) 9 | }) 10 | } 11 | }) 12 | --------------------------------------------------------------------------------