Fork Stylis prefixer (#2890)

* Fork Stylis prefixer * Create long-pianos-swim.md * Create short-pianos-swim.md * Update .changeset/long-pianos-swim.md
emotion-js · Oct 27, 2022 · d8a13bc · d8a13bc
1 parent c1ee578
commit d8a13bc
Show file tree

Hide file tree

Showing 9 changed files with 360 additions and 13 deletions.
diff --git a/.changeset/long-pianos-swim.md b/.changeset/long-pianos-swim.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/short-pianos-swim.md b/.changeset/short-pianos-swim.md
@@ -0,0 +1,5 @@
+---
+"@emotion/cache": patch
+---
+
+An edge case issue with some specific CSS variables being treated as prefixable declarations got fixed by updating the underlying parser ([stylis](https://github.com/thysultan/stylis)).
diff --git a/packages/babel-plugin/package.json b/packages/babel-plugin/package.json
@@ -28,7 +28,7 @@
     "escape-string-regexp": "^4.0.0",
     "find-root": "^1.1.0",
     "source-map": "^0.5.7",
-    "stylis": "4.0.13"
+    "stylis": "4.1.2"
   },
   "peerDependencies": {
     "@babel/core": "^7.0.0"

diff --git a/packages/cache/package.json b/packages/cache/package.json
@@ -29,7 +29,7 @@
     "@emotion/sheet": "^1.2.0",
     "@emotion/utils": "^1.2.0",
     "@emotion/weak-memoize": "^0.3.0",
-    "stylis": "4.0.13"
+    "stylis": "4.1.2"
   },
   "devDependencies": {
     "@definitelytyped/dtslint": "0.0.112",

diff --git a/packages/cache/src/index.js b/packages/cache/src/index.js
@@ -7,7 +7,6 @@ import {
   middleware,
   rulesheet,
   stringify,
-  prefixer,
   COMMENT
 } from 'stylis'
 import weakMemoize from '@emotion/weak-memoize'
@@ -18,6 +17,7 @@ import {
   createUnsafeSelectorsAlarm,
   incorrectImportAlarm
 } from './stylis-plugins'
+import { prefixer } from './prefixer'
 import type { StylisPlugin } from './types'
 
 let isBrowser = typeof document !== 'undefined'

diff --git a/packages/cache/src/prefixer.js b/packages/cache/src/prefixer.js
@@ -0,0 +1,340 @@
+/* eslint-disable no-fallthrough */
+/* eslint-disable eqeqeq */
+import {
+  charat,
+  combine,
+  copy,
+  DECLARATION,
+  hash,
+  indexof,
+  KEYFRAMES,
+  match,
+  MOZ,
+  MS,
+  replace,
+  RULESET,
+  serialize,
+  strlen,
+  WEBKIT
+} from 'stylis'
+
+// this is a copy of stylis@4.0.13 prefixer, the latter version introduced grid prefixing which we don't want
+
+function prefix(value, length) {
+  switch (hash(value, length)) {
+    // color-adjust
+    case 5103:
+      return WEBKIT + 'print-' + value + value
+    // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
+    case 5737:
+    case 4201:
+    case 3177:
+    case 3433:
+    case 1641:
+    case 4457:
+    case 2921:
+    // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
+    case 5572:
+    case 6356:
+    case 5844:
+    case 3191:
+    case 6645:
+    case 3005:
+    // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
+    case 6391:
+    case 5879:
+    case 5623:
+    case 6135:
+    case 4599:
+    case 4855:
+    // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
+    case 4215:
+    case 6389:
+    case 5109:
+    case 5365:
+    case 5621:
+    case 3829:
+      return WEBKIT + value + value
+    // appearance, user-select, transform, hyphens, text-size-adjust
+    case 5349:
+    case 4246:
+    case 4810:
+    case 6968:
+    case 2756:
+      return WEBKIT + value + MOZ + value + MS + value + value
+    // flex, flex-direction
+    case 6828:
+    case 4268:
+      return WEBKIT + value + MS + value + value
+    // order
+    case 6165:
+      return WEBKIT + value + MS + 'flex-' + value + value
+    // align-items
+    case 5187:
+      return (
+        WEBKIT +
+        value +
+        replace(
+          value,
+          /(\w+).+(:[^]+)/,
+          WEBKIT + 'box-$1$2' + MS + 'flex-$1$2'
+        ) +
+        value
+      )
+    // align-self
+    case 5443:
+      return (
+        WEBKIT +
+        value +
+        MS +
+        'flex-item-' +
+        replace(value, /flex-|-self/, '') +
+        value
+      )
+    // align-content
+    case 4675:
+      return (
+        WEBKIT +
+        value +
+        MS +
+        'flex-line-pack' +
+        replace(value, /align-content|flex-|-self/, '') +
+        value
+      )
+    // flex-shrink
+    case 5548:
+      return WEBKIT + value + MS + replace(value, 'shrink', 'negative') + value
+    // flex-basis
+    case 5292:
+      return (
+        WEBKIT + value + MS + replace(value, 'basis', 'preferred-size') + value
+      )
+    // flex-grow
+    case 6060:
+      return (
+        WEBKIT +
+        'box-' +
+        replace(value, '-grow', '') +
+        WEBKIT +
+        value +
+        MS +
+        replace(value, 'grow', 'positive') +
+        value
+      )
+    // transition
+    case 4554:
+      return (
+        WEBKIT +
+        replace(value, /([^-])(transform)/g, '$1' + WEBKIT + '$2') +
+        value
+      )
+    // cursor
+    case 6187:
+      return (
+        replace(
+          replace(
+            replace(value, /(zoom-|grab)/, WEBKIT + '$1'),
+            /(image-set)/,
+            WEBKIT + '$1'
+          ),
+          value,
+          ''
+        ) + value
+      )
+    // background, background-image
+    case 5495:
+    case 3959:
+      return replace(value, /(image-set\([^]*)/, WEBKIT + '$1' + '$`$1')
+    // justify-content
+    case 4968:
+      return (
+        replace(
+          replace(
+            value,
+            /(.+:)(flex-)?(.*)/,
+            WEBKIT + 'box-pack:$3' + MS + 'flex-pack:$3'
+          ),
+          /s.+-b[^;]+/,
+          'justify'
+        ) +
+        WEBKIT +
+        value +
+        value
+      )
+    // (margin|padding)-inline-(start|end)
+    case 4095:
+    case 3583:
+    case 4068:
+    case 2532:
+      return replace(value, /(.+)-inline(.+)/, WEBKIT + '$1$2') + value
+    // (min|max)?(width|height|inline-size|block-size)
+    case 8116:
+    case 7059:
+    case 5753:
+    case 5535:
+    case 5445:
+    case 5701:
+    case 4933:
+    case 4677:
+    case 5533:
+    case 5789:
+    case 5021:
+    case 4765:
+      // stretch, max-content, min-content, fill-available
+      if (strlen(value) - 1 - length > 6)
+        switch (charat(value, length + 1)) {
+          // (m)ax-content, (m)in-content
+          case 109:
+            // -
+            if (charat(value, length + 4) !== 45) break
+          // (f)ill-available, (f)it-content
+          case 102:
+            return (
+              replace(
+                value,
+                /(.+:)(.+)-([^]+)/,
+                '$1' +
+                  WEBKIT +
+                  '$2-$3' +
+                  '$1' +
+                  MOZ +
+                  (charat(value, length + 3) == 108 ? '$3' : '$2-$3')
+              ) + value
+            )
+          // (s)tretch
+          case 115:
+            return ~indexof(value, 'stretch')
+              ? prefix(replace(value, 'stretch', 'fill-available'), length) +
+                  value
+              : value
+        }
+      break
+    // position: sticky
+    case 4949:
+      // (s)ticky?
+      if (charat(value, length + 1) !== 115) break
+    // display: (flex|inline-flex)
+    case 6444:
+      switch (
+        charat(value, strlen(value) - 3 - (~indexof(value, '!important') && 10))
+      ) {
+        // stic(k)y
+        case 107:
+          return replace(value, ':', ':' + WEBKIT) + value
+        // (inline-)?fl(e)x
+        case 101:
+          return (
+            replace(
+              value,
+              /(.+:)([^;!]+)(;|!.+)?/,
+              '$1' +
+                WEBKIT +
+                (charat(value, 14) === 45 ? 'inline-' : '') +
+                'box$3' +
+                '$1' +
+                WEBKIT +
+                '$2$3' +
+                '$1' +
+                MS +
+                '$2box$3'
+            ) + value
+          )
+      }
+      break
+    // writing-mode
+    case 5936:
+      switch (charat(value, length + 11)) {
+        // vertical-l(r)
+        case 114:
+          return (
+            WEBKIT +
+            value +
+            MS +
+            replace(value, /[svh]\w+-[tblr]{2}/, 'tb') +
+            value
+          )
+        // vertical-r(l)
+        case 108:
+          return (
+            WEBKIT +
+            value +
+            MS +
+            replace(value, /[svh]\w+-[tblr]{2}/, 'tb-rl') +
+            value
+          )
+        // horizontal(-)tb
+        case 45:
+          return (
+            WEBKIT +
+            value +
+            MS +
+            replace(value, /[svh]\w+-[tblr]{2}/, 'lr') +
+            value
+          )
+      }
+
+      return WEBKIT + value + MS + value + value
+  }
+
+  return value
+}
+
+export let prefixer = (element, index, children, callback) => {
+  if (element.length > -1)
+    if (!element.return)
+      switch (element.type) {
+        case DECLARATION:
+          element.return = prefix(element.value, element.length)
+          break
+        case KEYFRAMES:
+          return serialize(
+            [
+              copy(element, {
+                value: replace(element.value, '@', '@' + WEBKIT)
+              })
+            ],
+            callback
+          )
+        case RULESET:
+          if (element.length)
+            return combine(element.props, function (value) {
+              switch (match(value, /(::plac\w+|:read-\w+)/)) {
+                // :read-(only|write)
+                case ':read-only':
+                case ':read-write':
+                  return serialize(
+                    [
+                      copy(element, {
+                        props: [replace(value, /:(read-\w+)/, ':' + MOZ + '$1')]
+                      })
+                    ],
+                    callback
+                  )
+                // :placeholder
+                case '::placeholder':
+                  return serialize(
+                    [
+                      copy(element, {
+                        props: [
+                          replace(
+                            value,
+                            /:(plac\w+)/,
+                            ':' + WEBKIT + 'input-$1'
+                          )
+                        ]
+                      }),
+                      copy(element, {
+                        props: [replace(value, /:(plac\w+)/, ':' + MOZ + '$1')]
+                      }),
+                      copy(element, {
+                        props: [replace(value, /:(plac\w+)/, MS + 'input-$1')]
+                      })
+                    ],
+                    callback
+                  )
+              }
+
+              return ''
+            })
+      }
+}
diff --git a/packages/css-prettifier/package.json b/packages/css-prettifier/package.json
@@ -20,7 +20,7 @@
   "repository": "https://github.com/emotion-js/emotion/tree/main/packages/css-prettifier",
   "dependencies": {
     "@emotion/memoize": "^0.8.0",
-    "stylis": "4.0.13"
+    "stylis": "4.1.2"
   },
   "publishConfig": {
     "access": "public"