webpack-contrib / css-loader Goto Github PK

I have a few images in a shared location, which I import in a css file. This shared location has a lot of code shared between 5 webapps within the same project, and I have defined the alias common-assets in my config, which works great for every asset/module, except for css. The path is normalized by css-loader (I think?) to be relative, which breaks.

Is there any clean way to use the alias, or do I have to go url("../../../../../../../../common/assets/images/image.png") instead of the much cleaner url("common-assets/images/image.png")? If I do the latter, the actual import becomes url("./common-assets/images/image.png"), which is wrong, and fails the build.

Code that worked on my Mac failed when I used my Linux box, because of a failure (on my part) in casing.

Node.js require is case sensitive, would it be possible to copy that behavior? Not sure if it's this plugin er Webpack core.

Breaking change for something minor, but I think consistency is important.

@import url("~dataTables/media/css/jquery.datatables.css");

vs.

@import url("~datatables/media/css/jquery.dataTables.css");

First one failed, second is the correct one

only the first part of the value is transformed:

animation: 300ms ease-in-out myAnimation;

is transformed to

animation: [hash] ease-in-out myAnimation;

When a nested handler produces are source map css-loader currently discards the sourcemap. Not discarding it would allow css preprocessor generated sourcemaps to be used

The module mode local scope is amazing, but is there any way to name the classes other than picking up the file name of the import?

eg, given:

MyComponent /
   index.css
   index.js

/* index.css */
.root {
  /* styles */
}

// index.js
var styles = require('./index.css')

// react stuff etc..
return <div className={styles.root} />

will output to:

<div className="index__root__eofhi28o2"></div>

... And so will every other module I have (sans the hash appened) becase I like to keep my component folders named and my filenames generic.

So the desired result given the folder/files above would be:

<div className="MyComponent__root__eofhi28o2"></div>

Edited: for clarity

The local scope feature is working great for me so far, but if I use [name] in localIdentName, the CSS fails to compile. Other interpolated values work fine.

If I dig into loader-utils and change the pattern from [name] to [basename] it seems to work fine, but I'm too unfamiliar with webpack internals to figure out why that is significant.

I've reproduced this issue in a repo of mine, if you'd like to take a look. It's in the css-loader-with-debug-local-names branch: https://github.com/markdalgleish/react-progressive-component-starter/tree/css-loader-with-debug-local-names

/*
 * a ' above
 */

.bg {
  background-image: url(bg.jpg);
}

/*
 * a ' below
 */

bg.jpg won't get resolved. A slice of the output :

exports.push([module.id, "/*\n * a ' above\n */\n\n.bg {\n  background-image: url(bg.jpg);\n}\n\n/*\n * a ' below\n */\n", ""]);

Both single and double quotes can cause this bug.

I have a file called base.css that has an import statement

@import "normalize.css/normalize.css"
body {
  background: red;
}

This is my app.js:

var css  = require('./styles/base.css');

module.exports = function Foo() {
    return {
        foo: 'bar',
        baz: 'gah'
    };
};

I've npm installed normalize but running the webpack command throws:

$ webpack
Hash: 2a64a4ac64b2026975fb
Version: webpack 1.1.8
Time: 82ms
    Asset  Size  Chunks             Chunk Names
bundle.js  2019       0  [emitted]  main
   [0] ./src/app.js 137 {0} [built]
   [1] ./src/styles/base.css 177 {0} [built] [1 error]

ERROR in ./src/styles/base.css
Module not found: Error: Cannot resolve file or directory ./normalize.css/normalize.css in /Users/Ryan/Git/webpack-demo/src/styles
 @ ./src/styles/base.css 2:1-116

What am I doing wrong? I understand that it's looking in styles dir but I thought it would scan node_modules first?

Hi @sokra :)

how is the url- or file-loader supposed to work with the css-loader?

I have this piece of CSS:

/* test.css */

.topbar {
  /* blah */
}

.topbar .search {
  extends: iconMagnifier from "../../styles/icons.scss";
}

After running through css-loader with:

{
  test: /\.css$/,
  loaders: [
    'style',
    'css?module'
  ]
}

I got something like that with exported styles:

