Add warnings about using illegal escape sequances (#1478)

* Add warnings about using illegal escape sequances * Fix things * Add changesets * sequance -> sequence
emotion-js · Aug 23, 2019 · 66cda64 · 66cda64
1 parent 5193881
commit 66cda64
Show file tree

Hide file tree

Showing 20 changed files with 7,375 additions and 8,358 deletions.
diff --git a/.changeset/afraid-paws-roll/changes.json b/.changeset/afraid-paws-roll/changes.json
@@ -0,0 +1,10 @@
+{
+  "releases": [
+    { "name": "@emotion/core", "type": "patch" },
+    { "name": "emotion", "type": "patch" },
+    { "name": "@emotion/serialize", "type": "patch" },
+    { "name": "@emotion/styled-base", "type": "patch" },
+    { "name": "@emotion/styled", "type": "patch" }
+  ],
+  "dependents": []
+}
diff --git a/.changeset/afraid-paws-roll/changes.md b/.changeset/afraid-paws-roll/changes.md
@@ -0,0 +1 @@
+Add warnings about using illegal escape sequences
diff --git a/.changeset/tasty-hotels-check/changes.json b/.changeset/tasty-hotels-check/changes.json
@@ -0,0 +1,10 @@
+{
+  "releases": [
+    { "name": "@emotion/babel-preset-css-prop", "type": "patch" },
+    { "name": "@emotion/core", "type": "patch" },
+    { "name": "emotion-theming", "type": "patch" },
+    { "name": "jest-emotion", "type": "patch" },
+    { "name": "@emotion/styled-base", "type": "patch" }
+  ],
+  "dependents": []
+}
diff --git a/.changeset/tasty-hotels-check/changes.md b/.changeset/tasty-hotels-check/changes.md
@@ -0,0 +1 @@
+Update Babel dependencies
diff --git a/.flowconfig b/.flowconfig
@@ -7,6 +7,7 @@
 .*/node_modules/graphql/.*
 .*/node_modules/metro.*
 .*/node_modules/preact/.*
+.*/node_modules/@parcel/.*
 
 [untyped]
 .*/node_modules/polished/.*

diff --git a/.flowconfig-ci b/.flowconfig-ci
@@ -7,6 +7,7 @@
 .*/node_modules/graphql/.*
 .*/node_modules/metro.*
 .*/node_modules/preact/.*
+.*/node_modules/@parcel/.*
 
 
 [untyped]

diff --git a/package.json b/package.json
@@ -158,18 +158,18 @@
     }
   },
   "dependencies": {
-    "@babel/core": "^7.0.0",
+    "@babel/core": "^7.5.5",
     "@babel/helper-module-imports": "^7.0.0",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
     "@babel/plugin-syntax-jsx": "^7.2.0",
-    "@babel/plugin-transform-flow-strip-types": "^7.4.0",
-    "@babel/plugin-transform-react-jsx": "^7.1.6",
-    "@babel/preset-env": "^7.0.0",
+    "@babel/plugin-transform-flow-strip-types": "^7.4.4",
+    "@babel/plugin-transform-react-jsx": "^7.3.0",
+    "@babel/preset-env": "^7.5.5",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-stage-0": "^7.0.0",
-    "@babel/register": "^7.0.0",
-    "@babel/runtime": "^7.4.3",
+    "@babel/register": "^7.5.5",
+    "@babel/runtime": "^7.5.5",
     "@changesets/cli": "^1.3.0",
     "@changesets/get-github-info": "^0.1.3",
     "@mdx-js/mdx": "^1.1.0",
@@ -288,7 +288,7 @@
     "react-error-overlay": "^3.0.0",
     "react-helmet": "^5.2.0",
     "react-icons": "^2.2.7",
-    "react-live": "^1.7.1",
+    "react-live": "1.10.0",
     "react-native": "^0.57.0",
     "react-native-web": "0.9.6",
     "react-primitives": "^0.7.0",

diff --git a/packages/babel-preset-css-prop/package.json b/packages/babel-preset-css-prop/package.json
@@ -7,10 +7,10 @@
   "license": "MIT",
   "repository": "https://github.com/emotion-js/emotion/tree/master/packages/babel-preset-css-prop",
   "dependencies": {
-    "@babel/plugin-transform-react-jsx": "^7.1.6",
+    "@babel/plugin-transform-react-jsx": "^7.3.0",
+    "@babel/runtime": "^7.5.5",
     "@emotion/babel-plugin-jsx-pragmatic": "^0.1.3",
-    "babel-plugin-emotion": "^10.0.14",
-    "@babel/runtime": "^7.4.3"
+    "babel-plugin-emotion": "^10.0.14"
   },
   "peerDependencies": {
     "@babel/core": "^7.0.0"
@@ -22,4 +22,4 @@
     "src",
     "dist"
   ]
-}
+}
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -27,7 +27,7 @@
     "test:typescript": "dtslint types"
   },
   "dependencies": {
-    "@babel/runtime": "^7.4.3",
+    "@babel/runtime": "^7.5.5",
     "@emotion/cache": "^10.0.15",
     "@emotion/css": "^10.0.14",
     "@emotion/serialize": "^0.11.9",
@@ -55,4 +55,4 @@
   "preconstruct": {
     "umdName": "emotionCore"
   }
-}
+}
diff --git a/packages/emotion-theming/package.json b/packages/emotion-theming/package.json
@@ -38,7 +38,7 @@
     "dtslint": "^0.3.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.4.3",
