Skip to content

Commit 3d53968

Browse files
Merge remote-tracking branch 'origin/master'
# Conflicts: # package-lock.json
2 parents 1b7acf7 + 240db53 commit 3d53968

19 files changed

+742
-1641
lines changed

.travis.yml

+8-11
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,17 @@ matrix:
77
fast_finish: true
88
include:
99
- os: linux
10-
node_js: "7"
11-
env: WEBPACK_VERSION="2.2.0" JOB_PART=lint
10+
node_js: "10"
11+
env: WEBPACK_VERSION="4.15.0" JOB_PART=lint
1212
- os: linux
13-
node_js: "6"
14-
env: WEBPACK_VERSION="2.2.0" JOB_PART=test
15-
- os: linux
16-
node_js: "4.3"
17-
env: WEBPACK_VERSION="2.2.0" JOB_PART=test
13+
node_js: "10"
14+
env: WEBPACK_VERSION="4.15.0" JOB_PART=test
1815
- os: linux
19-
node_js: "7"
20-
env: WEBPACK_VERSION="2.2.0" JOB_PART=test
16+
node_js: "8"
17+
env: WEBPACK_VERSION="4.15.0" JOB_PART=test
2118
- os: linux
22-
node_js: "4.3"
23-
env: WEBPACK_VERSION="1.14.0" JOB_PART=test
19+
node_js: "6"
20+
env: WEBPACK_VERSION="4.15.0" JOB_PART=test
2421
before_install:
2522
- nvm --version
2623
- node --version

README.md

+2-115
Original file line numberDiff line numberDiff line change
@@ -94,38 +94,14 @@ It's useful when you, for instance, need to post process the CSS as a string.
9494

