css-loader 0.28.11 → 1.0.0

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+<a name="1.0.0"></a>
+# [1.0.0](https://github.com/webpack-contrib/css-loader/compare/v0.28.11...v1.0.0) (2018-07-06)
+
+### BREAKING CHANGES
+
+* remove `minimize` option, use [`postcss-loader`](https://github.com/postcss/postcss-loader) with [`cssnano`](https://github.com/cssnano/cssnano) or use [`optimize-cssnano-plugin`](https://github.com/intervolga/optimize-cssnano-plugin) plugin
+* remove `module` option, use `modules` option instead
+* remove `camelcase` option, use `camelCase` option instead
+* remove `root` option, use [`postcss-loader`](https://github.com/postcss/postcss-loader) with [`postcss-url`](https://github.com/postcss/postcss-url) plugin
+* remove `alias` option, use [`resolve.alias`](https://webpack.js.org/configuration/resolve/) feature or use [`postcss-loader`](https://github.com/postcss/postcss-loader) with [`postcss-url`](https://github.com/postcss/postcss-url) plugin
+* update `postcss` to `6` version
+* minimum require `nodejs` version is `6.9`
+* minimum require `webpack` version is `4`
+
+
 <a name="0.28.11"></a>
 ## [0.28.11](https://github.com/webpack-contrib/css-loader/compare/v0.28.10...v0.28.11) (2018-03-16)
 

package/README.md

@@ -94,37 +94,13 @@ It's useful when you, for instance, need to post process the CSS as a string.
 
 |Name|Type|Default|Description|
 |:--:|:--:|:-----:|:----------|
-|**[`root`](#root)**|`{String}`|`/`|Path to resolve URLs, URLs starting with `/` will not be translated|
 |**[`url`](#url)**|`{Boolean}`|`true`| Enable/Disable `url()` handling|
-|**[`alias`](#alias)**|`{Object}`|`{}`|Create aliases to import certain modules more easily|
 |**[`import`](#import)** |`{Boolean}`|`true`| Enable/Disable @import handling|
 |**[`modules`](#modules)**|`{Boolean}`|`false`|Enable/Disable CSS Modules|
-|**[`minimize`](#minimize)**|`{Boolean\|Object}`|`false`|Enable/Disable minification|
+|**[`localIdentName`](#localidentname)**|`{String}`|`[hash:base64]`|Configure the generated ident|
 |**[`sourceMap`](#sourcemap)**|`{Boolean}`|`false`|Enable/Disable Sourcemaps|
 |**[`camelCase`](#camelcase)**|`{Boolean\|String}`|`false`|Export Classnames in CamelCase|
 |**[`importLoaders`](#importloaders)**|`{Number}`|`0`|Number of loaders applied before CSS loader|
-|**`localIdentName`**|`{String}`|`[hash:base64]`|Configure the generated ident|
-
-### `root`
-
-For URLs that start with a `/`, the default behavior is to not translate them.
-
-`url(/image.png) => url(/image.png)`
-
-If a `root` query parameter is set, however, it will be prepended to the URL
-and then translated.
-
-**webpack.config.js**
-```js
-{
-  loader: 'css-loader',
-  options: { root: '.' }
-}
-```
-
-`url(/image.png)` => `require('./image.png')`
-
-Using 'Root-relative' urls is not recommended. You should only use it for legacy CSS files.
 
 ### `url`
 
@@ -137,48 +113,6 @@ url(image.png) => require('./image.png')
 url(~module/image.png) => require('module/image.png')
 ```
 
-### `alias`
-
-Rewrite your urls with alias, this is useful when it's hard to change url paths of your input files, for example, when you're using some css / sass files in another package (bootstrap, ratchet, font-awesome, etc.).
-
-`css-loader`'s `alias` follows the same syntax as webpack's `resolve.alias`, you can see the details at the [resolve docs](https://webpack.js.org/configuration/resolve/#resolve-alias)
-
-**file.scss**
-```css
-@charset "UTF-8";
-@import "bootstrap";
-```
-
-**webpack.config.js**
-```js
-{
-  test: /\.scss$/,
-  use: [
-    {
-      loader: "style-loader"
-    },
-    {
-      loader: "css-loader",
-      options: {
-        alias: {
-          "../fonts/bootstrap": "bootstrap-sass/assets/fonts/bootstrap"
-        }
-      }
-    },
-    {
-      loader: "sass-loader",
-      options: {
-        includePaths: [
-          path.resolve("./node_modules/bootstrap-sass/assets/stylesheets")
-        ]
-      }
-    }
-  ]
-}
-```
-
-Check out this [working bootstrap example](https://github.com/bbtfr/webpack2-bootstrap-sass-sample).
-
 ### `import`
 
 To disable `@import` resolving by `css-loader` set the option to `false`
@@ -219,7 +153,7 @@ The loader replaces local selectors with unique identifiers. The choosen unique
 ._23_aKvs-b8bW2Vg3fwHozO ._13LGdX8RMStbBE9w-t0gZ1 .global-class-name { color: blue; }
 ```
 
-> :information_source: Identifiers are exported
+> ℹ️ Identifiers are exported
 
 ```js
 exports.locals = {
@@ -238,41 +172,6 @@ file.png => ./file.png
 ```
 
 You can use `:local(#someId)`, but this is not recommended. Use classes instead of ids.
-You can configure the generated ident with the `localIdentName` query parameter (default `[hash:base64]`).
-
- **webpack.config.js**
- ```js
-{
-  test: /\.css$/,
-  use: [
-    {
-      loader: 'css-loader',
-      options: {
-        modules: true,
-        localIdentName: '[path][name]__[local]--[hash:base64:5]'
-      }
-    }
-  ]
-}
-```
-
-You can also specify the absolute path to your custom `getLocalIdent` function to generate classname based on a different schema. This requires `webpack >= 2.2.1` (it supports functions in the `options` object).
-
-**webpack.config.js**
-```js
-{
-  loader: 'css-loader',
-  options: {
-    modules: true,
-    localIdentName: '[path][name]__[local]--[hash:base64:5]',
-    getLocalIdent: (context, localIdentName, localName, options) => {
-      return 'whatever_random_class_name'
-    }
-  }
-}
-```
-
-> :information_source: For prerendering with extract-text-webpack-plugin you should use `css-loader/locals` instead of `style-loader!css-loader` **in the prerendering bundle**. It doesn't embed CSS but only exports the identifier mappings.
 
 #### `Composing`
 
@@ -339,24 +238,44 @@ To import from multiple modules use multiple `composes:` rules.
 }
 ```
 
-### `minimize`
+### `localIdentName`
 
-By default the css-loader minimizes the css if specified by the module system.
+You can configure the generated ident with the `localIdentName` query parameter. See [loader-utils's documentation](https://github.com/webpack/loader-utils#interpolatename) for more information on options.
 
-In some cases the minification is destructive to the css, so you can provide your own options to the cssnano-based minifier if needed. See [cssnano's documentation](http://cssnano.co/guides/) for more information on the available options.
+ **webpack.config.js**
+```js
+{
+  test: /\.css$/,
+  use: [
+    {
+      loader: 'css-loader',
+      options: {
+        modules: true,
+        localIdentName: '[path][name]__[local]--[hash:base64:5]'
+      }
+    }
+  ]
+}
+```
 
-You can also disable or enforce minification with the `minimize` query parameter.
+You can also specify the absolute path to your custom `getLocalIdent` function to generate classname based on a different schema. This requires `webpack >= 2.2.1` (it supports functions in the `options` object).
 
 **webpack.config.js**
 ```js
 {
   loader: 'css-loader',
   options: {
-    minimize: true || {/* CSSNano Options */}
+    modules: true,
+    localIdentName: '[path][name]__[local]--[hash:base64:5]',
+    getLocalIdent: (context, localIdentName, localName, options) => {
+      return 'whatever_random_class_name'
+    }
   }
 }
 ```
 
+> ℹ️ For prerendering with extract-text-webpack-plugin you should use `css-loader/locals` instead of `style-loader!css-loader` **in the prerendering bundle**. It doesn't embed CSS but only exports the identifier mappings.
+
 ### `sourceMap`
 
 To include source maps set the `sourceMap` option.
@@ -459,37 +378,8 @@ module.exports = {
 
 ### Extract
 
-For production builds it's recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on. This can be achieved by using the [extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) to extract the CSS when running in production mode.
-
-**webpack.config.js**
-```js
-const env = process.env.NODE_ENV
-
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
-
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: env === 'production'
-          ? ExtractTextPlugin.extract({
-              fallback: 'style-loader',
-              use: [ 'css-loader' ]
-          })
-          : [ 'style-loader', 'css-loader' ]
-      },
-    ]
-  },
-  plugins: env === 'production'
-    ? [
-        new ExtractTextPlugin({
-          filename: '[name].css'
-        })
-      ]
-    : []
-}
-```
+For production builds it's recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on. 
+This can be achieved by using the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to extract the CSS when running in production mode.
 
 <h2 align="center">Maintainers</h2>
 

package/lib/loader.js

@@ -6,18 +6,14 @@ var loaderUtils = require("loader-utils");
 var processCss = require("./processCss");
 var getImportPrefix = require("./getImportPrefix");
 var compileExports = require("./compile-exports");
-var createResolver = require("./createResolver");
 
 
 module.exports = function(content, map) {
-	if(this.cacheable) this.cacheable();
 	var callback = this.async();
 	var query = loaderUtils.getOptions(this) || {};
-	var root = query.root;
-	var moduleMode = query.modules || query.module;
-	var camelCaseKeys = query.camelCase || query.camelcase;
+	var moduleMode = query.modules;
+	var camelCaseKeys = query.camelCase;
 	var sourceMap = query.sourceMap || false;
-	var resolve = createResolver(query.alias);
 
 	if(sourceMap) {
 		if (map) {
@@ -42,8 +38,6 @@ module.exports = function(content, map) {
 		from: loaderUtils.getRemainingRequest(this).split("!").pop(),
 		to: loaderUtils.getCurrentRequest(this).split("!").pop(),
 		query: query,
-		resolve: resolve,
-		minimize: this.minimize,
 		loaderContext: this,
 		sourceMap: sourceMap
 	}, function(err, result) {
@@ -63,7 +57,7 @@ module.exports = function(content, map) {
 			}
 			return true;
 		}).map(function(imp) {
-			if(!loaderUtils.isUrlRequest(imp.url, root)) {
+			if(!loaderUtils.isUrlRequest(imp.url)) {
 				return "exports.push([module.id, " +
 					JSON.stringify("@import url(" + imp.url + ");") + ", " +
 					JSON.stringify(imp.mediaQuery) + "]);";
@@ -94,7 +88,7 @@ module.exports = function(content, map) {
 				var match = result.urlItemRegExp.exec(item);
 				var idx = +match[1];
 				var urlItem = result.urlItems[idx];
-				var url = resolve(urlItem.url);
+				var url = urlItem.url;
 				idx = url.indexOf("?#");
 				if(idx < 0) idx = url.indexOf("#");
 				var urlRequest;
@@ -108,7 +102,7 @@ module.exports = function(content, map) {
 				return "\" + escape(require(" + loaderUtils.stringifyRequest(this, urlRequest) + ")) + \"";
 			}.bind(this));
 		}
-		
+
 		var exportJs = compileExports(result, importItemMatcher.bind(this), camelCaseKeys);
 		if (exportJs) {
 			exportJs = "exports.locals = " + exportJs + ";";

package/lib/localsLoader.js

@@ -6,23 +6,18 @@ var loaderUtils = require("loader-utils");
 var processCss = require("./processCss");
 var getImportPrefix = require("./getImportPrefix");
 var compileExports = require("./compile-exports");
-var createResolver = require("./createResolver");
 
 
 module.exports = function(content) {
-	if(this.cacheable) this.cacheable();
 	var callback = this.async();
 	var query = loaderUtils.getOptions(this) || {};
-	var moduleMode = query.modules || query.module;
-	var camelCaseKeys = query.camelCase || query.camelcase;
-	var resolve = createResolver(query.alias);
+	var moduleMode = query.modules;
+	var camelCaseKeys = query.camelCase;
 
 	processCss(content, null, {
 		mode: moduleMode ? "local" : "global",
 		query: query,
-		minimize: this.minimize,
 		loaderContext: this,
-		resolve: resolve
 	}, function(err, result) {
 		if(err) return callback(err);
 

package/lib/processCss.js

@@ -6,7 +6,6 @@ var formatCodeFrame = require("babel-code-frame");
 var Tokenizer = require("css-selector-tokenizer");
 var postcss = require("postcss");
 var loaderUtils = require("loader-utils");
-var assign = require("object-assign");
 var getLocalIdent = require("./getLocalIdent");
 
 var icssUtils = require('icss-utils');
@@ -56,8 +55,8 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
 				values.nodes[0].nodes.shift();
 				var mediaQuery = Tokenizer.stringifyValues(values);
 
-				if(loaderUtils.isUrlRequest(url, options.root)) {
-					url = loaderUtils.urlToRequest(url, options.root);
+				if(loaderUtils.isUrlRequest(url)) {
+					url = loaderUtils.urlToRequest(url);
 				}
 
 				importItems.push({
@@ -85,11 +84,6 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
 			exports[exportName] = replaceImportsInString(exports[exportName]);
 		});
 
-		function isAlias(url) {
-			// Handle alias starting by / and root disabled
-			return url !== options.resolve(url)
-		}
-
 		function processNode(item) {
 			switch (item.type) {
 				case "value":
@@ -105,7 +99,7 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
 					}
 					break;
 				case "url":
-					if (options.url && item.url.replace(/\s/g, '').length && !/^#/.test(item.url) && (isAlias(item.url) || loaderUtils.isUrlRequest(item.url, options.root))) {
+					if (options.url && item.url.replace(/\s/g, '').length && !/^#/.test(item.url) && loaderUtils.isUrlRequest(item.url)) {
 						// Strip quotes, they will be re-added if the module needs them
 						item.stringType = "";
 						delete item.innerSpacingBefore;
@@ -141,17 +135,13 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
 
 module.exports = function processCss(inputSource, inputMap, options, callback) {
 	var query = options.query;
-	var root = query.root && query.root.length > 0 ? query.root.replace(/\/$/, "") : query.root;
 	var context = query.context;
 	var localIdentName = query.localIdentName || "[hash:base64]";
 	var localIdentRegExp = query.localIdentRegExp;
-	var forceMinimize = query.minimize;
-	var minimize = typeof forceMinimize !== "undefined" ? !!forceMinimize : options.minimize;
 
 	var customGetLocalIdent = query.getLocalIdent || getLocalIdent;
 
 	var parserOptions = {
-		root: root,
 		mode: options.mode,
 		url: query.url !== false,
 		import: query.import !== false,
@@ -166,11 +156,11 @@ module.exports = function processCss(inputSource, inputMap, options, callback) {
 				if(parserOptions.url){
                     url = url.trim();
 
-					if(!url.replace(/\s/g, '').length || !loaderUtils.isUrlRequest(url, root)) {
+					if(!url.replace(/\s/g, '').length || !loaderUtils.isUrlRequest(url)) {
 						return url;
 					}
 					if(global) {
-						return loaderUtils.urlToRequest(url, root);
+						return loaderUtils.urlToRequest(url);
 					}
 				}
 				return url;
@@ -189,16 +179,6 @@ module.exports = function processCss(inputSource, inputMap, options, callback) {
 		parserPlugin(parserOptions)
 	]);
 
-	if(minimize) {
-		var cssnano = require("cssnano");
-		var minimizeOptions = assign({}, query.minimize);
-		["zindex", "normalizeUrl", "discardUnused", "mergeIdents", "reduceIdents", "autoprefixer"].forEach(function(name) {
-			if(typeof minimizeOptions[name] === "undefined")
-				minimizeOptions[name] = false;
-		});
-		pipeline.use(cssnano(minimizeOptions));
-	}
-
 	pipeline.process(inputSource, {
 		// we need a prefix to avoid path rewriting of PostCSS
 		from: "/css-loader!" + options.from,

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "css-loader",
-  "version": "0.28.11",
+  "version": "1.0.0",
   "author": "Tobias Koppers @sokra",
   "license": "MIT",
   "description": "css loader module for webpack",
   "engines": {
-    "node": ">=0.12.0 || >= 4.3.0 < 5.0.0 || >=5.10"
+    "node": ">= 6.9.0 <7.0.0 || >= 8.9.0"
   },
   "files": [
     "lib",
@@ -15,12 +15,10 @@
   "dependencies": {
     "babel-code-frame": "^6.26.0",
     "css-selector-tokenizer": "^0.7.0",
-    "cssnano": "^3.10.0",
     "icss-utils": "^2.1.0",
     "loader-utils": "^1.0.2",
     "lodash.camelcase": "^4.3.0",
-    "object-assign": "^4.1.1",
-    "postcss": "^5.0.6",
+    "postcss": "^6.0.23",
     "postcss-modules-extract-imports": "^1.2.0",
     "postcss-modules-local-by-default": "^1.2.0",
     "postcss-modules-scope": "^1.1.0",
@@ -36,6 +34,9 @@
     "should": "^11.1.2",
     "standard-version": "^4.0.0"
   },
+  "peerDependencies": {
+    "webpack": "^4.0.0"
+  },
   "scripts": {
     "lint": "eslint lib test",
     "test": "mocha",

package/lib/createResolver.js

@@ -1,36 +0,0 @@
-module.exports = function createResolver(alias) {
-	if(typeof alias !== "object" || Array.isArray(alias)) {
-		return function(url) {
-			return url
-		};
-	}
-
-	alias = Object.keys(alias).map(function(key) {
-		var onlyModule = false;
-		var obj = alias[key];
-		if(/\$$/.test(key)) {
-			onlyModule = true;
-			key = key.substr(0, key.length - 1);
-		}
-		if(typeof obj === "string") {
-			obj = {
-				alias: obj
-			};
-		}
-		obj = Object.assign({
-			name: key,
-			onlyModule: onlyModule
-		}, obj);
-		return obj;
-	});
-
-	return function(url) {
-		alias.forEach(function(obj) {
-			var name = obj.name;
-			if(url === name || (!obj.onlyModule && url.startsWith(name + "/"))) {
-				url = obj.alias + url.substr(name.length);
-			}
-		});
-		return url;
-	}
-}