Externally imported contents in CSS files have strings escaped (content:'\xxx' dont render right)

[ruhaim]

Bug report

css content strings added for icons appear as stings not as icons

Describe the bug

a css class defined as
.a::before { content: '\f054'; }
dont render the icon, instead some text is displayed
A clear and concise description of what the bug is.

To Reproduce

USe this code sandbox to view the issue and a probable workaround with scss
https://codesandbox.io/s/async-wind-uj7z6
Steps to reproduce the behavior, please provide code snippets or a repository:

1. Create a css class with 'content' eg: a.css
   a::before { content: '\f054'; }
2. import the css class into the react component
   import css from "../style/a.css";
3. <style jsx>{css}</style> in the component to render the styles
4. in the render function add html in a way that the class will get selected
   eg:
   <a>Hi</a>

Expected behavior

The icon should render instead of the text

Screenshots

If applicable, add screenshots to help explain your problem.

System information

-package.json dev deps
"devDependencies": { "cross-env": "^5.2.0", "node-sass": "^4.7.2", "sass-loader": "7.1.0" },
-next.config.js
`
module.exports = {
webpack: (config, { defaultLoaders }) => {
config.module.rules.push({
test: /.scss|css$/,
use: [
defaultLoaders.babel,
{
loader: require('styled-jsx/webpack').loader,
options: {
type: 'scoped'
}
},
'sass-loader'
]
})

  return config
}

}
`

• Browser Chrome
• Version of Next.js: seems to be broken in v9, v9.1 and v9.2, works fine in v7 and v8 though

Additional context

Seems like a issue related to the style-jsx version that is bundled
vercel/styled-jsx#589, i have commented my findings and workaround in that issue as well

[ruhaim]

As a workaround you can define the content in SCSS using the unquote function as below
.c::before { content: unquote('"\f054"'); } .d::before { content: unquote("'\f054'"); }

[Timer]

Duplicate of vercel/styled-jsx#589

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.