import styles from "./test.css";
console.log(styles);
// => { topbar: "topbar--hhDqN iconMagnifier--28gN4", search: "search--1hPrb iconMagnifier--28gN4" }

topbar should not be extended like that, right? Styles should be { topbar: "topbar--hhDqN", search: "search--1hPrb iconMagnifier--28gN4" }.

Though?

When using CSS to apply filters to SVG elements like:

.highlight {
    filter: url(#highlight);
}

the url should be left untouched.

I suppose the hash portion of the URL should be preserved in other cases as well, as it may convey specific information to the stylesheet.

This would simplify the process of overwriting certain styles defined in external css blocks.

See #55

Hello, I noticed the root-relative option https://github.com/webpack/css-loader#root-relative-urls doesn't work well if you have a single page application that uses history.pushState.

Example:

I have the following structure:

/
--/src
  --/assets/images/hello.png
  --/css/style.css
--/build
  -- (here is where files go after compilation)

And I have an hello.css file with the following content:

#hello {
  background-image: url("/assets/images/hello.png")
}

Now, my config for CSS and PNG files will be something like:

{test: /\.css$/, loader: 'style-loader!css-loader?root=..}
{test: /\.(png)$/, loader: 'file-loader?name=[path][name].[ext]?[hash]&context=./src'}

This results in the output-ed css being (notice the missing / before the path):

#hello {
  background-image: url("assets/images/hello.png")
}

Which will work well as long as I access my application at /, but will fail for example if I share an URL like /hello/world because then the background image will be searched at /hello/world/assets/images/hello.png.

Should absoulte paths be translated? If I don't specify a root, then the file-loader doesn't kick in so I won't have my assets during build.

I see 2 options:

• When you don't specify a root, css-loader requires the files anyway, just doesn't change the url.
• If you specify a root, the loader is used but the path isn't translated.

What do you think?

People seem to be overhyped with local scopes. Some even propose to make it local by default.
But for now the only features local scope allows are export and reuse of classes.

I import Web component. I want to restyle one of it's inner tags.
I make some CSS rule:

x-tabs /deep/ x-panel {
  ...
}

It can't be passed as HTML attribute it must be declared in a global space of CSS.
Did anyone think it out? It seems a dead-end to me. Why bother with local scopes at all?

Hi

I try to import the untransformed css of this:

https://github.com/jxnblk/basscss

but this:

@import '~basscss'

doesn't work. And also not:

@import '~basscss/src/basscss.css';

It has the following error:

ERROR in ../~/css-loader!../~/basscss/src/basscss.css
Module not found: Error: Cannot resolve 'file' or 'directory' ./basscss-base in /node_modules/basscss/src
 @ ../~/css-loader!../~/basscss/src/basscss.css 2:78-157

It doesn't correctly resolve dependencies.

How can I use this?

UPDATE: I found something similar: #12 . But resolve.alias is not a clean way to solve this.

I've a stylesheet that use a font but using relative url (relative to the css) doesn't work.

In src/path/style.css the following CSS doesn't work ("cannot found" error)

@font-face {
  font-family: 'myFont;
  src: url("./myFont.otf");
}

I had to use

@font-face {
  font-family: 'myFont;
  src: url("src/path/myFont.otf");
}

But it's not how require() should work right ?

I've been trying to use this in combination with file-loader, so I can chain converting from SASS and processing all my files used in my SASS to then output a CSS file that references those files.

eg.

    loaders: [
        {
            test: /\.scss$/,
            loaders: [
                'file-loader?name=[name].css',
                'css-loader?outputStyle=default | string',
                'autoprefixer-loader?{browsers:["last 2 version", "Firefox 15"]}',
                'sass-loader?outputStyle=compressed'
            ]
        },
        {
            test: /\.png$|\.jpg$|\.gif$|\.ico/,
            loader: 'file-loader?name=assets/[hash:7]-[name].[ext]'
        },
        {
            test: /\.eot$|\.woff$|\.ttf$|\.svg$/,
            loader: 'file-loader?name=assets/[hash:7]-[name].[ext]'
        }
    ]

?outputStyle=string will allow us to create a files easily and still manage all our CSS dependencies with the mighty css-loader.

Like https://github.com/rotundasoftware/parcelify