+    "@babel/runtime": "^7.5.5",
     "@emotion/weak-memoize": "0.2.3",
     "hoist-non-react-statics": "^3.3.0"
   },
@@ -54,4 +54,4 @@
   "preconstruct": {
     "umdName": "emotionTheming"
   }
-}
+}
diff --git a/packages/emotion/test/no-babel/warnings.test.js b/packages/emotion/test/no-babel/warnings.test.js
@@ -0,0 +1,47 @@
+// @flow
+import 'test-utils/legacy-env'
+import { css } from 'emotion'
+
+// $FlowFixMe
+console.error = jest.fn()
+
+afterEach(() => {
+  jest.clearAllMocks()
+})
+
+it('warns about illegal escape sequences inside first quasi of template literal', () => {
+  css`
+    :before {
+      content: '\00d7';
+    }
+  `
+
+  expect(console.error.mock.calls[0]).toMatchInlineSnapshot(`
+        Array [
+          "You have illegal escape sequence in your template literal, most likely inside content's property value.
+        Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \\"content: '\\\\00d7';\\" should become \\"content: '\\\\\\\\00d7';\\".
+        You can read more about this here:
+        https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences",
+        ]
+    `)
+})
+
+it('warns about illegal escape sequences inside non-first quasi of template literal', () => {
+  const color = `color: hotpink`
+  css`
+    background-color: black;
+    ${color};
+    :before {
+      content: '\00d7';
+    }
+  `
+
+  expect(console.error.mock.calls[0]).toMatchInlineSnapshot(`
+    Array [
+      "You have illegal escape sequence in your template literal, most likely inside content's property value.
+    Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \\"content: '\\\\00d7';\\" should become \\"content: '\\\\\\\\00d7';\\".
+    You can read more about this here:
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences",
+    ]
+  `)
+})
diff --git a/packages/jest-emotion/package.json b/packages/jest-emotion/package.json
@@ -14,7 +14,7 @@
     "test:typescript": "dtslint types"
   },
   "dependencies": {
-    "@babel/runtime": "^7.4.3",
+    "@babel/runtime": "^7.5.5",
     "@types/jest": "^23.0.2",
     "chalk": "^2.4.1",
     "css": "^2.2.1"
@@ -49,4 +49,4 @@
   "browser": {
     "./dist/jest-emotion.cjs.js": "./dist/jest-emotion.browser.cjs.js"
   }
-}
+}
diff --git a/packages/serialize/src/index.js b/packages/serialize/src/index.js
@@ -8,6 +8,11 @@ import hashString from '@emotion/hash'
 import unitless from '@emotion/unitless'
 import memoize from '@emotion/memoize'
 
+const ILLEGAL_ESCAPE_SEQUENCE_ERROR = `You have illegal escape sequence in your template literal, most likely inside content's property value.
+Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example "content: '\\00d7';" should become "content: '\\\\00d7';".
+You can read more about this here:
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences`
+
 let hyphenateRegex = /[A-Z]|^ms/g
 let animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g
 
@@ -321,6 +326,9 @@ export const serializeStyles = function(
     stringMode = false
     styles += handleInterpolation(mergedProps, registered, strings, false)
   } else {
+    if (process.env.NODE_ENV !== 'production' && strings[0] === undefined) {
+      console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR)
+    }
     styles += strings[0]
   }
   // we start at 1 since we've already handled the first arg
@@ -332,6 +340,9 @@ export const serializeStyles = function(
       styles.charCodeAt(styles.length - 1) === 46
     )
     if (stringMode) {
+      if (process.env.NODE_ENV !== 'production' && strings[i] === undefined) {
+        console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR)
+      }
       styles += strings[i]
     }
   }

