diff --git a/packages/ui-templates/package.json b/packages/ui-templates/package.json index ada775a02d..5cd55ffd98 100644 --- a/packages/ui-templates/package.json +++ b/packages/ui-templates/package.json @@ -27,6 +27,7 @@ "@nuxt/ui-assets": "^0.2.0", "@types/html-minifier": "^4.0.5", "@types/lodash.template": "^4.5.3", + "@unocss/reset": "^0.58.3", "critters": "0.0.22", "execa": "^8.0.1", "globby": "^14.0.1", @@ -35,10 +36,9 @@ "knitwork": "^1.0.0", "lodash.template": "^4.5.0", "scule": "^1.3.0", + "unocss": "^0.58.3", "upath": "^2.0.1", - "vite": "^5.0.8", - "vite-plugin-windicss": "^1.9.3", - "windicss": "^3.5.6" + "vite": "^5.0.11" }, "publishConfig": { "access": "public" diff --git a/packages/ui-templates/styles.ts b/packages/ui-templates/styles.ts index 0de9720127..7f20ae0835 100644 --- a/packages/ui-templates/styles.ts +++ b/packages/ui-templates/styles.ts @@ -1 +1,2 @@ -import 'virtual:windi.css' +import '@unocss/reset/tailwind.css' +import 'uno.css' diff --git a/packages/ui-templates/test/__snapshots__/snapshots.spec.ts.snap b/packages/ui-templates/test/__snapshots__/snapshots.spec.ts.snap index a2607a06e6..bf980b4a26 100644 --- a/packages/ui-templates/test/__snapshots__/snapshots.spec.ts.snap +++ b/packages/ui-templates/test/__snapshots__/snapshots.spec.ts.snap @@ -1,43 +1,1919 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`template > correctly outputs style blocks for error-404.vue 1`] = ` -" -.spotlight{background:linear-gradient(45deg, #00DC82 0%, #36E4DA 50%, #0047E1 100%);filter:blur(20vh);height:40vh;bottom:-30vh}.gradient-border{position:relative;border-radius:0.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@media (prefers-color-scheme: light){.gradient-border{background-color:rgba(255, 255, 255, 0.3)}.gradient-border::before{background:linear-gradient(90deg, #e2e2e2 0%, #e2e2e2 25%, #00DC82 50%, #36E4DA 75%, #0047E1 100%)}}@media (prefers-color-scheme: dark){.gradient-border{background-color:rgba(20, 20, 20, 0.3)}.gradient-border::before{background:linear-gradient(90deg, #303030 0%, #303030 25%, #00DC82 50%, #36E4DA 75%, #0047E1 100%)}}.gradient-border::before{content:\\"\\";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:0.5rem;padding:2px;width:100%;background-size:400% auto;opacity:0.5;transition:background-position 0.3s ease-in-out, opacity 0.2s ease-in-out;-webkit-mask:linear-gradient(#fff 0 0) content-box, - linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box, - linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.gradient-border:hover::before{background-position:-50% 0;opacity:1}.bg-white{--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.cursor-pointer{cursor:pointer}.flex{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.grid{display:-ms-grid;display:grid}.place-content-center{place-content:center}.items-center{-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.justify-center{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center}.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-medium{font-weight:500}.font-light{font-weight:300}.text-8xl{font-size:6rem;line-height:1}.text-xl{font-size:1.25rem;line-height:1.75rem}.leading-tight{line-height:1.25}.mb-8{margin-bottom:2rem}.mb-16{margin-bottom:4rem}.max-w-520px{max-width:520px}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.px-8{padding-left:2rem;padding-right:2rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.fixed{position:fixed}.left-0{left:0}.right-0{right:0}.text-center{text-align:center}.text-black{--tw-text-opacity:1;color:rgba(0,0,0,var(--tw-text-opacity))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-full{width:100%}.z-10{z-index:10}.z-20{z-index:20}@media (min-width: 640px){.sm\\\\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\\\\:text-xl{font-size:1.25rem;line-height:1.75rem}.sm\\\\:text-10xl{font-size:10rem;line-height:1}.sm\\\\:px-0{padding-left:0;padding-right:0}.sm\\\\:py-3{padding-top:.75rem;padding-bottom:.75rem}.sm\\\\:px-6{padding-left:1.5rem;padding-right:1.5rem}}@media (prefers-color-scheme: dark){.dark\\\\:bg-black{--tw-bg-opacity:1;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.dark\\\\:text-white{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}} +".spotlight { + background: linear-gradient(45deg, #00dc82 0%, #36e4da 50%, #0047e1 100%); + filter: blur(20vh); + height: 40vh; + bottom: -30vh; +} +.gradient-border { + position: relative; + border-radius: 0.5rem; + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); +} +@media (prefers-color-scheme: light) { + .gradient-border { + background-color: rgba(255, 255, 255, 0.3); + } + .gradient-border::before { + background: linear-gradient( + 90deg, + #e2e2e2 0%, + #e2e2e2 25%, + #00dc82 50%, + #36e4da 75%, + #0047e1 100% + ); + } +} +@media (prefers-color-scheme: dark) { + .gradient-border { + background-color: rgba(20, 20, 20, 0.3); + } + .gradient-border::before { + background: linear-gradient( + 90deg, + #303030 0%, + #303030 25%, + #00dc82 50%, + #36e4da 75%, + #0047e1 100% + ); + } +} +.gradient-border::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 0.5rem; + padding: 2px; + width: 100%; + background-size: 400% auto; + opacity: 0.5; + transition: + background-position 0.3s ease-in-out, + opacity 0.2s ease-in-out; + -webkit-mask: + linear-gradient(#fff 0 0) content-box, + linear-gradient(#fff 0 0); + mask: + linear-gradient(#fff 0 0) content-box, + linear-gradient(#fff 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; +} +.gradient-border:hover::before { + background-position: -50% 0; + opacity: 1; +} +.fixed { + position: fixed; +} +.left-0 { + left: 0; +} +.right-0 { + right: 0; +} +.z-10 { + z-index: 10; +} +.z-20 { + z-index: 20; +} +.grid { + display: grid; +} +.mb-16 { + margin-bottom: 4rem; +} +.mb-8 { + margin-bottom: 2rem; +} +.max-w-520px { + max-width: 520px; +} +.min-h-screen { + min-height: 100vh; +} +.w-full { + width: 100%; +} +.flex { + display: flex; +} +.cursor-pointer { + cursor: pointer; +} +.place-content-center { + place-content: center; +} +.items-center { + align-items: center; +} +.justify-center { + justify-content: center; +} +.overflow-hidden { + overflow: hidden; +} +.bg-white { + --un-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--un-bg-opacity)); +} +.px-4 { + padding-left: 1rem; + padding-right: 1rem; +} +.px-8 { + padding-left: 2rem; + padding-right: 2rem; +} +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} +.text-center { + text-align: center; +} +.text-8xl { + font-size: 6rem; + line-height: 1; +} +.text-xl { + font-size: 1.25rem; + line-height: 1.75rem; +} +.text-black { + --un-text-opacity: 1; + color: rgb(0 0 0 / var(--un-text-opacity)); +} +.font-light { + font-weight: 300; +} +.font-medium { + font-weight: 500; +} +.leading-tight { + line-height: 1.25; +} +.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"; +} +.antialiased { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +@media (prefers-color-scheme: dark) { + .dark\\:bg-black { + --un-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--un-bg-opacity)); + } + .dark\\:text-white { + --un-text-opacity: 1; + color: rgb(255 255 255 / var(--un-text-opacity)); + } +} +@media (min-width: 640px) { + .sm\\:px-0 { + padding-left: 0; + padding-right: 0; + } + .sm\\:px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; + } + .sm\\:py-3 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; + } + .sm\\:text-4xl { + font-size: 2.25rem; + line-height: 2.5rem; + } + .sm\\:text-xl { + font-size: 1.25rem; + line-height: 1.75rem; + } +} " `; -exports[`template > correctly outputs style blocks for error-404.vue 2`] = `"*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(14, 165, 233, .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}a{color:inherit;text-decoration:inherit}body{margin:0;font-family:inherit;line-height:inherit}html{-webkit-text-size-adjust:100%;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\\";line-height:1.5}h1,p{margin:0}h1{font-size:inherit;font-weight:inherit}"`; +exports[`template > correctly outputs style blocks for error-404.vue 2`] = ` +"*, +:before, +:after { + box-sizing: border-box; + border-width: 0; + border-style: solid; + border-color: var(--un-default-border-color, #e5e7eb); +} +:before, +:after { + --un-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, + sans-serif, + "Apple Color Emoji", + "Segoe UI Emoji", + Segoe UI Symbol, + "Noto Color Emoji"; + font-feature-settings: normal; + font-variation-settings: normal; + -webkit-tap-highlight-color: transparent; +} +body { + margin: 0; + line-height: inherit; +} +h1 { + font-size: inherit; + font-weight: inherit; +} +a { + color: inherit; + text-decoration: inherit; +} +h1, +p { + margin: 0; +} +*, +:before, +:after { + --un-rotate: 0; + --un-rotate-x: 0; + --un-rotate-y: 0; + --un-rotate-z: 0; + --un-scale-x: 1; + --un-scale-y: 1; + --un-scale-z: 1; + --un-skew-x: 0; + --un-skew-y: 0; + --un-translate-x: 0; + --un-translate-y: 0; + --un-translate-z: 0; + --un-pan-x: ; + --un-pan-y: ; + --un-pinch-zoom: ; + --un-scroll-snap-strictness: proximity; + --un-ordinal: ; + --un-slashed-zero: ; + --un-numeric-figure: ; + --un-numeric-spacing: ; + --un-numeric-fraction: ; + --un-border-spacing-x: 0; + --un-border-spacing-y: 0; + --un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0); + --un-ring-shadow: 0 0 rgb(0 0 0 / 0); + --un-shadow-inset: ; + --un-shadow: 0 0 rgb(0 0 0 / 0); + --un-ring-inset: ; + --un-ring-offset-width: 0px; + --un-ring-offset-color: #fff; + --un-ring-width: 0px; + --un-ring-color: rgb(147 197 253 / 0.5); + --un-blur: ; + --un-brightness: ; + --un-contrast: ; + --un-drop-shadow: ; + --un-grayscale: ; + --un-hue-rotate: ; + --un-invert: ; + --un-saturate: ; + --un-sepia: ; + --un-backdrop-blur: ; + --un-backdrop-brightness: ; + --un-backdrop-contrast: ; + --un-backdrop-grayscale: ; + --un-backdrop-hue-rotate: ; + --un-backdrop-invert: ; + --un-backdrop-opacity: ; + --un-backdrop-saturate: ; + --un-backdrop-sepia: ; +} +" +`; exports[`template > correctly outputs style blocks for error-500.vue 1`] = ` -" -.spotlight{background:linear-gradient(45deg, #00DC82 0%, #36E4DA 50%, #0047E1 100%);filter:blur(20vh)}.bg-white{--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.grid{display:-ms-grid;display:grid}.place-content-center{place-content:center}.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-medium{font-weight:500}.font-light{font-weight:300}.h-1\\\\/2{height:50%}.text-8xl{font-size:6rem;line-height:1}.text-xl{font-size:1.25rem;line-height:1.75rem}.leading-tight{line-height:1.25}.mb-8{margin-bottom:2rem}.mb-16{margin-bottom:4rem}.max-w-520px{max-width:520px}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.px-8{padding-left:2rem;padding-right:2rem}.fixed{position:fixed}.left-0{left:0}.right-0{right:0}.-bottom-1\\\\/2{bottom:-50%}.text-center{text-align:center}.text-black{--tw-text-opacity:1;color:rgba(0,0,0,var(--tw-text-opacity))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (min-width: 640px){.sm\\\\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\\\\:text-10xl{font-size:10rem;line-height:1}.sm\\\\:px-0{padding-left:0;padding-right:0}}@media (prefers-color-scheme: dark){.dark\\\\:bg-black{--tw-bg-opacity:1;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.dark\\\\:text-white{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}} +".spotlight { + background: linear-gradient(45deg, #00dc82 0%, #36e4da 50%, #0047e1 100%); + filter: blur(20vh); +} +.fixed { + position: fixed; +} +.-bottom-1\\/2 { + bottom: -50%; +} +.left-0 { + left: 0; +} +.right-0 { + right: 0; +} +.grid { + display: grid; +} +.mb-16 { + margin-bottom: 4rem; +} +.mb-8 { + margin-bottom: 2rem; +} +.h-1\\/2 { + height: 50%; +} +.max-w-520px { + max-width: 520px; +} +.min-h-screen { + min-height: 100vh; +} +.place-content-center { + place-content: center; +} +.overflow-hidden { + overflow: hidden; +} +.bg-white { + --un-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--un-bg-opacity)); +} +.px-8 { + padding-left: 2rem; + padding-right: 2rem; +} +.text-center { + text-align: center; +} +.text-8xl { + font-size: 6rem; + line-height: 1; +} +.text-xl { + font-size: 1.25rem; + line-height: 1.75rem; +} +.text-black { + --un-text-opacity: 1; + color: rgb(0 0 0 / var(--un-text-opacity)); +} +.font-light { + font-weight: 300; +} +.font-medium { + font-weight: 500; +} +.leading-tight { + line-height: 1.25; +} +.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"; +} +.antialiased { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +@media (prefers-color-scheme: dark) { + .dark\\:bg-black { + --un-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--un-bg-opacity)); + } + .dark\\:text-white { + --un-text-opacity: 1; + color: rgb(255 255 255 / var(--un-text-opacity)); + } +} +@media (min-width: 640px) { + .sm\\:px-0 { + padding-left: 0; + padding-right: 0; + } + .sm\\:text-4xl { + font-size: 2.25rem; + line-height: 2.5rem; + } +} " `; -exports[`template > correctly outputs style blocks for error-500.vue 2`] = `"*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(14, 165, 233, .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{margin:0;font-family:inherit;line-height:inherit}html{-webkit-text-size-adjust:100%;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\\";line-height:1.5}h1,p{margin:0}h1{font-size:inherit;font-weight:inherit}"`; +exports[`template > correctly outputs style blocks for error-500.vue 2`] = ` +"*, +:before, +:after { + box-sizing: border-box; + border-width: 0; + border-style: solid; + border-color: var(--un-default-border-color, #e5e7eb); +} +:before, +:after { + --un-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, + sans-serif, + "Apple Color Emoji", + "Segoe UI Emoji", + Segoe UI Symbol, + "Noto Color Emoji"; + font-feature-settings: normal; + font-variation-settings: normal; + -webkit-tap-highlight-color: transparent; +} +body { + margin: 0; + line-height: inherit; +} +h1 { + font-size: inherit; + font-weight: inherit; +} +h1, +p { + margin: 0; +} +*, +:before, +:after { + --un-rotate: 0; + --un-rotate-x: 0; + --un-rotate-y: 0; + --un-rotate-z: 0; + --un-scale-x: 1; + --un-scale-y: 1; + --un-scale-z: 1; + --un-skew-x: 0; + --un-skew-y: 0; + --un-translate-x: 0; + --un-translate-y: 0; + --un-translate-z: 0; + --un-pan-x: ; + --un-pan-y: ; + --un-pinch-zoom: ; + --un-scroll-snap-strictness: proximity; + --un-ordinal: ; + --un-slashed-zero: ; + --un-numeric-figure: ; + --un-numeric-spacing: ; + --un-numeric-fraction: ; + --un-border-spacing-x: 0; + --un-border-spacing-y: 0; + --un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0); + --un-ring-shadow: 0 0 rgb(0 0 0 / 0); + --un-shadow-inset: ; + --un-shadow: 0 0 rgb(0 0 0 / 0); + --un-ring-inset: ; + --un-ring-offset-width: 0px; + --un-ring-offset-color: #fff; + --un-ring-width: 0px; + --un-ring-color: rgb(147 197 253 / 0.5); + --un-blur: ; + --un-brightness: ; + --un-contrast: ; + --un-drop-shadow: ; + --un-grayscale: ; + --un-hue-rotate: ; + --un-invert: ; + --un-saturate: ; + --un-sepia: ; + --un-backdrop-blur: ; + --un-backdrop-brightness: ; + --un-backdrop-contrast: ; + --un-backdrop-grayscale: ; + --un-backdrop-hue-rotate: ; + --un-backdrop-invert: ; + --un-backdrop-opacity: ; + --un-backdrop-saturate: ; + --un-backdrop-sepia: ; +} +" +`; exports[`template > correctly outputs style blocks for error-dev.vue 1`] = ` -" -.spotlight{background:linear-gradient(45deg, #00DC82 0%, #36E4DA 50%, #0047E1 100%);opacity:0.8;filter:blur(30vh);height:60vh;bottom:-40vh}.bg-white{--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.bg-black\\\\/5{--tw-bg-opacity:.05;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.rounded-t-md{border-top-left-radius:.375rem;border-top-right-radius:.375rem}.flex{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.flex-col{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.flex-1{-webkit-box-flex:1;-ms-flex:1 1 0%;-webkit-flex:1 1 0%;flex:1 1 0%}.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-medium{font-weight:500}.font-light{font-weight:300}.h-auto{height:auto}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-6xl{font-size:3.75rem;line-height:1}.leading-tight{line-height:1.25}.mb-8{margin-bottom:2rem}.mb-6{margin-bottom:1.5rem}.min-h-screen{min-height:100vh}.overflow-y-auto{overflow-y:auto}.p-8{padding:2rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.pt-14{padding-top:3.5rem}.fixed{position:fixed}.left-0{left:0}.right-0{right:0}.text-black{--tw-text-opacity:1;color:rgba(0,0,0,var(--tw-text-opacity))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.z-10{z-index:10}@media (min-width: 640px){.sm\\\\:text-8xl{font-size:6rem;line-height:1}.sm\\\\:text-2xl{font-size:1.5rem;line-height:2rem}}@media (prefers-color-scheme: dark){.dark\\\\:bg-black{--tw-bg-opacity:1;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.dark\\\\:bg-white\\\\/10{--tw-bg-opacity:.1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.dark\\\\:text-white{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}} +".spotlight { + background: linear-gradient(45deg, #00dc82 0%, #36e4da 50%, #0047e1 100%); + opacity: 0.8; + filter: blur(30vh); + height: 60vh; + bottom: -40vh; +} +.fixed { + position: fixed; +} +.left-0 { + left: 0; +} +.right-0 { + right: 0; +} +.z-10 { + z-index: 10; +} +.mb-6 { + margin-bottom: 1.5rem; +} +.mb-8 { + margin-bottom: 2rem; +} +.h-auto { + height: auto; +} +.min-h-screen { + min-height: 100vh; +} +.flex { + display: flex; +} +.flex-1 { + flex: 1 1 0%; +} +.flex-col { + flex-direction: column; +} +.overflow-y-auto { + overflow-y: auto; +} +.rounded-t-md { + border-top-left-radius: 0.375rem; + border-top-right-radius: 0.375rem; +} +.bg-black\\/5 { + background-color: #0000000d; +} +.bg-white { + --un-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--un-bg-opacity)); +} +.p-8 { + padding: 2rem; +} +.px-10 { + padding-left: 2.5rem; + padding-right: 2.5rem; +} +.pt-14 { + padding-top: 3.5rem; +} +.text-6xl { + font-size: 3.75rem; + line-height: 1; +} +.text-xl { + font-size: 1.25rem; + line-height: 1.75rem; +} +.text-black { + --un-text-opacity: 1; + color: rgb(0 0 0 / var(--un-text-opacity)); +} +.font-light { + font-weight: 300; +} +.font-medium { + font-weight: 500; +} +.leading-tight { + line-height: 1.25; +} +.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"; +} +.antialiased { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +@media (prefers-color-scheme: dark) { + .dark\\:bg-black { + --un-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--un-bg-opacity)); + } + .dark\\:bg-white\\/10 { + background-color: #ffffff1a; + } + .dark\\:text-white { + --un-text-opacity: 1; + color: rgb(255 255 255 / var(--un-text-opacity)); + } +} +@media (min-width: 640px) { + .sm\\:text-2xl { + font-size: 1.5rem; + line-height: 2rem; + } + .sm\\:text-8xl { + font-size: 6rem; + line-height: 1; + } +} " `; -exports[`template > correctly outputs style blocks for error-dev.vue 2`] = `"*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(14, 165, 233, .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{margin:0;font-family:inherit;line-height:inherit}html{-webkit-text-size-adjust:100%;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\\";line-height:1.5}h1,p,pre{margin:0}h1{font-size:inherit;font-weight:inherit}pre{font-size:1em;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}"`; +exports[`template > correctly outputs style blocks for error-dev.vue 2`] = ` +"*, +:before, +:after { + box-sizing: border-box; + border-width: 0; + border-style: solid; + border-color: var(--un-default-border-color, #e5e7eb); +} +:before, +:after { + --un-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, + sans-serif, + "Apple Color Emoji", + "Segoe UI Emoji", + Segoe UI Symbol, + "Noto Color Emoji"; + font-feature-settings: normal; + font-variation-settings: normal; + -webkit-tap-highlight-color: transparent; +} +body { + margin: 0; + line-height: inherit; +} +h1 { + font-size: inherit; + font-weight: inherit; +} +pre { + font-family: + ui-monospace, + SFMono-Regular, + Menlo, + Monaco, + Consolas, + Liberation Mono, + Courier New, + monospace; + font-feature-settings: normal; + font-variation-settings: normal; + font-size: 1em; +} +h1, +p, +pre { + margin: 0; +} +*, +:before, +:after { + --un-rotate: 0; + --un-rotate-x: 0; + --un-rotate-y: 0; + --un-rotate-z: 0; + --un-scale-x: 1; + --un-scale-y: 1; + --un-scale-z: 1; + --un-skew-x: 0; + --un-skew-y: 0; + --un-translate-x: 0; + --un-translate-y: 0; + --un-translate-z: 0; + --un-pan-x: ; + --un-pan-y: ; + --un-pinch-zoom: ; + --un-scroll-snap-strictness: proximity; + --un-ordinal: ; + --un-slashed-zero: ; + --un-numeric-figure: ; + --un-numeric-spacing: ; + --un-numeric-fraction: ; + --un-border-spacing-x: 0; + --un-border-spacing-y: 0; + --un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0); + --un-ring-shadow: 0 0 rgb(0 0 0 / 0); + --un-shadow-inset: ; + --un-shadow: 0 0 rgb(0 0 0 / 0); + --un-ring-inset: ; + --un-ring-offset-width: 0px; + --un-ring-offset-color: #fff; + --un-ring-width: 0px; + --un-ring-color: rgb(147 197 253 / 0.5); + --un-blur: ; + --un-brightness: ; + --un-contrast: ; + --un-drop-shadow: ; + --un-grayscale: ; + --un-hue-rotate: ; + --un-invert: ; + --un-saturate: ; + --un-sepia: ; + --un-backdrop-blur: ; + --un-backdrop-brightness: ; + --un-backdrop-contrast: ; + --un-backdrop-grayscale: ; + --un-backdrop-hue-rotate: ; + --un-backdrop-invert: ; + --un-backdrop-opacity: ; + --un-backdrop-saturate: ; + --un-backdrop-sepia: ; +} +" +`; exports[`template > correctly outputs style blocks for loading.vue 1`] = ` -" -.nuxt-loader-bar{background:repeating-linear-gradient(to right, #36E4DA 0%, #1DE0B1 25%, #00DC82 50%, #1DE0B1 75%, #36E4DA 100%);height:100px;background-size:200% auto;background-position:0 0;animation:gradient 2s infinite;animation-fill-mode:forwards;animation-timing-function:linear;position:fixed;bottom:0;left:0;right:0;height:5px}.visual-effects .nuxt-loader-bar{height:100px;bottom:-50px;left:-50px;right:-50px;filter:blur(100px)}.visual-effects .mouse-gradient{background:repeating-linear-gradient(to right, #00DC82 0%, #1DE0B1 50%, #36E4DA 100%);filter:blur(100px);opacity:0.5}#animation-toggle{position:fixed;padding:10px;top:0;right:0;transition:opacity 0.4s ease-in;opacity:0}#animation-toggle:hover{opacity:0.8}@keyframes gradient{0%{background-position:0 0}100%{background-position:-200% 0}}@media (prefers-color-scheme: dark){html,body{color:white;color-scheme:dark}.nuxt-loader-bar{opacity:0.5}}*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(14, 165, 233, .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}a{color:inherit;text-decoration:inherit}body{margin:0;font-family:inherit;line-height:inherit}button{font-family:inherit;font-size:100%;line-height:1.15;margin:0;text-transform:none;background-color:transparent;background-image:none;padding:0;line-height:inherit;color:inherit}button{-webkit-appearance:button}button{cursor:pointer}html{-webkit-text-size-adjust:100%;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\\";line-height:1.5}svg{display:block;vertical-align:middle}.bg-white{--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.rounded-full{border-radius:9999px}.flex{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.flex-col{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.items-center{-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.justify-center{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center}.h-\\\\[200px\\\\]{height:200px}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.absolute{position:absolute}.relative{position:relative}.top-0{top:0}.text-center{text-align:center}.w-\\\\[200px\\\\]{width:200px}.z-20{z-index:20}.transition-opacity{-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);-o-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-transition-duration:.15s;-o-transition-duration:.15s;transition-duration:.15s}@media (prefers-color-scheme: dark){.dark\\\\:bg-black{--tw-bg-opacity:1;background-color:rgba(0,0,0,var(--tw-bg-opacity))}} +".nuxt-loader-bar { + background: repeating-linear-gradient( + to right, + #36e4da 0%, + #1de0b1 25%, + #00dc82 50%, + #1de0b1 75%, + #36e4da 100% + ); + height: 100px; + background-size: 200% auto; + background-position: 0 0; + animation: gradient 2s infinite; + animation-fill-mode: forwards; + animation-timing-function: linear; + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: 5px; +} +.visual-effects .nuxt-loader-bar { + height: 100px; + bottom: -50px; + left: -50px; + right: -50px; + filter: blur(100px); +} +.visual-effects .mouse-gradient { + background: repeating-linear-gradient( + to right, + #00dc82 0%, + #1de0b1 50%, + #36e4da 100% + ); + filter: blur(100px); + opacity: 0.5; +} +#animation-toggle { + position: fixed; + padding: 10px; + top: 0; + right: 0; + transition: opacity 0.4s ease-in; + opacity: 0; +} +#animation-toggle:hover { + opacity: 0.8; +} +@keyframes gradient { + 0% { + background-position: 0 0; + } + 100% { + background-position: -200% 0; + } +} +@media (prefers-color-scheme: dark) { + html, + body { + color: white; + color-scheme: dark; + } + .nuxt-loader-bar { + opacity: 0.5; + } +} +*, +:before, +:after { + box-sizing: border-box; + border-width: 0; + border-style: solid; + border-color: var(--un-default-border-color, #e5e7eb); +} +:before, +:after { + --un-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, + sans-serif, + "Apple Color Emoji", + "Segoe UI Emoji", + Segoe UI Symbol, + "Noto Color Emoji"; + font-feature-settings: normal; + font-variation-settings: normal; + -webkit-tap-highlight-color: transparent; +} +body { + margin: 0; + line-height: inherit; +} +a { + color: inherit; + text-decoration: inherit; +} +button { + font-family: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + font-size: 100%; + font-weight: inherit; + line-height: inherit; + color: inherit; + margin: 0; + padding: 0; +} +button { + text-transform: none; +} +button { + -webkit-appearance: button; + background-color: transparent; + background-image: none; +} +button { + cursor: pointer; +} +svg { + display: block; + vertical-align: middle; +} +*, +:before, +:after { + --un-rotate: 0; + --un-rotate-x: 0; + --un-rotate-y: 0; + --un-rotate-z: 0; + --un-scale-x: 1; + --un-scale-y: 1; + --un-scale-z: 1; + --un-skew-x: 0; + --un-skew-y: 0; + --un-translate-x: 0; + --un-translate-y: 0; + --un-translate-z: 0; + --un-pan-x: ; + --un-pan-y: ; + --un-pinch-zoom: ; + --un-scroll-snap-strictness: proximity; + --un-ordinal: ; + --un-slashed-zero: ; + --un-numeric-figure: ; + --un-numeric-spacing: ; + --un-numeric-fraction: ; + --un-border-spacing-x: 0; + --un-border-spacing-y: 0; + --un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0); + --un-ring-shadow: 0 0 rgb(0 0 0 / 0); + --un-shadow-inset: ; + --un-shadow: 0 0 rgb(0 0 0 / 0); + --un-ring-inset: ; + --un-ring-offset-width: 0px; + --un-ring-offset-color: #fff; + --un-ring-width: 0px; + --un-ring-color: rgb(147 197 253 / 0.5); + --un-blur: ; + --un-brightness: ; + --un-contrast: ; + --un-drop-shadow: ; + --un-grayscale: ; + --un-hue-rotate: ; + --un-invert: ; + --un-saturate: ; + --un-sepia: ; + --un-backdrop-blur: ; + --un-backdrop-brightness: ; + --un-backdrop-contrast: ; + --un-backdrop-grayscale: ; + --un-backdrop-hue-rotate: ; + --un-backdrop-invert: ; + --un-backdrop-opacity: ; + --un-backdrop-saturate: ; + --un-backdrop-sepia: ; +} +.absolute { + position: absolute; +} +.relative { + position: relative; +} +.top-0 { + top: 0; +} +.z-20 { + z-index: 20; +} +.h-\\[200px\\] { + height: 200px; +} +.min-h-screen { + min-height: 100vh; +} +.w-\\[200px\\] { + width: 200px; +} +.flex { + display: flex; +} +.flex-col { + flex-direction: column; +} +.items-center { + align-items: center; +} +.justify-center { + justify-content: center; +} +.overflow-hidden { + overflow: hidden; +} +.rounded-full { + border-radius: 9999px; +} +.bg-white { + --un-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--un-bg-opacity)); +} +.text-center { + text-align: center; +} +.transition-opacity { + transition-property: opacity; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 0.15s; +} +@media (prefers-color-scheme: dark) { + .dark\\:bg-black { + --un-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--un-bg-opacity)); + } +} " `; -exports[`template > correctly outputs style blocks for loading.vue 2`] = `";#animation-toggle{position:fixed;padding:10px;top:0;right:0;transition:opacity 0.4s ease-in;opacity:0}#animation-toggle:hover{opacity:0.8}@keyframes gradient{0%{background-position:0 0}100%{background-position:-200% 0}}@media (prefers-color-scheme: dark){html,body{color:white;color-scheme:dark}}*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(14, 165, 233, .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}a{color:inherit;text-decoration:inherit}body{margin:0;font-family:inherit;line-height:inherit}button{font-family:inherit;font-size:100%;line-height:1.15;margin:0;text-transform:none;background-color:transparent;background-image:none;padding:0;line-height:inherit;color:inherit}button{-webkit-appearance:button}button{cursor:pointer}html{-webkit-text-size-adjust:100%;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\\";line-height:1.5}svg{display:block;vertical-align:middle}"`; +exports[`template > correctly outputs style blocks for loading.vue 2`] = ` +"#animation-toggle { + position: fixed; + padding: 10px; + top: 0; + right: 0; + transition: opacity 0.4s ease-in; + opacity: 0; +} +#animation-toggle:hover { + opacity: 0.8; +} +@keyframes gradient { + 0% { + background-position: 0 0; + } + 100% { + background-position: -200% 0; + } +} +@media (prefers-color-scheme: dark) { + html, + body { + color: white; + color-scheme: dark; + } +} +*, +:before, +:after { + box-sizing: border-box; + border-width: 0; + border-style: solid; + border-color: var(--un-default-border-color, #e5e7eb); +} +:before, +:after { + --un-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, + sans-serif, + "Apple Color Emoji", + "Segoe UI Emoji", + Segoe UI Symbol, + "Noto Color Emoji"; + font-feature-settings: normal; + font-variation-settings: normal; + -webkit-tap-highlight-color: transparent; +} +body { + margin: 0; + line-height: inherit; +} +a { + color: inherit; + text-decoration: inherit; +} +button { + font-family: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + font-size: 100%; + font-weight: inherit; + line-height: inherit; + color: inherit; + margin: 0; + padding: 0; +} +button { + text-transform: none; +} +button { + -webkit-appearance: button; + background-color: transparent; + background-image: none; +} +button { + cursor: pointer; +} +svg { + display: block; + vertical-align: middle; +} +*, +:before, +:after { + --un-rotate: 0; + --un-rotate-x: 0; + --un-rotate-y: 0; + --un-rotate-z: 0; + --un-scale-x: 1; + --un-scale-y: 1; + --un-scale-z: 1; + --un-skew-x: 0; + --un-skew-y: 0; + --un-translate-x: 0; + --un-translate-y: 0; + --un-translate-z: 0; + --un-pan-x: ; + --un-pan-y: ; + --un-pinch-zoom: ; + --un-scroll-snap-strictness: proximity; + --un-ordinal: ; + --un-slashed-zero: ; + --un-numeric-figure: ; + --un-numeric-spacing: ; + --un-numeric-fraction: ; + --un-border-spacing-x: 0; + --un-border-spacing-y: 0; + --un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0); + --un-ring-shadow: 0 0 rgb(0 0 0 / 0); + --un-shadow-inset: ; + --un-shadow: 0 0 rgb(0 0 0 / 0); + --un-ring-inset: ; + --un-ring-offset-width: 0px; + --un-ring-offset-color: #fff; + --un-ring-width: 0px; + --un-ring-color: rgb(147 197 253 / 0.5); + --un-blur: ; + --un-brightness: ; + --un-contrast: ; + --un-drop-shadow: ; + --un-grayscale: ; + --un-hue-rotate: ; + --un-invert: ; + --un-saturate: ; + --un-sepia: ; + --un-backdrop-blur: ; + --un-backdrop-brightness: ; + --un-backdrop-contrast: ; + --un-backdrop-grayscale: ; + --un-backdrop-hue-rotate: ; + --un-backdrop-invert: ; + --un-backdrop-opacity: ; + --un-backdrop-saturate: ; + --un-backdrop-sepia: ; +} +" +`; exports[`template > correctly outputs style blocks for welcome.vue 1`] = ` -" -@media (prefers-color-scheme: light){.get-started-gradient-border{background:linear-gradient(to right, #ffffff, #ffffff), linear-gradient(to right, #00DC82, #1DE0B1, #36E4DA)}.gradient-border-modules{background:linear-gradient(var(--gradient-angle), rgba(247, 209, 76), rgba(247, 209, 76, 0.6), rgba(255, 255, 255, 0.8), rgba(247, 209, 76))}.gradient-border-examples{background:linear-gradient(var(--gradient-angle), rgba(141, 234, 255), rgba(141, 234, 255, 0.6), rgba(255, 255, 255, 0.8), rgba(141, 234, 255))}.gradient-border-documentation{background:linear-gradient(var(--gradient-angle), rgba(0, 220, 130), rgba(0, 220, 130, 0.6), rgba(255, 255, 255, 0.8), rgba(0, 220, 130))}}@media (prefers-color-scheme: dark){.get-started-gradient-border{background:linear-gradient(to right, #18181B, #18181B), linear-gradient(to right, #00DC82, #1DE0B1, #36E4DA)}.gradient-border-modules{background:linear-gradient(var(--gradient-angle), rgba(247, 209, 76), rgba(163, 129, 8), rgba(255, 255, 255, 0.3), rgba(163, 129, 8))}.gradient-border-examples{background:linear-gradient(var(--gradient-angle), rgba(141, 234, 255), rgba(0, 138, 169), rgba(255, 255, 255, 0.3), rgba(0, 138, 169))}.gradient-border-documentation{background:linear-gradient(var(--gradient-angle), rgba(0, 220, 130), rgba(0, 63, 37), rgba(255, 255, 255, 0.2), rgba(0, 63, 37))}}.get-started-gradient-border{background-clip:padding-box, border-box;background-origin:padding-box, border-box;border-color:transparent;border-radius:12px;border-width:1px}.get-started-gradient-border:hover > :is(.get-started-gradient-left, .get-started-gradient-right){opacity:0.2}.get-started-gradient-left,.get-started-gradient-right{opacity:0}.gradient-border{opacity:0;position:absolute;top:0;left:0;width:calc(100% + 2px);border-radius:12px;z-index:-1;transform:translate(-1px, -1px)}.gradient-border-rect{height:calc(100% + 2px)}@media (min-width: 1024px){.gradient-border-rect{height:calc(100% + 1px)}}.gradient-border-square{height:calc(100% + 2px)}.modules-gradient-right{opacity:0}.modules-container:hover > .gradient-border,.examples-container:hover > .gradient-border,.documentation-container:hover > .gradient-border{opacity:1;animation:gradient-rotate 5s cubic-bezier(0,0,1,1) 0s infinite reverse;transition:all 0.3s linear}.modules-container:hover > .modules-gradient-right{opacity:0.2}.examples-container:hover > .examples-gradient-right{opacity:0.2}.examples-gradient-right{opacity:0}.documentation-image-color-light,.documentation-image-color-dark{display:none}.modules-image-color-light,.modules-image-color-dark{display:none}.examples-image-color-light,.examples-image-color-dark{display:none}@media (prefers-color-scheme: light){.modules-image-light{display:block}.modules-image-dark{display:none}.modules-container:hover > a > .modules-image-light{display:none}.modules-container:hover > a > .modules-image-color-light{display:block}.examples-image-light{display:block}.examples-image-dark{display:none}.examples-container:hover > a > .examples-image-light{display:none}.examples-container:hover > a > .examples-image-color-light{display:block}.documentation-image-light{display:block}.documentation-image-dark{display:none}.documentation-container:hover > a > div > .documentation-image-light{display:none}.documentation-container:hover > a > div > .documentation-image-color-light{display:block}}@media (prefers-color-scheme: dark){.modules-image-dark{display:block}.modules-image-light{display:none}.modules-container:hover > a > .modules-image-color-dark{display:block}.modules-container:hover > a > .modules-image-dark{display:none}.examples-image-dark{display:block}.examples-image-light{display:none}.examples-container:hover > a > .examples-image-color-dark{display:block}.examples-container:hover > a > .examples-image-dark{display:none}.documentation-image-dark{display:block}.documentation-image-light{display:none}.documentation-container:hover > a > div >.documentation-image-color-dark{display:block}.documentation-container:hover > a > div > .documentation-image-dark{display:none}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.bg-white{--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgba(238,238,238,var(--tw-bg-opacity))}.bg-gradient-to-r{background-image:-o-linear-gradient(left,var(--tw-gradient-stops));background-image:-webkit-gradient(linear,left top,right top,from(var(--tw-gradient-stops)));background-image:linear-gradient(to right,var(--tw-gradient-stops))}.bg-gradient-to-l{background-image:-o-linear-gradient(right,var(--tw-gradient-stops));background-image:-webkit-gradient(linear,right top,left top,from(var(--tw-gradient-stops)));background-image:linear-gradient(to left,var(--tw-gradient-stops))}.from-green-400{--tw-gradient-from:rgba(55, 233, 144, var(--tw-from-opacity, 1));--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0))}.from-blue-400{--tw-gradient-from:rgba(56, 189, 248, var(--tw-from-opacity, 1));--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0))}.from-yellow-400{--tw-gradient-from:rgba(251, 191, 36, var(--tw-from-opacity, 1));--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0))}.to-transparent{--tw-gradient-to:transparent}.border-gray-200{--tw-border-opacity:1;border-color:rgba(224,224,224,var(--tw-border-opacity))}.hover\\\\:border-transparent:hover{border-color:transparent}.rounded-xl{border-radius:.75rem}.rounded{border-radius:.25rem}.border{border-width:1px}.border-t{border-top-width:1px}.flex{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.grid{display:-ms-grid;display:grid}.hidden{display:none}.flex-col{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.flex-col-reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;-webkit-flex-direction:column-reverse;flex-direction:column-reverse}.place-content-center{place-content:center}.items-center{-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.justify-end{-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end}.justify-center{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center}.flex-1{-webkit-box-flex:1;-ms-flex:1 1 0%;-webkit-flex:1 1 0%;flex:1 1 0%}.order-last{-webkit-box-ordinal-group:10000;-webkit-order:9999;-ms-flex-order:9999;order:9999}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-semibold{font-weight:600}.font-bold{font-weight:700}.h-32{height:8rem}.h-\\\\[70px\\\\]{height:70px}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-2{margin-bottom:.5rem}.max-w-\\\\[960px\\\\]{max-width:960px}.min-h-screen{min-height:100vh}.p-1{padding:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.py-14{padding-top:3.5rem;padding-bottom:3.5rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.pt-\\\\[58px\\\\]{padding-top:58px}.pb-6{padding-bottom:1.5rem}.absolute{position:absolute}.relative{position:relative}.inset-y-0{top:0;bottom:0}.inset-x-0{right:0;left:0}.left-0{left:0}.right-0{right:0}.-top-\\\\[58px\\\\]{top:-58px}.-top-3{top:-.75rem}.focus-visible\\\\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);-webkit-box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.text-center{text-align:center}.text-black{--tw-text-opacity:1;color:rgba(0,0,0,var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgba(66,66,66,var(--tw-text-opacity))}.hover\\\\:text-black:hover{--tw-text-opacity:1;color:rgba(0,0,0,var(--tw-text-opacity))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-full{width:100%}.w-\\\\[20\\\\%\\\\]{width:20%}.z-10{z-index:10}.z-1{z-index:1}.gap-6{grid-gap:1.5rem;gap:1.5rem}.gap-3{grid-gap:.75rem;gap:.75rem}.gap-x-4{-webkit-column-gap:1rem;-moz-column-gap:1rem;grid-column-gap:1rem;column-gap:1rem}.gap-y-16{-webkit-row-gap:4rem;-moz-row-gap:4rem;grid-row-gap:4rem;row-gap:4rem}.gap-y-4{-webkit-row-gap:1rem;-moz-row-gap:1rem;grid-row-gap:1rem;row-gap:1rem}.gap-y-2{-webkit-row-gap:.5rem;-moz-row-gap:.5rem;grid-row-gap:.5rem;row-gap:.5rem}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.col-span-2{-ms-grid-column-span:span 2 / span 2;grid-column:span 2 / span 2}.row-span-2{-ms-grid-row-span:span 2 / span 2;grid-row:span 2 / span 2}.transition-opacity{-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);-o-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-transition-duration:.15s;-o-transition-duration:.15s;transition-duration:.15s}.duration-300{-webkit-transition-duration:.3s;-o-transition-duration:.3s;transition-duration:.3s}@media (min-width: 640px){.sm\\\\:flex-row{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row}.sm\\\\:justify-between{-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between}.sm\\\\:h-34{height:8.5rem}.sm\\\\:text-base{font-size:1rem;line-height:1.5rem}.sm\\\\:text-5xl{font-size:3rem;line-height:1}.sm\\\\:min-h-\\\\[220px\\\\]{min-height:220px}.sm\\\\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\\\\:px-28{padding-left:7rem;padding-right:7rem}.sm\\\\:col-span-1{-ms-grid-column-span:span 1 / span 1;grid-column:span 1 / span 1}}@media (min-width: 768px){.md\\\\:min-h-\\\\[180px\\\\]{min-height:180px}}@media (min-width: 1024px){.lg\\\\:flex-col{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.lg\\\\:order-none{-webkit-box-ordinal-group:1;-webkit-order:0;-ms-flex-order:0;order:0}.lg\\\\:min-h-min{min-height:-webkit-min-content;min-height:-moz-min-content;min-height:min-content}.lg\\\\:py-7{padding-top:1.75rem;padding-bottom:1.75rem}.lg\\\\:px-8{padding-left:2rem;padding-right:2rem}.lg\\\\:grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.lg\\\\:col-span-10{-ms-grid-column-span:span 10 / span 10;grid-column:span 10 / span 10}.lg\\\\:col-span-6{-ms-grid-column-span:span 6 / span 6;grid-column:span 6 / span 6}.lg\\\\:col-span-4{-ms-grid-column-span:span 4 / span 4;grid-column:span 4 / span 4}}@media (prefers-color-scheme: dark){.dark\\\\:bg-black{--tw-bg-opacity:1;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.dark\\\\:bg-white\\\\/10{--tw-bg-opacity:.1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.dark\\\\:bg-gray-900{--tw-bg-opacity:1;background-color:rgba(24,24,27,var(--tw-bg-opacity))}.dark\\\\:border-transparent{border-color:transparent}.dark\\\\:border-gray-900{--tw-border-opacity:1;border-color:rgba(24,24,27,var(--tw-border-opacity))}.dark\\\\:border-none{border-style:none}.dark\\\\:block{display:block}.dark\\\\:hidden{display:none}.dark\\\\:text-white{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}.dark\\\\:text-gray-300{--tw-text-opacity:1;color:rgba(189,189,189,var(--tw-text-opacity))}.dark\\\\:hover\\\\:text-white:hover{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}} +"@media (prefers-color-scheme: light) { + .get-started-gradient-border { + background: linear-gradient(to right, #ffffff, #ffffff), + linear-gradient(to right, #00dc82, #1de0b1, #36e4da); + } + .gradient-border-modules { + background: linear-gradient( + var(--gradient-angle), + rgba(247, 209, 76), + rgba(247, 209, 76, 0.6), + rgba(255, 255, 255, 0.8), + rgba(247, 209, 76) + ); + } + .gradient-border-examples { + background: linear-gradient( + var(--gradient-angle), + rgba(141, 234, 255), + rgba(141, 234, 255, 0.6), + rgba(255, 255, 255, 0.8), + rgba(141, 234, 255) + ); + } + .gradient-border-documentation { + background: linear-gradient( + var(--gradient-angle), + rgba(0, 220, 130), + rgba(0, 220, 130, 0.6), + rgba(255, 255, 255, 0.8), + rgba(0, 220, 130) + ); + } +} +@media (prefers-color-scheme: dark) { + .get-started-gradient-border { + background: linear-gradient(to right, #18181b, #18181b), + linear-gradient(to right, #00dc82, #1de0b1, #36e4da); + } + .gradient-border-modules { + background: linear-gradient( + var(--gradient-angle), + rgba(247, 209, 76), + rgba(163, 129, 8), + rgba(255, 255, 255, 0.3), + rgba(163, 129, 8) + ); + } + .gradient-border-examples { + background: linear-gradient( + var(--gradient-angle), + rgba(141, 234, 255), + rgba(0, 138, 169), + rgba(255, 255, 255, 0.3), + rgba(0, 138, 169) + ); + } + .gradient-border-documentation { + background: linear-gradient( + var(--gradient-angle), + rgba(0, 220, 130), + rgba(0, 63, 37), + rgba(255, 255, 255, 0.2), + rgba(0, 63, 37) + ); + } +} +.get-started-gradient-border { + background-clip: padding-box, border-box; + background-origin: padding-box, border-box; + border-color: transparent; + border-radius: 12px; + border-width: 1px; +} +.get-started-gradient-border:hover + > :is(.get-started-gradient-left, .get-started-gradient-right) { + opacity: 0.2; +} +.get-started-gradient-left, +.get-started-gradient-right { + opacity: 0; +} +.gradient-border { + opacity: 0; + position: absolute; + top: 0; + left: 0; + width: calc(100% + 2px); + border-radius: 12px; + z-index: -1; + transform: translate(-1px, -1px); +} +.gradient-border-rect { + height: calc(100% + 2px); +} +@media (min-width: 1024px) { + .gradient-border-rect { + height: calc(100% + 1px); + } +} +.gradient-border-square { + height: calc(100% + 2px); +} +.modules-gradient-right { + opacity: 0; +} +.modules-container:hover > .gradient-border, +.examples-container:hover > .gradient-border, +.documentation-container:hover > .gradient-border { + opacity: 1; + animation: gradient-rotate 5s cubic-bezier(0, 0, 1, 1) 0s infinite reverse; + transition: all 0.3s linear; +} +.modules-container:hover > .modules-gradient-right { + opacity: 0.2; +} +.examples-container:hover > .examples-gradient-right { + opacity: 0.2; +} +.examples-gradient-right { + opacity: 0; +} +.documentation-image-color-light, +.documentation-image-color-dark { + display: none; +} +.modules-image-color-light, +.modules-image-color-dark { + display: none; +} +.examples-image-color-light, +.examples-image-color-dark { + display: none; +} +@media (prefers-color-scheme: light) { + .modules-image-light { + display: block; + } + .modules-image-dark { + display: none; + } + .modules-container:hover > a > .modules-image-light { + display: none; + } + .modules-container:hover > a > .modules-image-color-light { + display: block; + } + .examples-image-light { + display: block; + } + .examples-image-dark { + display: none; + } + .examples-container:hover > a > .examples-image-light { + display: none; + } + .examples-container:hover > a > .examples-image-color-light { + display: block; + } + .documentation-image-light { + display: block; + } + .documentation-image-dark { + display: none; + } + .documentation-container:hover > a > div > .documentation-image-light { + display: none; + } + .documentation-container:hover > a > div > .documentation-image-color-light { + display: block; + } +} +@media (prefers-color-scheme: dark) { + .modules-image-dark { + display: block; + } + .modules-image-light { + display: none; + } + .modules-container:hover > a > .modules-image-color-dark { + display: block; + } + .modules-container:hover > a > .modules-image-dark { + display: none; + } + .examples-image-dark { + display: block; + } + .examples-image-light { + display: none; + } + .examples-container:hover > a > .examples-image-color-dark { + display: block; + } + .examples-container:hover > a > .examples-image-dark { + display: none; + } + .documentation-image-dark { + display: block; + } + .documentation-image-light { + display: none; + } + .documentation-container:hover > a > div > .documentation-image-color-dark { + display: block; + } + .documentation-container:hover > a > div > .documentation-image-dark { + display: none; + } +} +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} +.absolute { + position: absolute; +} +.relative { + position: relative; +} +.inset-x-0 { + left: 0; + right: 0; +} +.inset-y-0 { + top: 0; + bottom: 0; +} +.-top-\\[58px\\] { + top: -58px; +} +.-top-3 { + top: -0.75rem; +} +.left-0 { + left: 0; +} +.right-0 { + right: 0; +} +.z-1 { + z-index: 1; +} +.z-10 { + z-index: 10; +} +.order-last { + order: 9999; +} +.grid { + display: grid; +} +.col-span-2 { + grid-column: span 2 / span 2; +} +.row-span-2 { + grid-row: span 2 / span 2; +} +.grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} +.mx-auto { + margin-left: auto; + margin-right: auto; +} +.mb-2 { + margin-bottom: 0.5rem; +} +.hidden { + display: none; +} +.h-\\[70px\\] { + height: 70px; +} +.h-32 { + height: 8rem; +} +.max-w-\\[960px\\] { + max-width: 960px; +} +.min-h-screen { + min-height: 100vh; +} +.w-\\[20\\%\\] { + width: 20%; +} +.w-full { + width: 100%; +} +.flex { + display: flex; +} +.flex-1 { + flex: 1 1 0%; +} +.flex-col { + flex-direction: column; +} +.flex-col-reverse { + flex-direction: column-reverse; +} +.place-content-center { + place-content: center; +} +.items-center { + align-items: center; +} +.justify-end { + justify-content: flex-end; +} +.justify-center { + justify-content: center; +} +.gap-3 { + gap: 0.75rem; +} +.gap-6 { + gap: 1.5rem; +} +.gap-x-4 { + column-gap: 1rem; +} +.gap-y-16 { + row-gap: 4rem; +} +.gap-y-2 { + row-gap: 0.5rem; +} +.gap-y-4 { + row-gap: 1rem; +} +.border { + border-width: 1px; +} +.border-t { + border-top-width: 1px; +} +.border-gray-200 { + --un-border-opacity: 1; + border-color: rgb(224 224 224 / var(--un-border-opacity)); +} +.hover\\:border-transparent:hover { + border-color: transparent; +} +.rounded { + border-radius: 0.25rem; +} +.rounded-xl { + border-radius: 0.75rem; +} +.bg-gray-100 { + --un-bg-opacity: 1; + background-color: rgb(238 238 238 / var(--un-bg-opacity)); +} +.bg-white { + --un-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--un-bg-opacity)); +} +.from-blue-400 { + --un-gradient-from-position: 0%; + --un-gradient-from: rgb(96 165 250 / var(--un-from-opacity, 1)) + var(--un-gradient-from-position); + --un-gradient-to-position: 100%; + --un-gradient-to: rgb(96 165 250 / 0) var(--un-gradient-to-position); + --un-gradient-stops: var(--un-gradient-from), var(--un-gradient-to); +} +.from-green-400 { + --un-gradient-from-position: 0%; + --un-gradient-from: rgb(55 233 144 / var(--un-from-opacity, 1)) + var(--un-gradient-from-position); + --un-gradient-to-position: 100%; + --un-gradient-to: rgb(55 233 144 / 0) var(--un-gradient-to-position); + --un-gradient-stops: var(--un-gradient-from), var(--un-gradient-to); +} +.from-yellow-400 { + --un-gradient-from-position: 0%; + --un-gradient-from: rgb(250 204 21 / var(--un-from-opacity, 1)) + var(--un-gradient-from-position); + --un-gradient-to-position: 100%; + --un-gradient-to: rgb(250 204 21 / 0) var(--un-gradient-to-position); + --un-gradient-stops: var(--un-gradient-from), var(--un-gradient-to); +} +.to-transparent { + --un-gradient-to-position: 100%; + --un-gradient-to: transparent var(--un-gradient-to-position); +} +.bg-gradient-to-l { + --un-gradient-shape: to left; + --un-gradient: var(--un-gradient-shape), var(--un-gradient-stops); + background-image: linear-gradient(var(--un-gradient)); +} +.bg-gradient-to-r { + --un-gradient-shape: to right; + --un-gradient: var(--un-gradient-shape), var(--un-gradient-stops); + background-image: linear-gradient(var(--un-gradient)); +} +.p-1 { + padding: 0.25rem; +} +.px-4 { + padding-left: 1rem; + padding-right: 1rem; +} +.px-5 { + padding-left: 1.25rem; + padding-right: 1.25rem; +} +.py-14 { + padding-top: 3.5rem; + padding-bottom: 3.5rem; +} +.py-6 { + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} +.pb-6 { + padding-bottom: 1.5rem; +} +.pt-\\[58px\\] { + padding-top: 58px; +} +.text-center { + text-align: center; +} +.text-2xl { + font-size: 1.5rem; + line-height: 2rem; +} +.text-4xl { + font-size: 2.25rem; + line-height: 2.5rem; +} +.text-sm { + font-size: 0.875rem; + line-height: 1.25rem; +} +.text-xl { + font-size: 1.25rem; + line-height: 1.75rem; +} +.text-black { + --un-text-opacity: 1; + color: rgb(0 0 0 / var(--un-text-opacity)); +} +.text-gray-700 { + --un-text-opacity: 1; + color: rgb(66 66 66 / var(--un-text-opacity)); +} +.hover\\:text-black:hover { + --un-text-opacity: 1; + color: rgb(0 0 0 / var(--un-text-opacity)); +} +.font-bold { + font-weight: 700; +} +.font-semibold { + font-weight: 600; +} +.font-mono { + font-family: + ui-monospace, + SFMono-Regular, + Menlo, + Monaco, + Consolas, + Liberation Mono, + Courier New, + monospace; +} +.antialiased { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.focus-visible\\:ring-2:focus-visible { + --un-ring-width: 2px; + --un-ring-offset-shadow: var(--un-ring-inset) 0 0 0 + var(--un-ring-offset-width) var(--un-ring-offset-color); + --un-ring-shadow: var(--un-ring-inset) 0 0 0 + calc(var(--un-ring-width) + var(--un-ring-offset-width)) + var(--un-ring-color); + box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), + var(--un-shadow); +} +.transition-opacity { + transition-property: opacity; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 0.15s; +} +.duration-300 { + transition-duration: 0.3s; +} +@media (prefers-color-scheme: dark) { + .dark\\:block { + display: block; + } + .dark\\:hidden { + display: none; + } + .dark\\:border-gray-900 { + --un-border-opacity: 1; + border-color: rgb(24 24 27 / var(--un-border-opacity)); + } + .dark\\:border-transparent { + border-color: transparent; + } + .dark\\:border-none { + border-style: none; + } + .dark\\:bg-black { + --un-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--un-bg-opacity)); + } + .dark\\:bg-gray-900 { + --un-bg-opacity: 1; + background-color: rgb(24 24 27 / var(--un-bg-opacity)); + } + .dark\\:bg-white\\/10 { + background-color: #ffffff1a; + } + .dark\\:text-gray-300 { + --un-text-opacity: 1; + color: rgb(189 189 189 / var(--un-text-opacity)); + } + .dark\\:text-white, + .dark\\:hover\\:text-white:hover { + --un-text-opacity: 1; + color: rgb(255 255 255 / var(--un-text-opacity)); + } +} +@media (min-width: 640px) { + .sm\\:col-span-1 { + grid-column: span 1 / span 1; + } + .sm\\:h-34 { + height: 8.5rem; + } + .sm\\:min-h-\\[220px\\] { + min-height: 220px; + } + .sm\\:flex-row { + flex-direction: row; + } + .sm\\:justify-between { + justify-content: space-between; + } + .sm\\:px-28 { + padding-left: 7rem; + padding-right: 7rem; + } + .sm\\:px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; + } + .sm\\:text-5xl { + font-size: 3rem; + line-height: 1; + } + .sm\\:text-base { + font-size: 1rem; + line-height: 1.5rem; + } +} +@media (min-width: 768px) { + .md\\:min-h-\\[180px\\] { + min-height: 180px; + } +} +@media (min-width: 1024px) { + .lg\\:order-none { + order: 0; + } + .lg\\:col-span-10 { + grid-column: span 10 / span 10; + } + .lg\\:col-span-4 { + grid-column: span 4 / span 4; + } + .lg\\:col-span-6 { + grid-column: span 6 / span 6; + } + .lg\\:grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + .lg\\:min-h-min { + min-height: min-content; + } + .lg\\:flex-col { + flex-direction: column; + } + .lg\\:px-8 { + padding-left: 2rem; + padding-right: 2rem; + } + .lg\\:py-7 { + padding-top: 1.75rem; + padding-bottom: 1.75rem; + } +} " `; -exports[`template > correctly outputs style blocks for welcome.vue 2`] = `"@property --gradient-angle{syntax:'';inherits:false;initial-value:180deg}@keyframes gradient-rotate{0%{--gradient-angle:0deg}100%{--gradient-angle:360deg}}*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(14, 165, 233, .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}a{color:inherit;text-decoration:inherit}body{margin:0;font-family:inherit;line-height:inherit}html{-webkit-text-size-adjust:100%;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\\";line-height:1.5}h1,p,h2,h3{margin:0}h1,h2,h3{font-size:inherit;font-weight:inherit}img{border-style:solid;max-width:100%;height:auto}svg,img{display:block;vertical-align:middle}ul{list-style:none;margin:0;padding:0}"`; +exports[`template > correctly outputs style blocks for welcome.vue 2`] = ` +"@property --gradient-angle { + syntax: ""; + inherits: false; + initial-value: 180deg; +} +@keyframes gradient-rotate { + 0% { + --gradient-angle: 0deg; + } + 100% { + --gradient-angle: 360deg; + } +} +*, +:before, +:after { + box-sizing: border-box; + border-width: 0; + border-style: solid; + border-color: var(--un-default-border-color, #e5e7eb); +} +:before, +:after { + --un-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, + sans-serif, + "Apple Color Emoji", + "Segoe UI Emoji", + Segoe UI Symbol, + "Noto Color Emoji"; + font-feature-settings: normal; + font-variation-settings: normal; + -webkit-tap-highlight-color: transparent; +} +body { + margin: 0; + line-height: inherit; +} +h1, +h2, +h3 { + font-size: inherit; + font-weight: inherit; +} +a { + color: inherit; + text-decoration: inherit; +} +h1, +h2, +h3, +p { + margin: 0; +} +ul { + list-style: none; + margin: 0; + padding: 0; +} +img, +svg { + display: block; + vertical-align: middle; +} +img { + max-width: 100%; + height: auto; +} +*, +:before, +:after { + --un-rotate: 0; + --un-rotate-x: 0; + --un-rotate-y: 0; + --un-rotate-z: 0; + --un-scale-x: 1; + --un-scale-y: 1; + --un-scale-z: 1; + --un-skew-x: 0; + --un-skew-y: 0; + --un-translate-x: 0; + --un-translate-y: 0; + --un-translate-z: 0; + --un-pan-x: ; + --un-pan-y: ; + --un-pinch-zoom: ; + --un-scroll-snap-strictness: proximity; + --un-ordinal: ; + --un-slashed-zero: ; + --un-numeric-figure: ; + --un-numeric-spacing: ; + --un-numeric-fraction: ; + --un-border-spacing-x: 0; + --un-border-spacing-y: 0; + --un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0); + --un-ring-shadow: 0 0 rgb(0 0 0 / 0); + --un-shadow-inset: ; + --un-shadow: 0 0 rgb(0 0 0 / 0); + --un-ring-inset: ; + --un-ring-offset-width: 0px; + --un-ring-offset-color: #fff; + --un-ring-width: 0px; + --un-ring-color: rgb(147 197 253 / 0.5); + --un-blur: ; + --un-brightness: ; + --un-contrast: ; + --un-drop-shadow: ; + --un-grayscale: ; + --un-hue-rotate: ; + --un-invert: ; + --un-saturate: ; + --un-sepia: ; + --un-backdrop-blur: ; + --un-backdrop-brightness: ; + --un-backdrop-contrast: ; + --un-backdrop-grayscale: ; + --un-backdrop-hue-rotate: ; + --un-backdrop-invert: ; + --un-backdrop-opacity: ; + --un-backdrop-saturate: ; + --un-backdrop-sepia: ; +} +" +`; diff --git a/packages/ui-templates/test/snapshots.spec.ts b/packages/ui-templates/test/snapshots.spec.ts index 27d010ce84..bb17752553 100644 --- a/packages/ui-templates/test/snapshots.spec.ts +++ b/packages/ui-templates/test/snapshots.spec.ts @@ -2,6 +2,7 @@ import fsp from 'node:fs/promises' import { fileURLToPath } from 'node:url' import { beforeAll, describe, it, expect } from 'vitest' import { execaCommand } from 'execa' +import { format } from 'prettier' const distDir = fileURLToPath(new URL('../dist/templates', import.meta.url)) @@ -12,13 +13,19 @@ describe('template', () => { }) }) + function formatCss (css: string) { + return format(css, { + parser: 'css' + }) + } + it.each(['error-404.vue', 'error-500.vue', 'error-dev.vue', 'loading.vue', 'welcome.vue'])('correctly outputs style blocks for %s', async (file) => { const contents = await fsp.readFile(`${distDir}/${file}`, 'utf-8') const scopedStyle = contents.match(/