E.g. I have @import url("~nanoscroller"); in my css. I expect that to use the style field in that package's package.json. Instead, that module's JS was included in my css.

var styles = require('./index.css') raises obvious problem -- you can't use <div className={styles.myStyle} > in a component which renders server-side.

Up until now, when requiring css I used if (__BROWSER__) require('style.css') but to write <div className={( __BROWSER__ ? styles.myStyle : '')}> each time I think is too much.

This article suggests to use webpack to process backend but it suggests to use IgnorePlugin(/\.(css|less)$/) and I believe in case with Local scope won't work.

So is there any other option to use Local scope in isomorphic code without any weird hacks?

I observed some weird behavior when I was trying to use font-awesome in a webpack powered project.

I trimmed the code down as much as possible and put it into a gist: https://gist.github.com/Turbo87/e8e941e68308d3b40ef6

I installed font-awesome via npm and use require to import its CSS file through the style and css loaders. The CSS file has a @font-face which uses url() with a relative path to point to the font file(s). When I compile this with webpack in production mode everything works just as expected, but once I drop the -p parameter the code suddenly tries to load the font file from / for whatever reason and fails.

I observed that behavior with Google Chrome and Firefox, so it is probably not a browser issue.

If I require('sub1.css') and require('sub2.css') which both @import url("./base.css") then I'll get rules in bass.css applied twice in my page, which may cause some problem.

Any plan to solve this?

This is an issue moved from less-loader after opening it there by mistake:
webpack-contrib/less-loader#25

The loader seems to break when styles include references to SVG definitions. I'm using the markers in the styles because I don't want to mess with the charting library I'm using but the loader breaks on the URL.

Marker definition:

<defs>
    <marker id="line-marker">
         <circle cx="6" cy="6" r="5"></circle>
    </marker>
</defs>

Marker use:

path.nv-line {
    marker-mid: url('#line-marker');
}

Is there a way of ignoring some URL values in these rules or another way to prevent the loader from failing?

It seems like the css-loader doesn't detect url()s in @font-face declarations

@font-face {
    font-family: 'Museo300';
    src: url(../assets/fonts/Museo/museo300-regular.woff) format('woff'),
         url(../assets/fonts/Museo/museo300-regular.ttf) format('truetype'),
         url(../assets/fonts/Museo/museo300-regular.svg) format('svg');
    font-weight: normal;
    font-style: normal;
}

This declaration is pretty standard (actually generated by fontsquirrel) to support different font formats.

https://gist.github.com/haf/a632962b86409b8c51e3

ERROR in ./~/css-loader?root=..!./css/front.css
Module build failed: Error: Please check the validity of the CSS block starting from the line #414
    at throwError (/node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:399:15)
    at getBlock (/node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:755:18)

As you can see, there's no line 414.

Is it possible to use CSS source maps in the generated style, so that developer tools could show the location of the styles? Right now it is non-obvious where a style was defined in the source code, especially when using @import to include other CSS files in the bundle.

Would it be possible to turn off url() inlining/importing? I have looked throughout and cannot find a config option to disable this.

In a project, I am only using url() for fonts (supporting legacy browsers) and do not want all 4 fonts inlined into the CSS file. I can't seem to find an option to allow that code to get through the loader untouched.

Is there a way I can tell the loader not to resolve a url to images in a url()

Would like:
background-image: url('../img/some-image.gif');
to output the same thing:
background-image: url('../img/some-image.gif');

So this issue is bizarre and I hope I can make an example that does this.

I successful got sourceMaps to work with stylus-loader with
{ test: /\.styl$/, loader: 'style!css?sourceMap!stylus' }

However when ?sourceMap is enabled all our background url('whatever/sprite.png') no longer work. When the ?sourceMap is removed all is well.

I will make an example repo when I get the chance. Also let me know if this should be an issue on stylus-loader instead.

As for more info the css produced are identical except that sourcemap css is redirected via @import some url. The computed CSS reported by Chrome Debugger is identical, but using (Chrome Extension) CSSViewer reports different processed CSS. Which shows the missing sprite.

Also this problem exists in Firefox as well so I do not think it is a chrome issue.

The following CSS ia breaking my build

