From 9b5e3297470f9d2bdbd4f540d819ee0f42e63595 Mon Sep 17 00:00:00 2001 From: Sascha Tandel Date: Mon, 3 Oct 2022 22:55:19 +0200 Subject: [PATCH] fix: injectGlobal supports @media print closes #333 --- .changeset/good-shoes-grin.md | 2 +- .changeset/moody-bees-poke.md | 5 +++++ package.json | 4 ++-- packages/cdn/package.json | 2 +- packages/preset-tailwind/src/rules.test.json | 1 + packages/twind/package.json | 2 +- packages/twind/src/internal/serialize.ts | 4 +++- packages/twind/src/tests/inject-global.test.ts | 12 ++++++++++++ 8 files changed, 26 insertions(+), 6 deletions(-) create mode 100644 .changeset/moody-bees-poke.md diff --git a/.changeset/good-shoes-grin.md b/.changeset/good-shoes-grin.md index 0b00d58ef..5c0190cb3 100644 --- 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 new file mode 100644 index 000000000..4c842a330 --- /dev/null +++ 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 index d88f83ee8..71f7ee08a 100644 --- 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 index 715545c19..101960484 100644 --- 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 index b8f4a6124..bc8e5982f 100644 --- 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 index 81044d213..aba87f568 100644 --- 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 index 53d3d653a..bd0d2c7fe 100644 --- a/packages/twind/src/internal/serialize.ts +++ b/packages/twind/src/internal/serialize.ts @@ -173,7 +173,9 @@ function serialize$( ) } 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 index c76efc56e..cdfd838b9 100644 --- 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}}']) +})