css-loader 0.28.9 → 1.0.1

package/CHANGELOG.md

@@ -2,6 +2,53 @@
 
 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.1"></a>
+## [1.0.1](https://github.com/webpack-contrib/css-loader/compare/v1.0.0...v1.0.1) (2018-10-29)
+
+
+### Bug Fixes
+
+* **loader:** trim unquoted import urls ([#783](https://github.com/webpack-contrib/css-loader/issues/783)) ([21fcddf](https://github.com/webpack-contrib/css-loader/commit/21fcddf))
+
+
+
+<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)
+
+
+### Bug Fixes
+
+* **lib/processCss:** don't check `mode` for `url` handling (`options.modules`) ([#698](https://github.com/webpack-contrib/css-loader/issues/698)) ([c788450](https://github.com/webpack-contrib/css-loader/commit/c788450))
+
+
+
+<a name="0.28.10"></a>
+## [0.28.10](https://github.com/webpack-contrib/css-loader/compare/v0.28.9...v0.28.10) (2018-02-22)
+
+
+### Bug Fixes
+
+* **getLocalIdent:** add `rootContext` support (`webpack >= v4.0.0`) ([#681](https://github.com/webpack-contrib/css-loader/issues/681)) ([9f876d2](https://github.com/webpack-contrib/css-loader/commit/9f876d2))
+
+
+
 <a name="0.28.9"></a>
 ## [0.28.9](https://github.com/webpack-contrib/css-loader/compare/v0.28.8...v0.28.9) (2018-01-17)
 

package/README.md

@@ -50,7 +50,7 @@ module.exports = {
 
 ### `toString`
 
-You can also use the css-loader results directly as string, such as in Angular's component style.
+You can also use the css-loader results directly as a string, such as in Angular's component style.
 
 **webpack.config.js**
 ```js
@@ -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`
@@ -203,7 +137,7 @@ The syntax `:local(.className)` can be used to declare `className` in the local
 
 With `:local` (without brackets) local mode can be switched on for this selector. `:global(.className)` can be used to declare an explicit global selector. With `:global` (without brackets) global mode can be switched on for this selector.
 
-The loader replaces local selectors with unique identifiers. The choosen unique identifiers are exported by the module.
+The loader replaces local selectors with unique identifiers. The chosen unique identifiers are exported by the module.
 
 ```css
 :local(.className) { background: red; }
@@ -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 = {
@@ -228,7 +162,7 @@ exports.locals = {
 }
 ```
 
-CamelCase is recommended for local selectors. They are easier to use in the within the imported JS module.
+CamelCase is recommended for local selectors. They are easier to use within the imported JS module.
 
 `url()` URLs in block scoped (`:local .abc`) rules behave like requests in modules.
 
@@ -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,31 +238,51 @@ 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.
 
-I. e. the extract-text-webpack-plugin can handle them.
+I.e. the extract-text-webpack-plugin can handle them.
 
-They are not enabled by default because they expose a runtime overhead and increase in bundle size (JS source maps do not). In addition to that relative paths are buggy and you need to use an absolute public path which include the server URL.
+They are not enabled by default because they expose a runtime overhead and increase in bundle size (JS source maps do not). In addition to that relative paths are buggy and you need to use an absolute public path which includes the server URL.
 
 **webpack.config.js**
 ```js
@@ -408,7 +327,7 @@ import { className } from 'file.css';
 
 ### `importLoaders`
 
-The query parameter `importLoaders` allows to configure how many loaders before `css-loader` should be applied to `@import`ed resources.
+The query parameter `importLoaders` allows you to configure how many loaders before `css-loader` should be applied to `@import`ed resources.
 
 **webpack.config.js**
 ```js
@@ -428,7 +347,7 @@ The query parameter `importLoaders` allows to configure how many loaders before
 }
 ```
 
-This may change in the future, when the module system (i. e. webpack) supports loader matching by origin.
+This may change in the future when the module system (i. e. webpack) supports loader matching by origin.
 
 <h2 align="center">Examples</h2>
 
@@ -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/compile-exports.js

@@ -1,4 +1,4 @@
-var camelCase = require("lodash.camelcase");
+var camelCase = require("lodash/camelCase");
 
 function dashesCamelCase(str) {
   return str.replace(/-+(\w)/g, function(match, firstLetter) {

package/lib/getLocalIdent.js

@@ -6,8 +6,15 @@ var loaderUtils = require("loader-utils");
 var path = require("path");
 
 module.exports = function getLocalIdent(loaderContext, localIdentName, localName, options) {
-	if(!options.context)
-		options.context = loaderContext.options && typeof loaderContext.options.context === "string" ? loaderContext.options.context : loaderContext.context;
+	if(!options.context) {
+		if (loaderContext.rootContext) {
+			options.context = loaderContext.rootContext;
+		} else if (loaderContext.options && typeof loaderContext.options.context === "string") {
+			options.context = loaderContext.options.context;
+		} else {
+			options.context = loaderContext.context;
+		}
+	}
 	var request = path.relative(options.context, loaderContext.resourcePath);
 	options.content = options.hashPrefix + request + "+" + localName;
 	localIdentName = localIdentName.replace(/\[local\]/gi, localName);

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) {
@@ -55,7 +49,11 @@ module.exports = function(content, map) {
 		var importUrlPrefix = getImportPrefix(this, query);
 
 		var alreadyImported = {};
-		var importJs = result.importItems.filter(function(imp) {
+		var importJs = result.importItems.map(function(imp) {
+			// fixes #781 when importing `url(filename.css )`
+			imp.url = imp.url.trim();
+			return imp;
+		}).filter(function(imp) {
 			if(!imp.mediaQuery) {
 				if(alreadyImported[imp.url])
 					return false;
@@ -63,7 +61,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 +92,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 +106,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');
@@ -55,9 +54,11 @@ 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) && options.mode === "global") {
-					url = loaderUtils.urlToRequest(url, options.root);
+
+				if(loaderUtils.isUrlRequest(url)) {
+					url = loaderUtils.urlToRequest(url);
 				}
+
 				importItems.push({
 					url: url,
 					mediaQuery: mediaQuery
@@ -83,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":
@@ -103,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;
@@ -139,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,
@@ -164,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;
@@ -187,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.9",
+  "version": "1.0.1",
   "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",
+    "lodash": "^4.17.11",
+    "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;
-	}
-}