diff --git a/CHANGELOG.md b/CHANGELOG.md index c10488c..40f59b6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,10 @@ ## Unreleased -- Support main dynamic variants (`min-*`, `max-*`, `(group/peer-)data-*`, `(group/peer-)aria-*`) +## 0.7.3 + +- Align with Tailwind 3.4: https://tailwindcss.com/blog/tailwindcss-v3-4 +- Support main dynamic variants (`min-*`, `max-*`, `has-*`, `(group/peer-)data-*`, `(group/peer-)aria-*`) ## 0.7.2 diff --git a/README.md b/README.md index 96ddf94..6e1b01f 100644 --- a/README.md +++ b/README.md @@ -151,7 +151,7 @@ export const config: DownwindConfig = { ### Dynamic variants -`supports-*`, `min-*`, `max-*`, `(group/peer-)data-*`, `(group/peer-)aria-*` are supported. +`supports-*`, `min-*`, `max-*`, `has-*`, `(group/peer-)data-*`, `(group/peer-)aria-*` are supported. `max-` is supported when the screens config is a basic `min-width` only. No sorting is done. diff --git a/package.json b/package.json index 3e13eb9..d901d48 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "description": "A bundler-first & PostCSS-independent implementation of Tailwind", "private": true, "type": "module", - "version": "0.7.2", + "version": "0.7.3", "author": "Arnaud Barré (https://github.com/ArnaudBarre)", "license": "MIT", "scripts": { diff --git a/src/base/base.css b/src/base/base.css index 50469d5..c25f997 100644 --- a/src/base/base.css +++ b/src/base/base.css @@ -24,14 +24,18 @@ 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. +5-6 not supported +7. Disable tap highlights on iOS */ -html { +html, +:host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ tab-size: 4; /* 3 */ font-family: __FONT_SANS__; /* 4 */ + -webkit-tap-highlight-color: transparent; /* 7 */ } /* diff --git a/src/coreRules.ts b/src/coreRules.ts index d0eeb61..b3593c2 100644 --- a/src/coreRules.ts +++ b/src/coreRules.ts @@ -111,9 +111,39 @@ export const getCoreRules = ({ gridRow: themeRule("row", theme.gridRow, "grid-row"), gridRowStart: themeRule("row-start", theme.gridRowStart, "grid-row-start"), gridRowEnd: themeRule("row-end", theme.gridRowEnd, "grid-row-end"), - float: enumRule("float-", "float", ["right", "left", "none"]), - clear: enumRule("clear-", "clear", ["left", "right", "both", "none"]), + float: [ + ["float-start", [["float", "inline-start"]]], + ["float-end", [["float", "inline-end"]]], + ["float-right", [["float", "right"]]], + ["float-left", [["float", "left"]]], + ["float-none", [["float", "none"]]], + ], + clear: [ + ["clear-start", [["clear", "inline-start"]]], + ["clear-end", [["clear", "inline-end"]]], + ["clear-left", [["clear", "left"]]], + ["clear-right", [["clear", "right"]]], + ["clear-both", [["clear", "both"]]], + ["clear-none", [["clear", "none"]]], + ], boxSizing: enumRule("box-", "box-sizing", ["border-box", "content-box"]), + lineClamp: [ + themeRule("line-clamp", theme.lineClamp, [ + ["overflow", "hidden"], + ["display", "-webkit-box"], + ["-webkit-box-orient", "vertical"], + "-webkit-line-clamp", + ]), + [ + "line-clamp-none", + [ + ["overflow", "visible"], + ["display", "block"], + ["-webkit-box-orient", "horizontal"], + ["-webkit-line-clamp", "none"], + ], + ], + ], display: enumRule( "", "display", @@ -143,6 +173,7 @@ export const getCoreRules = ({ (v) => (v === "hidden" ? "none" : v), ), aspectRatio: themeRule("aspect", theme.aspectRatio, "aspect-ratio"), + size: themeRule("size", theme.size, ["width", "height"]), height: themeRule("h", theme.height, "height"), maxHeight: themeRule("min-h", theme.minHeight, "min-height"), minHeight: themeRule("max-h", theme.maxHeight, "max-height"), @@ -328,7 +359,10 @@ export const getCoreRules = ({ theme.listStyleImage, "list-style-image", ), - appearance: ["appearance-none", [["appearance", "none"]]], + appearance: [ + ["appearance-none", [["appearance", "none"]]], + ["appearance-auto", [["appearance", "auto"]]], + ], columns: themeRule("columns", theme.columns, "columns"), breakBefore: enumRule("break-before-", "break-before", breaks), breakInside: enumRule("break-inside-", "break-inside", [ @@ -603,6 +637,11 @@ export const getCoreRules = ({ "pre-wrap", "break-spaces", ]), + textWrap: [ + ["text-wrap", [["text-wrap", "wrap"]]], + ["text-nowrap", [["text-wrap", "nowrap"]]], + ["text-balance", [["text-wrap", "balance"]]], + ], wordBreak: [ [ "break-normal", @@ -1168,23 +1207,9 @@ export const getCoreRules = ({ ), willChange: themeRule("will-change", theme.willChange, "will-change"), content: themeRule("content", theme.content, "content"), - // https://github.com/tailwindlabs/tailwindcss-line-clamp/blob/master/src/index.js - lineClamp: [ - themeRule("line-clamp", theme.lineClamp, [ - ["overflow", "hidden"], - ["display", "-webkit-box"], - ["-webkit-box-orient", "vertical"], - "-webkit-line-clamp", - ]), - [ - "line-clamp-none", - [ - ["overflow", "visible"], - ["display", "block"], - ["-webkit-box-orient", "horizontal"], - ["-webkit-line-clamp", "none"], - ], - ], + forcedColorAdjust: [ + ["forced-color-adjust-auto", [["forced-color-adjust", "auto"]]], + ["forced-color-adjust-none", [["forced-color-adjust", "none"]]], ], }); diff --git a/src/theme/getBaseFonts.ts b/src/theme/getBaseFonts.ts index c5ed910..d2ae18b 100644 --- a/src/theme/getBaseFonts.ts +++ b/src/theme/getBaseFonts.ts @@ -2,13 +2,6 @@ export const getBaseFonts = () => ({ sans: [ "ui-sans-serif", "system-ui", - "-apple-system", - "BlinkMacSystemFont", - '"Segoe UI"', - "Roboto", - '"Helvetica Neue"', - "Arial", - '"Noto Sans"', "sans-serif", '"Apple Color Emoji"', '"Segoe UI Emoji"', diff --git a/src/theme/getBaseTheme.ts b/src/theme/getBaseTheme.ts index e1b8c32..91506d5 100644 --- a/src/theme/getBaseTheme.ts +++ b/src/theme/getBaseTheme.ts @@ -440,6 +440,12 @@ export const getBaseTheme = (): DownwindTheme => ({ "span-4": "span 4 / span 4", "span-5": "span 5 / span 5", "span-6": "span 6 / span 6", + "span-7": "span 7 / span 7", + "span-8": "span 8 / span 8", + "span-9": "span 9 / span 9", + "span-10": "span 10 / span 10", + "span-11": "span 11 / span 11", + "span-12": "span 12 / span 12", "span-full": "1 / -1", }, gridRowStart: { @@ -451,6 +457,12 @@ export const getBaseTheme = (): DownwindTheme => ({ 5: "5", 6: "6", 7: "7", + 8: "8", + 9: "9", + 10: "10", + 11: "11", + 12: "12", + 13: "13", }, gridRowEnd: { auto: "auto", @@ -461,9 +473,16 @@ export const getBaseTheme = (): DownwindTheme => ({ 5: "5", 6: "6", 7: "7", + 8: "8", + 9: "9", + 10: "10", + 11: "11", + 12: "12", + 13: "13", }, gridTemplateColumns: { none: "none", + subgrid: "subgrid", 1: "repeat(1, minmax(0, 1fr))", 2: "repeat(2, minmax(0, 1fr))", 3: "repeat(3, minmax(0, 1fr))", @@ -479,12 +498,19 @@ export const getBaseTheme = (): DownwindTheme => ({ }, gridTemplateRows: { none: "none", + subgrid: "subgrid", 1: "repeat(1, minmax(0, 1fr))", 2: "repeat(2, minmax(0, 1fr))", 3: "repeat(3, minmax(0, 1fr))", 4: "repeat(4, minmax(0, 1fr))", 5: "repeat(5, minmax(0, 1fr))", 6: "repeat(6, minmax(0, 1fr))", + 7: "repeat(7, minmax(0, 1fr))", + 8: "repeat(8, minmax(0, 1fr))", + 9: "repeat(9, minmax(0, 1fr))", + 10: "repeat(10, minmax(0, 1fr))", + 11: "repeat(11, minmax(0, 1fr))", + 12: "repeat(12, minmax(0, 1fr))", }, height: (theme) => ({ "auto": "auto", @@ -506,6 +532,9 @@ export const getBaseTheme = (): DownwindTheme => ({ "5/6": "83.333333%", "full": "100%", "screen": "100vh", + "svh": "100svh", + "lvh": "100lvh", + "dvh": "100dvh", "min": "min-content", "max": "max-content", "fit": "fit-content", @@ -574,15 +603,19 @@ export const getBaseTheme = (): DownwindTheme => ({ }), maxHeight: (theme) => ({ ...theme("spacing"), + none: "none", full: "100%", screen: "100vh", + svh: "100svh", + lvh: "100lvh", + dvh: "100dvh", min: "min-content", max: "max-content", fit: "fit-content", }), maxWidth: (theme) => ({ + ...theme("spacing"), "none": "none", - 0: "0rem", "xs": "20rem", "sm": "24rem", "md": "28rem", @@ -604,21 +637,24 @@ export const getBaseTheme = (): DownwindTheme => ({ value.min ?? value.max, ]), }), - minHeight: { - 0: "0px", + minHeight: (theme) => ({ + ...theme("spacing"), full: "100%", screen: "100vh", + svh: "100svh", + lvh: "100lvh", + dvh: "100dvh", min: "min-content", max: "max-content", fit: "fit-content", - }, - minWidth: { - 0: "0px", + }), + minWidth: (theme) => ({ + ...theme("spacing"), full: "100%", min: "min-content", max: "max-content", fit: "fit-content", - }, + }), objectPosition: { "bottom": "bottom", "center": "center", @@ -634,15 +670,21 @@ export const getBaseTheme = (): DownwindTheme => ({ 0: "0", 5: "0.05", 10: "0.1", + 15: "0.15", 20: "0.2", 25: "0.25", 30: "0.3", + 35: "0.35", 40: "0.4", + 45: "0.45", 50: "0.5", + 55: "0.55", 60: "0.6", + 65: "0.65", 70: "0.7", 75: "0.75", 80: "0.8", + 85: "0.85", 90: "0.9", 95: "0.95", 100: "1", @@ -846,6 +888,40 @@ export const getBaseTheme = (): DownwindTheme => ({ "3/4": "75%", "full": "100%", }), + size: (theme) => ({ + "auto": "auto", + ...theme("spacing"), + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + "1/5": "20%", + "2/5": "40%", + "3/5": "60%", + "4/5": "80%", + "1/6": "16.666667%", + "2/6": "33.333333%", + "3/6": "50%", + "4/6": "66.666667%", + "5/6": "83.333333%", + "1/12": "8.333333%", + "2/12": "16.666667%", + "3/12": "25%", + "4/12": "33.333333%", + "5/12": "41.666667%", + "6/12": "50%", + "7/12": "58.333333%", + "8/12": "66.666667%", + "9/12": "75%", + "10/12": "83.333333%", + "11/12": "91.666667%", + "full": "100%", + "min": "min-content", + "max": "max-content", + "fit": "fit-content", + }), verticalAlign: { "baseline": "baseline", "top": "top", diff --git a/src/types.d.ts b/src/types.d.ts index e6ae09f..243d23b 100644 --- a/src/types.d.ts +++ b/src/types.d.ts @@ -269,6 +269,7 @@ type ThemeKey = | "transitionProperty" | "transitionTimingFunction" | "translate" + | "size" | "verticalAlign" | "width" | "willChange" @@ -303,8 +304,10 @@ type CoreRule = | "float" | "clear" | "boxSizing" + | "lineClamp" | "display" | "aspectRatio" + | "size" | "height" | "maxHeight" | "minHeight" @@ -371,6 +374,7 @@ type CoreRule = | "textOverflow" | "hyphens" | "whitespace" + | "textWrap" | "wordBreak" | "borderRadius" | "borderWidth" @@ -457,4 +461,4 @@ type CoreRule = | "transitionTimingFunction" | "willChange" | "content" - | "lineClamp"; + | "forcedColorAdjust"; diff --git a/src/utils/regex.ts b/src/utils/regex.ts index 515e622..922df24 100644 --- a/src/utils/regex.ts +++ b/src/utils/regex.ts @@ -8,16 +8,17 @@ export const escapeSelector = (selector: string) => { }; const regularVariant = /[a-z0-9][a-z0-9-]+/; -// ="'_ for attributes: aria-[labelledby='a_b'] -// : for supports query -const dynamicVariant = /[a-z-]+-\[[a-z0-9="'_:-]+]/; +const childVariant = /\*/; +// []="'_ for attributes: aria-[labelledby='a_b'] has-[[data-active]] +// :>+*~. for css selectors: has-[>_h1_+_h2] +const dynamicVariant = /[a-z-]+-\[[a-z0-9[\]="'_:>+*~.-]+]/; // & to position the selector // []="' for attributes: [&[type="email"]] // :>+*~.()_ for css selectors: [&:nth-child(3)] [&_p] [&>*] [.sidebar+&] // @ for media: [@media(min-width:900px)] const arbitraryVariant = /\[[a-z0-9&[\]="':>+*~.()_@-]+]/; const variant = new RegExp( - `(?:${regularVariant.source}|${dynamicVariant.source}|${arbitraryVariant.source}):`, + `(?:${regularVariant.source}|${childVariant.source}|${dynamicVariant.source}|${arbitraryVariant.source}):`, ); const variants = new RegExp(`(?:${variant.source})*`); diff --git a/src/variants.ts b/src/variants.ts index 31aac3d..44e06b0 100644 --- a/src/variants.ts +++ b/src/variants.ts @@ -83,6 +83,11 @@ export const getVariants = (config: ResolvedConfig) => { selectorRewrite: (v) => `.dark ${v}`, }); + staticVariantsMap.set("*", { + type: "selectorRewrite", + selectorRewrite: (v) => `${v} > *`, + }); + for (const value of [ "first-letter", "first-line", @@ -169,6 +174,7 @@ export const getVariants = (config: ResolvedConfig) => { for (const [key, media] of [ ["motion-safe", "(prefers-reduced-motion: no-preference)"], ["motion-reduce", "(prefers-reduced-motion: reduce)"], + ["forced-colors", "(forced-colors: active)"], // if dark variant is added, should be before this one ["print", "print"], ["portrait", "(orientation: portrait)"], ["landscape", "(orientation: landscape)"], @@ -221,6 +227,7 @@ export const getVariants = (config: ResolvedConfig) => { }); }; + withDynamicGroupAndPeer("has", (content) => `:has(${content})`); for (const [key, value] of Object.entries(config.theme.aria)) { withGroupAndPeer(`aria-${key}`, `[aria-${value!}]`); } diff --git a/tests/generate.test.ts b/tests/generate.test.ts index 1c5f55f..f696b3f 100644 --- a/tests/generate.test.ts +++ b/tests/generate.test.ts @@ -74,10 +74,14 @@ const cases: [name: string, content: string, config?: UserConfig][] = [ }, ], ["variants", "hover:p-4 md:print:landscape:first:p-8"], + [ + "child-variant", + "*:italic *:hover:italic hover:*:italic [&_p]:*:hover:italic", + ], [ "alpha modifier", - "bg-orange-400/20 text-slate-200/[.06] border-black/15 bg-[#123456]/15 text-[#222]/[--custom-var]", - { theme: { extend: { borderOpacity: { "15": "0.15" } } } }, + "bg-orange-400/20 text-slate-200/[.06] border-black/16 bg-[#123456]/16 text-[#222]/[--custom-var]", + { theme: { extend: { borderOpacity: { "16": "0.16" } } } }, ], [ "important modifier", @@ -110,6 +114,10 @@ const cases: [name: string, content: string, config?: UserConfig][] = [ ["media-order-stable-1", "portrait:p-1 landscape:p-1"], ["media-order-stable-2", "landscape:p-1 portrait:p-1"], ["supports-*", "supports-[container-type]:grid supports-[display:grid]:grid"], + [ + "has-*", + "has-[figcaption]:inline-block has-[>_.potato]:table has-[>_h1_+_h2]:contents has-[h2]:has-[.banana]:hidden", + ], [ "aria-*", "aria-checked:underline aria-[sort=ascending]:underline peer-aria-[labelledby='a_b']:underline", diff --git a/tests/regex.test.ts b/tests/regex.test.ts index 33d13e2..b8c22f7 100644 --- a/tests/regex.test.ts +++ b/tests/regex.test.ts @@ -5,6 +5,6 @@ import { selectorRE } from "../src/utils/regex.ts"; test("regex", () => { assert.equal( selectorRE.toString(), - /(?<=['"`\s}])(?:(?:[a-z0-9][a-z0-9-]+|[a-z-]+-\[[a-z0-9="'_:-]+]|\[[a-z0-9&[\]="':>+*~.()_@-]+]):)*!?(?:-?(?:[a-z][a-z0-9-]*[a-z0-9%]|[a-z][a-z-]*-\[[a-z0-9#._,'%()+*/-]+])(?:\/(?:[a-z0-9]+|\[[a-z0-9.%()+*/-]+]))?|\[[a-z][a-z-]+:[a-z0-9#._,'%()+*/-]+])(?=['"`\s:$])/g.toString(), + /(?<=['"`\s}])(?:(?:[a-z0-9][a-z0-9-]+|\*|[a-z-]+-\[[a-z0-9[\]="'_:>+*~.-]+]|\[[a-z0-9&[\]="':>+*~.()_@-]+]):)*!?(?:-?(?:[a-z][a-z0-9-]*[a-z0-9%]|[a-z][a-z-]*-\[[a-z0-9#._,'%()+*/-]+])(?:\/(?:[a-z0-9]+|\[[a-z0-9.%()+*/-]+]))?|\[[a-z][a-z-]+:[a-z0-9#._,'%()+*/-]+])(?=['"`\s:$])/g.toString(), ); }); diff --git a/tests/snapshots/codegen-omit.css b/tests/snapshots/codegen-omit.css index 159e731..a65a787 100644 --- a/tests/snapshots/codegen-omit.css +++ b/tests/snapshots/codegen-omit.css @@ -1028,6 +1028,12 @@ .row-span-4{} .row-span-5{} .row-span-6{} +.row-span-7{} +.row-span-8{} +.row-span-9{} +.row-span-10{} +.row-span-11{} +.row-span-12{} .row-span-full{} .row-start-1{} .row-start-2{} @@ -1036,6 +1042,12 @@ .row-start-5{} .row-start-6{} .row-start-7{} +.row-start-8{} +.row-start-9{} +.row-start-10{} +.row-start-11{} +.row-start-12{} +.row-start-13{} .row-start-auto{} .row-end-1{} .row-end-2{} @@ -1044,16 +1056,33 @@ .row-end-5{} .row-end-6{} .row-end-7{} +.row-end-8{} +.row-end-9{} +.row-end-10{} +.row-end-11{} +.row-end-12{} +.row-end-13{} .row-end-auto{} +.float-start{} +.float-end{} .float-right{} .float-left{} .float-none{} +.clear-start{} +.clear-end{} .clear-left{} .clear-right{} .clear-both{} .clear-none{} .box-border-box{} .box-content-box{} +.line-clamp-1{} +.line-clamp-2{} +.line-clamp-3{} +.line-clamp-4{} +.line-clamp-5{} +.line-clamp-6{} +.line-clamp-none{} .block{} .inline-block{} .inline{} @@ -1078,6 +1107,72 @@ .aspect-auto{} .aspect-square{} .aspect-video{} +.size-0{} +.size-1{} +.size-2{} +.size-3{} +.size-4{} +.size-5{} +.size-6{} +.size-7{} +.size-8{} +.size-9{} +.size-10{} +.size-11{} +.size-12{} +.size-14{} +.size-16{} +.size-20{} +.size-24{} +.size-28{} +.size-32{} +.size-36{} +.size-40{} +.size-44{} +.size-48{} +.size-52{} +.size-56{} +.size-60{} +.size-64{} +.size-72{} +.size-80{} +.size-96{} +.size-auto{} +.size-px{} +.size-0\.5{} +.size-1\.5{} +.size-2\.5{} +.size-3\.5{} +.size-1\/2{} +.size-1\/3{} +.size-2\/3{} +.size-1\/4{} +.size-2\/4{} +.size-3\/4{} +.size-1\/5{} +.size-2\/5{} +.size-3\/5{} +.size-4\/5{} +.size-1\/6{} +.size-2\/6{} +.size-3\/6{} +.size-4\/6{} +.size-5\/6{} +.size-1\/12{} +.size-2\/12{} +.size-3\/12{} +.size-4\/12{} +.size-5\/12{} +.size-6\/12{} +.size-7\/12{} +.size-8\/12{} +.size-9\/12{} +.size-10\/12{} +.size-11\/12{} +.size-full{} +.size-min{} +.size-max{} +.size-fit{} .h-0{} .h-1{} .h-2{} @@ -1131,12 +1226,52 @@ .h-5\/6{} .h-full{} .h-screen{} +.h-svh{} +.h-lvh{} +.h-dvh{} .h-min{} .h-max{} .h-fit{} .min-h-0{} +.min-h-1{} +.min-h-2{} +.min-h-3{} +.min-h-4{} +.min-h-5{} +.min-h-6{} +.min-h-7{} +.min-h-8{} +.min-h-9{} +.min-h-10{} +.min-h-11{} +.min-h-12{} +.min-h-14{} +.min-h-16{} +.min-h-20{} +.min-h-24{} +.min-h-28{} +.min-h-32{} +.min-h-36{} +.min-h-40{} +.min-h-44{} +.min-h-48{} +.min-h-52{} +.min-h-56{} +.min-h-60{} +.min-h-64{} +.min-h-72{} +.min-h-80{} +.min-h-96{} +.min-h-px{} +.min-h-0\.5{} +.min-h-1\.5{} +.min-h-2\.5{} +.min-h-3\.5{} .min-h-full{} .min-h-screen{} +.min-h-svh{} +.min-h-lvh{} +.min-h-dvh{} .min-h-min{} .min-h-max{} .min-h-fit{} @@ -1175,8 +1310,12 @@ .max-h-1\.5{} .max-h-2\.5{} .max-h-3\.5{} +.max-h-none{} .max-h-full{} .max-h-screen{} +.max-h-svh{} +.max-h-lvh{} +.max-h-dvh{} .max-h-min{} .max-h-max{} .max-h-fit{} @@ -1248,11 +1387,79 @@ .w-max{} .w-fit{} .min-w-0{} +.min-w-1{} +.min-w-2{} +.min-w-3{} +.min-w-4{} +.min-w-5{} +.min-w-6{} +.min-w-7{} +.min-w-8{} +.min-w-9{} +.min-w-10{} +.min-w-11{} +.min-w-12{} +.min-w-14{} +.min-w-16{} +.min-w-20{} +.min-w-24{} +.min-w-28{} +.min-w-32{} +.min-w-36{} +.min-w-40{} +.min-w-44{} +.min-w-48{} +.min-w-52{} +.min-w-56{} +.min-w-60{} +.min-w-64{} +.min-w-72{} +.min-w-80{} +.min-w-96{} +.min-w-px{} +.min-w-0\.5{} +.min-w-1\.5{} +.min-w-2\.5{} +.min-w-3\.5{} .min-w-full{} .min-w-min{} .min-w-max{} .min-w-fit{} .max-w-0{} +.max-w-1{} +.max-w-2{} +.max-w-3{} +.max-w-4{} +.max-w-5{} +.max-w-6{} +.max-w-7{} +.max-w-8{} +.max-w-9{} +.max-w-10{} +.max-w-11{} +.max-w-12{} +.max-w-14{} +.max-w-16{} +.max-w-20{} +.max-w-24{} +.max-w-28{} +.max-w-32{} +.max-w-36{} +.max-w-40{} +.max-w-44{} +.max-w-48{} +.max-w-52{} +.max-w-56{} +.max-w-60{} +.max-w-64{} +.max-w-72{} +.max-w-80{} +.max-w-96{} +.max-w-px{} +.max-w-0\.5{} +.max-w-1\.5{} +.max-w-2\.5{} +.max-w-3\.5{} .max-w-none{} .max-w-xs{} .max-w-sm{} @@ -2431,6 +2638,7 @@ .list-decimal{} .list-image-none{} .appearance-none{} +.appearance-auto{} .columns-1{} .columns-2{} .columns-3{} @@ -2502,13 +2710,21 @@ .grid-cols-11{} .grid-cols-12{} .grid-cols-none{} +.grid-cols-subgrid{} .grid-rows-1{} .grid-rows-2{} .grid-rows-3{} .grid-rows-4{} .grid-rows-5{} .grid-rows-6{} +.grid-rows-7{} +.grid-rows-8{} +.grid-rows-9{} +.grid-rows-10{} +.grid-rows-11{} +.grid-rows-12{} .grid-rows-none{} +.grid-rows-subgrid{} .flex-row{} .flex-row-reverse{} .flex-col{} @@ -3702,15 +3918,21 @@ .divide-0{} .divide-5{} .divide-10{} +.divide-15{} .divide-20{} .divide-25{} .divide-30{} +.divide-35{} .divide-40{} +.divide-45{} .divide-50{} +.divide-55{} .divide-60{} +.divide-65{} .divide-70{} .divide-75{} .divide-80{} +.divide-85{} .divide-90{} .divide-95{} .divide-100{} @@ -3768,6 +3990,9 @@ .whitespace-pre-line{} .whitespace-pre-wrap{} .whitespace-break-spaces{} +.text-wrap{} +.text-nowrap{} +.text-balance{} .break-normal{} .break-words{} .break-all{} @@ -5626,15 +5851,21 @@ .border-opacity-0{} .border-opacity-5{} .border-opacity-10{} +.border-opacity-15{} .border-opacity-20{} .border-opacity-25{} .border-opacity-30{} +.border-opacity-35{} .border-opacity-40{} +.border-opacity-45{} .border-opacity-50{} +.border-opacity-55{} .border-opacity-60{} +.border-opacity-65{} .border-opacity-70{} .border-opacity-75{} .border-opacity-80{} +.border-opacity-85{} .border-opacity-90{} .border-opacity-95{} .border-opacity-100{} @@ -5888,15 +6119,21 @@ .bg-opacity-0{} .bg-opacity-5{} .bg-opacity-10{} +.bg-opacity-15{} .bg-opacity-20{} .bg-opacity-25{} .bg-opacity-30{} +.bg-opacity-35{} .bg-opacity-40{} +.bg-opacity-45{} .bg-opacity-50{} +.bg-opacity-55{} .bg-opacity-60{} +.bg-opacity-65{} .bg-opacity-70{} .bg-opacity-75{} .bg-opacity-80{} +.bg-opacity-85{} .bg-opacity-90{} .bg-opacity-95{} .bg-opacity-100{} @@ -8133,15 +8370,21 @@ .text-opacity-0{} .text-opacity-5{} .text-opacity-10{} +.text-opacity-15{} .text-opacity-20{} .text-opacity-25{} .text-opacity-30{} +.text-opacity-35{} .text-opacity-40{} +.text-opacity-45{} .text-opacity-50{} +.text-opacity-55{} .text-opacity-60{} +.text-opacity-65{} .text-opacity-70{} .text-opacity-75{} .text-opacity-80{} +.text-opacity-85{} .text-opacity-90{} .text-opacity-95{} .text-opacity-100{} @@ -8666,15 +8909,21 @@ .placeholder-opacity-0{} .placeholder-opacity-5{} .placeholder-opacity-10{} +.placeholder-opacity-15{} .placeholder-opacity-20{} .placeholder-opacity-25{} .placeholder-opacity-30{} +.placeholder-opacity-35{} .placeholder-opacity-40{} +.placeholder-opacity-45{} .placeholder-opacity-50{} +.placeholder-opacity-55{} .placeholder-opacity-60{} +.placeholder-opacity-65{} .placeholder-opacity-70{} .placeholder-opacity-75{} .placeholder-opacity-80{} +.placeholder-opacity-85{} .placeholder-opacity-90{} .placeholder-opacity-95{} .placeholder-opacity-100{} @@ -9176,15 +9425,21 @@ .opacity-0{} .opacity-5{} .opacity-10{} +.opacity-15{} .opacity-20{} .opacity-25{} .opacity-30{} +.opacity-35{} .opacity-40{} +.opacity-45{} .opacity-50{} +.opacity-55{} .opacity-60{} +.opacity-65{} .opacity-70{} .opacity-75{} .opacity-80{} +.opacity-85{} .opacity-90{} .opacity-95{} .opacity-100{} @@ -9998,15 +10253,21 @@ .ring-opacity-0{} .ring-opacity-5{} .ring-opacity-10{} +.ring-opacity-15{} .ring-opacity-20{} .ring-opacity-25{} .ring-opacity-30{} +.ring-opacity-35{} .ring-opacity-40{} +.ring-opacity-45{} .ring-opacity-50{} +.ring-opacity-55{} .ring-opacity-60{} +.ring-opacity-65{} .ring-opacity-70{} .ring-opacity-75{} .ring-opacity-80{} +.ring-opacity-85{} .ring-opacity-90{} .ring-opacity-95{} .ring-opacity-100{} @@ -10352,15 +10613,21 @@ .backdrop-opacity-0{} .backdrop-opacity-5{} .backdrop-opacity-10{} +.backdrop-opacity-15{} .backdrop-opacity-20{} .backdrop-opacity-25{} .backdrop-opacity-30{} +.backdrop-opacity-35{} .backdrop-opacity-40{} +.backdrop-opacity-45{} .backdrop-opacity-50{} +.backdrop-opacity-55{} .backdrop-opacity-60{} +.backdrop-opacity-65{} .backdrop-opacity-70{} .backdrop-opacity-75{} .backdrop-opacity-80{} +.backdrop-opacity-85{} .backdrop-opacity-90{} .backdrop-opacity-95{} .backdrop-opacity-100{} @@ -10406,10 +10673,5 @@ .will-change-contents{} .will-change-transform{} .content-none{} -.line-clamp-1{} -.line-clamp-2{} -.line-clamp-3{} -.line-clamp-4{} -.line-clamp-5{} -.line-clamp-6{} -.line-clamp-none{} \ No newline at end of file +.forced-color-adjust-auto{} +.forced-color-adjust-none{} \ No newline at end of file diff --git a/tests/snapshots/codegen.css b/tests/snapshots/codegen.css index f6790b2..7e68039 100644 --- a/tests/snapshots/codegen.css +++ b/tests/snapshots/codegen.css @@ -3613,6 +3613,24 @@ .row-span-6 { grid-row: span 6 / span 6; } +.row-span-7 { + grid-row: span 7 / span 7; +} +.row-span-8 { + grid-row: span 8 / span 8; +} +.row-span-9 { + grid-row: span 9 / span 9; +} +.row-span-10 { + grid-row: span 10 / span 10; +} +.row-span-11 { + grid-row: span 11 / span 11; +} +.row-span-12 { + grid-row: span 12 / span 12; +} .row-span-full { grid-row: 1 / -1; } @@ -3637,6 +3655,24 @@ .row-start-7 { grid-row-start: 7; } +.row-start-8 { + grid-row-start: 8; +} +.row-start-9 { + grid-row-start: 9; +} +.row-start-10 { + grid-row-start: 10; +} +.row-start-11 { + grid-row-start: 11; +} +.row-start-12 { + grid-row-start: 12; +} +.row-start-13 { + grid-row-start: 13; +} .row-start-auto { grid-row-start: auto; } @@ -3661,9 +3697,33 @@ .row-end-7 { grid-row-end: 7; } +.row-end-8 { + grid-row-end: 8; +} +.row-end-9 { + grid-row-end: 9; +} +.row-end-10 { + grid-row-end: 10; +} +.row-end-11 { + grid-row-end: 11; +} +.row-end-12 { + grid-row-end: 12; +} +.row-end-13 { + grid-row-end: 13; +} .row-end-auto { grid-row-end: auto; } +.float-start { + float: inline-start; +} +.float-end { + float: inline-end; +} .float-right { float: right; } @@ -3673,6 +3733,12 @@ .float-none { float: none; } +.clear-start { + clear: inline-start; +} +.clear-end { + clear: inline-end; +} .clear-left { clear: left; } @@ -3691,6 +3757,48 @@ .box-content-box { box-sizing: content-box; } +.line-clamp-1 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; +} +.line-clamp-2 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} +.line-clamp-3 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; +} +.line-clamp-4 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 4; +} +.line-clamp-5 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 5; +} +.line-clamp-6 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 6; +} +.line-clamp-none { + overflow: visible; + display: block; + -webkit-box-orient: horizontal; + -webkit-line-clamp: none; +} .block { display: block; } @@ -3763,6 +3871,270 @@ .aspect-video { aspect-ratio: 16 / 9; } +.size-0 { + width: 0px; + height: 0px; +} +.size-1 { + width: 0.25rem; + height: 0.25rem; +} +.size-2 { + width: 0.5rem; + height: 0.5rem; +} +.size-3 { + width: 0.75rem; + height: 0.75rem; +} +.size-4 { + width: 1rem; + height: 1rem; +} +.size-5 { + width: 1.25rem; + height: 1.25rem; +} +.size-6 { + width: 1.5rem; + height: 1.5rem; +} +.size-7 { + width: 1.75rem; + height: 1.75rem; +} +.size-8 { + width: 2rem; + height: 2rem; +} +.size-9 { + width: 2.25rem; + height: 2.25rem; +} +.size-10 { + width: 2.5rem; + height: 2.5rem; +} +.size-11 { + width: 2.75rem; + height: 2.75rem; +} +.size-12 { + width: 3rem; + height: 3rem; +} +.size-14 { + width: 3.5rem; + height: 3.5rem; +} +.size-16 { + width: 4rem; + height: 4rem; +} +.size-20 { + width: 5rem; + height: 5rem; +} +.size-24 { + width: 6rem; + height: 6rem; +} +.size-28 { + width: 7rem; + height: 7rem; +} +.size-32 { + width: 8rem; + height: 8rem; +} +.size-36 { + width: 9rem; + height: 9rem; +} +.size-40 { + width: 10rem; + height: 10rem; +} +.size-44 { + width: 11rem; + height: 11rem; +} +.size-48 { + width: 12rem; + height: 12rem; +} +.size-52 { + width: 13rem; + height: 13rem; +} +.size-56 { + width: 14rem; + height: 14rem; +} +.size-60 { + width: 15rem; + height: 15rem; +} +.size-64 { + width: 16rem; + height: 16rem; +} +.size-72 { + width: 18rem; + height: 18rem; +} +.size-80 { + width: 20rem; + height: 20rem; +} +.size-96 { + width: 24rem; + height: 24rem; +} +.size-auto { + width: auto; + height: auto; +} +.size-px { + width: 1px; + height: 1px; +} +.size-0\.5 { + width: 0.125rem; + height: 0.125rem; +} +.size-1\.5 { + width: 0.375rem; + height: 0.375rem; +} +.size-2\.5 { + width: 0.625rem; + height: 0.625rem; +} +.size-3\.5 { + width: 0.875rem; + height: 0.875rem; +} +.size-1\/2 { + width: 50%; + height: 50%; +} +.size-1\/3 { + width: 33.333333%; + height: 33.333333%; +} +.size-2\/3 { + width: 66.666667%; + height: 66.666667%; +} +.size-1\/4 { + width: 25%; + height: 25%; +} +.size-2\/4 { + width: 50%; + height: 50%; +} +.size-3\/4 { + width: 75%; + height: 75%; +} +.size-1\/5 { + width: 20%; + height: 20%; +} +.size-2\/5 { + width: 40%; + height: 40%; +} +.size-3\/5 { + width: 60%; + height: 60%; +} +.size-4\/5 { + width: 80%; + height: 80%; +} +.size-1\/6 { + width: 16.666667%; + height: 16.666667%; +} +.size-2\/6 { + width: 33.333333%; + height: 33.333333%; +} +.size-3\/6 { + width: 50%; + height: 50%; +} +.size-4\/6 { + width: 66.666667%; + height: 66.666667%; +} +.size-5\/6 { + width: 83.333333%; + height: 83.333333%; +} +.size-1\/12 { + width: 8.333333%; + height: 8.333333%; +} +.size-2\/12 { + width: 16.666667%; + height: 16.666667%; +} +.size-3\/12 { + width: 25%; + height: 25%; +} +.size-4\/12 { + width: 33.333333%; + height: 33.333333%; +} +.size-5\/12 { + width: 41.666667%; + height: 41.666667%; +} +.size-6\/12 { + width: 50%; + height: 50%; +} +.size-7\/12 { + width: 58.333333%; + height: 58.333333%; +} +.size-8\/12 { + width: 66.666667%; + height: 66.666667%; +} +.size-9\/12 { + width: 75%; + height: 75%; +} +.size-10\/12 { + width: 83.333333%; + height: 83.333333%; +} +.size-11\/12 { + width: 91.666667%; + height: 91.666667%; +} +.size-full { + width: 100%; + height: 100%; +} +.size-min { + width: min-content; + height: min-content; +} +.size-max { + width: max-content; + height: max-content; +} +.size-fit { + width: fit-content; + height: fit-content; +} .h-0 { height: 0px; } @@ -3922,6 +4294,15 @@ .h-screen { height: 100vh; } +.h-svh { + height: 100svh; +} +.h-lvh { + height: 100lvh; +} +.h-dvh { + height: 100dvh; +} .h-min { height: min-content; } @@ -3934,12 +4315,123 @@ .min-h-0 { min-height: 0px; } +.min-h-1 { + min-height: 0.25rem; +} +.min-h-2 { + min-height: 0.5rem; +} +.min-h-3 { + min-height: 0.75rem; +} +.min-h-4 { + min-height: 1rem; +} +.min-h-5 { + min-height: 1.25rem; +} +.min-h-6 { + min-height: 1.5rem; +} +.min-h-7 { + min-height: 1.75rem; +} +.min-h-8 { + min-height: 2rem; +} +.min-h-9 { + min-height: 2.25rem; +} +.min-h-10 { + min-height: 2.5rem; +} +.min-h-11 { + min-height: 2.75rem; +} +.min-h-12 { + min-height: 3rem; +} +.min-h-14 { + min-height: 3.5rem; +} +.min-h-16 { + min-height: 4rem; +} +.min-h-20 { + min-height: 5rem; +} +.min-h-24 { + min-height: 6rem; +} +.min-h-28 { + min-height: 7rem; +} +.min-h-32 { + min-height: 8rem; +} +.min-h-36 { + min-height: 9rem; +} +.min-h-40 { + min-height: 10rem; +} +.min-h-44 { + min-height: 11rem; +} +.min-h-48 { + min-height: 12rem; +} +.min-h-52 { + min-height: 13rem; +} +.min-h-56 { + min-height: 14rem; +} +.min-h-60 { + min-height: 15rem; +} +.min-h-64 { + min-height: 16rem; +} +.min-h-72 { + min-height: 18rem; +} +.min-h-80 { + min-height: 20rem; +} +.min-h-96 { + min-height: 24rem; +} +.min-h-px { + min-height: 1px; +} +.min-h-0\.5 { + min-height: 0.125rem; +} +.min-h-1\.5 { + min-height: 0.375rem; +} +.min-h-2\.5 { + min-height: 0.625rem; +} +.min-h-3\.5 { + min-height: 0.875rem; +} .min-h-full { min-height: 100%; } .min-h-screen { min-height: 100vh; } +.min-h-svh { + min-height: 100svh; +} +.min-h-lvh { + min-height: 100lvh; +} +.min-h-dvh { + min-height: 100dvh; +} .min-h-min { min-height: min-content; } @@ -4054,12 +4546,24 @@ .max-h-3\.5 { max-height: 0.875rem; } +.max-h-none { + max-height: none; +} .max-h-full { max-height: 100%; } .max-h-screen { max-height: 100vh; } +.max-h-svh { + max-height: 100svh; +} +.max-h-lvh { + max-height: 100lvh; +} +.max-h-dvh { + max-height: 100dvh; +} .max-h-min { max-height: min-content; } @@ -4273,6 +4777,108 @@ .min-w-0 { min-width: 0px; } +.min-w-1 { + min-width: 0.25rem; +} +.min-w-2 { + min-width: 0.5rem; +} +.min-w-3 { + min-width: 0.75rem; +} +.min-w-4 { + min-width: 1rem; +} +.min-w-5 { + min-width: 1.25rem; +} +.min-w-6 { + min-width: 1.5rem; +} +.min-w-7 { + min-width: 1.75rem; +} +.min-w-8 { + min-width: 2rem; +} +.min-w-9 { + min-width: 2.25rem; +} +.min-w-10 { + min-width: 2.5rem; +} +.min-w-11 { + min-width: 2.75rem; +} +.min-w-12 { + min-width: 3rem; +} +.min-w-14 { + min-width: 3.5rem; +} +.min-w-16 { + min-width: 4rem; +} +.min-w-20 { + min-width: 5rem; +} +.min-w-24 { + min-width: 6rem; +} +.min-w-28 { + min-width: 7rem; +} +.min-w-32 { + min-width: 8rem; +} +.min-w-36 { + min-width: 9rem; +} +.min-w-40 { + min-width: 10rem; +} +.min-w-44 { + min-width: 11rem; +} +.min-w-48 { + min-width: 12rem; +} +.min-w-52 { + min-width: 13rem; +} +.min-w-56 { + min-width: 14rem; +} +.min-w-60 { + min-width: 15rem; +} +.min-w-64 { + min-width: 16rem; +} +.min-w-72 { + min-width: 18rem; +} +.min-w-80 { + min-width: 20rem; +} +.min-w-96 { + min-width: 24rem; +} +.min-w-px { + min-width: 1px; +} +.min-w-0\.5 { + min-width: 0.125rem; +} +.min-w-1\.5 { + min-width: 0.375rem; +} +.min-w-2\.5 { + min-width: 0.625rem; +} +.min-w-3\.5 { + min-width: 0.875rem; +} .min-w-full { min-width: 100%; } @@ -4286,7 +4892,109 @@ min-width: fit-content; } .max-w-0 { - max-width: 0rem; + max-width: 0px; +} +.max-w-1 { + max-width: 0.25rem; +} +.max-w-2 { + max-width: 0.5rem; +} +.max-w-3 { + max-width: 0.75rem; +} +.max-w-4 { + max-width: 1rem; +} +.max-w-5 { + max-width: 1.25rem; +} +.max-w-6 { + max-width: 1.5rem; +} +.max-w-7 { + max-width: 1.75rem; +} +.max-w-8 { + max-width: 2rem; +} +.max-w-9 { + max-width: 2.25rem; +} +.max-w-10 { + max-width: 2.5rem; +} +.max-w-11 { + max-width: 2.75rem; +} +.max-w-12 { + max-width: 3rem; +} +.max-w-14 { + max-width: 3.5rem; +} +.max-w-16 { + max-width: 4rem; +} +.max-w-20 { + max-width: 5rem; +} +.max-w-24 { + max-width: 6rem; +} +.max-w-28 { + max-width: 7rem; +} +.max-w-32 { + max-width: 8rem; +} +.max-w-36 { + max-width: 9rem; +} +.max-w-40 { + max-width: 10rem; +} +.max-w-44 { + max-width: 11rem; +} +.max-w-48 { + max-width: 12rem; +} +.max-w-52 { + max-width: 13rem; +} +.max-w-56 { + max-width: 14rem; +} +.max-w-60 { + max-width: 15rem; +} +.max-w-64 { + max-width: 16rem; +} +.max-w-72 { + max-width: 18rem; +} +.max-w-80 { + max-width: 20rem; +} +.max-w-96 { + max-width: 24rem; +} +.max-w-px { + max-width: 1px; +} +.max-w-0\.5 { + max-width: 0.125rem; +} +.max-w-1\.5 { + max-width: 0.375rem; +} +.max-w-2\.5 { + max-width: 0.625rem; +} +.max-w-3\.5 { + max-width: 0.875rem; } .max-w-none { max-width: none; @@ -8318,6 +9026,9 @@ .appearance-none { appearance: none; } +.appearance-auto { + appearance: auto; +} .columns-1 { columns: 1; } @@ -8531,6 +9242,9 @@ .grid-cols-none { grid-template-columns: none; } +.grid-cols-subgrid { + grid-template-columns: subgrid; +} .grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); } @@ -8549,9 +9263,30 @@ .grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); } +.grid-rows-7 { + grid-template-rows: repeat(7, minmax(0, 1fr)); +} +.grid-rows-8 { + grid-template-rows: repeat(8, minmax(0, 1fr)); +} +.grid-rows-9 { + grid-template-rows: repeat(9, minmax(0, 1fr)); +} +.grid-rows-10 { + grid-template-rows: repeat(10, minmax(0, 1fr)); +} +.grid-rows-11 { + grid-template-rows: repeat(11, minmax(0, 1fr)); +} +.grid-rows-12 { + grid-template-rows: repeat(12, minmax(0, 1fr)); +} .grid-rows-none { grid-template-rows: none; } +.grid-rows-subgrid { + grid-template-rows: subgrid; +} .flex-row { flex-direction: row; } @@ -12521,6 +13256,9 @@ .divide-10 > * + * { --tw-divide-opacity: 0.1; } +.divide-15 > * + * { + --tw-divide-opacity: 0.15; +} .divide-20 > * + * { --tw-divide-opacity: 0.2; } @@ -12530,15 +13268,27 @@ .divide-30 > * + * { --tw-divide-opacity: 0.3; } +.divide-35 > * + * { + --tw-divide-opacity: 0.35; +} .divide-40 > * + * { --tw-divide-opacity: 0.4; } +.divide-45 > * + * { + --tw-divide-opacity: 0.45; +} .divide-50 > * + * { --tw-divide-opacity: 0.5; } +.divide-55 > * + * { + --tw-divide-opacity: 0.55; +} .divide-60 > * + * { --tw-divide-opacity: 0.6; } +.divide-65 > * + * { + --tw-divide-opacity: 0.65; +} .divide-70 > * + * { --tw-divide-opacity: 0.7; } @@ -12548,6 +13298,9 @@ .divide-80 > * + * { --tw-divide-opacity: 0.8; } +.divide-85 > * + * { + --tw-divide-opacity: 0.85; +} .divide-90 > * + * { --tw-divide-opacity: 0.9; } @@ -12721,6 +13474,15 @@ .whitespace-break-spaces { white-space: break-spaces; } +.text-wrap { + text-wrap: wrap; +} +.text-nowrap { + text-wrap: nowrap; +} +.text-balance { + text-wrap: balance; +} .break-normal { overflow-wrap: normal; word-break: normal; @@ -20544,6 +21306,9 @@ .border-opacity-10 { --tw-border-opacity: 0.1; } +.border-opacity-15 { + --tw-border-opacity: 0.15; +} .border-opacity-20 { --tw-border-opacity: 0.2; } @@ -20553,15 +21318,27 @@ .border-opacity-30 { --tw-border-opacity: 0.3; } +.border-opacity-35 { + --tw-border-opacity: 0.35; +} .border-opacity-40 { --tw-border-opacity: 0.4; } +.border-opacity-45 { + --tw-border-opacity: 0.45; +} .border-opacity-50 { --tw-border-opacity: 0.5; } +.border-opacity-55 { + --tw-border-opacity: 0.55; +} .border-opacity-60 { --tw-border-opacity: 0.6; } +.border-opacity-65 { + --tw-border-opacity: 0.65; +} .border-opacity-70 { --tw-border-opacity: 0.7; } @@ -20571,6 +21348,9 @@ .border-opacity-80 { --tw-border-opacity: 0.8; } +.border-opacity-85 { + --tw-border-opacity: 0.85; +} .border-opacity-90 { --tw-border-opacity: 0.9; } @@ -21574,6 +22354,9 @@ .bg-opacity-10 { --tw-bg-opacity: 0.1; } +.bg-opacity-15 { + --tw-bg-opacity: 0.15; +} .bg-opacity-20 { --tw-bg-opacity: 0.2; } @@ -21583,15 +22366,27 @@ .bg-opacity-30 { --tw-bg-opacity: 0.3; } +.bg-opacity-35 { + --tw-bg-opacity: 0.35; +} .bg-opacity-40 { --tw-bg-opacity: 0.4; } +.bg-opacity-45 { + --tw-bg-opacity: 0.45; +} .bg-opacity-50 { --tw-bg-opacity: 0.5; } +.bg-opacity-55 { + --tw-bg-opacity: 0.55; +} .bg-opacity-60 { --tw-bg-opacity: 0.6; } +.bg-opacity-65 { + --tw-bg-opacity: 0.65; +} .bg-opacity-70 { --tw-bg-opacity: 0.7; } @@ -21601,6 +22396,9 @@ .bg-opacity-80 { --tw-bg-opacity: 0.8; } +.bg-opacity-85 { + --tw-bg-opacity: 0.85; +} .bg-opacity-90 { --tw-bg-opacity: 0.9; } @@ -28250,7 +29048,7 @@ vertical-align: super; } .font-sans { - 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-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } .font-serif { font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; @@ -29453,6 +30251,9 @@ .text-opacity-10 { --tw-text-opacity: 0.1; } +.text-opacity-15 { + --tw-text-opacity: 0.15; +} .text-opacity-20 { --tw-text-opacity: 0.2; } @@ -29462,15 +30263,27 @@ .text-opacity-30 { --tw-text-opacity: 0.3; } +.text-opacity-35 { + --tw-text-opacity: 0.35; +} .text-opacity-40 { --tw-text-opacity: 0.4; } +.text-opacity-45 { + --tw-text-opacity: 0.45; +} .text-opacity-50 { --tw-text-opacity: 0.5; } +.text-opacity-55 { + --tw-text-opacity: 0.55; +} .text-opacity-60 { --tw-text-opacity: 0.6; } +.text-opacity-65 { + --tw-text-opacity: 0.65; +} .text-opacity-70 { --tw-text-opacity: 0.7; } @@ -29480,6 +30293,9 @@ .text-opacity-80 { --tw-text-opacity: 0.8; } +.text-opacity-85 { + --tw-text-opacity: 0.85; +} .text-opacity-90 { --tw-text-opacity: 0.9; } @@ -31298,6 +32114,9 @@ .placeholder-opacity-10::placeholder { --tw-placeholder-opacity: 0.1; } +.placeholder-opacity-15::placeholder { + --tw-placeholder-opacity: 0.15; +} .placeholder-opacity-20::placeholder { --tw-placeholder-opacity: 0.2; } @@ -31307,15 +32126,27 @@ .placeholder-opacity-30::placeholder { --tw-placeholder-opacity: 0.3; } +.placeholder-opacity-35::placeholder { + --tw-placeholder-opacity: 0.35; +} .placeholder-opacity-40::placeholder { --tw-placeholder-opacity: 0.4; } +.placeholder-opacity-45::placeholder { + --tw-placeholder-opacity: 0.45; +} .placeholder-opacity-50::placeholder { --tw-placeholder-opacity: 0.5; } +.placeholder-opacity-55::placeholder { + --tw-placeholder-opacity: 0.55; +} .placeholder-opacity-60::placeholder { --tw-placeholder-opacity: 0.6; } +.placeholder-opacity-65::placeholder { + --tw-placeholder-opacity: 0.65; +} .placeholder-opacity-70::placeholder { --tw-placeholder-opacity: 0.7; } @@ -31325,6 +32156,9 @@ .placeholder-opacity-80::placeholder { --tw-placeholder-opacity: 0.8; } +.placeholder-opacity-85::placeholder { + --tw-placeholder-opacity: 0.85; +} .placeholder-opacity-90::placeholder { --tw-placeholder-opacity: 0.9; } @@ -32828,6 +33662,9 @@ .opacity-10 { opacity: 0.1; } +.opacity-15 { + opacity: 0.15; +} .opacity-20 { opacity: 0.2; } @@ -32837,15 +33674,27 @@ .opacity-30 { opacity: 0.3; } +.opacity-35 { + opacity: 0.35; +} .opacity-40 { opacity: 0.4; } +.opacity-45 { + opacity: 0.45; +} .opacity-50 { opacity: 0.5; } +.opacity-55 { + opacity: 0.55; +} .opacity-60 { opacity: 0.6; } +.opacity-65 { + opacity: 0.65; +} .opacity-70 { opacity: 0.7; } @@ -32855,6 +33704,9 @@ .opacity-80 { opacity: 0.8; } +.opacity-85 { + opacity: 0.85; +} .opacity-90 { opacity: 0.9; } @@ -35558,6 +36410,9 @@ .ring-opacity-10 { --tw-ring-opacity: 0.1; } +.ring-opacity-15 { + --tw-ring-opacity: 0.15; +} .ring-opacity-20 { --tw-ring-opacity: 0.2; } @@ -35567,15 +36422,27 @@ .ring-opacity-30 { --tw-ring-opacity: 0.3; } +.ring-opacity-35 { + --tw-ring-opacity: 0.35; +} .ring-opacity-40 { --tw-ring-opacity: 0.4; } +.ring-opacity-45 { + --tw-ring-opacity: 0.45; +} .ring-opacity-50 { --tw-ring-opacity: 0.5; } +.ring-opacity-55 { + --tw-ring-opacity: 0.55; +} .ring-opacity-60 { --tw-ring-opacity: 0.6; } +.ring-opacity-65 { + --tw-ring-opacity: 0.65; +} .ring-opacity-70 { --tw-ring-opacity: 0.7; } @@ -35585,6 +36452,9 @@ .ring-opacity-80 { --tw-ring-opacity: 0.8; } +.ring-opacity-85 { + --tw-ring-opacity: 0.85; +} .ring-opacity-90 { --tw-ring-opacity: 0.9; } @@ -36709,6 +37579,10 @@ --tw-backdrop-opacity: opacity(0.1); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } +.backdrop-opacity-15 { + --tw-backdrop-opacity: opacity(0.15); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} .backdrop-opacity-20 { --tw-backdrop-opacity: opacity(0.2); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); @@ -36721,18 +37595,34 @@ --tw-backdrop-opacity: opacity(0.3); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } +.backdrop-opacity-35 { + --tw-backdrop-opacity: opacity(0.35); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} .backdrop-opacity-40 { --tw-backdrop-opacity: opacity(0.4); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } +.backdrop-opacity-45 { + --tw-backdrop-opacity: opacity(0.45); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} .backdrop-opacity-50 { --tw-backdrop-opacity: opacity(0.5); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } +.backdrop-opacity-55 { + --tw-backdrop-opacity: opacity(0.55); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} .backdrop-opacity-60 { --tw-backdrop-opacity: opacity(0.6); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } +.backdrop-opacity-65 { + --tw-backdrop-opacity: opacity(0.65); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} .backdrop-opacity-70 { --tw-backdrop-opacity: opacity(0.7); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); @@ -36745,6 +37635,10 @@ --tw-backdrop-opacity: opacity(0.8); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } +.backdrop-opacity-85 { + --tw-backdrop-opacity: opacity(0.85); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} .backdrop-opacity-90 { --tw-backdrop-opacity: opacity(0.9); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); @@ -36902,45 +37796,9 @@ .content-none { content: none; } -.line-clamp-1 { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 1; -} -.line-clamp-2 { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; +.forced-color-adjust-auto { + forced-color-adjust: auto; } -.line-clamp-3 { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; -} -.line-clamp-4 { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 4; -} -.line-clamp-5 { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 5; -} -.line-clamp-6 { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 6; -} -.line-clamp-none { - overflow: visible; - display: block; - -webkit-box-orient: horizontal; - -webkit-line-clamp: none; +.forced-color-adjust-none { + forced-color-adjust: none; } diff --git a/tests/snapshots/esbuildPlugin.css b/tests/snapshots/esbuildPlugin.css index b2d1348..4710c92 100644 --- a/tests/snapshots/esbuildPlugin.css +++ b/tests/snapshots/esbuildPlugin.css @@ -11,7 +11,8 @@ ::after { --tw-content: ""; } -html { +html, +:host { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; @@ -19,18 +20,12 @@ html { 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"; + -webkit-tap-highlight-color: transparent; } body { margin: 0; diff --git a/tests/snapshots/generate.css b/tests/snapshots/generate.css index 074371d..da842cb 100644 --- a/tests/snapshots/generate.css +++ b/tests/snapshots/generate.css @@ -44,7 +44,7 @@ /* font-sans: font-sans */ .font-sans { - 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-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } /* transform-gpu: transform-gpu */ @@ -277,9 +277,17 @@ } } -/* alpha modifier: bg-orange-400/20 text-slate-200/[.06] border-black/15 bg-[#123456]/15 text-[#222]/[--custom-var] */ -.border-black\/15 { - border-color: rgb(0 0 0 / 0.15); +/* child-variant: *:italic *:hover:italic hover:*:italic [&_p]:*:hover:italic */ +.\[\&_p\]\:\*\:hover\:italic:hover > * p, +.\*\:hover\:italic:hover > *, +.\*\:italic > *, +.hover\:\*\:italic > *:hover { + font-style: italic; +} + +/* alpha modifier: bg-orange-400/20 text-slate-200/[.06] border-black/16 bg-[#123456]/16 text-[#222]/[--custom-var] */ +.border-black\/16 { + border-color: rgb(0 0 0 / 0.16); } .bg-orange-400\/20 { background-color: rgb(251 146 60 / 0.2); @@ -493,6 +501,20 @@ html:has(.\[html\:has\(\&\)\]\:bg-blue-500) { } } +/* has-*: has-[figcaption]:inline-block has-[>_.potato]:table has-[>_h1_+_h2]:contents has-[h2]:has-[.banana]:hidden */ +.has-\[figcaption\]\:inline-block:has(figcaption) { + display: inline-block; +} +.has-\[\>_\.potato\]\:table:has(> .potato) { + display: table; +} +.has-\[\>_h1_\+_h2\]\:contents:has(> h1 + h2) { + display: contents; +} +.has-\[h2\]\:has-\[\.banana\]\:hidden:has(.banana):has(h2) { + display: none; +} + /* aria-*: aria-checked:underline aria-[sort=ascending]:underline peer-aria-[labelledby='a_b']:underline */ .aria-\[sort\=ascending\]\:underline[aria-sort=ascending], .aria-checked\:underline[aria-checked="true"], diff --git a/tests/snapshots/vite-minify.css b/tests/snapshots/vite-minify.css index 6ff9098..aac52c2 100644 --- a/tests/snapshots/vite-minify.css +++ b/tests/snapshots/vite-minify.css @@ -1 +1 @@ -*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content:""}html{-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,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{color:inherit;border-top-width:1px;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]{display:none}html{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(248 250 252/var(--tw-text-opacity));height:100%;overflow:hidden}.WXqopW_container{text-align:center;padding:3rem}.WXqopW_container .WXqopW_title{font-size:1.25rem;font-weight:700;line-height:1.75rem}*,:before,:after{--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: }::backdrop{--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: }.btn{--tw-shadow-color:#0000001a;box-shadow:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);border-radius:.5rem;padding:.5rem 1rem;font-weight:600}.btn-green{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity))}.btn-green:hover{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity))}.mt-4{margin-top:1rem}.p-4{padding:1rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal)var(--tw-slashed-zero)var(--tw-numeric-figure)var(--tw-numeric-spacing)var(--tw-numeric-fraction)} +*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content:""}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{color:inherit;border-top-width:1px;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]{display:none}html{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(248 250 252/var(--tw-text-opacity));height:100%;overflow:hidden}.WXqopW_container{text-align:center;padding:3rem}.WXqopW_container .WXqopW_title{font-size:1.25rem;font-weight:700;line-height:1.75rem}*,:before,:after{--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: }::backdrop{--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: }.btn{--tw-shadow-color:#0000001a;box-shadow:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);border-radius:.5rem;padding:.5rem 1rem;font-weight:600}.btn-green{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity))}.btn-green:hover{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity))}.mt-4{margin-top:1rem}.p-4{padding:1rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal)var(--tw-slashed-zero)var(--tw-numeric-figure)var(--tw-numeric-spacing)var(--tw-numeric-fraction)} diff --git a/tests/snapshots/vite.css b/tests/snapshots/vite.css index 40c3bf2..cc02713 100644 --- a/tests/snapshots/vite.css +++ b/tests/snapshots/vite.css @@ -7,11 +7,12 @@ --tw-content: ""; } -html { +html, :host { -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, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; + -webkit-tap-highlight-color: transparent; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; line-height: 1.5; } diff --git a/tests/vitePlugin.test.ts b/tests/vitePlugin.test.ts index 4de6b4d..6100022 100644 --- a/tests/vitePlugin.test.ts +++ b/tests/vitePlugin.test.ts @@ -11,10 +11,7 @@ pluginSnapshotTest("vite", async () => { root, plugins: [downwind()], logLevel: "warn", - css: { - transformer: "lightningcss", - lightningcss: {}, // https://github.com/vitejs/vite/pull/14872 - }, + css: { transformer: "lightningcss" }, build: { cssMinify: false, target: ["chrome104"] }, configFile: false, });