tailwind-preset-mantine 2.0.0-beta.2 → 2.0.0-beta.3

package/README.md

@@ -96,13 +96,13 @@ npx tailwind-preset-mantine theme.js -o theme.css
 ```
 
 Options:
-- `-o, --output`: Output file name (default: "theme.css")
-- `-w, --watch`: Watch for changes (coming soon)
+- `-o, --output`: Output file name/location (default: "theme.css")
 
 3. Import the generated CSS file in your application:
 
 ```css
-@import "./theme.css";
+@import "tailwind-preset-mantine";
+@import "./theme.css"; /* <-- add the generated theme */
 ```
 
 ## Minimal template

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-preset-mantine",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.3",
   "description": "Integrate Mantine with Tailwind CSS",
   "keywords": [
     "mantine",

package/src/cli.js

@@ -1,4 +1,5 @@
-#!/usr/bin/env -S npx tsx
+#!/usr/bin/env node
+import "tsx";
 
 import { writeFile } from "node:fs/promises";
 import { resolve } from "node:path";
@@ -15,12 +16,6 @@ const options = {
 		default: "theme.css",
 		description: "Output file name",
 	},
-	watch: {
-		type: "boolean",
-		short: "w",
-		default: false,
-		description: "Watch for changes",
-	},
 };
 
 // Parse command line arguments
@@ -34,11 +29,6 @@ if (positionals.length === 0) {
 const inputFile = positionals[0];
 const outputFile = values.output;
 
-if (values.watch) {
-	console.log(`Watching ${inputFile} for changes...`);
-	// TODO: Implement file watching
-}
-
 try {
 	// Read the input theme file
 	const themePath = resolve(pwd, inputFile);

package/src/generate.js

@@ -143,7 +143,7 @@ ${isDefault ? '@custom-variant dark (&:where([data-mantine-color-scheme="dark"],
 	}
 
   /* colors - all */
-  ${Object.keys(theme.colors)
+  ${Object.keys(theme.colors ?? {})
 		.map((key) =>
 			`
   --color-${key}-50: rgb(from var(--mantine-color-${key}-0) r g b / <alpha-value>);
@@ -162,7 +162,7 @@ ${isDefault ? '@custom-variant dark (&:where([data-mantine-color-scheme="dark"],
 		.join("\n")}
 
   /* colors - variant specific */
-  ${Object.keys(theme.colors)
+  ${Object.keys(theme.colors ?? {})
 		.map((key) =>
 			`
   --color-${key}-filled: rgb(from var(--mantine-color-${key}-filled) r g b / <alpha-value>);
@@ -177,7 +177,7 @@ ${isDefault ? '@custom-variant dark (&:where([data-mantine-color-scheme="dark"],
 		.join("\n")}
 
   /* breakpoints */
-  ${Object.entries(theme.breakpoints)
+  ${Object.entries(theme.breakpoints ?? {})
 		.map(([key, value]) =>
 			`
   --breakpoint-${key}: ${value};

package/test/cli.test.js

@@ -97,6 +97,12 @@ test("processes custom TS theme", async (t) => {
 	await testThemeGeneration(inputPath, "custom-theme-ts-output.css");
 });
 
+// Test: CLI should process CJS theme
+test("processes CJS theme", async (t) => {
+	const inputPath = join(FIXTURES_DIR, "cjs-theme.cjs");
+	await testThemeGeneration(inputPath, "cjs-theme-output.css");
+});
+
 // Test: CLI should handle custom output path
 test("handles custom output path with --output flag", async (t) => {
 	const inputPath = join(FIXTURES_DIR, "default-theme.js");

package/test/fixtures/cjs-theme.cjs

@@ -0,0 +1,18 @@
+const { createTheme } = require("@mantine/core");
+
+module.exports = createTheme({
+	colors: {
+		"deep-red": [
+			"#ffeaec",
+			"#fcd4d7",
+			"#f4a7ac",
+			"#ec777e",
+			"#e64f57",
+			"#e3353f",
+			"#e22732",
+			"#c91a25",
+			"#b41220",
+			"#9e0419",
+		],
+	},
+});