修复 vercel#589 css content unicode render error

Author: singleparty

CHANGELOG.md

@@ -1,15 +1,20 @@
-### `2020.05.18`
-- **`feat`**: `optional style tag`，eg: 
-  ```javascript
-  { bool && <style jsx></style> }
-  ```
-- **`fix`**: 修复多个dynamic导致属性设置出错bug
-  ```javascript
-  <style jsx>{`
-    .a { color: ${this.state.color} }
-  `}</style>
+- ## version: **`4.2.3`** 
+  *2020.05.24*
+  - **`fix`**: [#589 CSS content property no longer renders encoded characters](https://github.com/zeit/styled-jsx/issues/589) 
 
-  <style jsx>{`
-    .b { font-size: ${this.state.fontSize} }
-  `}</style>
-  ```
+- ## version: **`4.2.2`** 
+  *2020.05.18*  
+  - **`feat`**: `optional style tag`，eg: 
+    ```javascript
+    { bool && <style jsx></style> }
+    ```
+  - **`fix`**: 修复多个dynamic导致属性设置出错bug
+    ```javascript
+    <style jsx>{`
+      .a { color: ${this.state.color} }
+    `}</style>
+
+    <style jsx>{`
+      .b { font-size: ${this.state.fontSize} }
+    `}</style>
+    ```

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@ciiri/styled-jsx",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "license": "MIT",
   "repository": "https://github.com/singleparty/styled-jsx",
   "description": "Full CSS support for JSX without compromises",

package.json

@@ -1,16 +1,16 @@
 # @ciiri/styled-jsx
 
-### fork 自 [`styled-jsx`](https://github.com/zeit/styled-jsx) ，目的在于修复某些 bug，`api` 可参考原来的库，其中改动点如下:
+### fork 自 [`styled-jsx`](https://github.com/zeit/styled-jsx) ，`api` 可参考原来的库。改动点如下:
 
-- `scopeId` 插入到属性而不是 `class`
+- `scopeId` 插入到属性而不是原本的 `class`
 
   ```javascript
   <div class="orange" jsx-302262132 jsx-175175684 />
   ```
 
-- 修改底层 css 编译库 `stylis` 为 `@vue/component-compiler-utils`，修复 bug [-webkit-keyframes add unexpect scope id](https://github.com/thysultan/stylis.js/issues/200)
+- 修改底层 css 编译库 `stylis` 为 `@vue/component-compiler-utils`，fix bug [-webkit-keyframes add unexpect scope id](https://github.com/thysultan/stylis.js/issues/200)
 
-- 修复 `import style from 'xxx.module.scss` 语法无法兼容 `css-loader` 问题（这个不算 bug，只是找到一个解决方案 [`extract-loader`](https://github.com/peerigon/extract-loader)）
+- 解决 `import style from 'xxx.module.scss` 语法无法兼容 `css-loader` 问题（方案：[`extract-loader`](https://github.com/peerigon/extract-loader)）
 
 - `css` 语法与vue保持一致(因为换了编译库)，如果用scss的话，简单使用如下：
   ```css
@@ -32,7 +32,7 @@
   }
   ```
 
-- *`2020.05.18`* 新增 `optional style tag` 用法
+- **`version 4.2.2`** 新增 `optional style tag` 用法
   ```javascript
   { this.state.optional && <style jsx>{`
     .optional {
@@ -42,6 +42,8 @@
   `}</style> }
   ```
 
+- 以后`README`只同步新特性，bug相关修复同步在`CHANGELOG`
+
 
 ### 已有项目如何接入
 

readme.md

@@ -308,8 +308,8 @@ export const getJSXStyleInfo = (expr, scope) => {
   // Simple template literal without expressions
   if (node.expressions.length === 0) {
     return {
-      hash: hashString(node.quasis[0].value.raw),
-      css: node.quasis[0].value.raw,
+      hash: hashString(node.quasis[0].value.cooked),
+      css: node.quasis[0].value.cooked,
       expressions: [],
       dynamic: false,
       location
@@ -334,7 +334,7 @@ export const getJSXStyleInfo = (expr, scope) => {
   const dynamic = scope ? isDynamic(expr, scope) : false
   const css = quasis.reduce(
     (css, quasi, index) =>
-      `${css}${quasi.value.raw}${
+      `${css}${quasi.value.cooked}${
         quasis.length === index + 1 ? '' : `%%styled-jsx-placeholder-${index}%%`
       }`,
     ''

src/_utils.js

@@ -84,5 +84,13 @@ export default ({ display }) => (
         content: '\`';
       }
     `}</style>
+    <style jsx>{`
+      .green:before {
+        content: '\\590d\\6d3b\\000d\\000a';
+      }
+      .green:after {
+        content: ${'"\\590d\\6d3b\\000d\\000a"'};
+      }
+    `}</style>
   </div>
 )

test/fixtures/expressions.js

@@ -0,0 +1,9 @@
+.green:after {
+  content: "\590d\6d3b\000d\000a";
+}
+.green:before {
+  content: "`";
+}
+.App::v-deep .orange {
+  animation: scaleIn 3s ease-in forwards; 
+}

test/fixtures/transform2.css

@@ -2,19 +2,20 @@ import test from 'ava'
 import sinon from 'sinon'
 import loaderUtils from 'loader-utils'
 import webpack from '../src/webpack'
-import { normal } from './fixtures/webpack-loader-transform-css'
+import read from './_read'
 
-test('webpack loader 编译 css - default', t => {
+test('webpack loader 编译 css - default', async t => {
   const content = {
     resourcePath: '/src/App.module.scss',
     addDependency: () => {},
     callback: sinon.spy()
   }
+  const css = await read('./fixtures/transform2.css')
   const double = [
     sinon.stub(loaderUtils, 'getOptions').callsFake(() => null),
     sinon.stub(loaderUtils, 'parseQuery').callsFake(() => ({}))
   ]
-  webpack.call(content, normal)
+  webpack.call(content, css)
   double.forEach(stub => stub.restore())
   const args = content.callback.args[0]
   t.snapshot(args)