├── .gitignore ├── .travis.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── index.js ├── package.json └── test ├── fixtures ├── file.css ├── foo.css └── index.js ├── index.js └── output └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | test/output/bundle.js* 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # 1.0.1 - 2015-02-13 2 | 3 | - Fixed: saving a `@import`ed css file trigger a webpack build 4 | 5 | # 1.0.0 - 2015-02-06 6 | 7 | - Changed: upgrade to cssnext 1.x 8 | 9 | # 0.2.0 - 2014-12-24 10 | 11 | - Added: improved source maps support (thanks @thetalecrafter) 12 | 13 | # 0.1.1 - 2014-12-02 14 | 15 | - Code simplification 16 | 17 | # 0.1.0 - 2014-11-28 18 | 19 | ✨ Initial release 20 | 21 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Putain de Code ! 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # DEPRECATED. Use postcss-loader instead. 2 | 3 | --- 4 | 5 | # cssnext-loader [![Build Status](http://img.shields.io/travis/cssnext/cssnext-loader.svg)](https://travis-ci.org/cssnext/cssnext-loader) 6 | 7 | > a webpack loader for cssnext 8 | 9 | **Issues with the output should be reported on [cssnext issue tracker](https://github.com/cssnext/cssnext/issues).** 10 | 11 | ## Install 12 | 13 | ```console 14 | $ npm install cssnext-loader 15 | ``` 16 | 17 | ## Usage 18 | 19 | Add a cssnext section in your `webpack.config.js` 20 | 21 | ```javascript 22 | module.exports = { 23 | entry: "path/to/entry", 24 | output: { 25 | path: "path/to/output/", 26 | filename: "bundle.js" 27 | }, 28 | cssnext: { 29 | browsers: "last 2 versions", 30 | } 31 | } 32 | ``` 33 | 34 | You can configure webpack so that it always parses CSS files like this : 35 | 36 | ```javascript 37 | module: { 38 | loaders: [ 39 | { 40 | test: /\.css$/, 41 | loader: "style-loader!css-loader!cssnext-loader" 42 | } 43 | ] 44 | } 45 | ``` 46 | 47 | Or, for a direct usage, in your JavaScript files : 48 | 49 | ```javascript 50 | var css = require("style-loader!css-loader!cssnext-loader!../..!./file.css") 51 | ``` 52 | 53 | ### Options 54 | 55 | Options are directly passed to cssnext, so checkout [cssnext options](http://cssnext.io/usage/) directly. 56 | 57 | _Note: some options are by default automatically specified._ 58 | 59 | - `from` 60 | - `to` 61 | - `sourcemap` (webpack `sourceMap`) 62 | - `compress` (webpack `minimize`) 63 | 64 | --- 65 | 66 | ## [Changelog](CHANGELOG.md) 67 | 68 | ## [License](LICENSE) 69 | 70 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var cssnext = require("cssnext") 2 | var assign = require("object-assign") 3 | var loaderUtils = require("loader-utils") 4 | 5 | function defaultOptions(context, map){ 6 | var options = {} 7 | options.from = loaderUtils.getRemainingRequest(context) 8 | options.to = loaderUtils.getRemainingRequest(context) 9 | if (context.sourceMap) { 10 | options.map = { 11 | inline: false, 12 | annotation: false, 13 | prev: map 14 | } 15 | } 16 | options.compress = context.minimize 17 | return options 18 | } 19 | 20 | function cssnextLoader(contents, map){ 21 | this.cacheable() 22 | var options = assign({}, defaultOptions(this, map), this.options.cssnext) 23 | options.features = assign({}, this.options.cssnext ? this.options.cssnext.features : null) 24 | options.import = assign({}, options.import || null) 25 | options.import.onImport = function(files){ 26 | files.forEach(this.addDependency) 27 | }.bind(this) 28 | try { 29 | var result = cssnext(contents, options) 30 | if (result.css) { 31 | this.callback(null, result.css, result.map) 32 | } else { 33 | return result 34 | } 35 | } catch(err) { 36 | this.emitError(err) 37 | } 38 | } 39 | 40 | module.exports = cssnextLoader 41 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cssnext-loader", 3 | "version": "1.0.1", 4 | "description": "webpack loader for cssnext", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "npm install && npm test", 8 | "test": "tape test/**.js" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/cssnext/cssnext-loader.git" 13 | }, 14 | "keywords": [ 15 | "webpack", 16 | "cssnext", 17 | "css", 18 | "loader" 19 | ], 20 | "author": "bloodyowl", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/cssnext/cssnext-loader/issues" 24 | }, 25 | "homepage": "https://github.com/cssnext/cssnext-loader", 26 | "dependencies": { 27 | "cssnext": "^1.0.0", 28 | "loader-utils": "^0.2.5", 29 | "object-assign": "^2.0.0" 30 | }, 31 | "devDependencies": { 32 | "css-loader": "^0.9.0", 33 | "style-loader": "^0.8.2", 34 | "tape": "^3.0.3", 35 | "webpack": "^1.4.13" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /test/fixtures/file.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: var(--foo); 3 | } 4 | 5 | @import "./foo.css"; 6 | -------------------------------------------------------------------------------- /test/fixtures/foo.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --foo: red; 3 | } 4 | -------------------------------------------------------------------------------- /test/fixtures/index.js: -------------------------------------------------------------------------------- 1 | var css = require("style-loader!css-loader!../..!./file.css") 2 | 3 | module.exports = css 4 | -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | var webpack = require("webpack") 2 | var path = require("path") 3 | var tape = require("tape") 4 | var fs = require("fs") 5 | 6 | tape("cssnext-loader", function(test){ 7 | webpack({ 8 | entry: "./test/fixtures/index.js", 9 | output: { 10 | path: "./test/output/", 11 | filename: "bundle.js" 12 | }, 13 | cssnext: { 14 | import: { 15 | path: ["test/fixtures/"] 16 | } 17 | } 18 | }, function(err, stat){ 19 | var file = "" 20 | fs.createReadStream("test/output/bundle.js") 21 | .on("data", function(chunk){ 22 | file += chunk 23 | }) 24 | .on("end", function(){ 25 | test.ok(/color\s*:\s*red/.test(file), "css transformed") 26 | test.notOk(/# sourceMappingURL=.*\s*$/.test(file), "source map annotation not added") 27 | test.end() 28 | }) 29 | }) 30 | }) 31 | 32 | tape("cssnext-loader source maps", function(test){ 33 | webpack({ 34 | entry: "./test/fixtures/index.js", 35 | output: { 36 | path: "./test/output/", 37 | filename: "bundle.js" 38 | }, 39 | debug: true, 40 | devtool: 'source-map', 41 | cssnext: { 42 | import: { 43 | path: ["test/fixtures/"] 44 | } 45 | } 46 | }, function(err, stat){ 47 | var file = "" 48 | test.plan(3) 49 | fs.createReadStream("test/output/bundle.js") 50 | .on("data", function(chunk){ 51 | file += chunk 52 | }) 53 | .on("end", function(){ 54 | test.ok(/color\s*:\s*red/.test(file), "css transformed") 55 | test.ok(/# sourceMappingURL=.*\s*$/.test(file), "source map annotation added") 56 | }) 57 | fs.exists("test/output/bundle.js.map", function(exists){ 58 | test.ok(exists, "source map exists") 59 | }) 60 | }) 61 | }) 62 | -------------------------------------------------------------------------------- /test/output/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | foo 8 | 9 | 10 | 11 | --------------------------------------------------------------------------------