From bc80d84d4f4ff0a8e587c060071946b2477a6644 Mon Sep 17 00:00:00 2001 From: Dmitriy Stepanenko Date: Fri, 15 Nov 2024 23:14:03 +0200 Subject: [PATCH] chore: add build and test scripts for the qwik-ci --- package.json | 4 +- .../__snapshots__/init-generator.spec.ts.snap | 6 + .../generators/init/init-generator.spec.ts | 5 +- .../setup-tailwind-generator.spec.ts.snap | 540 ++++++++++++++++++ .../setup-tailwind-generator.spec.ts | 527 +---------------- 5 files changed, 555 insertions(+), 527 deletions(-) create mode 100644 packages/cli/src/generators/init/__snapshots__/init-generator.spec.ts.snap create mode 100644 packages/cli/src/generators/setup-tailwind/__snapshots__/setup-tailwind-generator.spec.ts.snap diff --git a/package.json b/package.json index 57c012138..79f3ef758 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,9 @@ "test.pw.headless-chrome-108": "nx e2e-chrome-108 headless", "test.pw.headless.ci": "nx e2e headless", "test.headless.ci": "nx component-test-ci headless", - "test.utils": "nx test utils" + "test.utils": "nx test utils", + "test.qwik-ci": "nx run-many --target=test", + "build.qwik-ci": "nx run-many --target=build -p packages/*" }, "simple-git-hooks": { "pre-commit": "pnpm format.staged && pnpm lint" diff --git a/packages/cli/src/generators/init/__snapshots__/init-generator.spec.ts.snap b/packages/cli/src/generators/init/__snapshots__/init-generator.spec.ts.snap new file mode 100644 index 000000000..0e289ba8d --- /dev/null +++ b/packages/cli/src/generators/init/__snapshots__/init-generator.spec.ts.snap @@ -0,0 +1,6 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`init generator + GIVEN empty options and tree + WHEN initGenerator is run + THEN it should create a config file with the default values 1`] = `"{"componentsRoot":"src/components/ui"}"`; diff --git a/packages/cli/src/generators/init/init-generator.spec.ts b/packages/cli/src/generators/init/init-generator.spec.ts index b319aaa46..4b2d5a742 100644 --- a/packages/cli/src/generators/init/init-generator.spec.ts +++ b/packages/cli/src/generators/init/init-generator.spec.ts @@ -23,10 +23,7 @@ describe('init generator', () => { const expectedContents = tree.read(QWIK_UI_CONFIG_FILENAME, 'utf-8'); - expect(expectedContents).toMatchInlineSnapshot(` - "{ "componentsRoot": "src/components/ui" } - " - `); + expect(expectedContents).toMatchSnapshot(); }); test(` diff --git a/packages/cli/src/generators/setup-tailwind/__snapshots__/setup-tailwind-generator.spec.ts.snap b/packages/cli/src/generators/setup-tailwind/__snapshots__/setup-tailwind-generator.spec.ts.snap new file mode 100644 index 000000000..31747409c --- /dev/null +++ b/packages/cli/src/generators/setup-tailwind/__snapshots__/setup-tailwind-generator.spec.ts.snap @@ -0,0 +1,540 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Setup Tailwind generator + GIVEN no options are passed + THEN it should generate "simple" style with primary color "cyan-600", base color "slate" and border-radius 0 1`] = ` +" + @tailwind components; +@tailwind base; +@tailwind utilities; + @layer base { + :root { + --background: 0 0% 100%; + --foreground: 222.2 47.4% 11.2%; + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + --popover: 0 0% 100%; + --popover-foreground: 222.2 47.4% 11.2%; + --card: 0 0% 100%; + --card-foreground: 222.2 47.4% 11.2%; + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --primary: 191.6 91.4% 36.5%; + --primary-foreground: 0 0% 100%; + --secondary: 222.2 47.4% 11.2%; + --secondary-foreground: 0 0% 100%; + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + --alert: 0 84.2% 60.2%; + --alert-foreground: 210 40% 98%; + --ring: 222.2 47.4% 11.2%; + --border-width: 0px; + --border-radius: 0; + --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01); + --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); + --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1); + --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01); + --transform-press: scale(0.95); + } + .dark { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --primary: 191.6 91.4% 36.5%; + --primary-foreground: 0 0% 100%; + --secondary: 210 40% 96.1%; + --secondary-foreground: 0 0% 0%; + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + --alert: 0 84.2% 60.2%; + --alert-foreground: 210 40% 98%; + --ring: 212.7 26.8% 83.9; + --border-width: 0px; + --border-radius: 0; + --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01); + --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); + --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1); + --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01); + --transform-press: scale(0.95); + } +} + + +html { + height: 100%; + min-height: 100%; + scroll-behavior: smooth; + background-color: var(--color-bg) !important; + color: var(--color-text) !important; +} + " +`; + +exports[`Setup Tailwind generator + GIVEN style is "brutalist" and primary color is "red-600" and border-radius is 1 + THEN it should generate the correct theme 1`] = ` +" + @tailwind components; +@tailwind base; +@tailwind utilities; + @layer base { + :root { + --background: 0 0% 100%; + --foreground: 222.2 47.4% 11.2%; + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + --popover: 0 0% 100%; + --popover-foreground: 222.2 47.4% 11.2%; + --card: 0 0% 100%; + --card-foreground: 222.2 47.4% 11.2%; + --border: 0 0% 0%; + --input: 0 0% 0%; + --primary: 0 72.2% 50.6%; + --primary-foreground: 0 0% 100%; + --secondary: 222.2 47.4% 11.2%; + --secondary-foreground: 0 0% 100%; + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + --alert: 0 84.2% 60.2%; + --alert-foreground: 210 40% 98%; + --ring: 0 0% 0%; + --border-width: 2px; + --border-radius: 1rem; + --shadow-base: 0px 0px 0px 0 rgba(0, 0, 0, 1); + --shadow-sm: 4px 4px 0px 0 rgba(0, 0, 0, 1); + --shadow: 5px 5px 0px 0px rgba(0, 0, 0, 1); + --shadow-md: 6px 6px 0px 0px rgba(0, 0, 0, 1); + --shadow-lg: 8px 8px 0px 0px rgba(0, 0, 0, 1); + --shadow-xl: 11px 11px 0px 0px rgba(0, 0, 0, 1); + --shadow-2xl: 13px 13px 0px 0px rgba(0, 0, 0, 1); + --shadow-inner: inset 2px 2px 0px 0px rgba(0, 0, 0, 0); + --transform-press: translate(4px, 4px); + } + .dark { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + --border: 0 0% 0%; + --input: 0 0% 0%; + --primary: 0 72.2% 50.6%; + --primary-foreground: 0 0% 100%; + --secondary: 210 40% 96.1%; + --secondary-foreground: 0 0% 0%; + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + --alert: 0 84.2% 60.2%; + --alert-foreground: 210 40% 98%; + --ring: 0 0% 0%; + --border-width: 2px; + --border-radius: 1rem; + --shadow-base: 0px 0px 0px 0 rgba(0, 0, 0, 1); + --shadow-sm: 4px 4px 0px 0 rgba(0, 0, 0, 1); + --shadow: 5px 5px 0px 0px rgba(0, 0, 0, 1); + --shadow-md: 6px 6px 0px 0px rgba(0, 0, 0, 1); + --shadow-lg: 8px 8px 0px 0px rgba(0, 0, 0, 1); + --shadow-xl: 11px 11px 0px 0px rgba(0, 0, 0, 1); + --shadow-2xl: 13px 13px 0px 0px rgba(0, 0, 0, 1); + --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01); + --transform-press: translate(4px, 4px); + } +} + + +html { + height: 100%; + min-height: 100%; + scroll-behavior: smooth; + background-color: var(--color-bg) !important; + color: var(--color-text) !important; +} + " +`; + +exports[`Setup Tailwind generator + GIVEN global.css and tailwind config exist in commonjs format + THEN it should generate the proper tailwind config values 1`] = ` +"const plugin = require('tailwindcss/plugin'); + +const { join } = require('path'); + +/** @type {import('tailwindcss').Config} */ +module.exports = {plugins: [ +require('tailwindcss-animate'), + plugin(function ({ addUtilities }) { + addUtilities({ + '.press': { + transform: 'var(--transform-press)', + }, + }); + }), + ], + + +content: [ + join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}'), +], +darkMode: 'class', +theme: { + screens: { + sm: '640px', + md: '768px', + lg: '1024px', + xl: '1280px', + '2xl': '1536px', + }, + important: true, + extend: {colors: { + border: 'hsl(var(--border))', + input: 'hsl(var(--input))', + ring: 'hsl(var(--ring))', + background: 'hsl(var(--background))', + foreground: 'hsl(var(--foreground))', + primary: { + DEFAULT: 'hsl(var(--primary))', + foreground: 'hsl(var(--primary-foreground))', + }, + secondary: { + DEFAULT: 'hsl(var(--secondary))', + foreground: 'hsl(var(--secondary-foreground))', + }, + alert: { + DEFAULT: 'hsl(var(--alert))', + foreground: 'hsl(var(--alert-foreground))', + }, + muted: { + DEFAULT: 'hsl(var(--muted))', + foreground: 'hsl(var(--muted-foreground))', + }, + accent: { + DEFAULT: 'hsl(var(--accent))', + foreground: 'hsl(var(--accent-foreground))', + }, + card: { + DEFAULT: 'hsl(var(--card))', + foreground: 'hsl(var(--card-foreground))', + }, + popover: { + DEFAULT: 'hsl(var(--popover))', + foreground: 'hsl(var(--popover-foreground))', + }, + }, + borderRadius: { + base: 'var(--border-radius)', + sm: 'calc(var(--border-radius) + 0.125rem)', + DEFAULT: 'calc(var(--border-radius) + 0.25rem)', + md: 'calc(var(--border-radius) + 0.375rem)', + lg: 'calc(var(--border-radius) + 0.5rem)', + xl: 'calc(var(--border-radius) + 0.75rem)', + '2xl': 'calc(var(--border-radius) + 1rem)', + '3xl': 'calc(var(--border-radius) + 1.5rem)', + }, + borderWidth: { + base: 'var(--border-width)', + DEFAULT: 'calc(var(--border-width) + 1px)', + 2: 'calc(var(--border-width) + 2px)', + 4: 'calc(var(--border-width) + 4px)', + 8: 'calc(var(--border-width) + 8px)', + }, + boxShadow: { + base: 'var(--shadow-base)', + sm: 'var(--shadow-sm)', + DEFAULT: 'var(--shadow)', + md: 'var(--shadow-md)', + lg: 'var(--shadow-lg)', + xl: 'var(--shadow-xl)', + '2xl': 'var(--shadow-2xl)', + inner: 'var(--shadow-inner)', + }, + strokeWidth: { + 0: '0', + base: 'var(--stroke-width)', + 1: 'calc(var(--stroke-width) + 1px)', + 2: 'calc(var(--stroke-width) + 2px)', + }, + animation: { + 'accordion-up': 'collapsible-up 0.2s ease-out 0s 1 normal forwards', + 'accordion-down': 'collapsible-down 0.2s ease-out 0s 1 normal forwards', + }, + keyframes: { + 'collapsible-down': { + from: { height: '0' }, + to: { height: 'var(--qwikui-collapsible-content-height)' }, + }, + 'collapsible-up': { + from: { height: 'var(--qwikui-collapsible-content-height)' }, + to: { height: '0' }, + }, + }, + fontFamily: { + sans: ['Inter Variable', 'sans-serif'], + }, + }, +}, + +}; + " +`; + +exports[`Setup Tailwind generator + GIVEN tailwind config exist in esm format + WHEN running the generator + THEN it should generate the proper tailwind config values 1`] = ` +"import plugin from 'tailwindcss/plugin'; + +/** @type {import('tailwindcss').Config} */ +export default {plugins: [ +require('tailwindcss-animate'), + plugin(function ({ addUtilities }) { + addUtilities({ + '.press': { + transform: 'var(--transform-press)', + }, + }); + }), + ], + + +content: [ + join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}'), +], +darkMode: 'class', +theme: { + screens: { + sm: '640px', + md: '768px', + lg: '1024px', + xl: '1280px', + '2xl': '1536px', + }, + important: true, + extend: {colors: { + border: 'hsl(var(--border))', + input: 'hsl(var(--input))', + ring: 'hsl(var(--ring))', + background: 'hsl(var(--background))', + foreground: 'hsl(var(--foreground))', + primary: { + DEFAULT: 'hsl(var(--primary))', + foreground: 'hsl(var(--primary-foreground))', + }, + secondary: { + DEFAULT: 'hsl(var(--secondary))', + foreground: 'hsl(var(--secondary-foreground))', + }, + alert: { + DEFAULT: 'hsl(var(--alert))', + foreground: 'hsl(var(--alert-foreground))', + }, + muted: { + DEFAULT: 'hsl(var(--muted))', + foreground: 'hsl(var(--muted-foreground))', + }, + accent: { + DEFAULT: 'hsl(var(--accent))', + foreground: 'hsl(var(--accent-foreground))', + }, + card: { + DEFAULT: 'hsl(var(--card))', + foreground: 'hsl(var(--card-foreground))', + }, + popover: { + DEFAULT: 'hsl(var(--popover))', + foreground: 'hsl(var(--popover-foreground))', + }, + }, + borderRadius: { + base: 'var(--border-radius)', + sm: 'calc(var(--border-radius) + 0.125rem)', + DEFAULT: 'calc(var(--border-radius) + 0.25rem)', + md: 'calc(var(--border-radius) + 0.375rem)', + lg: 'calc(var(--border-radius) + 0.5rem)', + xl: 'calc(var(--border-radius) + 0.75rem)', + '2xl': 'calc(var(--border-radius) + 1rem)', + '3xl': 'calc(var(--border-radius) + 1.5rem)', + }, + borderWidth: { + base: 'var(--border-width)', + DEFAULT: 'calc(var(--border-width) + 1px)', + 2: 'calc(var(--border-width) + 2px)', + 4: 'calc(var(--border-width) + 4px)', + 8: 'calc(var(--border-width) + 8px)', + }, + boxShadow: { + base: 'var(--shadow-base)', + sm: 'var(--shadow-sm)', + DEFAULT: 'var(--shadow)', + md: 'var(--shadow-md)', + lg: 'var(--shadow-lg)', + xl: 'var(--shadow-xl)', + '2xl': 'var(--shadow-2xl)', + inner: 'var(--shadow-inner)', + }, + strokeWidth: { + 0: '0', + base: 'var(--stroke-width)', + 1: 'calc(var(--stroke-width) + 1px)', + 2: 'calc(var(--stroke-width) + 2px)', + }, + animation: { + 'accordion-up': 'collapsible-up 0.2s ease-out 0s 1 normal forwards', + 'accordion-down': 'collapsible-down 0.2s ease-out 0s 1 normal forwards', + }, + keyframes: { + 'collapsible-down': { + from: { height: '0' }, + to: { height: 'var(--qwikui-collapsible-content-height)' }, + }, + 'collapsible-up': { + from: { height: 'var(--qwikui-collapsible-content-height)' }, + to: { height: '0' }, + }, + }, + fontFamily: { + sans: ['Inter Variable', 'sans-serif'], + }, + }, +}, + +}; + " +`; + +exports[`Setup Tailwind generator + GIVEN tailwind config has already a plugins array + THEN it should add the plugin with the right plugin and import 1`] = ` +"import plugin from 'tailwindcss/plugin'; + +/** @type {import('tailwindcss').Config} */ +export default { + plugins: [require('tailwindcss-animate'), + plugin(function ({ addUtilities }) { + addUtilities({ + '.press': { + transform: 'var(--transform-press)', + }, + }); + }),somePlugin], +content: [ + join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}'), +], +darkMode: 'class', +theme: { + screens: { + sm: '640px', + md: '768px', + lg: '1024px', + xl: '1280px', + '2xl': '1536px', + }, + important: true, + extend: {colors: { + border: 'hsl(var(--border))', + input: 'hsl(var(--input))', + ring: 'hsl(var(--ring))', + background: 'hsl(var(--background))', + foreground: 'hsl(var(--foreground))', + primary: { + DEFAULT: 'hsl(var(--primary))', + foreground: 'hsl(var(--primary-foreground))', + }, + secondary: { + DEFAULT: 'hsl(var(--secondary))', + foreground: 'hsl(var(--secondary-foreground))', + }, + alert: { + DEFAULT: 'hsl(var(--alert))', + foreground: 'hsl(var(--alert-foreground))', + }, + muted: { + DEFAULT: 'hsl(var(--muted))', + foreground: 'hsl(var(--muted-foreground))', + }, + accent: { + DEFAULT: 'hsl(var(--accent))', + foreground: 'hsl(var(--accent-foreground))', + }, + card: { + DEFAULT: 'hsl(var(--card))', + foreground: 'hsl(var(--card-foreground))', + }, + popover: { + DEFAULT: 'hsl(var(--popover))', + foreground: 'hsl(var(--popover-foreground))', + }, + }, + borderRadius: { + base: 'var(--border-radius)', + sm: 'calc(var(--border-radius) + 0.125rem)', + DEFAULT: 'calc(var(--border-radius) + 0.25rem)', + md: 'calc(var(--border-radius) + 0.375rem)', + lg: 'calc(var(--border-radius) + 0.5rem)', + xl: 'calc(var(--border-radius) + 0.75rem)', + '2xl': 'calc(var(--border-radius) + 1rem)', + '3xl': 'calc(var(--border-radius) + 1.5rem)', + }, + borderWidth: { + base: 'var(--border-width)', + DEFAULT: 'calc(var(--border-width) + 1px)', + 2: 'calc(var(--border-width) + 2px)', + 4: 'calc(var(--border-width) + 4px)', + 8: 'calc(var(--border-width) + 8px)', + }, + boxShadow: { + base: 'var(--shadow-base)', + sm: 'var(--shadow-sm)', + DEFAULT: 'var(--shadow)', + md: 'var(--shadow-md)', + lg: 'var(--shadow-lg)', + xl: 'var(--shadow-xl)', + '2xl': 'var(--shadow-2xl)', + inner: 'var(--shadow-inner)', + }, + strokeWidth: { + 0: '0', + base: 'var(--stroke-width)', + 1: 'calc(var(--stroke-width) + 1px)', + 2: 'calc(var(--stroke-width) + 2px)', + }, + animation: { + 'accordion-up': 'collapsible-up 0.2s ease-out 0s 1 normal forwards', + 'accordion-down': 'collapsible-down 0.2s ease-out 0s 1 normal forwards', + }, + keyframes: { + 'collapsible-down': { + from: { height: '0' }, + to: { height: 'var(--qwikui-collapsible-content-height)' }, + }, + 'collapsible-up': { + from: { height: 'var(--qwikui-collapsible-content-height)' }, + to: { height: '0' }, + }, + }, + fontFamily: { + sans: ['Inter Variable', 'sans-serif'], + }, + }, +}, + +}; + " +`; diff --git a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts index 12bfa6e36..31fdad3a0 100644 --- a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts +++ b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts @@ -84,126 +84,7 @@ html { const updatedTailwindConfigContent = tree.read('tailwind.config.cjs', 'utf-8'); - expect(updatedTailwindConfigContent).toMatchInlineSnapshot(` - "const plugin = require('tailwindcss/plugin'); - - const { join } = require('path'); - - /** @type {import('tailwindcss').Config} */ - module.exports = { - plugins: [ - require('tailwindcss-animate'), - plugin(function ({ addUtilities }) { - addUtilities({ - '.press': { - transform: 'var(--transform-press)', - }, - }); - }), - ], - - content: [join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}')], - darkMode: 'class', - theme: { - screens: { - sm: '640px', - md: '768px', - lg: '1024px', - xl: '1280px', - '2xl': '1536px', - }, - important: true, - extend: { - colors: { - border: 'hsl(var(--border))', - input: 'hsl(var(--input))', - ring: 'hsl(var(--ring))', - background: 'hsl(var(--background))', - foreground: 'hsl(var(--foreground))', - primary: { - DEFAULT: 'hsl(var(--primary))', - foreground: 'hsl(var(--primary-foreground))', - }, - secondary: { - DEFAULT: 'hsl(var(--secondary))', - foreground: 'hsl(var(--secondary-foreground))', - }, - alert: { - DEFAULT: 'hsl(var(--alert))', - foreground: 'hsl(var(--alert-foreground))', - }, - muted: { - DEFAULT: 'hsl(var(--muted))', - foreground: 'hsl(var(--muted-foreground))', - }, - accent: { - DEFAULT: 'hsl(var(--accent))', - foreground: 'hsl(var(--accent-foreground))', - }, - card: { - DEFAULT: 'hsl(var(--card))', - foreground: 'hsl(var(--card-foreground))', - }, - popover: { - DEFAULT: 'hsl(var(--popover))', - foreground: 'hsl(var(--popover-foreground))', - }, - }, - borderRadius: { - base: 'var(--border-radius)', - sm: 'calc(var(--border-radius) + 0.125rem)', - DEFAULT: 'calc(var(--border-radius) + 0.25rem)', - md: 'calc(var(--border-radius) + 0.375rem)', - lg: 'calc(var(--border-radius) + 0.5rem)', - xl: 'calc(var(--border-radius) + 0.75rem)', - '2xl': 'calc(var(--border-radius) + 1rem)', - '3xl': 'calc(var(--border-radius) + 1.5rem)', - }, - borderWidth: { - base: 'var(--border-width)', - DEFAULT: 'calc(var(--border-width) + 1px)', - 2: 'calc(var(--border-width) + 2px)', - 4: 'calc(var(--border-width) + 4px)', - 8: 'calc(var(--border-width) + 8px)', - }, - boxShadow: { - base: 'var(--shadow-base)', - sm: 'var(--shadow-sm)', - DEFAULT: 'var(--shadow)', - md: 'var(--shadow-md)', - lg: 'var(--shadow-lg)', - xl: 'var(--shadow-xl)', - '2xl': 'var(--shadow-2xl)', - inner: 'var(--shadow-inner)', - }, - strokeWidth: { - 0: '0', - base: 'var(--stroke-width)', - 1: 'calc(var(--stroke-width) + 1px)', - 2: 'calc(var(--stroke-width) + 2px)', - }, - animation: { - 'accordion-up': 'collapsible-up 0.2s ease-out 0s 1 normal forwards', - 'accordion-down': 'collapsible-down 0.2s ease-out 0s 1 normal forwards', - }, - keyframes: { - 'collapsible-down': { - from: { height: '0' }, - to: { height: 'var(--qwikui-collapsible-content-height)' }, - }, - 'collapsible-up': { - from: { height: 'var(--qwikui-collapsible-content-height)' }, - to: { height: '0' }, - }, - }, - fontFamily: { - sans: ['Inter Variable', 'sans-serif'], - }, - }, - }, - }; - " - `); + expect(updatedTailwindConfigContent).toMatchSnapshot(); }); test(` @@ -219,124 +100,7 @@ html { const updatedTailwindConfigContent = tree.read('tailwind.config.js', 'utf-8'); - expect(updatedTailwindConfigContent).toMatchInlineSnapshot(` - "import plugin from 'tailwindcss/plugin'; - - /** @type {import('tailwindcss').Config} */ - export default { - plugins: [ - require('tailwindcss-animate'), - plugin(function ({ addUtilities }) { - addUtilities({ - '.press': { - transform: 'var(--transform-press)', - }, - }); - }), - ], - - content: [join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}')], - darkMode: 'class', - theme: { - screens: { - sm: '640px', - md: '768px', - lg: '1024px', - xl: '1280px', - '2xl': '1536px', - }, - important: true, - extend: { - colors: { - border: 'hsl(var(--border))', - input: 'hsl(var(--input))', - ring: 'hsl(var(--ring))', - background: 'hsl(var(--background))', - foreground: 'hsl(var(--foreground))', - primary: { - DEFAULT: 'hsl(var(--primary))', - foreground: 'hsl(var(--primary-foreground))', - }, - secondary: { - DEFAULT: 'hsl(var(--secondary))', - foreground: 'hsl(var(--secondary-foreground))', - }, - alert: { - DEFAULT: 'hsl(var(--alert))', - foreground: 'hsl(var(--alert-foreground))', - }, - muted: { - DEFAULT: 'hsl(var(--muted))', - foreground: 'hsl(var(--muted-foreground))', - }, - accent: { - DEFAULT: 'hsl(var(--accent))', - foreground: 'hsl(var(--accent-foreground))', - }, - card: { - DEFAULT: 'hsl(var(--card))', - foreground: 'hsl(var(--card-foreground))', - }, - popover: { - DEFAULT: 'hsl(var(--popover))', - foreground: 'hsl(var(--popover-foreground))', - }, - }, - borderRadius: { - base: 'var(--border-radius)', - sm: 'calc(var(--border-radius) + 0.125rem)', - DEFAULT: 'calc(var(--border-radius) + 0.25rem)', - md: 'calc(var(--border-radius) + 0.375rem)', - lg: 'calc(var(--border-radius) + 0.5rem)', - xl: 'calc(var(--border-radius) + 0.75rem)', - '2xl': 'calc(var(--border-radius) + 1rem)', - '3xl': 'calc(var(--border-radius) + 1.5rem)', - }, - borderWidth: { - base: 'var(--border-width)', - DEFAULT: 'calc(var(--border-width) + 1px)', - 2: 'calc(var(--border-width) + 2px)', - 4: 'calc(var(--border-width) + 4px)', - 8: 'calc(var(--border-width) + 8px)', - }, - boxShadow: { - base: 'var(--shadow-base)', - sm: 'var(--shadow-sm)', - DEFAULT: 'var(--shadow)', - md: 'var(--shadow-md)', - lg: 'var(--shadow-lg)', - xl: 'var(--shadow-xl)', - '2xl': 'var(--shadow-2xl)', - inner: 'var(--shadow-inner)', - }, - strokeWidth: { - 0: '0', - base: 'var(--stroke-width)', - 1: 'calc(var(--stroke-width) + 1px)', - 2: 'calc(var(--stroke-width) + 2px)', - }, - animation: { - 'accordion-up': 'collapsible-up 0.2s ease-out 0s 1 normal forwards', - 'accordion-down': 'collapsible-down 0.2s ease-out 0s 1 normal forwards', - }, - keyframes: { - 'collapsible-down': { - from: { height: '0' }, - to: { height: 'var(--qwikui-collapsible-content-height)' }, - }, - 'collapsible-up': { - from: { height: 'var(--qwikui-collapsible-content-height)' }, - to: { height: '0' }, - }, - }, - fontFamily: { - sans: ['Inter Variable', 'sans-serif'], - }, - }, - }, - }; - " - `); + expect(updatedTailwindConfigContent).toMatchSnapshot(); }); test(` GIVEN tailwind config has already a plugins array @@ -351,124 +115,7 @@ html { const updatedTailwindConfigContent = tree.read('tailwind.config.js', 'utf-8'); - expect(updatedTailwindConfigContent).toMatchInlineSnapshot(` - "import plugin from 'tailwindcss/plugin'; - - /** @type {import('tailwindcss').Config} */ - export default { - plugins: [ - require('tailwindcss-animate'), - plugin(function ({ addUtilities }) { - addUtilities({ - '.press': { - transform: 'var(--transform-press)', - }, - }); - }), - somePlugin, - ], - content: [join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}')], - darkMode: 'class', - theme: { - screens: { - sm: '640px', - md: '768px', - lg: '1024px', - xl: '1280px', - '2xl': '1536px', - }, - important: true, - extend: { - colors: { - border: 'hsl(var(--border))', - input: 'hsl(var(--input))', - ring: 'hsl(var(--ring))', - background: 'hsl(var(--background))', - foreground: 'hsl(var(--foreground))', - primary: { - DEFAULT: 'hsl(var(--primary))', - foreground: 'hsl(var(--primary-foreground))', - }, - secondary: { - DEFAULT: 'hsl(var(--secondary))', - foreground: 'hsl(var(--secondary-foreground))', - }, - alert: { - DEFAULT: 'hsl(var(--alert))', - foreground: 'hsl(var(--alert-foreground))', - }, - muted: { - DEFAULT: 'hsl(var(--muted))', - foreground: 'hsl(var(--muted-foreground))', - }, - accent: { - DEFAULT: 'hsl(var(--accent))', - foreground: 'hsl(var(--accent-foreground))', - }, - card: { - DEFAULT: 'hsl(var(--card))', - foreground: 'hsl(var(--card-foreground))', - }, - popover: { - DEFAULT: 'hsl(var(--popover))', - foreground: 'hsl(var(--popover-foreground))', - }, - }, - borderRadius: { - base: 'var(--border-radius)', - sm: 'calc(var(--border-radius) + 0.125rem)', - DEFAULT: 'calc(var(--border-radius) + 0.25rem)', - md: 'calc(var(--border-radius) + 0.375rem)', - lg: 'calc(var(--border-radius) + 0.5rem)', - xl: 'calc(var(--border-radius) + 0.75rem)', - '2xl': 'calc(var(--border-radius) + 1rem)', - '3xl': 'calc(var(--border-radius) + 1.5rem)', - }, - borderWidth: { - base: 'var(--border-width)', - DEFAULT: 'calc(var(--border-width) + 1px)', - 2: 'calc(var(--border-width) + 2px)', - 4: 'calc(var(--border-width) + 4px)', - 8: 'calc(var(--border-width) + 8px)', - }, - boxShadow: { - base: 'var(--shadow-base)', - sm: 'var(--shadow-sm)', - DEFAULT: 'var(--shadow)', - md: 'var(--shadow-md)', - lg: 'var(--shadow-lg)', - xl: 'var(--shadow-xl)', - '2xl': 'var(--shadow-2xl)', - inner: 'var(--shadow-inner)', - }, - strokeWidth: { - 0: '0', - base: 'var(--stroke-width)', - 1: 'calc(var(--stroke-width) + 1px)', - 2: 'calc(var(--stroke-width) + 2px)', - }, - animation: { - 'accordion-up': 'collapsible-up 0.2s ease-out 0s 1 normal forwards', - 'accordion-down': 'collapsible-down 0.2s ease-out 0s 1 normal forwards', - }, - keyframes: { - 'collapsible-down': { - from: { height: '0' }, - to: { height: 'var(--qwikui-collapsible-content-height)' }, - }, - 'collapsible-up': { - from: { height: 'var(--qwikui-collapsible-content-height)' }, - to: { height: '0' }, - }, - }, - fontFamily: { - sans: ['Inter Variable', 'sans-serif'], - }, - }, - }, - }; - " - `); + expect(updatedTailwindConfigContent).toMatchSnapshot(); }); test(` @@ -482,92 +129,7 @@ html { const updatedGlobalCssContent = tree.read('src/global.css', 'utf-8'); - expect(updatedGlobalCssContent).toMatchInlineSnapshot(` - "@tailwind components; - @tailwind base; - @tailwind utilities; - @layer base { - :root { - --background: 0 0% 100%; - --foreground: 222.2 47.4% 11.2%; - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; - --popover: 0 0% 100%; - --popover-foreground: 222.2 47.4% 11.2%; - --card: 0 0% 100%; - --card-foreground: 222.2 47.4% 11.2%; - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - --primary: 191.6 91.4% 36.5%; - --primary-foreground: 0 0% 100%; - --secondary: 222.2 47.4% 11.2%; - --secondary-foreground: 0 0% 100%; - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; - --alert: 0 84.2% 60.2%; - --alert-foreground: 210 40% 98%; - --ring: 222.2 47.4% 11.2%; - --border-width: 0px; - --border-radius: 0; - --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01); - --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); - --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1); - --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), - 0 2px 4px -2px rgba(0, 0, 0, 0.1); - --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), - 0 4px 6px -4px rgba(0, 0, 0, 0.1); - --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), - 0 8px 10px -6px rgba(0, 0, 0, 0.1); - --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1); - --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01); - --transform-press: scale(0.95); - } - .dark { - --background: 222.2 84% 4.9%; - --foreground: 210 40% 98%; - --muted: 217.2 32.6% 17.5%; - --muted-foreground: 215 20.2% 65.1%; - --popover: 222.2 84% 4.9%; - --popover-foreground: 210 40% 98%; - --card: 222.2 84% 4.9%; - --card-foreground: 210 40% 98%; - --border: 217.2 32.6% 17.5%; - --input: 217.2 32.6% 17.5%; - --primary: 191.6 91.4% 36.5%; - --primary-foreground: 0 0% 100%; - --secondary: 210 40% 96.1%; - --secondary-foreground: 0 0% 0%; - --accent: 217.2 32.6% 17.5%; - --accent-foreground: 210 40% 98%; - --alert: 0 84.2% 60.2%; - --alert-foreground: 210 40% 98%; - --ring: 212.7 26.8% 83.9; - --border-width: 0px; - --border-radius: 0; - --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01); - --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); - --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1); - --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), - 0 2px 4px -2px rgba(0, 0, 0, 0.1); - --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), - 0 4px 6px -4px rgba(0, 0, 0, 0.1); - --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), - 0 8px 10px -6px rgba(0, 0, 0, 0.1); - --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1); - --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01); - --transform-press: scale(0.95); - } - } - - html { - height: 100%; - min-height: 100%; - scroll-behavior: smooth; - background-color: var(--color-bg) !important; - color: var(--color-text) !important; - } - " - `); + expect(updatedGlobalCssContent).toMatchSnapshot(); }); test(` GIVEN style is "brutalist" and primary color is "red-600" and border-radius is 1 @@ -583,85 +145,6 @@ html { const updatedGlobalCssContent = tree.read('src/global.css', 'utf-8'); - expect(updatedGlobalCssContent).toMatchInlineSnapshot(` - "@tailwind components; - @tailwind base; - @tailwind utilities; - @layer base { - :root { - --background: 0 0% 100%; - --foreground: 222.2 47.4% 11.2%; - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; - --popover: 0 0% 100%; - --popover-foreground: 222.2 47.4% 11.2%; - --card: 0 0% 100%; - --card-foreground: 222.2 47.4% 11.2%; - --border: 0 0% 0%; - --input: 0 0% 0%; - --primary: 0 72.2% 50.6%; - --primary-foreground: 0 0% 100%; - --secondary: 222.2 47.4% 11.2%; - --secondary-foreground: 0 0% 100%; - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; - --alert: 0 84.2% 60.2%; - --alert-foreground: 210 40% 98%; - --ring: 0 0% 0%; - --border-width: 2px; - --border-radius: 1rem; - --shadow-base: 0px 0px 0px 0 rgba(0, 0, 0, 1); - --shadow-sm: 4px 4px 0px 0 rgba(0, 0, 0, 1); - --shadow: 5px 5px 0px 0px rgba(0, 0, 0, 1); - --shadow-md: 6px 6px 0px 0px rgba(0, 0, 0, 1); - --shadow-lg: 8px 8px 0px 0px rgba(0, 0, 0, 1); - --shadow-xl: 11px 11px 0px 0px rgba(0, 0, 0, 1); - --shadow-2xl: 13px 13px 0px 0px rgba(0, 0, 0, 1); - --shadow-inner: inset 2px 2px 0px 0px rgba(0, 0, 0, 0); - --transform-press: translate(4px, 4px); - } - .dark { - --background: 222.2 84% 4.9%; - --foreground: 210 40% 98%; - --muted: 217.2 32.6% 17.5%; - --muted-foreground: 215 20.2% 65.1%; - --popover: 222.2 84% 4.9%; - --popover-foreground: 210 40% 98%; - --card: 222.2 84% 4.9%; - --card-foreground: 210 40% 98%; - --border: 0 0% 0%; - --input: 0 0% 0%; - --primary: 0 72.2% 50.6%; - --primary-foreground: 0 0% 100%; - --secondary: 210 40% 96.1%; - --secondary-foreground: 0 0% 0%; - --accent: 217.2 32.6% 17.5%; - --accent-foreground: 210 40% 98%; - --alert: 0 84.2% 60.2%; - --alert-foreground: 210 40% 98%; - --ring: 0 0% 0%; - --border-width: 2px; - --border-radius: 1rem; - --shadow-base: 0px 0px 0px 0 rgba(0, 0, 0, 1); - --shadow-sm: 4px 4px 0px 0 rgba(0, 0, 0, 1); - --shadow: 5px 5px 0px 0px rgba(0, 0, 0, 1); - --shadow-md: 6px 6px 0px 0px rgba(0, 0, 0, 1); - --shadow-lg: 8px 8px 0px 0px rgba(0, 0, 0, 1); - --shadow-xl: 11px 11px 0px 0px rgba(0, 0, 0, 1); - --shadow-2xl: 13px 13px 0px 0px rgba(0, 0, 0, 1); - --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01); - --transform-press: translate(4px, 4px); - } - } - - html { - height: 100%; - min-height: 100%; - scroll-behavior: smooth; - background-color: var(--color-bg) !important; - color: var(--color-text) !important; - } - " - `); + expect(updatedGlobalCssContent).toMatchSnapshot(); }); });