fix: prevent invalid default rule in legacy browsers

tw-in-js · Jan 24, 2023 · ccc9c9a · ccc9c9a
1 parent 2b064a2
commit ccc9c9a
Show file tree

Hide file tree

Showing 8 changed files with 510 additions and 292 deletions.
diff --git a/.changeset/gorgeous-camels-check.md b/.changeset/gorgeous-camels-check.md
@@ -0,0 +1,7 @@
+---
+'@twind/core': patch
+'@twind/preset-tailwind': patch
+'@twind/preset-typography': patch
+---
+
+prevent invalid default rule in legacy browsers
diff --git a/packages/core/src/internal/serialize.ts b/packages/core/src/internal/serialize.ts
@@ -78,7 +78,7 @@ function serialize$<Theme extends BaseTheme = BaseTheme>(
               {
                 n: name,
                 p: moveToLayer(precedence, Layer[key[7] as 'b']),
-                r: conditions,
+                r: key[7] == 'd' ? [] : conditions,
                 i: important,
               },
               context,

diff --git a/packages/core/src/tests/inject-global.test.ts b/packages/core/src/tests/inject-global.test.ts
@@ -35,7 +35,8 @@ test('inject global styles', () => {
 
   assert.deepEqual(tw.target, [
     "/*!0,0*/@font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'), local('PatrickHandSC-Regular'), url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f, U+A720-A7FF}",
-    '/*!0,1v*/*,::before,::after,::backdrop{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}',
+    '/*!0,1v*/*,::before,::after{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}',
+    '/*!0,1v*/::backdrop{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}',
     '/*!27wr28,y*/*{box-sizing:border-box}',
     '/*!dbgidc,u,shadow*/.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}',
     '/*!dbgidc,11,underline*/.underline{text-decoration-line:underline}',
@@ -83,7 +84,8 @@ test('inject global styles using custom tw', () => {
   tw$('shadow')
 
   assert.deepEqual(tw$.target, [
-    '*,::before,::after,::backdrop{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}',
+    '*,::before,::after{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}',
+    '::backdrop{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}',
     ':root > body{border:3px solid red}',
     ':root > body{--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}',
     ':root > body{--tw-text-opacity:1;color:rgba(0,0,0,var(--tw-text-opacity))}',
@@ -124,7 +126,8 @@ test('layers', () => {
   `
 
   assert.deepEqual(tw.target, [
-    '/*!0,1v*/*,::before,::after,::backdrop{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}',
+    '/*!0,1v*/*,::before,::after{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}',
+    '/*!0,1v*/::backdrop{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}',
     '/*!27wr28,0*/h1{font-size:1.5rem;line-height:2rem}',
     '/*!27wr28,0*/h2{font-size:1.25rem;line-height:1.75rem}',
     '/*!4fti4g,0*/.select2-dropdown{border-bottom-left-radius:0.5rem;border-bottom-right-radius:0.5rem;--tw-shadow:0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}',

diff --git a/packages/preset-tailwind/src/preflight.test.ts b/packages/preset-tailwind/src/preflight.test.ts
@@ -91,7 +91,8 @@ test('custom preflight', () => {
   assert.strictEqual(tw('underline'), 'underline')
 
   assert.deepEqual(tw.target, [
-    '*,::before,::after,::backdrop{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}',
+    '*,::before,::after{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}',
+    '::backdrop{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}',
     '*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}',
     "::before,::after{--tw-content:''}",
     'html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-feature-settings:normal}',