fix(precedence): calculate for nested at-rules

tw-in-js · Dec 9, 2020 · 1817e7d · 1817e7d
1 parent 27ca438
commit 1817e7d
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 26 deletions.
diff --git a/packages/core/src/__tests__/preflight.test.ts b/packages/core/src/__tests__/preflight.test.ts
@@ -19,31 +19,31 @@ test('add preflight styles', () => {
     '*,::before,::after{box-sizing:border-box;border:0 solid #e5e7eb}',
     'h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}',
     'a{color:inherit;text-decoration:inherit}',
+    '::-moz-focus-inner{border-style:none;padding:0}',
     '[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}',
     'pre,code,kbd,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}',
     'img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}',
     'img,video{max-width:100%;height:auto}',
-    '::-moz-focus-inner{border-style:none;padding:0}',
     'button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}',
     '::-webkit-search-decoration{-webkit-appearance:none}',
     'button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}',
     'summary{display:list-item}',
+    'sub{bottom:-0.25em}',
+    'sup{top:-0.5em}',
     'blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}',
     'textarea{resize:vertical}',
     'input::placeholder,textarea::placeholder{color:#a1a1aa}',
     'button,[role="button"]{cursor:pointer}',
     ':-moz-focusring{outline:1px dotted ButtonText}',
     'legend{padding:0}',
     '::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}',
-    'sub{bottom:-0.25em}',
-    'sup{top:-0.5em}',
     ':root{tab-size:4;-moz-tab-size:4}',
+    'img{border-style:solid}',
     'button,select{text-transform:none}',
     ':-moz-ui-invalid{box-shadow:none}',
     'progress{vertical-align:baseline}',
     'abbr[title]{text-decoration:underline dotted}',
     'b,strong{font-weight:bolder}',
-    'img{border-style:solid}',
   ])
 })
 

diff --git a/packages/core/src/internal/presedence.ts b/packages/core/src/internal/presedence.ts
@@ -4,12 +4,11 @@
 // License MIT
 
 import type { ThemeResolver } from '@tw-in-js/types'
+
 import { tail, includes } from './util'
 
 // Shared variables
-let _: string
-let precedence: number
-let match: RegExpExecArray | null
+let _: string | RegExpExecArray | null | number
 
 // 0=none, 1=sm, 2=md, 3=lg, 4=xl, 5=2xl, 6=??, 7=??
 // 0 - 31: 5 bits
@@ -18,25 +17,25 @@ let match: RegExpExecArray | null
 // 36rem -> 3
 // 96rem -> 9
 export const responsivePrecedence = (css: string): number =>
-  (((match = /(?:^|min-width:\s*)(\d+(?:.\d+)?)(p)?/.exec(css))
-    ? +match[1] / (match[2] ? 15 : 1) / 10
-    : 0) &
+  (((_ = /(?:^|min-width:\s*)(\d+(?:.\d+)?)(p)?/.exec(css)) ? +_[1] / (_[2] ? 15 : 1) / 10 : 0) &
     31) <<
-  22
+  23
 
 // Colon and dash count of string (ascending): 0 -> 7 => 3 bits
 export const seperatorPrecedence = (string: string): number => {
-  precedence = 0
+  _ = 0
 
   for (let index = string.length; index--; ) {
     if (includes('-:,', string[index])) {
-      ++precedence
+      ++_
     }
   }
 
-  return precedence
+  return _
 }
 
+export const atRulePresedence = (css: string): number => (seperatorPrecedence(css) & 15) << 18
+
 // Pesudo variant presedence
 // Chars 3 - 8: Uniquely identifies a pseudo selector
 // represented as a bit set for each relevant value
@@ -73,13 +72,12 @@ const PRECEDENCES_BY_PSEUDO_CLASS = [
 /* eslint-enable capitalized-comments */
 
 const pseudoPrecedence = (pseudoClass: string): number =>
-  ~(precedence = PRECEDENCES_BY_PSEUDO_CLASS.indexOf(
-    pseudoClass.replace(/^:group-/, ':').slice(3, 8),
-  ))
-    ? precedence
-    : 17
+  1 <<
+  (~(_ = PRECEDENCES_BY_PSEUDO_CLASS.indexOf(pseudoClass.replace(/^:group-/, ':').slice(3, 8)))
+    ? _
+    : 17)
 
-// Variants: 27 bits
+// Variants: 28 bits
 export const makeVariantPresedenceCalculator = (
   theme: ThemeResolver,
   variants: Record<string, string | undefined>,
@@ -96,12 +94,12 @@ export const makeVariantPresedenceCalculator = (
       responsivePrecedence(_)
     : // 1: dark mode flag
     variant === ':dark'
-    ? 1 << 21
+    ? 1 << 22
     : // 4: precedence of other at-rules
     (_ = variants[variant] || variant)[0] === '@'
-    ? (seperatorPrecedence(_) & 15) << 17
+    ? atRulePresedence(_)
     : // 17: pseudo and group variants
-      1 << pseudoPrecedence(variant))
+      pseudoPrecedence(variant))
 
 // https://github.com/kripod/otion/blob/main/packages/otion/src/propertyMatchers.ts
 // "+1": [
@@ -142,11 +140,11 @@ const propertyPrecedence = (property: string): number => {
   const unprefixedProperty =
     property[0] === '-' ? tail(property, property.indexOf('-', 1) + 1) : property
 
-  const match = PROPERTY_PRECEDENCE_CORRECTION_GROUPS.exec(unprefixedProperty)
+  _ = PROPERTY_PRECEDENCE_CORRECTION_GROUPS.exec(unprefixedProperty)
 
   return (
     seperatorPrecedence(unprefixedProperty) +
-    (match ? +!!match[1] /* +1 */ || -!!match[2] /* -1 */ : 0) +
+    (_ ? +!!_[1] /* +1 */ || -!!_[2] /* -1 */ : 0) +
     1
   )
 }

diff --git a/packages/core/src/process/serialize.ts b/packages/core/src/process/serialize.ts
@@ -9,6 +9,7 @@ import {
   declarationPropertyPrecedence,
   declarationValuePrecedence,
   makeVariantPresedenceCalculator,
+  atRulePresedence,
 } from '../internal/presedence'
 
 import { variants } from '../tailwind/variants'
@@ -98,7 +99,12 @@ export const serialize = (
               p: waypoints.reduce((sum, p) => sum + p.p, 0),
             })
           } else {
-            stringify(atRules.concat(key), selector, presedence | responsivePrecedence(key), value)
+            stringify(
+              atRules.concat(key),
+              selector,
+              presedence | (responsivePrecedence(key) || atRulePresedence(key)),
+              value,
+            )
           }
         } else {
           // Call the serialize for this block