Search code examples
csswebpackcss-loader

css-loader is encoding quotes inside generated url()

My configuration is as follows:

// webpack.config.

{
    test: /\.pug$/,
    exclude: /node_modules/,
    use: "pug-loader"
},

{
    test: /\.scss$/,
    exclude: /node_modules|_.+.scss/,
    use: [
        {
            loader: "css-loader",
            options: {
                modules: {
                    mode: "local",
                    localIdentName:
                        process.env.NODE_ENV === "development"
                            ? "[local]"
                            : "[hash:base64]"
                },
                sourceMap: process.env.NODE_ENV === "development" ? true : false
            }
        },
        "postcss-loader",
        "sass-loader"
    ]
}

// index.pug

style(type="text/css")
    =require("../styles/styles.module.scss")

// styles.module.scss

content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z' fill='%23555'/%3E%3C/svg%3E");

The problem is that in the compiled css code, the quotes gets encoded, thus this is what I get:

content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 00-2 2v14a2 2 0 002 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z' fill='%23555'/%3E%3C/svg%3E");

Any ideas how to automatically decode the quotes?

UPDATE: Apparently this happens with quotes in general, hence:

content: '';
// or
content: "";

becomes:

content: "
Solution

  • Just found it out, culprit was pug and not css-loader.

    Since I was including the generated styles inline like so:

    style(type="text/css")
    =require("../styles/styles.module.scss")

    pug escaped the css as per documentation:

    By default, all attributes are escaped—that is,special characters are replaced with escape sequences—to prevent attacks (such as cross site scripting).

    Solution is explained in the very next line of documentation:

    If you need to use special characters, use != instead of =.

    thus including the styles like so:

    style(type="text/css")
    !=require("../styles/styles.module.scss")

    fixed the issue.