Skip to content

version 1.0 #742

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 14 commits into from
Jul 6, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 8 additions & 11 deletions .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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"

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we ditch travis and get on circle CI?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shellscape let's do this in other PR

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK

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
Expand Down
117 changes: 2 additions & 115 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -94,38 +94,14 @@ 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|
|**[`localIdentName`](#localidentname)**|`{String}`|`[hash:base64]`|Configure the generated ident|
|**[`minimize`](#minimize)**|`{Boolean\|Object}`|`false`|Enable/Disable minification|
|**[`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|

### `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`

To disable `url()` resolving by `css-loader` set the option to `false`.
Expand All @@ -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`
Expand Down Expand Up @@ -342,24 +276,6 @@ You can also specify the absolute path to your custom `getLocalIdent` function t

> ℹ️ 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.

### `minimize`

By default the css-loader minimizes the css if specified by the module system.

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.

You can also disable or enforce minification with the `minimize` query parameter.

**webpack.config.js**
```js
{
loader: 'css-loader',
options: {
minimize: true || {/* CSSNano Options */}
}
}
```

### `sourceMap`

To include source maps set the `sourceMap` option.
Expand Down Expand Up @@ -462,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>

Expand Down
36 changes: 0 additions & 36 deletions lib/createResolver.js

This file was deleted.

16 changes: 5 additions & 11 deletions lib/loader.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

because this is a refactor, shouldn't we use const and let instead?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shellscape also let's do it other PR, when we ship webpack-default in this repo

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK

var camelCaseKeys = query.camelCase;
var sourceMap = query.sourceMap || false;
var resolve = createResolver(query.alias);

if(sourceMap) {
if (map) {
Expand All @@ -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) {
Expand All @@ -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) + "]);";
Expand Down Expand Up @@ -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;
Expand All @@ -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 + ";";
Expand Down
9 changes: 2 additions & 7 deletions lib/localsLoader.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
30 changes: 5 additions & 25 deletions lib/processCss.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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":
Expand All @@ -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;
Expand Down Expand Up @@ -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,
Expand All @@ -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;
Expand All @@ -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,
Expand Down
Loading