Css-loader: Escape Characters in CSS content not processed correctly

[rjnair-nm]

I am using css-loader and i could see that the content is not being processed correctly.

Original CSS :-

.icon-caret-left:before {
   content: “\F10C"
}

The above CSS was processed by webpack to :-

.icon-caret-left:before {
   content: '"\\f10c"'
}

Webpack: 2.2.1
CSS-Loader: 0.27.3
Node: 7.2.1

[michael-ciniawsky]

@rjnair-nm for getting started did an earlier version of css-loader process it correctly? 😛

[rjnair-nm]

@michael-ciniawsky I had tried using css-loader 0.25.0 with webpack 1 and that used to work fine. I was upgrading to webpack 2 and while using the latest version of css-loader with that, i came across this issue.

[michael-ciniawsky]

@rjnair-nm While copy and paste, maybe typo while you opened the issue maybe the root cause 😆

.icon-caret-left:before {
   content: “\F10C"
}

content:  “<= \F10C"  //  “ => "

[michael-ciniawsky]

The delimiters don't match

[michael-ciniawsky]

Otherwise I need webpack 1 && webpack 2 configs + ideally a small test repo for each to debug 😛

[rjnair-nm]

@michael-ciniawsky I am using a custom library like Bootsrap which has the class definition as below :-

.icon-caret-left:before {
  content: "\f10c"; 
}

When the webpack processes this via css-loader, it transforms to : -

.icon-caret-left:before {
   content: '"\\f10c"'
}

Webpack rule for css :-

const styleLoaders = ['css-loader?minimize&sourceMap&importLoaders=5', 'postcss-loader', 'sass-loader?sourceMap'];

{
              test: /.s?css$/,
              include: [path.join(root, 'src/client'), path.resolve(root, 'node_modules')],
              loader: IS_DEV ? 'style-loader!' + styleLoaders.join('!') : ExtractTextPlugin.extract({ fallback: 'style-loader', use: styleLoaders })
 }

I see this issue https://github.com/webpack-contrib/css-loader/issues/87 which was raised here. But in that case it was removing the escape characters, but in my case its adding extra escape characters :smile:

[michael-ciniawsky]

kk, as a 'workaround' would it be possible to reference bootstrap as static asset in meantime and exclude it from the bundle ? Also could you test another decl if it happens there also and a maybe pattern comes up when and where 😛 ?

[alexander-akait]

@rjnair-nm added tests https://github.com/webpack-contrib/css-loader/pull/493, seems for one escaped characters all works fine, maybe problems in some postcss plugin? Can you create minimal reproduce repo?

[zaneadix]

I'm having this same issue without postcss. I'm running sass-loader right into css-loader and getting similar output.

.oui-icon-star.oui-icon-filled:before { content: '\e20c'; }

outputs as

.oui-icon-star.oui-icon-filled:before { content: "'\\e20c'"; }

{
            test: /\.scss$/,
            include: [globalStyleMain],
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: ['css-loader', sassLoader],
            })
        }

"devDependencies": { ... "css-loader": "0.28.4", ... "sass-loader": "^6.0.0", ... "webpack": "^3.4.1", }

[zaneadix]

For anyone still having this issue I've created a temporary fix locally using a custom loader.

resolveLoader: {
    alias: {
        'escape-content-cleanup-loader': helpers.root('loaders/escape-content-cleanup-loader.js')
    }
},
...
module: {
    rules: [{
        test: /\.scss$/,
        use: ['style-loader', 'escape-content-cleanup-loader', 'css-loader', sassLoader]
    }]
}

custom loader

module.exports = function(content) {
    content = content.replace(/\\"'\\+([a-zA-Z0-9]){4}'\\"/g, function(value) {
        return value.replace(/'/g, '').replace(/\\\\/, '');
    });
    return content;
}

This is most likely highly tailored to my specific situation but you should get the jist. Just use a simple custom loader to run some cleanup on the css-loader output for now.

[alexander-akait]

Close in favor https://github.com/webpack-contrib/css-loader/issues/578

[Yaowenjie]

@zaneadix I used your way to customize one loader for my issue, which is about a special character in css content (e.g. ü inside of content: 'something über'), and it works fine. Thank you so much!