diff --git a/packages/styled-base/package.json b/packages/styled-base/package.json
@@ -15,7 +15,7 @@
     "test:typescript": "dtslint types"
   },
   "dependencies": {
-    "@babel/runtime": "^7.4.3",
+    "@babel/runtime": "^7.5.5",
     "@emotion/is-prop-valid": "0.8.2",
     "@emotion/serialize": "^0.11.9",
     "@emotion/utils": "0.11.2"
@@ -40,4 +40,4 @@
   "preconstruct": {
     "umdName": "emotionStyledBase"
   }
-}
+}
diff --git a/packages/styled-base/src/index.js b/packages/styled-base/src/index.js
@@ -10,6 +10,11 @@ import { withEmotionCache, ThemeContext } from '@emotion/core'
 import { getRegisteredStyles, insertStyles } from '@emotion/utils'
 import { serializeStyles } from '@emotion/serialize'
 
+const ILLEGAL_ESCAPE_SEQUENCE_ERROR = `You have illegal escape sequence in your template literal, most likely inside content's property value.
+Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example "content: '\\00d7';" should become "content: '\\\\00d7';".
+You can read more about this here:
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences`
+
 let isBrowser = typeof document !== 'undefined'
 
 type StyledComponent = (
@@ -63,10 +68,16 @@ let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {
     if (args[0] == null || args[0].raw === undefined) {
       styles.push.apply(styles, args)
     } else {
+      if (process.env.NODE_ENV !== 'production' && args[0][0] === undefined) {
+        console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR)
+      }
       styles.push(args[0][0])
       let len = args.length
       let i = 1
       for (; i < len; i++) {
+        if (process.env.NODE_ENV !== 'production' && args[0][i] === undefined) {
+          console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR)
+        }
         styles.push(args[i], args[0][i])
       }
     }

diff --git a/packages/styled/__tests__/warnings.js b/packages/styled/__tests__/warnings.js
@@ -0,0 +1,50 @@
+// @flow
+import 'test-utils/legacy-env'
+import { css } from '@emotion/core'
+import styled from '@emotion/styled'
+
+// $FlowFixMe
+console.error = jest.fn()
+
+afterEach(() => {
+  jest.clearAllMocks()
+})
+
+it('warns about illegal escape sequences inside first quasi of template literal', () => {
+  styled.div`
+    :before {
+      content: '\00d7';
+    }
+  `
+
+  expect(console.error.mock.calls[0]).toMatchInlineSnapshot(`
+    Array [
+      "You have illegal escape sequence in your template literal, most likely inside content's property value.
+    Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \\"content: '\\\\00d7';\\" should become \\"content: '\\\\\\\\00d7';\\".
+    You can read more about this here:
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences",
+    ]
+  `)
+})
+
+it('warns about illegal escape sequences inside non-first quasi of template literal', () => {
+  const color = css`
+    color: hotpink;
+  `
+  styled.div`
+    background-color: black;
+    ${color};
+    :before {
+      content: '\00d7';
+    }
+  `
+
+  expect(console.error.mock.calls[0]).toMatchInlineSnapshot(`
+    Array [
+      "You have illegal escape sequence in your template literal, most likely inside content's property value.
+    Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \\"content: '\\\\00d7';\\" should become \\"content: '\\\\\\\\00d7';\\".
+    You can read more about this here:
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences",
+    ]
+  `)
+})
diff --git a/scripts/babel-preset-emotion-dev/package.json b/scripts/babel-preset-emotion-dev/package.json
@@ -4,9 +4,9 @@
   "version": "9.2.6",
   "private": true,
   "dependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-transform-flow-strip-types": "^7.4.4",
     "babel-plugin-add-basic-constructor-for-react-components": "^0.1.0",
-    "babel-plugin-fix-dce-for-classes-with-statics": "^0.1.0",
-    "@babel/plugin-transform-flow-strip-types": "^7.4.0"
+    "babel-plugin-fix-dce-for-classes-with-statics": "^0.1.0"
   }
 }
diff --git a/scripts/benchmarks/package.json b/scripts/benchmarks/package.json
@@ -8,7 +8,7 @@
     "run-benchmark": "node run.js"
   },
   "dependencies": {
-    "@babel/core": "^7.0.0",
+    "@babel/core": "^7.5.5",
     "babel-core": "^6.26.3",
     "babel-plugin-emotion": "^10.0.9",
     "babel-plugin-react-native-web": "^0.9.6",

diff --git a/site/package.json b/site/package.json
@@ -40,7 +40,7 @@
     "react-error-overlay": "^3.0.0",
     "react-helmet": "^5.2.0",
     "react-icons": "^2.2.7",
-    "react-live": "^1.7.1",
+    "react-live": "1.10.0",
     "recompose": "^0.27.1",
     "remark-frontmatter": "^1.1.0",
     "remark-parse": "^4.0.0",