diff --git a/.editorconfig b/.editorconfig index e2cb9700..2229196d 100644 --- a/.editorconfig +++ b/.editorconfig @@ -2,7 +2,7 @@ root = true [*] indent_style = space -indent_size = 4 +indent_size = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true diff --git a/.gitignore b/.gitignore index 8640e6fb..d1413baa 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,15 @@ -node_modules/ +# OS + +.DS_Store +._* + +# NODEJS + npm-debug.log yarn-error.log -build/ + +dmd +jest +coverage +jsdoc-api +node_modules diff --git a/.npmignore b/.npmignore index adb6a25b..61f6bc72 100644 --- a/.npmignore +++ b/.npmignore @@ -1,14 +1,24 @@ +# FILES + +.travis.yml .gitignore .npmignore .editorconfig -node_modules/ +.travis.yml + npm-debug.log -yarn-error.log + yarn.lock +yarn-error.log -build/ -test/ -.travis.yml -gulpfile.js +# DIRECTORIES + +.github + +dmd +test +coverage +jsdoc-api +node_modules diff --git a/.travis.yml b/.travis.yml index 878478bb..5fccdcd4 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,6 +1,13 @@ +cache: + yarn: true + directories: + - node_modules + language: node_js -cache: yarn node_js: - - stable - - "6" - - "4" + - "node" + - 6 + - 4 + +notifications: + email: false diff --git a/LICENSE b/LICENSE index 1ae47a20..c6bb2fc6 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The MIT License (MIT) +License (MIT) -Copyright 2014 Andrey Sitnik +Copyright 2017 Andrey Sitnik Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in diff --git a/README.md b/README.md index f03a3748..32bde615 100644 --- a/README.md +++ b/README.md @@ -1,54 +1,51 @@ -# PostCSS for Webpack [![Build Status][ci-img]][ci] +# PostCSS Loader [![Build Status][ci-img]][ci] + +[ci]: https://travis-ci.org/postcss/postcss-loader +[ci-img]: https://travis-ci.org/postcss/postcss-loader.svg -[PostCSS] loader for [webpack] to postprocesses your CSS with [PostCSS plugins]. - -[PostCSS plugins]: https://github.com/postcss/postcss#plugins -[PostCSS]: https://github.com/postcss/postcss -[webpack]: http://webpack.github.io/ -[ci-img]: https://travis-ci.org/postcss/postcss-loader.svg -[ci]: https://travis-ci.org/postcss/postcss-loader +Loader for [webpack] to process CSS with [PostCSS] + +[PostCSS]: https://github.com/postcss/postcss +[webpack]: http://webpack.js.org/ ## Install -```sh -npm install postcss-loader --save-dev +```bash +npm i -D postcss-loader ``` ## Usage -Create `postcss.config.js`: - +**postcss.config.js** ```js -module.exports = { - plugins: [ - require('postcss-smart-import')({ /* ...options */ }), - require('precss')({ /* ...options */ }), - require('autoprefixer')({ /* ...options */ }) - ] -} +module.exports = (ctx) => ({ + plugins: { + 'postcss-import': {}, + 'autoprefixer': {} + 'cssnano': {} + } +}) ``` You could put different configs in different directories. For example, -global config in `project/postcss.config.js` and override its plugins -in `project/src/legacy/postcss.config.js`. +global config in the root of your project `./postcss.config.js` and override it +in `./src/legacy/postcss.config.js`. -You can read more about common PostCSS config in -[postcss-load-config](https://github.com/michael-ciniawsky/postcss-load-config). +You can read more about common PostCSS Config [here](https://github.com/michael-ciniawsky/postcss-load-config). -Add PostCSS Loader to `webpack.config.js`. Put it after `css-loader` -and `style-loader`. But before `sass-loader`, if you use it. +Add PostCSS Loader to your `webpack.config.js`. Use it standalone or put it **after** `css-loader` and `style-loader`, but **before** other preprocessor loaders e.g `sass-loader|less-loader|stylus-loader`, if you use any. -### Webpack 2 +**webpack.config.js** ```js module.exports = { module: { @@ -57,12 +54,6 @@ module.exports = { test: /\.css$/, use: [ 'style-loader', - { - loader: 'css-loader', - options: { - importLoaders: 1 - } - }, 'postcss-loader' ] } @@ -71,17 +62,16 @@ module.exports = { } ``` -### Webpack 1 - +**webpack.config.js** ```js module.exports = { module: { - loaders: [ + rules: [ { test: /\.css$/, - loaders: [ + use: [ 'style-loader', - 'css-loader?importLoaders=1', + { loader: 'css-loader' options: { importLoaders: 1 } }, 'postcss-loader' ] } @@ -92,86 +82,93 @@ module.exports = { ## Options -### Plugins +We recommend to use `postcss.config.js`, but you can specify options +directly in your `webpack.config.js` aswell. + +|Name|Default|Description| +|:--:|:-----:|:----------| +|`exec`|`undefined`|Enables custom parser support in `CSS-in-JS` context| +|`config`|`undefined`|Sets `postcss.config.js` path| +|`parser`|`undefined`|Sets custom parser| +|`syntax`|`undefined`|Sets custom syntax| +|`stringifier`|`undefined`|Sets custom stringifier| +|`plugins`|`[]`|Sets plugins| +|`sourceMap` |`false`|Enables SourceMaps| -We recommend to use `postcss.config.js`, but also you can specify plugins -directly in webpack config. +### Config -#### Webpack 2 +#### Path +You can manually specify the path to search for `postcss.config.js` with the following setup. This is needed if you store the `postcss.config.js` in a separate e.g `/config` folder. + +Otherwise it is **unnecessary** to specify it. + +**webpack.config.js** ```js -module.exports = { - module: { - rules: [ - { - test: /\.css/, - use: [ - … - { - loader: 'postcss-loader', - options: { - plugins: function () { - return [ - require('precss'), - require('autoprefixer') - ]; - } - } - } - ] - } - ] +{ + loader: 'postcss-loader' + options: { config: { path: 'path/to/postcss.config.js' } } +} +``` + +#### Context + +|Name|Type|Default|Description| +|:--:|:--:|:-----:|:----------| +|`env`|`{String}`|`'development'`|NODE_ENV| +|`file`|`{Object}`|`loader.resourcePath`|extname, dirname, basename| +|`options`|`{Object}`|`{}`|Custom Context| + +PostCSS loader exposes context to the config file, making your `postcss.config.js` dynamic, so can use it to do some real magic ✨ + +**postcss.config.js** +```js +module.exports = ({ file, options, env }) => ({ + parser: file.extname === '.sss' ? 'sugarss' : false + plugins: { + 'postcss-import': { root: file.dirname } + 'postcss-modules': options.modules ? {} : false + 'cssnano': env === 'production' ? { safe: true } : false } +}) +``` + +**webpack.config.js** +```js +{ + loader: 'postcss-loader' + options: { config: { ctx: { modules: true } } } } ``` -#### Webpack 1 +### Plugins +**webpack.config.js** ```js -module.exports = { - module: { - loaders: [ - { - test: /\.css$/, - loaders: [ - … - 'postcss-loader' - ] - } - ] - }, - postcss: () => { - return [ - require('precss'), - require('autoprefixer') - ]; +{ + loader: 'postcss-loader', + options: { + plugins: (ctx) => [ require('postcss-import')({ root: ctx.resourcePath }) ] } } ``` ### Syntaxes -PostCSS can transforms styles in any syntax, not only in CSS. -There are 3 parameters to control syntax: - -* `syntax` accepts module name with `parse` and `stringify` function. -* `parser` accepts module name with input parser function. -* `stringifier` accepts module name with output stringifier function. +|Name|Type|Default|Description| +|:--:|:--:|:-----:|:----------| +|`syntax`|`{String/Function}`|`undefined`|Custom PostCSS Syntax| +|`parser`|`{String/Function}`|`undefined`|Custom PostCSS Parser| +|`stringifier`|`{String/Function}`|`undefined`|Custom PostCSS Stringifier| +**webpack.config.js** ```js -module.exports = { - module: { - loaders: [ - { - test: /\.sss/, - loaders: [ - 'style-loader', - 'css-loader?importLoaders=1', - 'postcss-loader?parser=sugarss' - ] - } - ] - } +{ + test: /\.sss/, + use: [ + 'style-loader', + { loader: 'postcss-loader' options: { parser: 'sugarss' } } + ] } ``` @@ -183,132 +180,154 @@ You can set this `sourceMap` parameter to `inline` value to put source maps into CSS annotation comment: ```js -module.exports = { - module: { - loaders: [ - { - test: '\/.css', - loaders: [ - 'style-loader', - 'css-loader?importLoaders=1', - 'postcss-loader?sourceMap=inline' - ] - } - ] - } +{ + test: /\.css/, + use: [ + 'style-loader', + { loader: 'css-loader' options: { sourceMap: true } }, + { loader: 'postcss-loader' options: { sourceMap: true } }, + { loader: 'sass-loader' options: { sourceMap: true } } + ] } ``` ## Examples +### Stylelint + +**webpack.config.js** +```js +{ + test: /\.css$/, + use: [ + 'style-loader', + { + loader: 'postcss-loader', + options: { + plugins: [ + require('postcss-import')() + require('stylelint')() + ] + } + } + ] +} +``` + ### CSS Modules This loader [cannot be used] with [CSS Modules] out of the box due to the way `css-loader` processes file imports. To make them work properly, either add the css-loader’s [`importLoaders`] option +**webpack.config.js** ```js -… - { - test: /\.css$/, - loaders: [ - 'style-loader', - 'css-loader?modules&importLoaders=1', - 'postcss-loader' - ] - } -… +{ + test: /\.css$/, + use: [ + 'style-loader', + { loader: 'css-loader' options: { modules: true, importLoaders: 1 } }, + 'postcss-loader' + ] +} ``` -or use [postcss-modules] plugin instead of `css-loader`. +or use [postcss-modules] instead of `css-loader`. [`importLoaders`]: https://github.com/webpack/css-loader#importing-and-chained-loaders -[postcss-modules]: https://github.com/outpunk/postcss-modules [cannot be used]: https://github.com/webpack/css-loader/issues/137 [CSS Modules]: https://github.com/webpack/css-loader#css-modules +[postcss-modules]: https://github.com/outpunk/postcss-modules -### JS Styles +### CSS-in-JS If you want to process styles written in JavaScript you can use the [postcss-js] parser. + +[postcss-js]: https://github.com/postcss/postcss-js + ```js -… - { - test: /\.style.js$/, - loaders: [ - 'style-loader', - 'css-loader?modules&importLoaders=1', - 'postcss-loader?parser=postcss-js', - 'babel' - ] - } -… +{ + test: /\.style.js$/, + use: [ + 'style-loader', + { loader: 'postcss-loader', options: { parser: 'postcss-js' } }, + 'babel-loader' + ] +} ``` As result you will be able to write styles as: ```js -import colors from './config/colors' +import colors from './styles/colors' export default { - '.menu': { - color: colors.main, - height: 25, - '&_link': { + '.menu': { + color: colors.main, + height: 25, + '&_link': { color: 'white' } } } ``` -> If you are using Babel >= v6 you need to do the following in order for the setup to work +> :warning: If you are using Babel you need to do the following in order for the setup to work > 1. Add [babel-plugin-add-module-exports] to your configuration > 2. You need to have only one **default** export per style module -If you use JS styles without `postcss-js` parser, you can add `exec` parameter: +If you use JS styles without `postcss-js` parser, you can add the `exec` parameter ```js -… - { - test: /\.style.xyz$/, - loaders: [ - 'style-loader', - 'css-loader?modules&importLoaders=1', - 'postcss-loader?parser=custom-parser&exec' - ] - } -… +{ + test: /\.style.js$/, + use: [ + 'style-loader', + { loader: 'postcss-loader', options: { parser: 'sugarss', exec: true } } + ] +} ``` [postcss-js]: https://github.com/postcss/postcss-js [babel-plugin-add-module-exports]: https://github.com/59naga/babel-plugin-add-module-exports -### Dynamic Config +### [Extract CSS][ExtractPlugin] -PostCSS loader sends a loaded instance to PostCSS common config. -You can use it to do some real magic: +[ExtractPlugin]: https://github.com/webpack-contrib/extract-text-webpack-plugin +**webpack.config.js** ```js -module.exports = function (ctx) { - if (check(ctx.webpack.resourcePath)) { - return { plugins: plugins1 }; - } else { - return { plugins: plugins2 }; - } +const ExtractTextPlugin = require('extract-text-webpack-plugin') + +module.exports = { + module: { + rules: [ + { + test: /\.css$/, + use: ExtractTextPlugin.extract({ + fallback: 'style-loader', + use: [ + { loader: 'postcss-loader', options: { plugins: [...plugins] } } + ] + }) + } + ] + }, + plugins: [ + new ExtractTextPlugin('[name].css') + ] } ``` -### Webpack Events +### webpack Plugin -Webpack provides webpack plugin developers a convenient way -to hook into the build pipeline. The postcss-loader makes use -of this event system to allow building integrated postcss-webpack tools. +Webpack provides webpack plugin developers a convenient way to hook into the build pipeline. The postcss-loader makes use of this event system to allow building integrated postcss-webpack tools. See the [example] implementation. -Event `postcss-loader-before-processing` is fired before processing and allows -to add or remove postcss plugins. +Event `postcss-loader-before-processing` is fired before processing and allows to add or remove PostCSS Plugins. [example]: https://github.com/postcss/postcss-loader/blob/master/test/webpack-plugins/rewrite.js diff --git a/error.js b/error.js deleted file mode 100644 index 12b276bc..00000000 --- a/error.js +++ /dev/null @@ -1,19 +0,0 @@ -function PostCSSLoaderError(error) { - Error.call(this); - Error.captureStackTrace(this, PostCSSLoaderError); - this.name = 'Syntax Error'; - this.error = error.input.source; - this.message = error.reason; - if ( error.line ) { - this.message += ' (' + error.line + ':' + error.column + ')'; - } - if ( error.line && error.input.source ) { - this.message += '\n\n' + error.showSourceCode() + '\n'; - } - this.hideStack = true; -} - -PostCSSLoaderError.prototype = Object.create(Error.prototype); -PostCSSLoaderError.prototype.constructor = PostCSSLoaderError; - -module.exports = PostCSSLoaderError; diff --git a/gulpfile.js b/gulpfile.js deleted file mode 100644 index ba6b6b79..00000000 --- a/gulpfile.js +++ /dev/null @@ -1,44 +0,0 @@ -var gulp = require('gulp'); -var path = require('path'); -var fs = require('fs-extra'); - -var BUILD_CONFIGS = fs.readdirSync(path.join(__dirname, 'test')) - .filter(function (file) { - return file.indexOf('.config.') !== -1; - }).map(function (file) { - return file.replace('.config.js', ''); - }); - -gulp.task('clean', function (done) { - fs.remove(path.join(__dirname, 'build'), done); -}); - -gulp.task('lint', function () { - if ( parseInt(process.versions.node) < 4 ) { - return false; - } - var eslint = require('gulp-eslint'); - return gulp.src(['index.js', 'test/**/*.js', '*.js']) - .pipe(eslint()) - .pipe(eslint.format()) - .pipe(eslint.failAfterError()); -}); - -BUILD_CONFIGS.forEach(function (config) { - gulp.task(config, ['clean'], function () { - var webpack = require('webpack-stream'); - var file = path.join(__dirname, 'test', config + '.config.js'); - return gulp.src('') - .pipe(webpack(require(file))) - .pipe(gulp.dest('build/')); - }); -}); - -gulp.task('build', BUILD_CONFIGS); - -gulp.task('test', ['build'], function () { - var jest = require('gulp-jest').default; - return gulp.src('build').pipe(jest()); -}); - -gulp.task('default', ['lint', 'test']); diff --git a/index.js b/index.js index daf0026f..cf5ffc56 100644 --- a/index.js +++ b/index.js @@ -1,154 +1,142 @@ -const path = require('path'); -const loaderUtils = require('loader-utils'); +'use strict' -const postcss = require('postcss'); -const postcssrc = require('postcss-load-config'); +const path = require('path') -const PostCSSLoaderError = require('./error'); +const loaderUtils = require('loader-utils') -function parseOptions(params) { - if (typeof params === 'function') { - params = params.call(this, this); - } - - console.log('params', params); - - let plugins; - - if (typeof params === 'undefined') { - plugins = []; - } else if (Array.isArray(params)) { - plugins = params; - } else { - plugins = params.plugins || params.defaults; - } - - console.log('plugins', plugins); - - let options = {}; +const parseOptions = require('./lib/options') +const validateOptions = require('schema-utils') - if (typeof params !== 'undefined') { - options.parser = params.parser; - options.syntax = params.syntax; - options.stringifier = params.stringifier; - } - - // console.log('options', options); +const postcss = require('postcss') +const postcssrc = require('postcss-load-config') - let exec = params && params.exec; - - // console.log('exec', exec); - - return Promise.resolve({ options: options, plugins: plugins, exec: exec }); -} +const SyntaxError = require('./lib/Error') +/** + * PostCSS Loader + * + * > Loader for [webpack](https://github.com/webpack/webpack) to process CSS with [PostCSS] + * + * @method loader + * + * @param {String} css Source + * @param {Object} map Source Map + * + * @return {cb} cb Result + */ module.exports = function (css, map) { - if (this.cacheable) this.cacheable(); - - const loader = this; + const loader = this - const file = loader.resourcePath; - const params = loaderUtils.getOptions(loader) || {}; + const cb = loader.async() + const file = loader.resourcePath - const settings = params.plugins || loader.options.postcss; + const options = loaderUtils.getOptions(loader) || {} - const callback = loader.async(); + validateOptions('./lib/options.json', options, 'PostCSS Loader') - let rc; - let context = { + const rc = { + path: '', + ctx: { + file: { extname: path.extname(file), dirname: path.dirname(file), - basename: path.basename(file), - webpack: { watch: loader.addDependency } - }; + basename: path.basename(file) + } + } + } - params.config ? - rc = path.resolve(params.config) : - rc = path.dirname(file); + if (options.config) { + options.config.path + ? rc.path = path.resolve(options.config.path) + : rc.path = path.dirname(file) - Promise.resolve().then(() => { - if (typeof settings !== 'undefined') { - return parseOptions.call(loader, settings); - } + options.config.ctx + ? rc.ctx.options = options.config.ctx + : rc.ctx.options = {} + } - return postcssrc(context, rc, { argv: false }); - }).then((config) => { - if (!config) config = {}; + delete options.config - if (config.file) loader.addDependency(config.file); + const sourceMap = options.sourceMap - console.log('Config Plugins', config.plugins); + delete options.sourceMap - let plugins = config.plugins || []; + Promise.resolve().then(() => { + if (Object.keys(options).length !== 0) { + return parseOptions.call(loader, options) + } - console.log('Plugins', plugins); - console.log('webpack Version', process.env.WEBPACK_VERSION); + return postcssrc(rc.ctx, rc.path, { argv: false }) + }).then((config) => { + if (!config) config = {} + + if (config.file) loader.addDependency(config.file) + + let plugins = config.plugins || [] + let options = Object.assign({ + to: file, + from: file, + map: sourceMap + ? sourceMap === 'inline' + ? { inline: true, annotation: false } + : { inline: false, annotation: false } + : false + }, config.options) + + if (options.parser === 'postcss-js') { + css = loader.exec(css, loader.resource) + } - let options = Object.assign({}, config.options, { - from: file, - to: file, - map: { - inline: params.sourceMap === 'inline', - annotation: false - } - }); + if (typeof options.parser === 'string') { + options.parser = require(options.parser) + } - if (typeof map === 'string') map = JSON.parse(map); - if (map && map.mappings) options.map.prev = map; + if (typeof options.syntax === 'string') { + options.syntax = require(options.syntax) + } - if (typeof options.syntax === 'string') { - options.syntax = require(options.syntax); - } + if (typeof options.stringifier === 'string') { + options.stringifier = require(options.stringifier) + } - if (typeof options.parser === 'string') { - options.parser = require(options.parser); - } + // Loader Exec (Deprecated) + // https://webpack.js.org/api/loaders/#deprecated-context-properties + if (config.exec) { + css = loader.exec(css, loader.resource) + } - if (typeof options.stringifier === 'string') { - options.stringifier = require(options.stringifier); - } + // Loader Plugin (Deprecated) + // https://webpack.js.org/api/loaders/#deprecated-context-properties + if (loader._compilation) { + plugins = loader._compilation.applyPluginsWaterfall( + 'postcss-loader-before-processing', + [].concat(plugins), + options + ) + } - // console.log('Options', options); + if (typeof map === 'string') map = JSON.parse(map) + if (map && map.mappings) options.map.prev = map - let exec = options.exec || config.exec; + return postcss(plugins) + .process(css, options) + .then((result) => { + result.warnings().forEach((msg) => loader.emitWarning(msg.toString())) - if (options.parser === 'postcss-js' || exec) { - css = loader.exec(css, loader.resource); - } + result.messages.forEach((msg) => { + if (msg.type === 'dependency') loader.addDependency(msg.file) + }) + + css = result.css + map = result.map ? result.map.toJSON() : null - // Allow plugins to add or remove postcss plugins - if ( loader._compilation ) { - plugins = loader._compilation.applyPluginsWaterfall( - 'postcss-loader-before-processing', - [].concat(plugins), - options - ); + if (loader.loaderIndex === 0) { + return cb(null, `module.exports = ${JSON.stringify(css)}`, map) } - return postcss(plugins) - .process(css, options) - .then((result) => { - result.warnings().forEach((msg) => { - loader.emitWarning(msg.toString()); - }); - - result.messages.forEach((msg) => { - if (msg.type === 'dependency') { - loader.addDependency(msg.file); - } - }); - - callback( - null, result.css, result.map ? result.map.toJSON() : null - ); - - // console.log('Index', loader.loaderIndex); - - return null; - }); - }).catch((error) => { - return error.name === 'CssSyntaxError' ? - callback(new PostCSSLoaderError(error)) : - callback(error); - }); -}; + return cb(null, css, map, { ast: result.root }) + }) + }).catch((err) => { + return err.name === 'CssSyntaxError' ? cb(new SyntaxError(err)) : cb(err) + }) +} diff --git a/lib/error.js b/lib/error.js new file mode 100644 index 00000000..37247d7c --- /dev/null +++ b/lib/error.js @@ -0,0 +1,24 @@ +'use strict' + +class SyntaxError extends Error { + constructor (err) { + super(err) + + this.err = err.input.source + + this.name = 'Syntax Error' + this.message = '' + + if (err.line) { + this.message += `${this.name} \n\n(${err.line}:${err.column}) ${err.reason}` + } + + if (err.input.source) { + this.message += `\n\n${err.showSourceCode()}\n` + } + + this.stack = false + } +} + +module.exports = SyntaxError diff --git a/lib/options.js b/lib/options.js new file mode 100644 index 00000000..f7e0ddbd --- /dev/null +++ b/lib/options.js @@ -0,0 +1,25 @@ +'use strict' + +module.exports = function parseOptions (params) { + if (typeof params === 'function') { + params = params.call(this, this) + } + + let plugins + + if (typeof params === 'undefined') plugins = [] + else if (Array.isArray(params)) plugins = params + else plugins = params.plugins + + const options = {} + + if (typeof params !== 'undefined') { + options.parser = params.parser + options.syntax = params.syntax + options.stringifier = params.stringifier + } + + const exec = params && params.exec + + return Promise.resolve({ options: options, plugins: plugins, exec: exec }) +} diff --git a/lib/options.json b/lib/options.json new file mode 100644 index 00000000..29d12972 --- /dev/null +++ b/lib/options.json @@ -0,0 +1,36 @@ +{ + "type": "object", + "properties": { + "config": { + "type": "object", + "properties": { + "path": { + "type": "string" + }, + "ctx": { + "type": "object" + } + }, + "additionalProperties": false + }, + "parser": { + "type": "string" + }, + "syntax": { + "type": "string" + }, + "stringifier": { + "type": "string" + }, + "sourceMap": { + "type": [ "string", "boolean" ] + }, + "exec": { + "type": "boolean" + }, + "rewrite": { + "type": "boolean" + } + }, + "additionalProperties": true +} diff --git a/package.json b/package.json index 823dc876..49bbab17 100644 --- a/package.json +++ b/package.json @@ -2,55 +2,52 @@ "name": "postcss-loader", "version": "1.3.3", "description": "PostCSS loader for webpack", + "main": "index.js", "engines": { - "node": ">= 4" + "node": ">=4" }, - "keywords": [ - "webpack", - "loader", - "css", - "postcss", - "postcss-runner" + "files": [ + "lib", + "index.js" ], - "author": "Andrey Sitnik ", - "license": "MIT", - "repository": "postcss/postcss-loader", "dependencies": { - "loader-utils": "^1.0.2", - "postcss": "^5.2.15", - "postcss-load-config": "^1.2.0" + "loader-utils": "^1.x", + "schema-utils": "^0.x", + "postcss": "^5.x", + "postcss-load-config": "^1.x" }, "devDependencies": { - "eslint": "^3.16.1", - "eslint-config-postcss": "^2.0.2", - "fs-extra": "^2.0.0", + "coveralls": "^2.13.1", + "fs-extra": "^3.0.0", "jest": "^19.0.2", - "json-loader": "^0.5.4", - "lint-staged": "^3.3.1", "postcss-js": "^0.3.0", - "postcss-safe-parser": "^2.0.0", - "pre-commit": "^1.2.2", - "raw-loader": "^0.5.1", + "standard": "^10.0.2", "sugarss": "^0.2.0", - "webpack": "^2.2.1" + "webpack": "^2.4.1" }, "scripts": { - "lint-staged": "lint-staged", - "lint": "eslint *.js test/*.js", - "build": "node test/index.js", - "pretest": "npm run lint && npm run build", - "test": "jest --verbose --coverage" + "clean": "rm -rf jest_0 coverage test/builds", + "lint": "standard", + "pretest": "npm run lint && node test/webpack.build.js", + "test": "jest", + "posttest": "npm run clean" }, - "eslintConfig": { - "extends": "eslint-config-postcss/es5", + "standard": { "env": { "jest": true - } - }, - "lint-staged": { - "*.js": "npm run lint" + }, + "ignore": [ + "*.test.js" + ] }, - "pre-commit": [ - "lint-staged" - ] + "keywords": [ + "css", + "postcss", + "postcss-runner", + "webpack", + "webpack-loader" + ], + "author": "Andrey Sitnik ", + "repository": "postcss/postcss-loader", + "license": "MIT" } diff --git a/test/cases/broken.css b/test/cases/broken.css deleted file mode 100644 index 2803e2d2..00000000 --- a/test/cases/broken.css +++ /dev/null @@ -1 +0,0 @@ -a { color: diff --git a/test/cases/config/postcss.config.js b/test/cases/config/postcss.config.js deleted file mode 100644 index 97de4edd..00000000 --- a/test/cases/config/postcss.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - plugins: [] -}; diff --git a/test/cases/env/postcss.config.js b/test/cases/env/postcss.config.js deleted file mode 100644 index ead513fa..00000000 --- a/test/cases/env/postcss.config.js +++ /dev/null @@ -1,12 +0,0 @@ -var path = require('path'); - -module.exports = function (ctx) { - var plugin = function (css) { - css.walkDecls('content', function (decl) { - decl.value = '"' + path.basename(ctx.webpack.resourcePath) + '"'; - }); - }; - return { - plugins: [plugin] - }; -}; diff --git a/test/cases/env/style.css b/test/cases/env/style.css deleted file mode 100644 index 0a7d373c..00000000 --- a/test/cases/env/style.css +++ /dev/null @@ -1 +0,0 @@ -a::before { content: "bad" } diff --git a/test/cases/exec.js b/test/cases/exec.js deleted file mode 100644 index 6f1afcdd..00000000 --- a/test/cases/exec.js +++ /dev/null @@ -1,9 +0,0 @@ -var postcssJs = require('postcss-js'); - -var style = { - a: { - color: 'green' - } -}; - -module.exports = postcssJs.parse(style); diff --git a/test/cases/style.js b/test/cases/style.js deleted file mode 100644 index d2536ceb..00000000 --- a/test/cases/style.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - a: { color: 'black' } -}; diff --git a/test/configs/config.js b/test/configs/config.js new file mode 100644 index 00000000..6a5868e9 --- /dev/null +++ b/test/configs/config.js @@ -0,0 +1,4 @@ +test('Config', () => { + const css = require('../fixtures/style.css') + expect(css).toEqual('a { color: black }\n') +}) diff --git a/test/configs/config.json b/test/configs/config.json new file mode 100644 index 00000000..10ccd687 --- /dev/null +++ b/test/configs/config.json @@ -0,0 +1,9 @@ +{ + "file": "config", + "options": { + "config": { + "path": "test/fixtures/config/postcss.config.js", + "ctx": { "plugin": false } + } + } +} diff --git a/test/configs/error.js b/test/configs/error.js new file mode 100644 index 00000000..a28a4c68 --- /dev/null +++ b/test/configs/error.js @@ -0,0 +1,4 @@ +test.skip('Syntax Error', () => { + const css = require('../fixtures/style.css') + expect(css).toContain(/ERROR: Module build failed/) +}) diff --git a/test/configs/error.json b/test/configs/error.json new file mode 100644 index 00000000..b09fb918 --- /dev/null +++ b/test/configs/error.json @@ -0,0 +1,6 @@ +{ + "file": "error", + "options": { + "parser": "sugarss" + } +} diff --git a/test/configs/exec.js b/test/configs/exec.js new file mode 100644 index 00000000..16167ffa --- /dev/null +++ b/test/configs/exec.js @@ -0,0 +1,4 @@ +test('Exec', () => { + const css = require('../fixtures/style.exec.js') + expect(css).toEqual(`a {\n color: green\n}`) +}) diff --git a/test/configs/exec.json b/test/configs/exec.json new file mode 100644 index 00000000..0c07dd74 --- /dev/null +++ b/test/configs/exec.json @@ -0,0 +1,6 @@ +{ + "file": "exec", + "options": { + "exec": true + } +} diff --git a/test/configs/export.js b/test/configs/export.js new file mode 100644 index 00000000..4150c3e9 --- /dev/null +++ b/test/configs/export.js @@ -0,0 +1,4 @@ +test('Module Export', () => { + const css = require('../fixtures/style.css') + expect(css).toEqual('a { color: black }\n') +}) diff --git a/test/configs/export.json b/test/configs/export.json new file mode 100644 index 00000000..dce71c49 --- /dev/null +++ b/test/configs/export.json @@ -0,0 +1,8 @@ +{ + "file": "export", + "options": { + "config": { + "path": "test/fixtures/config/postcss.config.js" + } + } +} diff --git a/test/configs/jss.js b/test/configs/jss.js new file mode 100644 index 00000000..1462f41b --- /dev/null +++ b/test/configs/jss.js @@ -0,0 +1,4 @@ +test('JSS', () => { + const css = require('../fixtures/style.js') + expect(css).toEqual('a {\n color: yellow\n}') +}) diff --git a/test/configs/jss.json b/test/configs/jss.json new file mode 100644 index 00000000..c971af37 --- /dev/null +++ b/test/configs/jss.json @@ -0,0 +1,6 @@ +{ + "file": "jss", + "options": { + "parser": "postcss-js" + } +} diff --git a/test/configs/map.js b/test/configs/map.js new file mode 100644 index 00000000..3e6bb210 --- /dev/null +++ b/test/configs/map.js @@ -0,0 +1,4 @@ +test('Maps', () => { + const css = require('../fixtures/style.css') + expect(css).toContain('/*# sourceMappingURL=') +}) diff --git a/test/configs/map.json b/test/configs/map.json new file mode 100644 index 00000000..ba535545 --- /dev/null +++ b/test/configs/map.json @@ -0,0 +1,9 @@ +{ + "file": "map", + "options": { + "config": { + "path": "test/fixtures" + }, + "sourceMap": "inline" + } +} diff --git a/test/configs/options.js b/test/configs/options.js new file mode 100644 index 00000000..caa9787d --- /dev/null +++ b/test/configs/options.js @@ -0,0 +1,4 @@ +test.skip('Validation Error', () => { + const css = require('../fixtures/style.css') + expect(css).toThrowError(process.stderr) +}) diff --git a/test/configs/options.json b/test/configs/options.json new file mode 100644 index 00000000..55b9f36e --- /dev/null +++ b/test/configs/options.json @@ -0,0 +1,8 @@ +{ + "file": "options", + "options": { + "parser": {}, + "syntax": [], + "plugins": {} + } +} diff --git a/test/configs/parser.js b/test/configs/parser.js new file mode 100644 index 00000000..c54c372a --- /dev/null +++ b/test/configs/parser.js @@ -0,0 +1,4 @@ +test('Parser', () => { + const css = require('../fixtures/style.sss') + expect(css).toEqual('a {\n color: black\n}\n') +}) diff --git a/test/configs/parser.json b/test/configs/parser.json new file mode 100644 index 00000000..9df7d574 --- /dev/null +++ b/test/configs/parser.json @@ -0,0 +1,6 @@ +{ + "file": "parser", + "options": { + "parser": "sugarss" + } +} diff --git a/test/configs/plugins.js b/test/configs/plugins.js new file mode 100644 index 00000000..d71505d6 --- /dev/null +++ b/test/configs/plugins.js @@ -0,0 +1,4 @@ +test('Plugins', () => { + const css = require('../fixtures/style.css') + expect(css).toEqual('a { color: rgba(255, 0, 0, 1.0) }\n') +}) diff --git a/test/configs/plugins.json b/test/configs/plugins.json new file mode 100644 index 00000000..f87fa371 --- /dev/null +++ b/test/configs/plugins.json @@ -0,0 +1,6 @@ +{ + "file": "plugins", + "options": { + "plugins": true + } +} diff --git a/test/configs/stringifier.js b/test/configs/stringifier.js new file mode 100644 index 00000000..7d446c1f --- /dev/null +++ b/test/configs/stringifier.js @@ -0,0 +1,4 @@ +test('Stringifier', () => { + const css = require('../fixtures/style.css') + expect(css).toEqual('a color: black\n') +}) diff --git a/test/configs/stringifier.json b/test/configs/stringifier.json new file mode 100644 index 00000000..47f06f81 --- /dev/null +++ b/test/configs/stringifier.json @@ -0,0 +1,6 @@ +{ + "file": "stringifier", + "options": { + "stringifier": "sugarss" + } +} diff --git a/test/configs/syntax.js b/test/configs/syntax.js new file mode 100644 index 00000000..7cdd080a --- /dev/null +++ b/test/configs/syntax.js @@ -0,0 +1,4 @@ +test('Syntax', () => { + const css = require('../fixtures/style.sss') + expect(css).toEqual('a\n color: black\n') +}) diff --git a/test/configs/syntax.json b/test/configs/syntax.json new file mode 100644 index 00000000..83ac0874 --- /dev/null +++ b/test/configs/syntax.json @@ -0,0 +1,6 @@ +{ + "file": "syntax", + "options": { + "syntax": "sugarss" + } +} diff --git a/test/fixtures/config/postcss.config.js b/test/fixtures/config/postcss.config.js new file mode 100644 index 00000000..43111126 --- /dev/null +++ b/test/fixtures/config/postcss.config.js @@ -0,0 +1,5 @@ +module.exports = (ctx) => ({ + plugins: [ + ctx.options.plugin ? require('../../plugin')() : false + ] +}) diff --git a/test/cases/config/style.css b/test/fixtures/config/style.css similarity index 100% rename from test/cases/config/style.css rename to test/fixtures/config/style.css diff --git a/test/fixtures/postcss.config.js b/test/fixtures/postcss.config.js new file mode 100644 index 00000000..e6e72f10 --- /dev/null +++ b/test/fixtures/postcss.config.js @@ -0,0 +1,5 @@ +module.exports = { + plugins: [ + require('../plugin')() + ] +} diff --git a/test/cases/style.css b/test/fixtures/style.css similarity index 100% rename from test/cases/style.css rename to test/fixtures/style.css diff --git a/test/fixtures/style.exec.js b/test/fixtures/style.exec.js new file mode 100644 index 00000000..5d4ed665 --- /dev/null +++ b/test/fixtures/style.exec.js @@ -0,0 +1,11 @@ +'use strict' + +const postcssJS = require('postcss-js') + +const style = { + a: { + color: 'green' + } +} + +module.exports = postcssJS.parse(style) diff --git a/test/fixtures/style.js b/test/fixtures/style.js new file mode 100644 index 00000000..e7426c15 --- /dev/null +++ b/test/fixtures/style.js @@ -0,0 +1 @@ +module.exports = { a: { color: 'yellow' } } diff --git a/test/cases/sugar.sss b/test/fixtures/style.sss similarity index 100% rename from test/cases/sugar.sss rename to test/fixtures/style.sss diff --git a/test/plugin.js b/test/plugin.js new file mode 100644 index 00000000..eefb142e --- /dev/null +++ b/test/plugin.js @@ -0,0 +1,15 @@ +'use strict' + +const postcss = require('postcss') + +module.exports = postcss.plugin('plugin', (options) => { + options = Object.assign({ alpha: '1.0' }, options) + + return (css, result) => { + css.walkDecls((decl) => { + if (decl.value === 'black') { + decl.value = 'rgba(255, 0, 0, ' + options.alpha + ')' + } + }) + } +}) diff --git a/test/plugins/blue.js b/test/plugins/blue.js deleted file mode 100644 index cb695eb6..00000000 --- a/test/plugins/blue.js +++ /dev/null @@ -1,5 +0,0 @@ -module.exports = function (css) { - css.walkDecls(function (decl) { - if ( decl.value === 'black' ) decl.value = 'blue'; - }); -}; diff --git a/test/plugins/red.js b/test/plugins/red.js deleted file mode 100644 index e1396f7d..00000000 --- a/test/plugins/red.js +++ /dev/null @@ -1,20 +0,0 @@ -var warning = false; - -module.exports = function (options) { - var alpha = options.alpha || '1.0'; - - return { - postcss: function (css, result) { - if (!warning) { - result.warn('Test red warning'); - warning = true; - } - - css.walkDecls(function (decl) { - if (decl.value === 'blue') { - decl.value = 'rgba(255, 0, 0, ' + alpha + ')'; - } - }); - } - }; -}; diff --git a/test/postcss.config.js b/test/postcss.config.js deleted file mode 100644 index 9c6063ba..00000000 --- a/test/postcss.config.js +++ /dev/null @@ -1,5 +0,0 @@ -module.exports = { - plugins: [ - require('./plugins/blue') - ] -}; diff --git a/test/test-custom-parser.js b/test/test-custom-parser.js deleted file mode 100644 index 39448ecf..00000000 --- a/test/test-custom-parser.js +++ /dev/null @@ -1,9 +0,0 @@ -describe('custom parser', function () { - - it('processes sugarss', function () { - var css = require('!raw-loader!../?parser=sugarss!' + - './cases/sugar.sss'); - expect(css).toEqual('a {\n color: blue\n}\n'); - }); - -}); diff --git a/test/test-default.js b/test/test-default.js deleted file mode 100644 index ae35d951..00000000 --- a/test/test-default.js +++ /dev/null @@ -1,58 +0,0 @@ -describe('default', function () { - - it('processes CSS with default plugins', function () { - var css = require('!raw-loader!../!./cases/style.css'); - expect(css).toEqual('a { color: blue }\n'); - }); - - it('overrides default config by subdir config', function () { - var css = require('!raw-loader!../!./cases/config/style.css'); - expect(css).toEqual('a { color: black }\n'); - }); - - it('send webpack instance to config', function () { - var css = require('!raw-loader!../!./cases/env/style.css'); - expect(css).toEqual('a::before { content: "style.css" }\n'); - }); - - it('processes CSS in safe mode', function () { - var css = require('!raw-loader' + - '!../?parser=postcss-safe-parser' + - '!./cases/broken.css'); - expect(css).toEqual('a { color:\n}'); - }); - - it('lets other plugins alter the used plugins', function () { - var css = require('!raw-loader!../?rewrite=true' + - '!./cases/style.css'); - expect(css).toEqual('a { color: black }\n'); - }); - - it('processes CSS-in-JS', function () { - var css = require('!raw-loader' + - '!../?parser=postcss-js' + - '!./cases/style.js'); - expect(css).toEqual('a {\n color: blue\n}'); - }); - - it('processes CSS with exec', function () { - var css = require('!raw-loader' + - '!../?exec' + - '!./cases/exec.js'); - expect(css).toEqual('a {\n color: green\n}'); - }); - - it('inlines map', function () { - var css = require('!raw-loader!../?sourceMap=inline' + - '!./cases/style.css'); - expect(css).toContain('/*# sourceMappingURL='); - }); - - it('allows to change config path', function () { - var css = require('!raw-loader' + - '!../?config=test/cases/config/postcss.config.js' + - '!./cases/style.css'); - expect(css).toEqual('a { color: black }\n'); - }); - -}); diff --git a/test/test-explicit-plugins.js b/test/test-explicit-plugins.js deleted file mode 100644 index 3913b514..00000000 --- a/test/test-explicit-plugins.js +++ /dev/null @@ -1,9 +0,0 @@ -describe('explicit plugins', function () { - - it('processes CSS with custom plugins', function () { - var css = require('!raw-loader!../!' + - './cases/style.css'); - expect(css).toEqual('a { color: rgba(255, 0, 0, 0.1) }\n'); - }); - -}); diff --git a/test/test-incorrect-using-packs.js b/test/test-incorrect-using-packs.js deleted file mode 100644 index 9e1bd9a6..00000000 --- a/test/test-incorrect-using-packs.js +++ /dev/null @@ -1,14 +0,0 @@ -describe('incorrect using packs', function () { - - it('fails to load specific pack', function () { - var error; - try { - require('!raw-loader!../?pack=blues!' + - './cases/style.css'); - } catch (err) { - error = err; - } - expect(error.message).toMatch(/find module/); - }); - -}); diff --git a/test/test-with-packs.js b/test/test-with-packs.js deleted file mode 100644 index e81769d0..00000000 --- a/test/test-with-packs.js +++ /dev/null @@ -1,15 +0,0 @@ -describe('with packs', function () { - - it('processes CSS with default plugins', function () { - var css = require('!raw-loader!../!' + - './cases/style.css'); - expect(css).toEqual('a { color: rgba(255, 0, 0, 0.1) }\n'); - }); - - it('processes CSS with custom plugins', function () { - var css = require('!raw-loader!../?pack=blues!' + - './cases/style.css'); - expect(css).toEqual('a { color: blue }\n'); - }); - -}); diff --git a/test/webpack-custom-parser.config.js b/test/webpack-custom-parser.config.js deleted file mode 100644 index 41a79574..00000000 --- a/test/webpack-custom-parser.config.js +++ /dev/null @@ -1,16 +0,0 @@ -var path = require('path'); - -var RewritePlugin = require('./webpack-plugins/rewrite.js'); - -module.exports = { - target: 'node', - context: __dirname, - entry: './test-custom-parser.js', - output: { - filename: 'test-custom-parser.test.js', - path: path.join(__dirname, '..', 'build') - }, - plugins: [ - new RewritePlugin() - ] -}; diff --git a/test/webpack-default.config.js b/test/webpack-default.config.js deleted file mode 100644 index 277fe82a..00000000 --- a/test/webpack-default.config.js +++ /dev/null @@ -1,16 +0,0 @@ -var path = require('path'); - -var RewritePlugin = require('./webpack-plugins/rewrite.js'); - -module.exports = { - target: 'node', - context: __dirname, - entry: './test-default.js', - output: { - filename: 'test-default.test.js', - path: path.join(__dirname, '..', 'build') - }, - plugins: [ - new RewritePlugin() - ] -}; diff --git a/test/webpack-explicit-plugins.config.js b/test/webpack-explicit-plugins.config.js deleted file mode 100644 index a4b71c91..00000000 --- a/test/webpack-explicit-plugins.config.js +++ /dev/null @@ -1,21 +0,0 @@ -var path = require('path'); - -var blue = require('./plugins/blue'); -var red = require('./plugins/red'); -var RewritePlugin = require('./webpack-plugins/rewrite.js'); - -module.exports = { - target: 'node', - context: __dirname, - entry: './test-explicit-plugins.js', - output: { - filename: 'test-explicit-plugins.test.js', - path: path.join(__dirname, '..', 'build') - }, - postcss: function () { - return [blue, red({ alpha: 0.1 })]; - }, - plugins: [ - new RewritePlugin() - ] -}; diff --git a/test/webpack-incorrect-using-packs.config.js b/test/webpack-incorrect-using-packs.config.js deleted file mode 100644 index 18dd9e34..00000000 --- a/test/webpack-incorrect-using-packs.config.js +++ /dev/null @@ -1,16 +0,0 @@ -var path = require('path'); - -var RewritePlugin = require('./webpack-plugins/rewrite.js'); - -module.exports = { - target: 'node', - context: __dirname, - entry: './test-incorrect-using-packs.js', - output: { - filename: 'test-incorrect-using-packs.test.js', - path: path.join(__dirname, '..', 'build') - }, - plugins: [ - new RewritePlugin() - ] -}; diff --git a/test/webpack-plugins/rewrite.js b/test/webpack-plugins/rewrite.js deleted file mode 100644 index 7fd02108..00000000 --- a/test/webpack-plugins/rewrite.js +++ /dev/null @@ -1,21 +0,0 @@ -function RewritePlugin() { - -} - -RewritePlugin.prototype.apply = function (compiler) { - function rewrite(postcssPlugins, loaderParams) { - // Just for the demo and test we remove all plugins if - // the 'rewrite' parameter is set - if (loaderParams.rewrite) { - return []; - } - // If the rewrite parameter isn't set we don't change the modules - return postcssPlugins; - } - - compiler.plugin('compilation', function (compilation) { - compilation.plugin('postcss-loader-before-processing', rewrite); - }); -}; - -module.exports = RewritePlugin; diff --git a/test/webpack-with-packs.config.js b/test/webpack-with-packs.config.js deleted file mode 100644 index 6bf22592..00000000 --- a/test/webpack-with-packs.config.js +++ /dev/null @@ -1,24 +0,0 @@ -var path = require('path'); - -var blue = require('./plugins/blue'); -var red = require('./plugins/red'); -var RewritePlugin = require('./webpack-plugins/rewrite.js'); - -module.exports = { - target: 'node', - context: __dirname, - entry: './test-with-packs.js', - output: { - filename: 'test-with-packs.test.js', - path: path.join(__dirname, '..', 'build') - }, - postcss: function () { - return { - defaults: [blue, red({ alpha: 0.1 })], - blues: [blue] - }; - }, - plugins: [ - new RewritePlugin() - ] -}; diff --git a/test/webpack.build.js b/test/webpack.build.js new file mode 100644 index 00000000..98631156 --- /dev/null +++ b/test/webpack.build.js @@ -0,0 +1,19 @@ +'use strict' + +const fs = require('fs-extra') +const path = require('path') + +const webpack = require('webpack') + +const builds = path.join(__dirname, 'builds') + +if (fs.existsSync(builds)) fs.remove(builds) + +fs.readdirSync(path.join(__dirname, 'configs')) + .filter((file) => path.extname(file) === '.json') + .forEach((config) => { + config = fs.readFileSync(path.join(__dirname, 'configs', config), 'utf8') + config = require(path.join(__dirname, 'webpack.config.js'))(config) + + webpack(config, () => {}) + }) diff --git a/test/webpack.config.js b/test/webpack.config.js new file mode 100644 index 00000000..1033d41b --- /dev/null +++ b/test/webpack.config.js @@ -0,0 +1,44 @@ +'use strict' + +const path = require('path') + +module.exports = (config) => { + config = JSON.parse(config) + + if (config.options && config.options.plugins) { + config.options.plugins = [ require('./plugin')() ] + } + + return { + target: 'node', + devtool: 'source-map', + context: path.join(__dirname, 'configs'), + entry: `./${config.file}.js`, + output: { + path: path.join(__dirname, 'builds'), + filename: `${config.file}.test.js` + }, + module: { + rules: [ + { + test: /\.(sss|css)$/, + use: [ + { + loader: path.resolve('./'), + options: config.options || {} + } + ] + }, + { + test: /style\.(exec\.js|js)$/, + use: [ + { + loader: path.resolve('./'), + options: config.options || {} + } + ] + } + ] + } + } +}