.class {
  filter: drop-shadow(0 1px 0 var(--vr-Color-white));
}

It's totally valid CSS. It seems related to the parser. Maybe you should consider using a better parser like postcss ?

let's say I have ./node_modules/my-ui/src/style/main.css, and in this file I have
url("/images/my-image.png") as a reference to ./node_modules/my-ui/src/images/my-image.png

is there any way to allow each of the packages in node_modules use their own root-relative URL's?
when developing locally for my-ui, everything is fine since it defines ?root=src in its own webpack.config.js, but when my-ui is an npm dependency... how can it continue to use root-relative URL's in its CSS?

thanks!

Been chatting with @markdalgleish about this, but I thought I'd put my thoughts down into an issue that was a bit more async-friendly (since he has a day job and so chatrooms aren't ideal).

I love the module mode for css-loader, I love the local-by-default idea, as well as being able to import other files & extend classes. But I think those things are being all tied together in the current implementation, and could be broken out, which would mean more flexibility, reuse, and ease-of-contributions.

Here's my suggestion:

• Define a series of PostCSS transform that take the currently-supported syntax and converts it. Taking the example off the home page.

Input:

:local(.continueButton) {
  extends: button from "library/button.css";
  background: red;
}

After parse-imports.js

:import("library/button.css") {
  button: __tmp_487387465fczSDGHSABb;
}
:local(.continueButton) {
  extends: __tmp_487387465fczSDGHSABb;
  background: red;
}

After localize-and-extend.js

:import("library/button.css") {
  button: __tmp_487387465fczSDGHSABb;
}
:export {
  continueButton: _13LGdX8RMStbBE9w-t0gZ1 __tmp_487387465fczSDGHSABb;
}
._13LGdX8RMStbBE9w-t0gZ1 {
  background: red;
}

These transformations each have a single responsibility, are easier to test & maintain, can operate on a single file at once and totally agnostic to Webpack/JSPM/Browserify. After this:

• Automatically attach those two PostCSS transforms in the same way importLoaders can be used.
• If css-loader?module is set and CSS Module mode is activated, add the plugin postcss-local-scope to translate .localName to :local(.localName), just as it was before.
• The current localisation/extension logic is adapted to look for the :import and :export primitives, and look for usages of temporary imported symbols (e.g. __tmp_487387465fczSDGHSABb) and replace them with the exports of another file.

So, this achieves a couple of things. It reduces the complexity of this project in particular, yet still presents the same interface to users of the module (:local and extends are always available, local-by-default is there in "module mode"). I can implement :import and :export for JSPM, and then we can share the CSS Modules syntax & plugins. I think it increases the chances of making CSS Modules a specification, since we'll have multiple loaders using it (more users) & be able to solve spec-level issues at the same time for everyone.

I'm happy to build these PostCSS plugins, and I think I could write a PR to include them as importLoaders. Getting :import and :export to work might be a bit beyond me right now.

From the reaction to both this project & Mark's blog post last week, as well as the discussions at CampJS and in chat rooms, people are really excited about this kind of functionality. I think this would make a good next logical step for the life of CSS Modules, and give it the best chance of being adopted globally.

Thanks!

I get this error when webpack tries to run:

ERROR in ./bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot
Module parse failed: 
./bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./~/css-loader?importLoaders=1!./bower_components/bootstrap/dist/css/bootstrap.css 2:4480-4532 2:4551-4603

Here's my configuration

 module: {
    loaders: [
      // Pass *.jsx files through jsx-loader transform
      { test: /\.js$/, loaders: ['react-hot','jsx?harmony'] },

      { test: /\.css$/, loader: "style-loader!css-loader?importLoaders=1" }
    ]
  }

Is it something in my config that's wrong or missing something?

Hi!
Just getting started with CSS loader. here's my css:

body {
  background: pink;
}

and my js:

var React = require('react');

require('./home.css');

var Home = React.createClass({

    render() {
        return(
            <form className="CreatePlan">
                <h1>Create another plan</h1>
            </form>
        );
    }

});

module.exports = Home;

and my config:

