修复 vercel#589 css content unicode render error

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.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",

readme.md

@@ -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`
+
 
 ### 已有项目如何接入
 

src/_utils.js

@@ -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}%%`
  }`,
  ''

test/fixtures/expressions.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/transform2.css

@@ -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/webpack.js

@@ -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)