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 #87 which was raised here. But in that case it was removing the escape characters, but in my case its adding extra escape characters 😄

[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 #493, seems for one escaped characters all works fine, maybe problems in some postcss plugin? Can you create minimal reproduce repo?