├── .gitignore ├── .npmrc ├── .travis.yml ├── CHANGELOG.md ├── README.md ├── fixtures ├── basic-out.css ├── basic.css └── import.css ├── index.js ├── package.json └── test.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | coverage/ 3 | tmp/ 4 | npm-debug.log* 5 | .DS_Store 6 | .nyc_output 7 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | package-lock=false 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "stable" 4 | - "12" 5 | - "10" 6 | - "8" 7 | script: "npm run test:cov" 8 | after_script: "npm i -g codecov.io && cat ./coverage/lcov.info | codecov" 9 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # sheetify-cssnext change log 2 | All notable changes to this project will be documented in this file. 3 | This project adheres to [Semantic Versioning](http://semver.org/). 4 | 5 | ## 3.0.0 6 | * Switch to postcss-preset-env. cssnext is unmaintained. 7 | * Require Node.js 8+. 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # sheetify-cssnext [![stability][0]][1] 2 | [![build status][4]][5] [![test coverage][6]][7] [![js-standard-style][10]][11] 3 | 4 | [postcss-preset-env][12] transform for [sheetify][13]. Use tomorrow's CSS syntax, today. 5 | 6 | ## Installation 7 | ```sh 8 | $ npm install sheetify-cssnext 9 | ``` 10 | 11 | ## Usage 12 | ```js 13 | const sheetify = require('sheetify/stream') 14 | const path = require('path') 15 | 16 | const opts = { 17 | transform: [ [ 'sheetify-cssnext', { sourcemap: false } ] ], 18 | basedir: __dirname 19 | } 20 | 21 | sheetify(path.join(__dirname, 'index.css'), opts) 22 | .pipe(process.stdout) 23 | ``` 24 | 25 | ## See Also 26 | - [postcss-preset-env][12] 27 | - [sheetify][13] 28 | 29 | ## License 30 | [MIT](https://tldrlegal.com/license/mit-license) 31 | 32 | [0]: https://img.shields.io/badge/stability-experimental-orange.svg?style=flat-square 33 | [1]: https://nodejs.org/api/documentation.html#documentation_stability_index 34 | [4]: https://img.shields.io/travis/stackcss/sheetify-cssnext/master.svg?style=flat-square 35 | [5]: https://travis-ci.org/stackcss/sheetify-cssnext 36 | [6]: https://img.shields.io/codecov/c/github/stackcss/sheetify-cssnext/master.svg?style=flat-square 37 | [7]: https://codecov.io/github/stackcss/sheetify-cssnext 38 | [10]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square 39 | [11]: https://github.com/feross/standard 40 | [12]: https://github.com/csstools/postcss-preset-env 41 | [13]: https://github.com/stackcss/sheetify 42 | -------------------------------------------------------------------------------- /fixtures/basic-out.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --mainColor: rgba(18,52,86,0.47059); 3 | } 4 | 5 | body { 6 | color: rgba(18,52,86,0.47059); 7 | color: var(--mainColor); 8 | } 9 | -------------------------------------------------------------------------------- /fixtures/basic.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --mainColor: #12345678; 3 | } 4 | 5 | body { 6 | color: var(--mainColor); 7 | } 8 | -------------------------------------------------------------------------------- /fixtures/import.css: -------------------------------------------------------------------------------- 1 | @import './basic.css'; 2 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const postcss = require('postcss') 2 | const cssnext = require('postcss-preset-env') 3 | const imports = require('postcss-import') 4 | const xtend = require('xtend') 5 | 6 | module.exports = transform 7 | 8 | function transform (filename, source, options, done) { 9 | options = xtend(options || {}) 10 | const sourcemap = options.sourcemap 11 | delete options.sourcemap 12 | 13 | const processor = postcss([ 14 | imports(), 15 | cssnext(options) 16 | ]) 17 | 18 | const poptions = xtend({ 19 | map: sourcemap === false ? false : { inline: true }, 20 | from: filename, 21 | messages: { 22 | browser: true, 23 | console: false 24 | } 25 | }, options || {}) 26 | 27 | processor.process(source, poptions).then(function (result) { 28 | // Collect imported files for watchify 29 | const files = [filename] 30 | result.messages.forEach(function (msg) { 31 | if (msg.type === 'dependency') { 32 | files.push(msg.file) 33 | } 34 | }) 35 | 36 | done(null, { 37 | css: result.css, 38 | files: files 39 | }) 40 | }, function (err) { 41 | done(err) 42 | }) 43 | } 44 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sheetify-cssnext", 3 | "version": "3.0.0", 4 | "main": "index.js", 5 | "description": "cssnext transform for sheetify", 6 | "scripts": { 7 | "deps": "dependency-check . && dependency-check . --extra --no-dev", 8 | "test": "standard && npm run deps && NODE_ENV=test node test", 9 | "test:cov": "standard && npm run deps && NODE_ENV=test nyc node test.js" 10 | }, 11 | "repository": "stackcss/sheetify-cssnext", 12 | "keywords": [ 13 | "sheetify", 14 | "cssnext", 15 | "css", 16 | "preload", 17 | "compile", 18 | "polyfill", 19 | "shim", 20 | "stream", 21 | "minimal" 22 | ], 23 | "license": "MIT", 24 | "dependencies": { 25 | "postcss": "^7.0.17", 26 | "postcss-import": "^12.0.1", 27 | "postcss-preset-env": "^6.7.0", 28 | "xtend": "^4.0.0" 29 | }, 30 | "devDependencies": { 31 | "dependency-check": "^2.5.1", 32 | "nyc": "^14.1.1", 33 | "standard": "^14.3.4", 34 | "tape": "^5.0.1" 35 | }, 36 | "engines": { 37 | "node": ">= 8" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /test.js: -------------------------------------------------------------------------------- 1 | const transform = require('./') 2 | const test = require('tape') 3 | const path = require('path') 4 | const fs = require('fs') 5 | 6 | test('basic', function (t) { 7 | t.plan(1) 8 | 9 | const file = path.join(__dirname, 'fixtures/basic.css') 10 | const src = fs.readFileSync(file, 'utf8') 11 | const expected = fs.readFileSync(path.join(__dirname, 'fixtures/basic-out.css'), 'utf8') 12 | 13 | transform(file, src, { 14 | sourcemap: false 15 | }, function (err, actual) { 16 | if (err) return t.error(err) 17 | 18 | t.equal(actual.css, expected, 'output is as expected') 19 | }) 20 | }) 21 | test('import', function (t) { 22 | t.plan(2) 23 | 24 | const file = path.join(__dirname, 'fixtures/import.css') 25 | const src = fs.readFileSync(file, 'utf8') 26 | const expected = fs.readFileSync(path.join(__dirname, 'fixtures/basic-out.css'), 'utf8') 27 | 28 | transform(file, src, { 29 | sourcemap: false 30 | }, function (err, actual) { 31 | if (err) return t.error(err) 32 | 33 | t.equal(actual.css, expected, 'output is as expected') 34 | t.deepEqual(actual.files, [ 35 | file, 36 | path.join(__dirname, 'fixtures/basic.css') 37 | ], 'lists imported files') 38 | }) 39 | }) 40 | --------------------------------------------------------------------------------