9595
|Name|Type|Default|Description|
9696
|:--:|:--:|:-----:|:----------|
97-
|**[`root`](#root)**|`{String}`|`/`|Path to resolve URLs, URLs starting with `/` will not be translated|
9897
|**[`url`](#url)**|`{Boolean}`|`true`| Enable/Disable `url()` handling|
99-
|**[`alias`](#alias)**|`{Object}`|`{}`|Create aliases to import certain modules more easily|
10098
|**[`import`](#import)** |`{Boolean}`|`true`| Enable/Disable @import handling|
10199
|**[`modules`](#modules)**|`{Boolean}`|`false`|Enable/Disable CSS Modules|
102100
|**[`localIdentName`](#localidentname)**|`{String}`|`[hash:base64]`|Configure the generated ident|
103-
|**[`minimize`](#minimize)**|`{Boolean\|Object}`|`false`|Enable/Disable minification|
104101
|**[`sourceMap`](#sourcemap)**|`{Boolean}`|`false`|Enable/Disable Sourcemaps|
105102
|**[`camelCase`](#camelcase)**|`{Boolean\|String}`|`false`|Export Classnames in CamelCase|
106103
|**[`importLoaders`](#importloaders)**|`{Number}`|`0`|Number of loaders applied before CSS loader|
107104

108-
### `root`
109-
110-
For URLs that start with a `/`, the default behavior is to not translate them.
111-
112-
`url(/image.png) => url(/image.png)`
113-
114-
If a `root` query parameter is set, however, it will be prepended to the URL
115-
and then translated.
116-
117-
**webpack.config.js**
118-
```js
119-
{
120-
loader: 'css-loader',
121-
options: { root: '.' }
122-
}
123-
```
124-
125-
`url(/image.png)` => `require('./image.png')`
126-
127-
Using 'Root-relative' urls is not recommended. You should only use it for legacy CSS files.
128-
129105
### `url`
130106

131107
To disable `url()` resolving by `css-loader` set the option to `false`.
@@ -137,48 +113,6 @@ url(image.png) => require('./image.png')
137113
url(~module/image.png) => require('module/image.png')
138114
```
139115

140-
### `alias`
141-
142-
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.).
143-
144-
`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)
145-
146-
**file.scss**
147-
```css
148-
@charset "UTF-8";
149-
@import "bootstrap";
150-
```
151-
152-
**webpack.config.js**
153-
```js
154-
{
155-
test: /\.scss$/,
156-
use: [
157-
{
158-
loader: "style-loader"
159-
},
160-
{
161-
loader: "css-loader",
162-
options: {
163-
alias: {
164-
"../fonts/bootstrap": "bootstrap-sass/assets/fonts/bootstrap"
165-
}
166-
}
167-
},
168-
{
169-
loader: "sass-loader",
170-
options: {
171-
includePaths: [
172-
path.resolve("./node_modules/bootstrap-sass/assets/stylesheets")
173-
]
174-
}
175-
}
176-
]
177-
}
178-
```
179-
180-
Check out this [working bootstrap example](https://github.com/bbtfr/webpack2-bootstrap-sass-sample).
181-
182116
### `import`
183117

184118
To disable `@import` resolving by `css-loader` set the option to `false`
@@ -342,24 +276,6 @@ You can also specify the absolute path to your custom `getLocalIdent` function t
342276

343277
> ℹ️ 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.
344278
345-
### `minimize`
346-
347-
By default the css-loader minimizes the css if specified by the module system.
348-
349-
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.
350-
351-
You can also disable or enforce minification with the `minimize` query parameter.
352-
353-
**webpack.config.js**
354-
```js
355-
{
356-
loader: 'css-loader',
357-
options: {
358-
minimize: true || {/* CSSNano Options */}
359-
}
360-
}
361-
```
362-
363279
### `sourceMap`
364280

365281
To include source maps set the `sourceMap` option.
@@ -462,37 +378,8 @@ module.exports = {
462378

463379
### Extract
464380

465-
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.
466-
467-
**webpack.config.js**
468-
```js
469-
const env = process.env.NODE_ENV
470-
471-
const ExtractTextPlugin = require('extract-text-webpack-plugin')
472-
473-
module.exports = {
474-
module: {
475-
rules: [
476-
{
477-
test: /\.css$/,
478-
use: env === 'production'
479-
? ExtractTextPlugin.extract({
480-
fallback: 'style-loader',
481-
use: [ 'css-loader' ]
482-
})
483-
: [ 'style-loader', 'css-loader' ]
484-
},
485-
]
486-
},
487-
plugins: env === 'production'
488-
? [
489-
new ExtractTextPlugin({
490-
filename: '[name].css'
491-
})
492-
]
493-
: []
494-
}
495-
```
381+
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.
382+
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.
496383

497384
<h2 align="center">Maintainers</h2>
498385

lib/createResolver.js

-36
This file was deleted.

lib/loader.js

+5-11
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,14 @@ var loaderUtils = require("loader-utils");
66
var processCss = require("./processCss");
77
var getImportPrefix = require("./getImportPrefix");
88
var compileExports = require("./compile-exports");
9-
var createResolver = require("./createResolver");
109

1110

1211
module.exports = function(content, map) {
13-
if(this.cacheable) this.cacheable();
1412
var callback = this.async();
1513
var query = loaderUtils.getOptions(this) || {};
16-
var root = query.root;
17-
var moduleMode = query.modules || query.module;
18-
var camelCaseKeys = query.camelCase || query.camelcase;
14+
var moduleMode = query.modules;
15+
var camelCaseKeys = query.camelCase;
1916
var sourceMap = query.sourceMap || false;
20-
var resolve = createResolver(query.alias);
2117

2218
if(sourceMap) {
2319
if (map) {
@@ -42,8 +38,6 @@ module.exports = function(content, map) {
4238
from: loaderUtils.getRemainingRequest(this).split("!").pop(),
4339
to: loaderUtils.getCurrentRequest(this).split("!").pop(),
4440
query: query,
45-
resolve: resolve,
46-
minimize: this.minimize,
4741
loaderContext: this,
4842
sourceMap: sourceMap
4943
}, function(err, result) {
@@ -63,7 +57,7 @@ module.exports = function(content, map) {
6357
}
6458
return true;
6559
}).map(function(imp) {
66-
if(!loaderUtils.isUrlRequest(imp.url, root)) {
60+
if(!loaderUtils.isUrlRequest(imp.url)) {
6761
return "exports.push([module.id, " +
6862
JSON.stringify("@import url(" + imp.url + ");") + ", " +
6963
JSON.stringify(imp.mediaQuery) + "]);";
@@ -94,7 +88,7 @@ module.exports = function(content, map) {
9488
var match = result.urlItemRegExp.exec(item);
9589
var idx = +match[1];
9690
var urlItem = result.urlItems[idx];
97-
var url = resolve(urlItem.url);
91+
var url = urlItem.url;
9892
idx = url.indexOf("?#");
9993
if(idx < 0) idx = url.indexOf("#");
10094
var urlRequest;
@@ -108,7 +102,7 @@ module.exports = function(content, map) {
108102
return "\" + escape(require(" + loaderUtils.stringifyRequest(this, urlRequest) + ")) + \"";
109103
}.bind(this));
110104
}
111-
105+
112106
var exportJs = compileExports(result, importItemMatcher.bind(this), camelCaseKeys);
113107
if (exportJs) {
114108
exportJs = "exports.locals = " + exportJs + ";";

lib/localsLoader.js

+2-7
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,18 @@ var loaderUtils = require("loader-utils");
66
var processCss = require("./processCss");
77
var getImportPrefix = require("./getImportPrefix");
88
var compileExports = require("./compile-exports");
9-
var createResolver = require("./createResolver");
109

1110

1211
module.exports = function(content) {
13-
if(this.cacheable) this.cacheable();
1412
var callback = this.async();
1513
var query = loaderUtils.getOptions(this) || {};
16-
var moduleMode = query.modules || query.module;
17-
var camelCaseKeys = query.camelCase || query.camelcase;
18-
var resolve = createResolver(query.alias);
14+
var moduleMode = query.modules;
15+
var camelCaseKeys = query.camelCase;
1916

2017
processCss(content, null, {
2118
mode: moduleMode ? "local" : "global",
2219
query: query,
23-
minimize: this.minimize,
2420
loaderContext: this,
25-
resolve: resolve
2621
}, function(err, result) {
2722
if(err) return callback(err);
2823

lib/processCss.js

+5-25
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ var formatCodeFrame = require("babel-code-frame");
66
var Tokenizer = require("css-selector-tokenizer");
77
var postcss = require("postcss");
88
var loaderUtils = require("loader-utils");
9-
var assign = require("object-assign");
109
var getLocalIdent = require("./getLocalIdent");
1110

1211
var icssUtils = require('icss-utils');
@@ -56,8 +55,8 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
5655
values.nodes[0].nodes.shift();
5756
var mediaQuery = Tokenizer.stringifyValues(values);
5857

59-
if(loaderUtils.isUrlRequest(url, options.root)) {
60-
url = loaderUtils.urlToRequest(url, options.root);
58+
if(loaderUtils.isUrlRequest(url)) {
59+
url = loaderUtils.urlToRequest(url);
6160
}
6261

6362
importItems.push({
@@ -85,11 +84,6 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
8584
exports[exportName] = replaceImportsInString(exports[exportName]);
8685
});
8786

88-
function isAlias(url) {
89-
// Handle alias starting by / and root disabled
90-
return url !== options.resolve(url)
91-
}
92-
9387
function processNode(item) {
9488
switch (item.type) {
9589
case "value":
@@ -105,7 +99,7 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
10599
}
106100
break;
107101
case "url":
108-
if (options.url && item.url.replace(/\s/g, '').length && !/^#/.test(item.url) && (isAlias(item.url) || loaderUtils.isUrlRequest(item.url, options.root))) {
102+
if (options.url && item.url.replace(/\s/g, '').length && !/^#/.test(item.url) && loaderUtils.isUrlRequest(item.url)) {
109103
// Strip quotes, they will be re-added if the module needs them
110104
item.stringType = "";
111105
delete item.innerSpacingBefore;
@@ -141,17 +135,13 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
141135

142136
module.exports = function processCss(inputSource, inputMap, options, callback) {
143137
var query = options.query;
144-
var root = query.root && query.root.length > 0 ? query.root.replace(/\/$/, "") : query.root;
145138
var context = query.context;
146139
var localIdentName = query.localIdentName || "[hash:base64]";
147140
var localIdentRegExp = query.localIdentRegExp;
148-
var forceMinimize = query.minimize;
149-
var minimize = typeof forceMinimize !== "undefined" ? !!forceMinimize : options.minimize;
150141

151142
var customGetLocalIdent = query.getLocalIdent || getLocalIdent;
152143

153144
var parserOptions = {
154-
root: root,
155145
mode: options.mode,
156146
url: query.url !== false,
157147
import: query.import !== false,
@@ -166,11 +156,11 @@ module.exports = function processCss(inputSource, inputMap, options, callback) {
166156
if(parserOptions.url){
167157
url = url.trim();
168158

169-
if(!url.replace(/\s/g, '').length || !loaderUtils.isUrlRequest(url, root)) {
159+
if(!url.replace(/\s/g, '').length || !loaderUtils.isUrlRequest(url)) {
170160
return url;
171161
}
172162
if(global) {
173-
return loaderUtils.urlToRequest(url, root);
163+
return loaderUtils.urlToRequest(url);
174164
}
175165
}
176166
return url;
@@ -189,16 +179,6 @@ module.exports = function processCss(inputSource, inputMap, options, callback) {
189179
parserPlugin(parserOptions)
190180
]);
191181

192-
if(minimize) {
193-
var cssnano = require("cssnano");
194-
var minimizeOptions = assign({}, query.minimize);
195-
["zindex", "normalizeUrl", "discardUnused", "mergeIdents", "reduceIdents", "autoprefixer"].forEach(function(name) {
196-
if(typeof minimizeOptions[name] === "undefined")
197-
minimizeOptions[name] = false;
198-
});
199-
pipeline.use(cssnano(minimizeOptions));
200-
}
201-
202182
pipeline.process(inputSource, {
203183
// we need a prefix to avoid path rewriting of PostCSS
204184
from: "/css-loader!" + options.from,

0 commit comments

Comments
 (0)