Add multiple new media query variants

lukewarlow · Jul 23, 2023 · 200e345 · 200e345
1 parent 1ac1cb9
commit 200e345
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -55,6 +55,41 @@ These are the "wrong" way round to match the existing motion variants inside of
 
 - `inverted-colors`: A variant for `@media (inverted-colors: inverted)`.
 
+### [`scripting`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/scripting)
+
+- `noscript`: A variant for `@media (scripting: none)`.
+- `scripting`: A variant for `@media (scripting: enabled)`.
+- `scripting-initial`: A variant for `@media (scripting: initial-only)`.
+
+### [`update`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/update)
+
+- `update-none`: A variant for `@media (update: none)`.
+- `update-slow`: A variant for `@media (update: slow)`.
+- `update-fast`: A variant for `@media (update: fast)`.
+
+### [`overflow-block`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/overflow-block)
+
+- `overflow-block-none`: A variant for `@media (overflow-block: none)`.
+- `overflow-block-scroll`: A variant for `@media (overflow-block: scroll)`.
+- `overflow-block-optional-paged`: A variant for `@media (overflow-block: optional-paged)`.
+- `overflow-block-paged`: A variant for `@media (overflow-block: paged)`.
+
+### [`overflow-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/overflow-inline)
+
+- `overflow-inline-none`: A variant for `@media (overflow-inline: none)`.
+- `overflow-inline-scroll`: A variant for `@media (overflow-inline: scroll)`.
+
+### [`dynamic-range`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/dynamic-range)
+
+- `sdr`: A variant for `@media (dynamic-range: standard)`.
+- `hdr`: A variant for `@media (dynamic-range: high)`.
+
+### [`color-gamut`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/color-gamut)
+
+- `srgb`: A variant for `@media (color-gamut: srgb)`.
+- `p3`: A variant for `@media (color-gamut: p3)`.
+- `rec2020`: A variant for `@media (color-gamut: rec2020)`.
+
 ## License
 
 This project is licensed under the [MIT License](https://github.com/lukewarlow/tailwind-mq/blob/master/LICENSE).
diff --git a/src/index.ts b/src/index.ts
@@ -6,5 +6,22 @@ export function mediaQueries() {
 		addVariant('data-reduce', '@media (prefers-reduced-data: reduce)');
 		addVariant('forced-colors', '@media (forced-colors: active)');
 		addVariant('contrast-custom', '@media (prefers-contrast: custom)');
+		addVariant('noscript', '@media (scripting: none)');
+		addVariant('scripting', '@media (scripting: enabled)');
+		addVariant('scripting-initial', '@media (scripting: initial-only)');
+		addVariant('update-none', '@media (update: none)');
+		addVariant('update-slow', '@media (update: slow)');
+		addVariant('update-fast', '@media (update: fast)');
+		addVariant('overflow-block-none', '@media (overflow-block: none)');
+		addVariant('overflow-block-scroll', '@media (overflow-block: scroll)');
+		addVariant('overflow-block-optional-paged', '@media (overflow-block: optional-paged)');
+		addVariant('overflow-block-paged', '@media (overflow-block: paged)');
+		addVariant('overflow-inline-none', '@media (overflow-inline: none)');
+		addVariant('overflow-inline-scroll', '@media (overflow-inline: scroll)');
+		addVariant('sdr', '@media (dynamic-range: standard)');
+		addVariant('hdr', '@media (dynamic-range: high)');
+		addVariant('srgb', '@media (color-gamut: srgb)');
+		addVariant('p3', '@media (color-gamut: p3)');
+		addVariant('rec2020', '@media (color-gamut: rec2020)');
 	};
 }