var webpack = require('webpack');

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://0.0.0.0:3000',
    'webpack/hot/only-dev-server',
    './scripts/index'
  ],
  output: {
    path: __dirname + '/scripts/',
    filename: 'bundle.js',
    publicPath: '/scripts/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  resolve: {
    extensions: ['', '.js']
  },
  module: {
    loaders: [
      { test: /\.css$/, loader: "style!css" },
      { test: /\.js$/, loaders: ['react-hot', 'jsx?harmony'], exclude: /node_modules/ },
    ]
  }
};

and the error:

/Users/vince/projects/react-hot-boilerplate/node_modules/css-loader/node_modules/source-map/node_modules/amdefine/amdefine.js:274
});
^
SyntaxError: Unexpected token }
    at Module._compile (module.js:439:25)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/Users/vince/projects/react-hot-boilerplate/node_modules/css-loader/node_modules/source-map/lib/source-map/source-map-generator.js:8:18)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)

any ideas why?

When using the css-loader with a simple require("css!custom.css"); and an empty custom.css file, I receive the following error:

ERROR in ./~/css-loader!./app/css/custom.css
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../node_modules/css-loader/lib/css-base.js in C:\Gnu\tmp\css-loader-webpack/app/css
 @ ./~/css-loader!./app/css/custom.css 1:27-85

This seems to be a Windows specific error as I tried the same thing on a Unix system and it works there. So, probably a path problem when trying to resolve this line in /lib/loader.js:

163: return "exports = module.exports = require(" + loaderUtils.stringifyRequest(this, require.resolve("./css-base.js")) + ")();\n" +

I'm looking into guide lines on how to debug and hunt this bug. Any code location or ideas is welcomed.

To replicate, here a simple test case (on a Windows system).

# Layout
$ tree
├── app
│   ├── css
│   │   └── custom.css
│   └── js
│       └── main.js
└── webpack.config.js

# Node Modules
$ npm install style-loader css-loader

# app/css/custom.css

# app/js/main.js
require("css!custom.css");

# webpack.config.js
module.exports = {
  entry: "main.js",
  output: { filename: "bundle.js" },
  resolve: { root: [__dirname + "/app/css", __dirname + "/app/js"] },
};

# Command
$ webpack
Hash: 9eb81684d5adc83ab296
Version: webpack 1.9.10
Time: 216ms
    Asset    Size  Chunks             Chunk Names
bundle.js  1.8 kB       0  [emitted]  main
   [0] ./app/js/main.js 26 bytes {0} [built]
    + 1 hidden modules

ERROR in ./~/css-loader!./app/css/custom.css
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../node_modules/css-loader/lib/css-base.js in C:\Gnu\tmp\css-loader-webpack/app/css
 @ ./~/css-loader!./app/css/custom.css 1:27-85

It would be nice to have a simple way for defining variables.
Inheritance is a nice feature, but it doesn't cover every use case.

How about supporting the :root pseudo-class selector, so that we could have:

variables.css

.colors {
  --color-red: red;
  --color-blue: blue;
}

.fontSizes {
  --font-size-normal: 12px;
  --font-size-large: 14px;
}

component.css

:root {
  extends: colors from "shared/styles/variables.css";
}

.foo {
  color: var(--color-red);
}

transpiled to:

:root {
  --color-blue: blue;
  --color-red: red;
}

.foo {
  color: var(--color-red);
}

This works out of the box in Firefox and it can be transpiled back to CSS2 with postcss-custom-properties

See description of issue at: webpack-contrib/grunt-webpack#32

When I use webpack -p, I'm getting a non helping error message

ERROR in ./~/css-loader!./~/cssnext-loader!./src/index.css
Module build failed: Error: Please check the validity of the CSS block starting from the line #1
    at throwError (/.../node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:399:15)
    at checkStylesheet (/.../node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:1921:22)
    at Object.CSSPRules.stylesheet (/.../node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:365:40)
    at _getAST (/.../node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:409:38)
    at exports.srcToCSSP (/.../node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:2287:16)
    at Object.exports.srcToCSSP (/.../node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:2292:16)
    at Object.exports.parse (/.../node_modules/css-loader/node_modules/csso/lib/cssoapi.js:7:21)
    at Object.module.exports (/.../node_modules/css-loader/index.js:18:18)
 @ ./src/index.css 4:14-293

