fix: injectGlobal supports @media print

closes #333
tw-in-js · Oct 3, 2022 · 9b5e329 · 9b5e329
1 parent 0e2aa5c
commit 9b5e329
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 6 deletions.
diff --git a/.changeset/good-shoes-grin.md b/.changeset/good-shoes-grin.md
@@ -2,4 +2,4 @@
 '@twind/with-next': patch
 ---
 
-update to @sveltejs/kit@1.0.0-next.507 (the new routing system)
+update to @sveltejs/kit@1.0.0-next.507 (the new routing system) 🙏🏽 @SergeiZheleznov!
diff --git a/.changeset/moody-bees-poke.md b/.changeset/moody-bees-poke.md
@@ -0,0 +1,5 @@
+---
+'twind': patch
+---
+
+`injectGlobal` support for `@media print (#333, #334) 🙏 @javascriptjedi!
diff --git a/package.json b/package.json
@@ -43,7 +43,7 @@
       "name": "twind",
       "path": "packages/twind/dist/twind.esnext.js",
       "brotli": true,
-      "limit": "7.65kb"
+      "limit": "7.7kb"
     },
     {
       "name": "twind (setup)",
@@ -63,7 +63,7 @@
       "name": "@twind/cdn",
       "path": "packages/cdn/dist/cdn.esnext.js",
       "brotli": true,
-      "limit": "15.2kb"
+      "limit": "15.25kb"
     },
     {
       "name": "@twind/preset-tailwind",

diff --git a/packages/cdn/package.json b/packages/cdn/package.json
@@ -32,7 +32,7 @@
       "name": "@twind/cdn",
       "path": "dist/cdn.esnext.js",
       "brotli": true,
-      "limit": "15.2kb"
+      "limit": "15.25kb"
     }
   ],
   "dependencies": {

diff --git a/packages/preset-tailwind/src/rules.test.json b/packages/preset-tailwind/src/rules.test.json
@@ -866,6 +866,7 @@
     "-rotate-3 hover:rotate-6 md:rotate-3 md:hover:-rotate-6",
     [
       "*,::before,::after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}",
+      "@media (min-width:768px){*,::before,::after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}",
       ".-rotate-3{--tw-rotate:calc(3deg * -1);transform:var(--tw-transform)}",
       ".hover\\:rotate-6:hover{--tw-rotate:6deg;transform:var(--tw-transform)}",
       "@media (min-width:768px){.md\\:rotate-3{--tw-rotate:3deg;transform:var(--tw-transform)}}",

diff --git a/packages/twind/package.json b/packages/twind/package.json
@@ -29,7 +29,7 @@
       "name": "twind",
       "path": "dist/twind.esnext.js",
       "brotli": true,
-      "limit": "7.65kb"
+      "limit": "7.7kb"
     },
     {
       "name": "twind (setup)",

diff --git a/packages/twind/src/internal/serialize.ts b/packages/twind/src/internal/serialize.ts
@@ -173,7 +173,9 @@ function serialize$<Theme extends BaseTheme = BaseTheme>(
         )
       } else {
         // global selector
-        rules.push(...serialize$(value as CSSObject, { p: precedence, r: [key] }, context))
+        rules.push(
+          ...serialize$(value as CSSObject, { p: precedence, r: [...conditions, key] }, context),
+        )
       }
     } else if (key == 'label' && value) {
       name = (value as string) + hash(JSON.stringify([precedence, important, style]))

diff --git a/packages/twind/src/tests/inject-global.test.ts b/packages/twind/src/tests/inject-global.test.ts
@@ -203,3 +203,15 @@ test('multiple @font-face and @import using object', () => {
     "/*!0,0*/@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'),local('Roboto-Regular'),url(fonts/roboto-v18-latin-regular.woff2) format('woff2'),url(fonts/roboto-v18-latin-regular.woff) format('woff')}",
   ])
 })
+
+test('@media print', () => {
+  injectGlobal(`
+    @media print {
+      main {
+        height: auto;
+      }
+    }
+  `)
+
+  assert.deepEqual(tw.target, ['/*!27wr28,v*/@media print{main{height:auto}}'])
+})