From 2a1003b1c33882d09be73d1ef5de474f446f6bad Mon Sep 17 00:00:00 2001 From: Manuel Serret Date: Tue, 15 Oct 2024 19:51:21 +0200 Subject: [PATCH 1/5] feat: tailwindcss plugins --- .changeset/stupid-parents-grin.md | 5 +++ packages/adders/tailwindcss/index.ts | 47 +++++++++++++++++++++------- 2 files changed, 41 insertions(+), 11 deletions(-) create mode 100644 .changeset/stupid-parents-grin.md diff --git a/.changeset/stupid-parents-grin.md b/.changeset/stupid-parents-grin.md new file mode 100644 index 00000000..50e47805 --- /dev/null +++ b/.changeset/stupid-parents-grin.md @@ -0,0 +1,5 @@ +--- +'sv': patch +--- + +feat: tailwindcss plugins diff --git a/packages/adders/tailwindcss/index.ts b/packages/adders/tailwindcss/index.ts index 63c9a595..5352f3f5 100644 --- a/packages/adders/tailwindcss/index.ts +++ b/packages/adders/tailwindcss/index.ts @@ -4,11 +4,34 @@ import { array, common, exports, functions, imports, object } from '@sveltejs/cl import { parseCss, parseScript, parseJson, parseSvelte } from '@sveltejs/cli-core/parsers'; import { addSlot } from '@sveltejs/cli-core/html'; +type Plugin = { + id: string; + name: string; + package: string; + version: string; +}; +const plugins: Plugin[] = [ + { id: 'typography', name: 'Typography', package: '@tailwindcss/typography', version: '^0.5.15' }, + { id: 'forms', name: 'Forms', package: '@tailwindcss/forms', version: '^0.5.9' }, + { + id: 'container-queries', + name: 'Container queris', + package: '@tailwindcss/container-queries', + version: '^0.1.1' + }, + { + id: 'aspect-ratio', + name: 'Aspect ratio', + package: '@tailwindcss/aspect-ratio', + version: '^0.4.2' + } +]; + export const options = defineAdderOptions({ plugins: { type: 'multiselect', question: 'Which plugins would you like to add?', - options: [{ value: 'typography', label: 'Typography' }], + options: plugins.map((x) => ({ value: x.id, label: x.name })), default: [] } }); @@ -22,18 +45,18 @@ export default defineAdder({ packages: [ { name: 'tailwindcss', version: '^3.4.9', dev: true }, { name: 'autoprefixer', version: '^10.4.20', dev: true }, - { - name: '@tailwindcss/typography', - version: '^0.5.14', - dev: true, - condition: ({ options }) => options.plugins.includes('typography') - }, { name: 'prettier-plugin-tailwindcss', version: '^0.6.5', dev: true, condition: ({ dependencyVersion }) => Boolean(dependencyVersion('prettier')) - } + }, + ...plugins.map((x) => ({ + name: x.package, + version: x.version, + dev: true, + condition: ({ options }) => options.plugins.includes(x.id) + })) ], files: [ { @@ -60,9 +83,11 @@ export default defineAdder({ const pluginsArray = object.property(rootExport, 'plugins', array.createEmpty()); - if (options.plugins.includes('typography')) { - const requireCall = functions.call('require', ['@tailwindcss/typography']); - array.push(pluginsArray, requireCall); + for (const plugin of plugins) { + if (options.plugins.includes(plugin.id)) { + const requireCall = functions.call('require', [plugin.package]); + array.push(pluginsArray, requireCall); + } } return generateCode(); From 302cc2cfa670ea3285f56a16c189bf637c46b39b Mon Sep 17 00:00:00 2001 From: AdrianGonz97 <31664583+AdrianGonz97@users.noreply.github.com> Date: Tue, 15 Oct 2024 14:51:11 -0400 Subject: [PATCH 2/5] use esm syntax --- packages/adders/tailwindcss/index.ts | 35 +++++++++++++++------------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/packages/adders/tailwindcss/index.ts b/packages/adders/tailwindcss/index.ts index 5352f3f5..3bee323a 100644 --- a/packages/adders/tailwindcss/index.ts +++ b/packages/adders/tailwindcss/index.ts @@ -1,6 +1,6 @@ -import { defineAdder, defineAdderOptions } from '@sveltejs/cli-core'; +import { defineAdder, defineAdderOptions, type PackageDefinition } from '@sveltejs/cli-core'; import { addImports } from '@sveltejs/cli-core/css'; -import { array, common, exports, functions, imports, object } from '@sveltejs/cli-core/js'; +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'; @@ -10,23 +10,31 @@ type Plugin = { package: string; version: string; }; + const plugins: Plugin[] = [ { id: 'typography', name: 'Typography', package: '@tailwindcss/typography', version: '^0.5.15' }, { id: 'forms', name: 'Forms', package: '@tailwindcss/forms', version: '^0.5.9' }, { - id: 'container-queries', - name: 'Container queris', + id: 'containerQueries', + name: 'Container queries', package: '@tailwindcss/container-queries', version: '^0.1.1' }, { - id: 'aspect-ratio', + id: 'aspectRatio', name: 'Aspect ratio', package: '@tailwindcss/aspect-ratio', version: '^0.4.2' } ]; +const pluginPackages: Array> = plugins.map((x) => ({ + name: x.package, + version: x.version, + dev: true, + condition: ({ options }) => options.plugins.includes(x.id) +})); + export const options = defineAdderOptions({ plugins: { type: 'multiselect', @@ -51,12 +59,7 @@ export default defineAdder({ dev: true, condition: ({ dependencyVersion }) => Boolean(dependencyVersion('prettier')) }, - ...plugins.map((x) => ({ - name: x.package, - version: x.version, - dev: true, - condition: ({ options }) => options.plugins.includes(x.id) - })) + ...pluginPackages ], files: [ { @@ -72,8 +75,9 @@ export default defineAdder({ const { astNode: exportDeclaration } = exports.defaultExport(ast, root ?? rootExport); - if (!typescript) + if (!typescript) { common.addJsDocTypeComment(exportDeclaration, "import('tailwindcss').Config"); + } const contentArray = object.property(rootExport, 'content', array.createEmpty()); array.push(contentArray, './src/**/*.{html,js,svelte,ts}'); @@ -84,10 +88,9 @@ export default defineAdder({ const pluginsArray = object.property(rootExport, 'plugins', array.createEmpty()); for (const plugin of plugins) { - if (options.plugins.includes(plugin.id)) { - const requireCall = functions.call('require', [plugin.package]); - array.push(pluginsArray, requireCall); - } + if (!options.plugins.includes(plugin.id)) continue; + imports.addDefault(ast, plugin.package, plugin.id); + array.push(pluginsArray, { type: 'Identifier', name: plugin.id }); } return generateCode(); From 3ba7b1b97e4c3660a6ebd7477f672ab5a1348a48 Mon Sep 17 00:00:00 2001 From: AdrianGonz97 <31664583+AdrianGonz97@users.noreply.github.com> Date: Tue, 15 Oct 2024 14:57:16 -0400 Subject: [PATCH 3/5] add identifier prop --- packages/adders/tailwindcss/index.ts | 31 +++++++++++++++++++++------- 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/packages/adders/tailwindcss/index.ts b/packages/adders/tailwindcss/index.ts index 3bee323a..ac7db717 100644 --- a/packages/adders/tailwindcss/index.ts +++ b/packages/adders/tailwindcss/index.ts @@ -9,22 +9,37 @@ type Plugin = { name: string; package: string; version: string; + identifier: string; }; const plugins: Plugin[] = [ - { id: 'typography', name: 'Typography', package: '@tailwindcss/typography', version: '^0.5.15' }, - { id: 'forms', name: 'Forms', package: '@tailwindcss/forms', version: '^0.5.9' }, { - id: 'containerQueries', + id: 'typography', + name: 'Typography', + package: '@tailwindcss/typography', + version: '^0.5.15', + identifier: 'typography' + }, + { + id: 'forms', + name: 'Forms', + package: '@tailwindcss/forms', + version: '^0.5.9', + identifier: 'forms' + }, + { + id: 'container-queries', name: 'Container queries', package: '@tailwindcss/container-queries', - version: '^0.1.1' + version: '^0.1.1', + identifier: 'containerQueries' }, { - id: 'aspectRatio', + id: 'aspect-ratio', name: 'Aspect ratio', package: '@tailwindcss/aspect-ratio', - version: '^0.4.2' + version: '^0.4.2', + identifier: 'aspectRatio' } ]; @@ -89,8 +104,8 @@ export default defineAdder({ for (const plugin of plugins) { if (!options.plugins.includes(plugin.id)) continue; - imports.addDefault(ast, plugin.package, plugin.id); - array.push(pluginsArray, { type: 'Identifier', name: plugin.id }); + imports.addDefault(ast, plugin.package, plugin.identifier); + array.push(pluginsArray, { type: 'Identifier', name: plugin.identifier }); } return generateCode(); From 9729c7620a43c51a202b5aa592df74b79673264c Mon Sep 17 00:00:00 2001 From: AdrianGonz97 <31664583+AdrianGonz97@users.noreply.github.com> Date: Tue, 15 Oct 2024 18:49:00 -0400 Subject: [PATCH 4/5] remove name --- packages/adders/tailwindcss/index.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/adders/tailwindcss/index.ts b/packages/adders/tailwindcss/index.ts index ac7db717..a16220fb 100644 --- a/packages/adders/tailwindcss/index.ts +++ b/packages/adders/tailwindcss/index.ts @@ -6,7 +6,6 @@ import { addSlot } from '@sveltejs/cli-core/html'; type Plugin = { id: string; - name: string; package: string; version: string; identifier: string; @@ -15,28 +14,24 @@ type Plugin = { const plugins: Plugin[] = [ { id: 'typography', - name: 'Typography', package: '@tailwindcss/typography', version: '^0.5.15', identifier: 'typography' }, { id: 'forms', - name: 'Forms', package: '@tailwindcss/forms', version: '^0.5.9', identifier: 'forms' }, { id: 'container-queries', - name: 'Container queries', package: '@tailwindcss/container-queries', version: '^0.1.1', identifier: 'containerQueries' }, { id: 'aspect-ratio', - name: 'Aspect ratio', package: '@tailwindcss/aspect-ratio', version: '^0.4.2', identifier: 'aspectRatio' @@ -54,7 +49,7 @@ export const options = defineAdderOptions({ plugins: { type: 'multiselect', question: 'Which plugins would you like to add?', - options: plugins.map((x) => ({ value: x.id, label: x.name })), + options: plugins.map((x) => ({ value: x.id, label: x.id })), default: [] } }); From a329f52795b83b8045d81945a7ee98bb2aecce56 Mon Sep 17 00:00:00 2001 From: AdrianGonz97 <31664583+AdrianGonz97@users.noreply.github.com> Date: Tue, 15 Oct 2024 18:59:52 -0400 Subject: [PATCH 5/5] fix issue where plugins weren't being added after initial execution --- packages/adders/tailwindcss/index.ts | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/adders/tailwindcss/index.ts b/packages/adders/tailwindcss/index.ts index a16220fb..aded2740 100644 --- a/packages/adders/tailwindcss/index.ts +++ b/packages/adders/tailwindcss/index.ts @@ -1,6 +1,6 @@ import { defineAdder, defineAdderOptions, type PackageDefinition } from '@sveltejs/cli-core'; import { addImports } from '@sveltejs/cli-core/css'; -import { array, common, exports, imports, object } from '@sveltejs/cli-core/js'; +import { array, common, exports, imports, object, type AstTypes } from '@sveltejs/cli-core/js'; import { parseCss, parseScript, parseJson, parseSvelte } from '@sveltejs/cli-core/parsers'; import { addSlot } from '@sveltejs/cli-core/html'; @@ -49,7 +49,7 @@ export const options = defineAdderOptions({ plugins: { type: 'multiselect', question: 'Which plugins would you like to add?', - options: plugins.map((x) => ({ value: x.id, label: x.id })), + options: plugins.map((p) => ({ value: p.id, label: p.id, hint: p.package })), default: [] } }); @@ -83,19 +83,26 @@ export default defineAdder({ root = common.typeAnnotateExpression(rootExport, 'Config'); } - const { astNode: exportDeclaration } = exports.defaultExport(ast, root ?? rootExport); + const { astNode: exportDeclaration, value: node } = exports.defaultExport( + ast, + root ?? rootExport + ); + + const config = ( + node.type === 'TSAsExpression' ? node.expression : node + ) as AstTypes.ObjectExpression; if (!typescript) { common.addJsDocTypeComment(exportDeclaration, "import('tailwindcss').Config"); } - const contentArray = object.property(rootExport, 'content', array.createEmpty()); + const contentArray = object.property(config, 'content', array.createEmpty()); array.push(contentArray, './src/**/*.{html,js,svelte,ts}'); - const themeObject = object.property(rootExport, 'theme', object.createEmpty()); + const themeObject = object.property(config, 'theme', object.createEmpty()); object.property(themeObject, 'extend', object.createEmpty()); - const pluginsArray = object.property(rootExport, 'plugins', array.createEmpty()); + const pluginsArray = object.property(config, 'plugins', array.createEmpty()); for (const plugin of plugins) { if (!options.plugins.includes(plugin.id)) continue;