In this index.css I just have some inlined @import, so this error is not really helping.
Is there any way to improve that?

My first import is normalize.css and after taking a look in the <style> element I saw some empty :root elements (due to the fact I use future proof CSS transformed via cssnext).
It seems the parser you are using is kind of outdated for some part.

If you are using csso for minification, would you consider switch to a more fresh tool (csswring) based on an parser with an active development (postcss)?

Uglify is breaking all sorts of things with my CSS so I'm trying to enable disableStructuralMinification but I can't tell if it's working as nothing is changing. I've tried:

{test: /\.css$/, loader: 'style!css?disableStructuralMinification!'},
{test: /\.less$/, loaders: [
    "style-loader",
    "css-loader",
    "less-loader"
]}

And then I tried

{test: /\.css$/, loader: 'style!css},
{test: /\.less$/, loaders: [
    "style-loader",
    "css-loader?disableStructuralMinification!'",
    "less-loader"
]}

But it doesn't seem to resolve my issues. The minification process still moves CSS rules around in such a way that causes broken styling in my app.

What am I doing wrong?

File seems to be valid, and:

ERROR in ./www/fonts/font.woff2?-p2dq1s
Module parse failed: [..]/fonts/font.woff2?-p2dq1s Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./~/css-loader!./www/css/index.css 2:34960-34998

All other font files are fine.

What do you think about using the loaderContext.options.context as root, if no query.root is specified?

When I use local-scoped vars the require statement returns the selector names.

But when I use the ExtractTextPlugin, the selectors are no longer returned.

Should ExtractTextPlugin pass through the selectors hash from css-loader?

I am currently developing a sass loader which uses the original ruby sass compiler. When the css-loader processes the output and handles @import directives currently calls the sass loader again (which fails, since ruby sass can't seem to handle normal css files properly).
I think it would be better to call the loader defined in the webpack config for that file pattern instead.

ERROR in ./ionicons-1.5.2/fonts/ionicons.eot?v=1.5.2
Module parse failed: /***/ionicons-1.5.2/fonts/ionicons.eot?v=1.5.2 Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./~/css-loader!./ionicons-1.5.2/css/ionicons.css 2:300-340 2:356-396

ERROR in ./ionicons-1.5.2/fonts/ionicons.woff?v=1.5.2
Module parse failed: /***/ionicons-1.5.2/fonts/ionicons.woff?v=1.5.2 Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./~/css-loader!./ionicons-1.5.2/css/ionicons.css 2:515-556

etc...

fastparse is awesome tool. But if you will move to PostCSS you will have these benefits:

1. Most of source map code will be in PostCSS.
2. You can replace url() and support @import with full CSS parsing. It is much safer. We are already have awesome plugins for url() and @import.
3. PostCSS has “Safe Mode” to parse any legacy CSS (even broken).
4. Right now @ben-eb creating awesome modular CSS minifier (it is much easier to fix and develop modular tool) cssnano. Right now it has better results that [clean-css] without advanced mode. So, when it became equal to clean-css, we can use it, because it is a PostCSS plugin with same source map support.

@markdalgleish what do you think as PostCSS plugin developer?

I realise this error message has been reported before, but I'm not double chaining the css loader.

The css is the output from less-loader, specifically the less from www.material-ui.com.

webpack.config.js:

var webpack = require('webpack'),
    path    = require('path');

module.exports = {
    entry: './src/index.jsx',
    devtool: 'source-map',
    output: {
        path: path.join(__dirname, 'www'),
        filename: 'app.js'
    },
    resolve: {
        modulesDirectories: ['node_modules'],
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: 'style!css' },
            { test: /\.less$/, loader: 'style!css!less' },
            { test: /\.jsx$/, loader: 'jsx-loader?harmony&insertPragma=React.DOM' },
            { test: /\.js$/, loader: '6to5-loader'},
            { test: /\.(eot|woff)$/, loader: 'file' },
        ]
    }
};

entry point (index.jsx):

require('./material-ui.less');
var React= require('react'),
    HelloMessage= require('./firstview.jsx')
React.render(<HelloMessage name="Hello" />, document.getElementById('app'));

material-ui.less:

