From 84b80b870c34305f34fecc3ee9e4108c2d56c122 Mon Sep 17 00:00:00 2001 From: jycouet Date: Thu, 23 Jan 2025 21:11:06 +0100 Subject: [PATCH 01/12] feat: ADD tailwindcss 4.0 --- .changeset/empty-geese-draw.md | 5 + packages/addons/_tests/tailwindcss/test.ts | 2 +- packages/addons/tailwindcss/index.ts | 160 ++++++++++----------- 3 files changed, 82 insertions(+), 85 deletions(-) create mode 100644 .changeset/empty-geese-draw.md diff --git a/.changeset/empty-geese-draw.md b/.changeset/empty-geese-draw.md new file mode 100644 index 000000000..28a668ed8 --- /dev/null +++ b/.changeset/empty-geese-draw.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/addons': patch +--- + +using tailwindcss 4.0.0 diff --git a/packages/addons/_tests/tailwindcss/test.ts b/packages/addons/_tests/tailwindcss/test.ts index 1ede1055c..c0e78cca2 100644 --- a/packages/addons/_tests/tailwindcss/test.ts +++ b/packages/addons/_tests/tailwindcss/test.ts @@ -23,7 +23,7 @@ test.concurrent.for(variants)('none - %s', async (variant, { page, ...ctx }) => }); test.concurrent.for(variants)('typography - %s', async (variant, { page, ...ctx }) => { - const cwd = await ctx.run(variant, { tailwindcss: { plugins: ['typography'] } }); + const cwd = await ctx.run(variant, { tailwindcss }); // ...add files addFixture(cwd, variant); diff --git a/packages/addons/tailwindcss/index.ts b/packages/addons/tailwindcss/index.ts index 80c581b13..370e82e29 100644 --- a/packages/addons/tailwindcss/index.ts +++ b/packages/addons/tailwindcss/index.ts @@ -4,41 +4,41 @@ import { array, common, exports, imports, object } from '@sveltejs/cli-core/js'; import { parseCss, parseScript, parseJson, parseSvelte } from '@sveltejs/cli-core/parsers'; import { addSlot } from '@sveltejs/cli-core/html'; -type Plugin = { - id: string; - package: string; - version: string; - identifier: string; -}; - -const plugins: Plugin[] = [ - { - id: 'typography', - package: '@tailwindcss/typography', - version: '^0.5.16', - identifier: 'typography' - }, - { - id: 'forms', - package: '@tailwindcss/forms', - version: '^0.5.10', - identifier: 'forms' - }, - { - id: 'container-queries', - package: '@tailwindcss/container-queries', - version: '^0.1.1', - identifier: 'containerQueries' - } -]; +// type Plugin = { +// id: string; +// package: string; +// version: string; +// identifier: string; +// }; + +// const plugins: Plugin[] = [ +// { +// id: 'typography', +// package: '@tailwindcss/typography', +// version: '^0.5.16', +// identifier: 'typography' +// }, +// { +// id: 'forms', +// package: '@tailwindcss/forms', +// version: '^0.5.10', +// identifier: 'forms' +// }, +// { +// id: 'container-queries', +// package: '@tailwindcss/container-queries', +// version: '^0.1.1', +// identifier: 'containerQueries' +// } +// ]; const options = defineAddonOptions({ - plugins: { - type: 'multiselect', - question: 'Which plugins would you like to add?', - options: plugins.map((p) => ({ value: p.id, label: p.id, hint: p.package })), - default: [] - } + // plugins: { + // type: 'multiselect', + // question: 'Which plugins would you like to add?', + // options: plugins.map((p) => ({ value: p.id, label: p.id, hint: p.package })), + // default: [] + // } }); export default defineAddon({ @@ -51,71 +51,63 @@ export default defineAddon({ const ext = typescript ? 'ts' : 'js'; const prettierInstalled = Boolean(dependencyVersion('prettier')); - sv.devDependency('tailwindcss', '^3.4.17'); - sv.devDependency('autoprefixer', '^10.4.20'); + sv.devDependency('@tailwindcss/vite', '^4.0.0'); + sv.devDependency('tailwindcss', '^4.0.0'); - if (prettierInstalled) sv.devDependency('prettier-plugin-tailwindcss', '^0.6.10'); + if (prettierInstalled) sv.devDependency('prettier-plugin-tailwindcss', '^0.6.11'); - for (const plugin of plugins) { - if (!options.plugins.includes(plugin.id)) continue; + // sv.file(`tailwind.config.${ext}`, (content) => { + // const { ast, generateCode } = parseScript(content); + // let root; + // const rootExport = object.createEmpty(); + // if (typescript) { + // imports.addNamed(ast, 'tailwindcss', { Config: 'Config' }, true); + // root = common.satisfiesExpression(rootExport, 'Config'); + // } - sv.devDependency(plugin.package, plugin.version); - } + // const { astNode: exportDeclaration, value: node } = exports.defaultExport( + // ast, + // root ?? rootExport + // ); - sv.file(`tailwind.config.${ext}`, (content) => { - const { ast, generateCode } = parseScript(content); - let root; - const rootExport = object.createEmpty(); - if (typescript) { - imports.addNamed(ast, 'tailwindcss', { Config: 'Config' }, true); - root = common.satisfiesExpression(rootExport, 'Config'); - } + // const config = node.type === 'TSSatisfiesExpression' ? node.expression : node; + // if (config.type !== 'ObjectExpression') { + // throw new Error(`Unexpected tailwind config shape: ${config.type}`); + // } - const { astNode: exportDeclaration, value: node } = exports.defaultExport( - ast, - root ?? rootExport - ); + // if (!typescript) { + // common.addJsDocTypeComment(exportDeclaration, "import('tailwindcss').Config"); + // } - const config = node.type === 'TSSatisfiesExpression' ? node.expression : node; - if (config.type !== 'ObjectExpression') { - throw new Error(`Unexpected tailwind config shape: ${config.type}`); - } + // const contentArray = object.property(config, 'content', array.createEmpty()); + // array.push(contentArray, './src/**/*.{html,js,svelte,ts}'); - if (!typescript) { - common.addJsDocTypeComment(exportDeclaration, "import('tailwindcss').Config"); - } + // const themeObject = object.property(config, 'theme', object.createEmpty()); + // object.property(themeObject, 'extend', object.createEmpty()); - const contentArray = object.property(config, 'content', array.createEmpty()); - array.push(contentArray, './src/**/*.{html,js,svelte,ts}'); + // const pluginsArray = object.property(config, 'plugins', array.createEmpty()); - const themeObject = object.property(config, 'theme', object.createEmpty()); - object.property(themeObject, 'extend', object.createEmpty()); + // for (const plugin of plugins) { + // if (!options.plugins.includes(plugin.id)) continue; + // imports.addDefault(ast, plugin.package, plugin.identifier); + // array.push(pluginsArray, { type: 'Identifier', name: plugin.identifier }); + // } - const pluginsArray = object.property(config, 'plugins', array.createEmpty()); + // return generateCode(); + // }); - for (const plugin of plugins) { - if (!options.plugins.includes(plugin.id)) continue; - imports.addDefault(ast, plugin.package, plugin.identifier); - array.push(pluginsArray, { type: 'Identifier', name: plugin.identifier }); - } + // sv.file('postcss.config.js', (content) => { + // const { ast, generateCode } = parseScript(content); + // const { value: rootObject } = exports.defaultExport(ast, object.createEmpty()); + // const pluginsObject = object.property(rootObject, 'plugins', object.createEmpty()); - return generateCode(); - }); - - sv.file('postcss.config.js', (content) => { - const { ast, generateCode } = parseScript(content); - const { value: rootObject } = exports.defaultExport(ast, object.createEmpty()); - const pluginsObject = object.property(rootObject, 'plugins', object.createEmpty()); - - object.property(pluginsObject, 'tailwindcss', object.createEmpty()); - object.property(pluginsObject, 'autoprefixer', object.createEmpty()); - return generateCode(); - }); + // object.property(pluginsObject, 'tailwindcss', object.createEmpty()); + // object.property(pluginsObject, 'autoprefixer', object.createEmpty()); + // return generateCode(); + // }); sv.file('src/app.css', (content) => { - const layerImports = ['base', 'components', 'utilities'].map( - (layer) => `tailwindcss/${layer}` - ); + const layerImports = ['tailwindcss']; if (layerImports.every((i) => content.includes(i))) { return content; } From 01ba71c548fc2eb35e67558f3b54885b1dfe6937 Mon Sep 17 00:00:00 2001 From: jycouet Date: Thu, 23 Jan 2025 21:14:10 +0100 Subject: [PATCH 02/12] cleanup --- packages/addons/tailwindcss/index.ts | 98 ++-------------------------- 1 file changed, 5 insertions(+), 93 deletions(-) diff --git a/packages/addons/tailwindcss/index.ts b/packages/addons/tailwindcss/index.ts index 370e82e29..d3ed1973c 100644 --- a/packages/addons/tailwindcss/index.ts +++ b/packages/addons/tailwindcss/index.ts @@ -1,54 +1,16 @@ -import { defineAddon, defineAddonOptions } from '@sveltejs/cli-core'; +import { defineAddon } from '@sveltejs/cli-core'; import { addImports } from '@sveltejs/cli-core/css'; -import { array, common, exports, imports, object } from '@sveltejs/cli-core/js'; -import { parseCss, parseScript, parseJson, parseSvelte } from '@sveltejs/cli-core/parsers'; +import { imports } from '@sveltejs/cli-core/js'; +import { parseCss, parseJson, parseSvelte } from '@sveltejs/cli-core/parsers'; import { addSlot } from '@sveltejs/cli-core/html'; -// type Plugin = { -// id: string; -// package: string; -// version: string; -// identifier: string; -// }; - -// const plugins: Plugin[] = [ -// { -// id: 'typography', -// package: '@tailwindcss/typography', -// version: '^0.5.16', -// identifier: 'typography' -// }, -// { -// id: 'forms', -// package: '@tailwindcss/forms', -// version: '^0.5.10', -// identifier: 'forms' -// }, -// { -// id: 'container-queries', -// package: '@tailwindcss/container-queries', -// version: '^0.1.1', -// identifier: 'containerQueries' -// } -// ]; - -const options = defineAddonOptions({ - // plugins: { - // type: 'multiselect', - // question: 'Which plugins would you like to add?', - // options: plugins.map((p) => ({ value: p.id, label: p.id, hint: p.package })), - // default: [] - // } -}); - export default defineAddon({ id: 'tailwindcss', alias: 'tailwind', shortDescription: 'css framework', homepage: 'https://tailwindcss.com', - options, - run: ({ sv, options, typescript, kit, dependencyVersion }) => { - const ext = typescript ? 'ts' : 'js'; + options: {}, + run: ({ sv, typescript, kit, dependencyVersion }) => { const prettierInstalled = Boolean(dependencyVersion('prettier')); sv.devDependency('@tailwindcss/vite', '^4.0.0'); @@ -56,56 +18,6 @@ export default defineAddon({ if (prettierInstalled) sv.devDependency('prettier-plugin-tailwindcss', '^0.6.11'); - // sv.file(`tailwind.config.${ext}`, (content) => { - // const { ast, generateCode } = parseScript(content); - // let root; - // const rootExport = object.createEmpty(); - // if (typescript) { - // imports.addNamed(ast, 'tailwindcss', { Config: 'Config' }, true); - // root = common.satisfiesExpression(rootExport, 'Config'); - // } - - // const { astNode: exportDeclaration, value: node } = exports.defaultExport( - // ast, - // root ?? rootExport - // ); - - // const config = node.type === 'TSSatisfiesExpression' ? node.expression : node; - // if (config.type !== 'ObjectExpression') { - // throw new Error(`Unexpected tailwind config shape: ${config.type}`); - // } - - // if (!typescript) { - // common.addJsDocTypeComment(exportDeclaration, "import('tailwindcss').Config"); - // } - - // const contentArray = object.property(config, 'content', array.createEmpty()); - // array.push(contentArray, './src/**/*.{html,js,svelte,ts}'); - - // const themeObject = object.property(config, 'theme', object.createEmpty()); - // object.property(themeObject, 'extend', object.createEmpty()); - - // const pluginsArray = object.property(config, 'plugins', array.createEmpty()); - - // for (const plugin of plugins) { - // if (!options.plugins.includes(plugin.id)) continue; - // imports.addDefault(ast, plugin.package, plugin.identifier); - // array.push(pluginsArray, { type: 'Identifier', name: plugin.identifier }); - // } - - // return generateCode(); - // }); - - // sv.file('postcss.config.js', (content) => { - // const { ast, generateCode } = parseScript(content); - // const { value: rootObject } = exports.defaultExport(ast, object.createEmpty()); - // const pluginsObject = object.property(rootObject, 'plugins', object.createEmpty()); - - // object.property(pluginsObject, 'tailwindcss', object.createEmpty()); - // object.property(pluginsObject, 'autoprefixer', object.createEmpty()); - // return generateCode(); - // }); - sv.file('src/app.css', (content) => { const layerImports = ['tailwindcss']; if (layerImports.every((i) => content.includes(i))) { From 3c55b574e4599d6b0131c527bcc830521f9fe755 Mon Sep 17 00:00:00 2001 From: jycouet Date: Thu, 23 Jan 2025 23:01:01 +0100 Subject: [PATCH 03/12] simplify app.css --- packages/addons/tailwindcss/index.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/addons/tailwindcss/index.ts b/packages/addons/tailwindcss/index.ts index d3ed1973c..17d2b6df4 100644 --- a/packages/addons/tailwindcss/index.ts +++ b/packages/addons/tailwindcss/index.ts @@ -19,16 +19,14 @@ export default defineAddon({ if (prettierInstalled) sv.devDependency('prettier-plugin-tailwindcss', '^0.6.11'); sv.file('src/app.css', (content) => { - const layerImports = ['tailwindcss']; - if (layerImports.every((i) => content.includes(i))) { + if (content.includes('tailwindcss')) { return content; } const { ast, generateCode } = parseCss(content); const originalFirst = ast.first; - const specifiers = layerImports.map((i) => `'${i}'`); - const nodes = addImports(ast, specifiers); + const nodes = addImports(ast, ["'tailwindcss'"]); if ( originalFirst !== ast.first && From a980ae0d5e78e928e72ca84605ce6db416210c7c Mon Sep 17 00:00:00 2001 From: jycouet Date: Thu, 23 Jan 2025 23:10:29 +0100 Subject: [PATCH 04/12] update vite.config.tjs --- packages/addons/tailwindcss/index.ts | 32 +++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/packages/addons/tailwindcss/index.ts b/packages/addons/tailwindcss/index.ts index 17d2b6df4..bc63473d0 100644 --- a/packages/addons/tailwindcss/index.ts +++ b/packages/addons/tailwindcss/index.ts @@ -1,7 +1,15 @@ import { defineAddon } from '@sveltejs/cli-core'; import { addImports } from '@sveltejs/cli-core/css'; -import { imports } from '@sveltejs/cli-core/js'; -import { parseCss, parseJson, parseSvelte } from '@sveltejs/cli-core/parsers'; +import { + array, + common, + functions, + imports, + object, + variables, + exports +} from '@sveltejs/cli-core/js'; +import { parseCss, parseJson, parseScript, parseSvelte } from '@sveltejs/cli-core/parsers'; import { addSlot } from '@sveltejs/cli-core/html'; export default defineAddon({ @@ -11,13 +19,31 @@ export default defineAddon({ homepage: 'https://tailwindcss.com', options: {}, run: ({ sv, typescript, kit, dependencyVersion }) => { + const ext = typescript ? 'ts' : 'js'; const prettierInstalled = Boolean(dependencyVersion('prettier')); - sv.devDependency('@tailwindcss/vite', '^4.0.0'); sv.devDependency('tailwindcss', '^4.0.0'); + sv.devDependency('@tailwindcss/vite', '^4.0.0'); if (prettierInstalled) sv.devDependency('prettier-plugin-tailwindcss', '^0.6.11'); + // add the vite plugin + sv.file(`vite.config.${ext}`, (content) => { + const { ast, generateCode } = parseScript(content); + + const vitePluginName = 'tailwindcss'; + imports.addNamed(ast, '@tailwindcss/vite', { tailwindcss: vitePluginName }); + + const { value: rootObject } = exports.defaultExport(ast, functions.call('defineConfig', [])); + const param1 = functions.argumentByIndex(rootObject, 0, object.createEmpty()); + + const pluginsArray = object.property(param1, 'plugins', array.createEmpty()); + const pluginFunctionCall = functions.call(vitePluginName, []); + array.push(pluginsArray, pluginFunctionCall); + + return generateCode(); + }); + sv.file('src/app.css', (content) => { if (content.includes('tailwindcss')) { return content; From c28475cab931fb83b90dd5a73d904899bf398c44 Mon Sep 17 00:00:00 2001 From: jycouet Date: Thu, 23 Jan 2025 23:35:35 +0100 Subject: [PATCH 05/12] import addDefault --- packages/addons/tailwindcss/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/addons/tailwindcss/index.ts b/packages/addons/tailwindcss/index.ts index bc63473d0..8afc6721a 100644 --- a/packages/addons/tailwindcss/index.ts +++ b/packages/addons/tailwindcss/index.ts @@ -32,7 +32,7 @@ export default defineAddon({ const { ast, generateCode } = parseScript(content); const vitePluginName = 'tailwindcss'; - imports.addNamed(ast, '@tailwindcss/vite', { tailwindcss: vitePluginName }); + imports.addDefault(ast, '@tailwindcss/vite', vitePluginName); const { value: rootObject } = exports.defaultExport(ast, functions.call('defineConfig', [])); const param1 = functions.argumentByIndex(rootObject, 0, object.createEmpty()); From b05c8b5c529c225218249db712ae257186fb862f Mon Sep 17 00:00:00 2001 From: jycouet Date: Thu, 23 Jan 2025 23:35:44 +0100 Subject: [PATCH 06/12] rgb to oklch --- packages/addons/_tests/tailwindcss/test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/addons/_tests/tailwindcss/test.ts b/packages/addons/_tests/tailwindcss/test.ts index c0e78cca2..46af8d343 100644 --- a/packages/addons/_tests/tailwindcss/test.ts +++ b/packages/addons/_tests/tailwindcss/test.ts @@ -16,8 +16,8 @@ test.concurrent.for(variants)('none - %s', async (variant, { page, ...ctx }) => ctx.onTestFinished(async () => await close()); const el = page.getByTestId('base'); - await expect(el).toHaveCSS('background-color', 'rgb(71, 85, 105)'); - await expect(el).toHaveCSS('border-color', 'rgb(249, 250, 251)'); + await expect(el).toHaveCSS('background-color', 'oklch(0.446 0.043 257.281)'); + await expect(el).toHaveCSS('border-color', 'oklch(0.984 0.003 247.858)'); await expect(el).toHaveCSS('border-width', '4px'); await expect(el).toHaveCSS('margin-top', '4px'); }); From 6fd45e80dc9b1238defc6c1c382ce58c4bce2089 Mon Sep 17 00:00:00 2001 From: jycouet Date: Thu, 23 Jan 2025 23:41:33 +0100 Subject: [PATCH 07/12] :ok_hand: FIX: linting (FTW) --- packages/addons/tailwindcss/index.ts | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/packages/addons/tailwindcss/index.ts b/packages/addons/tailwindcss/index.ts index 8afc6721a..914e20057 100644 --- a/packages/addons/tailwindcss/index.ts +++ b/packages/addons/tailwindcss/index.ts @@ -1,14 +1,6 @@ import { defineAddon } from '@sveltejs/cli-core'; import { addImports } from '@sveltejs/cli-core/css'; -import { - array, - common, - functions, - imports, - object, - variables, - exports -} from '@sveltejs/cli-core/js'; +import { array, functions, imports, object, exports } from '@sveltejs/cli-core/js'; import { parseCss, parseJson, parseScript, parseSvelte } from '@sveltejs/cli-core/parsers'; import { addSlot } from '@sveltejs/cli-core/html'; From 7fc1a979ae83df2f38b94abe25dfc4592c62dea0 Mon Sep 17 00:00:00 2001 From: jycouet Date: Thu, 23 Jan 2025 23:46:37 +0100 Subject: [PATCH 08/12] correct oklch (tmp only tailwind) --- .github/workflows/ci.yml | 2 +- packages/addons/_tests/tailwindcss/test.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 78e64e810..15512d42d 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -53,4 +53,4 @@ jobs: - run: pnpm install --frozen-lockfile - run: pnpm exec playwright install chromium - run: pnpm build - - run: pnpm test + - run: pnpm test tailwindcss diff --git a/packages/addons/_tests/tailwindcss/test.ts b/packages/addons/_tests/tailwindcss/test.ts index 46af8d343..b6492d015 100644 --- a/packages/addons/_tests/tailwindcss/test.ts +++ b/packages/addons/_tests/tailwindcss/test.ts @@ -17,7 +17,7 @@ test.concurrent.for(variants)('none - %s', async (variant, { page, ...ctx }) => const el = page.getByTestId('base'); await expect(el).toHaveCSS('background-color', 'oklch(0.446 0.043 257.281)'); - await expect(el).toHaveCSS('border-color', 'oklch(0.984 0.003 247.858)'); + await expect(el).toHaveCSS('border-color', 'oklch(0.985 0.002 247.839)'); await expect(el).toHaveCSS('border-width', '4px'); await expect(el).toHaveCSS('margin-top', '4px'); }); From e329e64edb29a291cc1fc84f933e9928b447a080 Mon Sep 17 00:00:00 2001 From: jycouet Date: Thu, 23 Jan 2025 23:48:52 +0100 Subject: [PATCH 09/12] back to all --- .github/workflows/ci.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 15512d42d..78e64e810 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -53,4 +53,4 @@ jobs: - run: pnpm install --frozen-lockfile - run: pnpm exec playwright install chromium - run: pnpm build - - run: pnpm test tailwindcss + - run: pnpm test From 041694467b2aeba01f6ecf53ae778a77cd5b6497 Mon Sep 17 00:00:00 2001 From: jycouet Date: Thu, 23 Jan 2025 23:50:03 +0100 Subject: [PATCH 10/12] =?UTF-8?q?typography=20without=20any=20plugin=20?= =?UTF-8?q?=E2=9C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/addons/_tests/tailwindcss/test.ts | 35 ++++++++++++---------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/packages/addons/_tests/tailwindcss/test.ts b/packages/addons/_tests/tailwindcss/test.ts index b6492d015..cd692cfa7 100644 --- a/packages/addons/_tests/tailwindcss/test.ts +++ b/packages/addons/_tests/tailwindcss/test.ts @@ -22,19 +22,22 @@ test.concurrent.for(variants)('none - %s', async (variant, { page, ...ctx }) => await expect(el).toHaveCSS('margin-top', '4px'); }); -test.concurrent.for(variants)('typography - %s', async (variant, { page, ...ctx }) => { - const cwd = await ctx.run(variant, { tailwindcss }); - - // ...add files - addFixture(cwd, variant); - - const { close } = await prepareServer({ cwd, page }); - // kill server process when we're done - ctx.onTestFinished(async () => await close()); - - const el = page.getByTestId('typography'); - await expect(el).toHaveCSS('font-size', '18px'); - await expect(el).toHaveCSS('line-height', '28px'); - await expect(el).toHaveCSS('text-align', 'right'); - await expect(el).toHaveCSS('text-decoration-line', 'line-through'); -}); +test.concurrent.for(variants)( + 'typography without plugin - %s', + async (variant, { page, ...ctx }) => { + const cwd = await ctx.run(variant, { tailwindcss }); + + // ...add files + addFixture(cwd, variant); + + const { close } = await prepareServer({ cwd, page }); + // kill server process when we're done + ctx.onTestFinished(async () => await close()); + + const el = page.getByTestId('typography'); + await expect(el).toHaveCSS('font-size', '18px'); + await expect(el).toHaveCSS('line-height', '28px'); + await expect(el).toHaveCSS('text-align', 'right'); + await expect(el).toHaveCSS('text-decoration-line', 'line-through'); + } +); From 41741834a671cc4977d3d6d632741ad3249faa4d Mon Sep 17 00:00:00 2001 From: "jyc.dev" Date: Fri, 31 Jan 2025 11:41:08 +0100 Subject: [PATCH 11/12] Update .changeset/empty-geese-draw.md Co-authored-by: CokaKoala <31664583+AdrianGonz97@users.noreply.github.com> --- .changeset/empty-geese-draw.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/empty-geese-draw.md b/.changeset/empty-geese-draw.md index 28a668ed8..2c2a1fbb3 100644 --- a/.changeset/empty-geese-draw.md +++ b/.changeset/empty-geese-draw.md @@ -1,5 +1,5 @@ --- -'@sveltejs/addons': patch +'sv': minor --- -using tailwindcss 4.0.0 +feat: update to `tailwindcss` v4.0.0 From 1d452b3f22a1ca3cd2af511a8bddab54e74e5050 Mon Sep 17 00:00:00 2001 From: Manuel <30698007+manuel3108@users.noreply.github.com> Date: Fri, 31 Jan 2025 14:47:38 +0100 Subject: [PATCH 12/12] Update .changeset/empty-geese-draw.md --- .changeset/empty-geese-draw.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/empty-geese-draw.md b/.changeset/empty-geese-draw.md index 2c2a1fbb3..893102b79 100644 --- a/.changeset/empty-geese-draw.md +++ b/.changeset/empty-geese-draw.md @@ -1,5 +1,5 @@ --- -'sv': minor +'sv': patch --- feat: update to `tailwindcss` v4.0.0