@sepagian/sv-unocss 0.0.1

package/README.md

@@ -0,0 +1,69 @@
+# [sv](https://svelte.dev/docs/cli/overview) community add-on: [@sepagian/sv-unocss](https://github.com/sepagian/sv-unocss)
+
+> [!IMPORTANT]
+> Svelte maintainers have not reviewed community add-ons for malicious code. Use at your discretion
+
+## Usage
+
+```shell
+npx sv add @sepagian/sv-unocss
+```
+
+Or with specific options:
+
+```shell
+npx sv add @sepagian/sv-unocss="presets:wind4,attributify,icons transformers:directives,variant-group extractors:svelte"
+```
+
+## What you get
+
+- **UnoCSS Vite plugin** (`unocss/vite`) added to `vite.config.ts`
+- **Svelte preprocessor** (`@unocss/svelte-scoped/preprocess`) added to `svelte.config.js` (SvelteKit only)
+- **`uno.config.ts`** generated based on your selected presets, transformers, and extractors
+- **`uno.css`** import in your root layout/component
+- **pnpm build-allow** configured for `lightningcss` (if using pnpm)
+
+## Options
+
+All options are optional — pick what you need.
+
+### `presets`
+
+| Value | Description | Package |
+|-------|-------------|---------|
+| `wind4` | Tailwind4 compact preset | built-in |
+| `wind3` | Tailwind/Windi CSS compact preset | built-in |
+| `mini` | Minimal essential rules | built-in |
+| `attributify` | Enable attributify mode | built-in |
+| `icons` | Pure CSS icons via Iconify | built-in |
+| `typography` | Typography utilities | built-in |
+| `web-fonts` | Web fonts (Google Fonts, etc.) | built-in |
+| `tagify` | Tagify mode | built-in |
+| `rem-to-px` | Converts rem to px | `@unocss/preset-rem-to-px` |
+| `legacy-compat` | Legacy browser compatibility | `@unocss/preset-legacy-compat` |
+
+### `transformers`
+
+| Value | Description | Package |
+|-------|-------------|---------|
+| `directives` | `@apply`, `@screen`, `theme()` support | built-in |
+| `variant-group` | `hover:(bg-red text-white)` syntax | built-in |
+| `compile-class` | `:uno:` compile class groups | built-in |
+| `attributify-jsx` | Valueless attributify in JSX/TSX | built-in |
+
+### `extractors`
+
+| Value | Description | Package |
+|-------|-------------|---------|
+| `svelte` | Extract from `class:` directive | `@unocss/extractor-svelte` |
+| `pug` | Extract from Pug templates | `@unocss/extractor-pug` |
+| `mdc` | Extract from Markdown Components | `@unocss/extractor-mdc` |
+
+## Requirements
+
+- SvelteKit or Vite-based Svelte project
+- `sv` CLI (peer dependency)
+
+## License
+
+MIT

package/dist/index.mjs