@import "~material-ui/src/less/scaffolding.less";
@import "~material-ui/src/less/components.less";

Output:

ERROR in ./~/css-loader!./~/less-loader!./src/material-ui.less
Module build failed: Error: Please check the validity of the CSS block starting from the line #3288
    at throwError (/Users/mg/Documents/js/scaffold-web-rx/node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:399:15)
    at getBlock (/Users/mg/Documents/js/scaffold-web-rx/node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:755:18)
    at getAtruleb (/Users/mg/Documents/js/scaffold-web-rx/node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:632:34)
    at getAtrule (/Users/mg/Documents/js/scaffold-web-rx/node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:606:28)
    at getStylesheet (/Users/mg/Documents/js/scaffold-web-rx/node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:1937:60)
    at Object.CSSPRules.stylesheet (/Users/mg/Documents/js/scaffold-web-rx/node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:365:69)
    at _getAST (/Users/mg/Documents/js/scaffold-web-rx/node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:409:38)
    at exports.srcToCSSP (/Users/mg/Documents/js/scaffold-web-rx/node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:2287:16)
    at Object.exports.srcToCSSP (/Users/mg/Documents/js/scaffold-web-rx/node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:2292:16)
    at Object.exports.parse (/Users/mg/Documents/js/scaffold-web-rx/node_modules/css-loader/node_modules/csso/lib/cssoapi.js:7:21)
 @ ./src/material-ui.less 4:14-231

Any ideas? Is there any way for me to see what's going on at line #3288? Please consider that this is my first attempt at using webpack so assume that Im capable of any newbie error possible.

I'm getting this error:

ERROR in ./~/css-loader!./src/main/webapp/js/modules/pages/styles/HelloWorld.css
Module build failed: Error: Please check the validity of the CSS block starting from the line #1
    at throwError (/Users/pairing/projects/alm/alm-webapp/node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:399:15)
    at checkStylesheet (/Users/pairing/projects/alm/alm-webapp/node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:1921:22)
    at Object.CSSPRules.stylesheet (/Users/pairing/projects/alm/alm-webapp/node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:365:40)
    at _getAST (/Users/pairing/projects/alm/alm-webapp/node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:409:38)
    at exports.srcToCSSP (/Users/pairing/projects/alm/alm-webapp/node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:2287:16)
    at Object.exports.srcToCSSP (/Users/pairing/projects/alm/alm-webapp/node_modules/css-loader/node_modules/csso/lib/gonzales.cssp.node.js:2292:16)
    at Object.exports.parse (/Users/pairing/projects/alm/alm-webapp/node_modules/css-loader/node_modules/csso/lib/cssoapi.js:7:21)
    at Object.module.exports (/Users/pairing/projects/alm/alm-webapp/node_modules/css-loader/index.js:13:18)
 @ ./src/main/webapp/js/modules/pages/SynchronousCommonJsPage.jsx 11:0-38

Webpack config:

module: {
loaders: [
    {
      test: /\.jsx$/,
      loader: 'jsx-loader?insertPragma=React.DOM'
    },
    {
      test: /\.css$/,
      loader: "style-loader!css-loader"
    }
  ]
}

Require:

require("css!./styles/HelloWorld.css");

HelloWorld.css:

.hello {
  font-weight: bold;
  font-size: 24px;
  color: purple;
}

These come the other way around in the output-css (using Extract-plugin)

@import url("~nanoscroller/bin/css/nanoscroller.css");
@import url("vendor/vendor_overrides.css");

When I have inline svg image like this:

background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26' fill='%23007aff'><rect width='4' height='4'/><rect x='8' y='1' width='34' height='2'/><rect y='11' width='4' height='4'/><rect x='8' y='12' width='34' height='2'/><rect y='22' width='4' height='4'/><rect x='8' y='23' width='34' height='2'/></svg>")

css-loader compile it to:

background-image: url(data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26' fill='%23007aff'><rect width='4' height='4'/><rect x='8' y='1' width='34' height='2'/><rect y='11' width='4' height='4'/><rect x='8' y='12' width='34' height='2'/><rect y='22' width='4' height='4'/><rect x='8' y='23' width='34' height='2'/></svg>)

Lost quotes, this code is invalid