CSS url with spaces not escaped in output

[romanzoller]

Do you want to request a feature or report a bug?
bug

What is the current behavior?
For input:

.red-square {
  content:  url("red dot.png");
}

the output in combination with file loader name: '[name].[ext]' is:

.red-square {
  content: url(red dot.png);
}

(note that "" are missing)

If the current behavior is a bug, please provide the steps to reproduce.

See https://github.com/romanzoller/css-loader-url for complete example.

What is the expected behavior?

Output should be:

.red-square {
  content: url("red dot.png");
}

and/or space should be escaped in another way.

See CSS spec:

The format of a URI value is 'url(' followed by optional white space followed by an optional single quote (') or double quote (") character followed by the URI itself, followed by an optional single quote (') or double quote (") character followed by optional white space followed by ')'. The two quote characters must be the same.

and

Some characters appearing in an unquoted URI, such as parentheses, white space characters, single quotes (') and double quotes ("), must be escaped with a backslash so that the resulting URI value is a URI token: '(', ')'.

Please mention other relevant information such as your webpack version, Node.js version and Operating System.

package.json:

{
  "scripts": {
    "build": "NODE_ENV=production webpack && cp src/index.html dist/index.html"
  },
  "devDependencies": {
    "css-loader": "^0.26.1",
    "file-loader": "^0.9.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.14.0"
  }
}

[stevestock]

Is there any workaround besides removing spaces from filenames?

[romanzoller]

Is there any workaround besides removing spaces from filenames?

That or not using [name] in the name option of file-loader, I haven't found anything else.

[michael-ciniawsky]

@stevestock @romanzoller Sry I will take a look into that soon meanwhile avoid [name]

[alexander-akait]

/cc @michael-ciniawsky can we close this issue?

[michael-ciniawsky]

@evilebottnawi yep 😛

[RRmallaP]

Hello, I am still having this issue. In angular 4 application, when built in production mode, quotation mark is kept if there are two spaces in the path but with one space, quotation mark is removed . For example,
before ng build --prod the background-image property looks like this:

    background-image: url('./assets/images/page-frames/plain frame gold.png');
    background-image: url('./assets/images/page-frames/stars decoration.png');

after ng build --prod, this is what I see in the browser:

    background-image: url("plain frame gold.a6cb25309f3fd2ac8afa.png");
    background-image: url(stars decoration.dd31f5b394f81c30b0b5.png);

Am I missing something here?

[alexander-akait]

@RRmallaP which version css-loader are you?

[RRmallaP]

@evilebottnawi Its version 0.28.7