@@ -0,0 +1,269 @@
+import { pnpm as pnpm_exports, transforms } from "./sv-utils.mjs";
+import { defineAddon, defineAddonOptions } from "sv";
+//#region src/index.js
+const options = defineAddonOptions().add("presets", {
+	type: "multiselect",
+	question: "Which UnoCSS presets would you like to enable? (optional)",
+	options: [
+		{
+			value: "mini",
+			label: "Mini",
+			hint: "Minimal essential rules"
+		},
+		{
+			value: "wind3",
+			label: "Wind3",
+			hint: "Tailwind/Windi CSS compact preset"
+		},
+		{
+			value: "wind4",
+			label: "Wind4",
+			hint: "Tailwind4 compact preset"
+		},
+		{
+			value: "attributify",
+			label: "Attributify",
+			hint: "Enable attributify mode"
+		},
+		{
+			value: "tagify",
+			label: "Tagify",
+			hint: "Tagify mode"
+		},
+		{
+			value: "icons",
+			label: "Icons",
+			hint: "Pure CSS icons via Iconify"
+		},
+		{
+			value: "web-fonts",
+			label: "Web Fonts",
+			hint: "Web fonts (Google Fonts, etc.)"
+		},
+		{
+			value: "typography",
+			label: "Typography",
+			hint: "Typography utilities"
+		},
+		{
+			value: "rem-to-px",
+			label: "Rem to Px",
+			hint: "Converts rem to px"
+		},
+		{
+			value: "legacy-compat",
+			label: "Legacy Compat",
+			hint: "Legacy browser compatibility"
+		}
+	],
+	default: [],
+	required: false
+}).add("transformers", {
+	type: "multiselect",
+	question: "Which UnoCSS transformers would you like to enable? (optional)",
+	options: [
+		{
+			value: "variant-group",
+			label: "Variant Group",
+			hint: "hover:(bg-red text-white) syntax"
+		},
+		{
+			value: "directives",
+			label: "Directives",
+			hint: "@apply, @screen, theme() support"
+		},
+		{
+			value: "compile-class",
+			label: "Compile Class",
+			hint: ":uno: compile class groups"
+		},
+		{
+			value: "attributify-jsx",
+			label: "Attributify JSX",
+			hint: "Valueless attributify in JSX/TSX"
+		}
+	],
+	default: [],
+	required: false
+}).add("extractors", {
+	type: "multiselect",
+	question: "Which UnoCSS extractors would you like to enable? (optional)",
+	options: [
+		{
+			value: "pug",
+			label: "Pug",
+			hint: "Extract from Pug templates"
+		},
+		{
+			value: "mdc",
+			label: "MDC",
+			hint: "Extract from Markdown Components"
+		},
+		{
+			value: "svelte",
+			label: "Svelte",
+			hint: "Extract from class: directive"
+		}
+	],
+	default: [],
+	required: false
+}).build();
+const BUILTIN_IMPORTS = {
+	wind4: "presetWind4",
+	wind3: "presetWind3",
+	mini: "presetMini",
+	attributify: "presetAttributify",
+	icons: "presetIcons",
+	typography: "presetTypography",
+	"web-fonts": "presetWebFonts",
+	tagify: "presetTagify",
+	directives: "transformerDirectives",
+	"variant-group": "transformerVariantGroup",
+	"compile-class": "transformerCompileClass",
+	"attributify-jsx": "transformerAttributifyJsx"
+};
+const BUILTIN_CALLS = {
+	wind4: "presetWind4()",
+	wind3: "presetWind3()",
+	mini: "presetMini()",
+	attributify: "presetAttributify()",
+	icons: "presetIcons()",
+	typography: "presetTypography()",
+	"web-fonts": "presetWebFonts({ fonts: { /* ... */ } })",
+	tagify: "presetTagify()",
+	directives: "transformerDirectives()",
+	"variant-group": "transformerVariantGroup()",
+	"compile-class": "transformerCompileClass()",
+	"attributify-jsx": "transformerAttributifyJsx()"
+};
+const EXTERNAL_PACKAGES = {
+	"rem-to-px": {
+		pkg: "@unocss/preset-rem-to-px",
+		name: "presetRemToPx",
+		call: "presetRemToPx()"
+	},
+	"legacy-compat": {
+		pkg: "@unocss/preset-legacy-compat",
+		name: "presetLegacyCompat",
+		call: "presetLegacyCompat()"
+	},
+	svelte: {
+		pkg: "@unocss/extractor-svelte",
+		name: "extractorSvelte",
+		call: "extractorSvelte()"
+	},
+	pug: {
+		pkg: "@unocss/extractor-pug",
+		name: "extractorPug",
+		call: "extractorPug()"
+	},
+	mdc: {
+		pkg: "@unocss/extractor-mdc",
+		name: "extractorMdc",
+		call: "extractorMdc()"
+	}
+};
+function buildUnoConfig(selections) {
+	const presetKeys = selections.presets ?? [];
+	const transformerKeys = selections.transformers ?? [];
+	const extractorKeys = selections.extractors ?? [];
+	const unocssNamedImports = ["defineConfig"];
+	const externalImports = [];
+	const presetCalls = [];
+	const transformerCalls = [];
+	const extractorCalls = [];
+	for (const key of presetKeys) if (BUILTIN_IMPORTS[key]) {
+		unocssNamedImports.push(BUILTIN_IMPORTS[key]);
+		presetCalls.push(BUILTIN_CALLS[key]);
+	} else if (EXTERNAL_PACKAGES[key]) {
+		externalImports.push(`import ${EXTERNAL_PACKAGES[key].name} from '${EXTERNAL_PACKAGES[key].pkg}'`);
+		presetCalls.push(EXTERNAL_PACKAGES[key].call);
+	}
+	for (const key of transformerKeys) if (BUILTIN_IMPORTS[key]) {
+		unocssNamedImports.push(BUILTIN_IMPORTS[key]);
+		transformerCalls.push(BUILTIN_CALLS[key]);
+	}
+	for (const key of extractorKeys) if (EXTERNAL_PACKAGES[key]) {
+		externalImports.push(`import ${EXTERNAL_PACKAGES[key].name} from '${EXTERNAL_PACKAGES[key].pkg}'`);
+		extractorCalls.push(EXTERNAL_PACKAGES[key].call);
+	}
+	const lines = [];
+	if (unocssNamedImports.length > 1) lines.push(`import {\n\t${unocssNamedImports.join(",\n	")},\n} from 'unocss';\n`);
+	else lines.push("import { defineConfig } from 'unocss';\n");
+	for (const imp of externalImports) lines.push(`${imp}\n`);
+	lines.push("");
+	lines.push("export default defineConfig({");
+	if (presetCalls.length > 0) lines.push(`\tpresets: [\n\t\t${presetCalls.join(",\n		")},\n\t],`);
+	if (transformerCalls.length > 0) lines.push(`\ttransformers: [\n\t\t${transformerCalls.join(",\n		")},\n\t],`);
+	if (extractorCalls.length > 0) lines.push(`\textractors: [\n\t\t${extractorCalls.join(",\n		")},\n\t],`);
+	lines.push("});\n");
+	return lines.join("\n");
+}
+var src_default = defineAddon({
+	id: "@sepagian/sv-unocss",
+	shortDescription: "UnoCSS integration",
+	options,
+	run: ({ sv, options, file, isKit, directory, language, packageManager }) => {
+		sv.devDependency("unocss", "latest");
+		if (isKit) sv.devDependency("@unocss/svelte-scoped", "latest");
+		if (options.presets.includes("rem-to-px")) sv.devDependency("@unocss/preset-rem-to-px", "latest");
+		if (options.presets.includes("legacy-compat")) sv.devDependency("@unocss/preset-legacy-compat", "latest");
+		if (options.extractors.includes("svelte")) sv.devDependency("@unocss/extractor-svelte", "latest");
+		if (options.extractors.includes("pug")) sv.devDependency("@unocss/extractor-pug", "latest");
+		if (options.extractors.includes("mdc")) sv.devDependency("@unocss/extractor-mdc", "latest");
+		if (packageManager === "pnpm") sv.file(file.findUp("pnpm-workspace.yaml"), pnpm_exports.allowBuilds("lightningcss"));
+		sv.file("uno.config.ts", (content) => {
+			if (content.trim()) return content;
+			return buildUnoConfig(options);
+		});
+		sv.file(file.viteConfig, transforms.script(({ ast, js }) => {
+			js.imports.addDefault(ast, {
+				as: "UnoCSS",
+				from: "unocss/vite"
+			});
+			js.vite.addPlugin(ast, {
+				code: "UnoCSS()",
+				mode: "prepend"
+			});
+		}));
+		if (isKit) {
+			sv.file(file.svelteConfig, transforms.script(({ ast, js }) => {
+				js.imports.addDefault(ast, {
+					as: "UnoCSS",
+					from: "@unocss/svelte-scoped/preprocess"
+				});
+				const { value: exportDefault } = js.exports.createDefault(ast, { fallback: js.object.create({}) });
+				let preprocessorArray = js.object.property(exportDefault, {
+					name: "preprocess",
+					fallback: js.array.create()
+				});
+				if (preprocessorArray.type !== "ArrayExpression") {
+					const previousElement = preprocessorArray;
+					preprocessorArray = js.array.create();
+					js.array.append(preprocessorArray, previousElement);
+					js.object.overrideProperties(exportDefault, { preprocess: preprocessorArray });
+				}
+				const unocssCall = js.functions.createCall({
+					name: "UnoCSS",
+					args: []
+				});
+				unocssCall.arguments.push(js.object.create({
+					configOrPath: "./uno.config.ts",
+					exclude: ["./node_modules"]
+				}));
+				js.array.append(preprocessorArray, unocssCall);
+			}));
+			const layoutSvelte = `${directory.kitRoutes}/+layout.svelte`;
+			sv.file(layoutSvelte, transforms.svelteScript({ language }, ({ ast, js }) => {
+				js.imports.addEmpty(ast.instance.content, { from: "uno.css" });
+			}));
+		} else {
+			const appSvelte = `${directory.src}/App.svelte`;
+			sv.file(appSvelte, transforms.svelteScript({ language }, ({ ast, js }) => {
+				js.imports.addEmpty(ast.instance.content, { from: "uno.css" });
+			}));
+		}
+	}
+});
+//#endregion
+export { src_default as default };