.travis.yml

@@ -7,20 +7,17 @@ matrix:
   fast_finish: true
   include:
     - os: linux
-      node_js: "7"
-      env: WEBPACK_VERSION="2.2.0" JOB_PART=lint
+      node_js: "10"
+      env: WEBPACK_VERSION="4.15.0" JOB_PART=lint
     - os: linux
-      node_js: "6"
-      env: WEBPACK_VERSION="2.2.0" JOB_PART=test
-    - os: linux
-      node_js: "4.3"
-      env: WEBPACK_VERSION="2.2.0" JOB_PART=test
+      node_js: "10"
+      env: WEBPACK_VERSION="4.15.0" JOB_PART=test
     - os: linux
-      node_js: "7"
-      env: WEBPACK_VERSION="2.2.0" JOB_PART=test
+      node_js: "8"
+      env: WEBPACK_VERSION="4.15.0" JOB_PART=test
     - os: linux
-      node_js: "4.3"
-      env: WEBPACK_VERSION="1.14.0" JOB_PART=test
+      node_js: "6"
+      env: WEBPACK_VERSION="4.15.0" JOB_PART=test
 before_install:
   - nvm --version
   - node --version

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)
 

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>
 

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 + ";";

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);