@@ -8,20 +8,7 @@ describe('Setup Tailwind generator', () => {
88 const options : SetupTailwindGeneratorSchema = { } ;
99 const tree = createTreeWithEmptyWorkspace ( ) ;
1010
11- tree . write (
12- 'src/global.css' ,
13- `@tailwind components;
14- @tailwind base;
15- @tailwind utilities;
16-
17- html {
18- height: 100%;
19- min-height: 100%;
20- scroll-behavior: smooth;
21- background-color: var(--color-bg) !important;
22- color: var(--color-text) !important;
23- }` ,
24- ) ;
11+ tree . write ( 'src/global.css' , '' ) ;
2512
2613 return {
2714 tree,
@@ -41,11 +28,7 @@ html {
4128 const updatedGlobalCssContent = tree . read ( 'src/global.css' , 'utf-8' ) ;
4229
4330 expect ( updatedGlobalCssContent ) . toMatchInlineSnapshot ( `
44- "
45- @tailwind components;
46- @tailwind base;
47- @tailwind utilities;
48- @layer qwik-ui, popover-polyfill, theme, base, components, utilities;
31+ "@layer qwik-ui, popover-polyfill, theme, base, components, utilities;
4932 @import 'tailwindcss';
5033 @import 'tw-animate-css';
5134
@@ -79,9 +62,12 @@ html {
7962 --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
8063 --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
8164 --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
82- --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
83- --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
84- --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
65+ --shadow-md:
66+ 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
67+ --shadow-lg:
68+ 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
69+ --shadow-xl:
70+ 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
8571 --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
8672 --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
8773 --transform-press: scale(0.95);
@@ -113,78 +99,80 @@ html {
11399 --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
114100 --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
115101 --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
116- --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
117- --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
118- --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
102+ --shadow-md:
103+ 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
104+ --shadow-lg:
105+ 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
106+ --shadow-xl:
107+ 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
119108 --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
120109 --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
121110 --transform-press: scale(0.95);
122111 }
123112 }
124113
125- @theme inline {
126- --color-background: var(--background);
127- --color-foreground: var(--foreground);
128- --color-card: var(--card);
129- --color-card-foreground: var(--card-foreground);
130- --color-popover: var(--popover);
131- --color-popover-foreground: var(--popover-foreground);
132- --color-primary: var(--primary);
133- --color-primary-foreground: var(--primary-foreground);
134- --color-secondary: var(--secondary);
135- --color-secondary-foreground: var(--secondary-foreground);
136- --color-muted: var(--muted);
137- --color-muted-foreground: var(--muted-foreground);
138- --color-accent: var(--accent);
139- --color-accent-foreground: var(--accent-foreground);
140- --color-alert: var(--alert);
141- --color-alert-foreground: var(--alert-foreground);
142- --color-border: var(--border);
143- --color-input: var(--input);
144- --color-ring: var(--ring);
145- --radius-xs: var(--border-radius);
146- --radius-sm: calc(var(--border-radius) + 0.125rem);
147- --radius-md: calc(var(--border-radius) + 0.375rem);
148- --radius-lg: calc(var(--border-radius) + 0.5rem);
149- --radius-xl: calc(var(--border-radius) + 0.75rem);
150- --radius-2xl: calc(var(--border-radius) + 1rem);
151- --radius-3xl: calc(var(--border-radius) + 1.5rem);
152- --shadow-base: var(--shadow-base);
153- --shadow-2xs: var(--shadow-2xs);
154- --shadow-xs: var(--shadow-xs);
155- --shadow-sm: var(--shadow-sm);
156- --shadow-md: var(--shadow-md);
157- --shadow-lg: var(--shadow-lg);
158- --shadow-xl: var(--shadow-xl);
159- --shadow-2xl: var(--shadow-2xl);
160- --shadow-inner: var(--shadow-inner);
161- --default-border-width: calc(var(--border-width) + 1px);
162- --border-width-base: var(--border-width);
163- --border-width-2: calc(var(--border-width) + 2px);
164- --border-width-4: calc(var(--border-width) + 4px);
165- --border-width-8: calc(var(--border-width) + 8px);
166- --stroke-width-0: 0px;
167- --stroke-width-base: var(--stroke-width);
168- --stroke-width-1: calc(var(--stroke-width) + 1px);
169- --stroke-width-2: calc(var(--stroke-width) + 2px);
170- --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
171- --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
114+ @theme inline {
115+ --color-background: var(--background);
116+ --color-foreground: var(--foreground);
117+ --color-card: var(--card);
118+ --color-card-foreground: var(--card-foreground);
119+ --color-popover: var(--popover);
120+ --color-popover-foreground: var(--popover-foreground);
121+ --color-primary: var(--primary);
122+ --color-primary-foreground: var(--primary-foreground);
123+ --color-secondary: var(--secondary);
124+ --color-secondary-foreground: var(--secondary-foreground);
125+ --color-muted: var(--muted);
126+ --color-muted-foreground: var(--muted-foreground);
127+ --color-accent: var(--accent);
128+ --color-accent-foreground: var(--accent-foreground);
129+ --color-alert: var(--alert);
130+ --color-alert-foreground: var(--alert-foreground);
131+ --color-border: var(--border);
132+ --color-input: var(--input);
133+ --color-ring: var(--ring);
134+ --radius-xs: var(--border-radius);
135+ --radius-sm: calc(var(--border-radius) + 0.125rem);
136+ --radius-md: calc(var(--border-radius) + 0.375rem);
137+ --radius-lg: calc(var(--border-radius) + 0.5rem);
138+ --radius-xl: calc(var(--border-radius) + 0.75rem);
139+ --radius-2xl: calc(var(--border-radius) + 1rem);
140+ --radius-3xl: calc(var(--border-radius) + 1.5rem);
141+ --shadow-base: var(--shadow-base);
142+ --shadow-2xs: var(--shadow-2xs);
143+ --shadow-xs: var(--shadow-xs);
144+ --shadow-sm: var(--shadow-sm);
145+ --shadow-md: var(--shadow-md);
146+ --shadow-lg: var(--shadow-lg);
147+ --shadow-xl: var(--shadow-xl);
148+ --shadow-2xl: var(--shadow-2xl);
149+ --shadow-inner: var(--shadow-inner);
150+ --default-border-width: calc(var(--border-width) + 1px);
151+ --border-width-base: var(--border-width);
152+ --border-width-2: calc(var(--border-width) + 2px);
153+ --border-width-4: calc(var(--border-width) + 4px);
154+ --border-width-8: calc(var(--border-width) + 8px);
155+ --stroke-width-0: 0px;
156+ --stroke-width-base: var(--stroke-width);
157+ --stroke-width-1: calc(var(--stroke-width) + 1px);
158+ --stroke-width-2: calc(var(--stroke-width) + 2px);
159+ --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
160+ --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
172161
173- @keyframes collapsible-down {
174- from {
175- height: 0;
176- }
177- to {
178- height: var(--qwikui-collapsible-content-height);
179- }
162+ @keyframes collapsible-down {
163+ from {
164+ height: 0;
165+ }
166+ to {
167+ height: var(--qwikui-collapsible-content-height);
168+ }
169+ }
170+ @keyframes collapsible-up {
171+ from {
172+ height: var(--qwikui-collapsible-content-height);
180173 }
181- @keyframes collapsible-up {
182- from {
183- height: var(--qwikui-collapsible-content-height);
184- }
185- to {
186- height: 0;
187- }
174+ to {
175+ height: 0;
188176 }
189177 }
190178 }
@@ -222,16 +210,7 @@ html {
222210 @apply bg-background text-foreground;
223211 }
224212 }
225-
226-
227- html {
228- height: 100%;
229- min-height: 100%;
230- scroll-behavior: smooth;
231- background-color: var(--color-bg) !important;
232- color: var(--color-text) !important;
233- }
234- "
213+ "
235214 ` ) ;
236215 } ) ;
237216 test ( `
@@ -249,11 +228,7 @@ html {
249228 const updatedGlobalCssContent = tree . read ( 'src/global.css' , 'utf-8' ) ;
250229
251230 expect ( updatedGlobalCssContent ) . toMatchInlineSnapshot ( `
252- "
253- @tailwind components;
254- @tailwind base;
255- @tailwind utilities;
256- @layer qwik-ui, popover-polyfill, theme, base, components, utilities;
231+ "@layer qwik-ui, popover-polyfill, theme, base, components, utilities;
257232 @import 'tailwindcss';
258233 @import 'tw-animate-css';
259234
@@ -330,69 +305,68 @@ html {
330305 }
331306 }
332307
333- @theme inline {
334- --color-background: var(--background);
335- --color-foreground: var(--foreground);
336- --color-card: var(--card);
337- --color-card-foreground: var(--card-foreground);
338- --color-popover: var(--popover);
339- --color-popover-foreground: var(--popover-foreground);
340- --color-primary: var(--primary);
341- --color-primary-foreground: var(--primary-foreground);
342- --color-secondary: var(--secondary);
343- --color-secondary-foreground: var(--secondary-foreground);
344- --color-muted: var(--muted);
345- --color-muted-foreground: var(--muted-foreground);
346- --color-accent: var(--accent);
347- --color-accent-foreground: var(--accent-foreground);
348- --color-alert: var(--alert);
349- --color-alert-foreground: var(--alert-foreground);
350- --color-border: var(--border);
351- --color-input: var(--input);
352- --color-ring: var(--ring);
353- --radius-xs: var(--border-radius);
354- --radius-sm: calc(var(--border-radius) + 0.125rem);
355- --radius-md: calc(var(--border-radius) + 0.375rem);
356- --radius-lg: calc(var(--border-radius) + 0.5rem);
357- --radius-xl: calc(var(--border-radius) + 0.75rem);
358- --radius-2xl: calc(var(--border-radius) + 1rem);
359- --radius-3xl: calc(var(--border-radius) + 1.5rem);
360- --shadow-base: var(--shadow-base);
361- --shadow-2xs: var(--shadow-2xs);
362- --shadow-xs: var(--shadow-xs);
363- --shadow-sm: var(--shadow-sm);
364- --shadow-md: var(--shadow-md);
365- --shadow-lg: var(--shadow-lg);
366- --shadow-xl: var(--shadow-xl);
367- --shadow-2xl: var(--shadow-2xl);
368- --shadow-inner: var(--shadow-inner);
369- --default-border-width: calc(var(--border-width) + 1px);
370- --border-width-base: var(--border-width);
371- --border-width-2: calc(var(--border-width) + 2px);
372- --border-width-4: calc(var(--border-width) + 4px);
373- --border-width-8: calc(var(--border-width) + 8px);
374- --stroke-width-0: 0px;
375- --stroke-width-base: var(--stroke-width);
376- --stroke-width-1: calc(var(--stroke-width) + 1px);
377- --stroke-width-2: calc(var(--stroke-width) + 2px);
378- --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
379- --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
308+ @theme inline {
309+ --color-background: var(--background);
310+ --color-foreground: var(--foreground);
311+ --color-card: var(--card);
312+ --color-card-foreground: var(--card-foreground);
313+ --color-popover: var(--popover);
314+ --color-popover-foreground: var(--popover-foreground);
315+ --color-primary: var(--primary);
316+ --color-primary-foreground: var(--primary-foreground);
317+ --color-secondary: var(--secondary);
318+ --color-secondary-foreground: var(--secondary-foreground);
319+ --color-muted: var(--muted);
320+ --color-muted-foreground: var(--muted-foreground);
321+ --color-accent: var(--accent);
322+ --color-accent-foreground: var(--accent-foreground);
323+ --color-alert: var(--alert);
324+ --color-alert-foreground: var(--alert-foreground);
325+ --color-border: var(--border);
326+ --color-input: var(--input);
327+ --color-ring: var(--ring);
328+ --radius-xs: var(--border-radius);
329+ --radius-sm: calc(var(--border-radius) + 0.125rem);
330+ --radius-md: calc(var(--border-radius) + 0.375rem);
331+ --radius-lg: calc(var(--border-radius) + 0.5rem);
332+ --radius-xl: calc(var(--border-radius) + 0.75rem);
333+ --radius-2xl: calc(var(--border-radius) + 1rem);
334+ --radius-3xl: calc(var(--border-radius) + 1.5rem);
335+ --shadow-base: var(--shadow-base);
336+ --shadow-2xs: var(--shadow-2xs);
337+ --shadow-xs: var(--shadow-xs);
338+ --shadow-sm: var(--shadow-sm);
339+ --shadow-md: var(--shadow-md);
340+ --shadow-lg: var(--shadow-lg);
341+ --shadow-xl: var(--shadow-xl);
342+ --shadow-2xl: var(--shadow-2xl);
343+ --shadow-inner: var(--shadow-inner);
344+ --default-border-width: calc(var(--border-width) + 1px);
345+ --border-width-base: var(--border-width);
346+ --border-width-2: calc(var(--border-width) + 2px);
347+ --border-width-4: calc(var(--border-width) + 4px);
348+ --border-width-8: calc(var(--border-width) + 8px);
349+ --stroke-width-0: 0px;
350+ --stroke-width-base: var(--stroke-width);
351+ --stroke-width-1: calc(var(--stroke-width) + 1px);
352+ --stroke-width-2: calc(var(--stroke-width) + 2px);
353+ --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
354+ --animate-accordion-up: collapsible-up 0.2s ease-out forwards;
380355
381- @keyframes collapsible-down {
382- from {
383- height: 0;
384- }
385- to {
386- height: var(--qwikui-collapsible-content-height);
387- }
356+ @keyframes collapsible-down {
357+ from {
358+ height: 0;
359+ }
360+ to {
361+ height: var(--qwikui-collapsible-content-height);
362+ }
363+ }
364+ @keyframes collapsible-up {
365+ from {
366+ height: var(--qwikui-collapsible-content-height);
388367 }
389- @keyframes collapsible-up {
390- from {
391- height: var(--qwikui-collapsible-content-height);
392- }
393- to {
394- height: 0;
395- }
368+ to {
369+ height: 0;
396370 }
397371 }
398372 }
@@ -430,16 +404,7 @@ html {
430404 @apply bg-background text-foreground;
431405 }
432406 }
433-
434-
435- html {
436- height: 100%;
437- min-height: 100%;
438- scroll-behavior: smooth;
439- background-color: var(--color-bg) !important;
440- color: var(--color-text) !important;
441- }
442- "
407+ "
443408 ` ) ;
444409 } ) ;
445410} ) ;
0 commit comments