From e0fd1f6e8916222daf1c48441875d702d58c19da Mon Sep 17 00:00:00 2001 From: maiieul Date: Sat, 19 Apr 2025 21:17:35 +0200 Subject: [PATCH 1/2] chore: remove bound-signal2 --- .../components/toggle-group/use-toggle.tsx | 2 +- .../src/components/toggle/toggle.tsx | 2 +- .../kit-headless/src/utils/bound-signal2.tsx | 20 ------------------- 3 files changed, 2 insertions(+), 22 deletions(-) delete mode 100644 packages/kit-headless/src/utils/bound-signal2.tsx diff --git a/packages/kit-headless/src/components/toggle-group/use-toggle.tsx b/packages/kit-headless/src/components/toggle-group/use-toggle.tsx index 3da84ed8f..56064a08c 100644 --- a/packages/kit-headless/src/components/toggle-group/use-toggle.tsx +++ b/packages/kit-headless/src/components/toggle-group/use-toggle.tsx @@ -6,7 +6,7 @@ import { ToggleGroupMultipleProps, ToggleGroupSingleProps, } from './toggle-group-root'; -import { useBoundSignal } from '../../utils/bound-signal2'; +import { useBoundSignal } from '../../utils/bound-signal'; function useRootItemsRepo() { const items = useSignal>>(new Map()); diff --git a/packages/kit-headless/src/components/toggle/toggle.tsx b/packages/kit-headless/src/components/toggle/toggle.tsx index b023728c0..d4ee5d2aa 100644 --- a/packages/kit-headless/src/components/toggle/toggle.tsx +++ b/packages/kit-headless/src/components/toggle/toggle.tsx @@ -1,6 +1,6 @@ import type { PropsOf, QRL, Signal } from '@builder.io/qwik'; import { $, component$, Slot, sync$, useTask$ } from '@builder.io/qwik'; -import { useBoundSignal } from '../../utils/bound-signal2'; +import { useBoundSignal } from '../../utils/bound-signal'; export type ToggleProps = PropsOf<'button'> & { /** diff --git a/packages/kit-headless/src/utils/bound-signal2.tsx b/packages/kit-headless/src/utils/bound-signal2.tsx deleted file mode 100644 index d5953de5e..000000000 --- a/packages/kit-headless/src/utils/bound-signal2.tsx +++ /dev/null @@ -1,20 +0,0 @@ -/** - * Creates a bound signal that synchronizes with an external signal if provided. - * This hook is useful for two-way binding scenarios, especially when dealing with - * component props that may or may not be signals. - * - * @param givenSignal - An optional external signal to bind to. - * @param initialValue - The initial value to use if no external signal is provided. - * @returns A signal that is either bound to the external signal or a new internal signal. - * - * The returned signal will update the external signal (if provided) whenever its value changes, - * and will also update itself when the external signal changes. - */ - -import { createSignal, Signal, useConstant } from '@builder.io/qwik'; - -export const useBoundSignal = ( - givenSignal?: Signal, - initialValue?: T, -): Signal => - useConstant(() => givenSignal || (createSignal(initialValue) as Signal)); From bdd63b21ec9b3f82ddbc6b8c1452ab239f98b3fa Mon Sep 17 00:00:00 2001 From: maiieul Date: Sat, 19 Apr 2025 21:27:40 +0200 Subject: [PATCH 2/2] chore: disable prettier on cli jest tests --- packages/cli/jest.config.ts | 1 + .../generators/init/init-generator.spec.ts | 10 +- .../setup-tailwind-generator.spec.ts | 1029 +++++++++-------- packages/kit-styled/src/templates/global.css | 11 +- 4 files changed, 523 insertions(+), 528 deletions(-) diff --git a/packages/cli/jest.config.ts b/packages/cli/jest.config.ts index cba01a275..a5ba6fc2a 100644 --- a/packages/cli/jest.config.ts +++ b/packages/cli/jest.config.ts @@ -15,4 +15,5 @@ export default { testEnvironment: 'node', moduleFileExtensions: ['ts', 'js', 'html'], coverageDirectory: '../../coverage/packages/cli', + prettierPath: null, }; diff --git a/packages/cli/src/generators/init/init-generator.spec.ts b/packages/cli/src/generators/init/init-generator.spec.ts index 36f69c9d8..72f48fc4b 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).toMatchInlineSnapshot(`"{"componentsRoot":"src/components/ui"}"`); }); test(` @@ -42,9 +39,6 @@ describe('init generator', () => { const expectedContents = tree.read(QWIK_UI_CONFIG_FILENAME, 'utf-8'); - expect(expectedContents).toMatchInlineSnapshot(` - "{ "componentsRoot": "/my-project/src/components/ui" } - " - `); + expect(expectedContents).toMatchInlineSnapshot(`"{"componentsRoot":"/my-project/src/components/ui"}"`); }); }); 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..469d8febc 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 @@ -85,125 +85,127 @@ 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'], - }, - }, +"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'], + }, + }, +}, + +}; + " +`); }); test(` @@ -220,123 +222,125 @@ 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'], - }, - }, +"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'], + }, + }, +}, + +}; + " +`); }); test(` GIVEN tailwind config has already a plugins array @@ -352,123 +356,122 @@ 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'], - }, - }, +"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'], + }, + }, +}, + +}; + " +`); }); test(` @@ -483,91 +486,87 @@ 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; - } - " - `); +" + @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; +} + " +`); }); test(` GIVEN style is "brutalist" and primary color is "red-600" and border-radius is 1 @@ -584,84 +583,86 @@ 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; - } - " - `); +" + @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; +} + " +`); }); }); diff --git a/packages/kit-styled/src/templates/global.css b/packages/kit-styled/src/templates/global.css index d622123a7..715f1dbb1 100644 --- a/packages/kit-styled/src/templates/global.css +++ b/packages/kit-styled/src/templates/global.css @@ -1241,10 +1241,10 @@ *::-webkit-scrollbar-thumb { /* Thumb color */ background-color: hsla(var(--foreground) / 0.25); - border-radius: 0.5rem; + border-radius: 0.4rem; background-clip: padding-box; - border-left: 0.15rem solid transparent; - border-right: 0.15rem solid transparent; + border-left: 0.3rem solid transparent; + border-right: 0.3rem solid transparent; } .navigation-docs::-webkit-scrollbar-thumb { @@ -1261,7 +1261,7 @@ *::-webkit-scrollbar-track { background: transparent; - border-left: 1px solid var(--qwikui-slate-300); + border-left: 0; } .toc-scrollbar::-webkit-scrollbar-track, @@ -1279,8 +1279,7 @@ .dark *::-webkit-scrollbar-track { background: transparent; - border-left: 1px solid var(--qwikui-slate-800); - border-right: 1px solid var(--qwikui-slate-800); + border-left: 0; } .code-example *::-webkit-scrollbar-track {