tailwind-style-sheets 0.0.1 → 0.0.2

package/README.md

@@ -1,6 +1,6 @@
 # tailwind-style-sheets
 
-A Turbopack loader and Next.js plugin for `.twss` files — co-locate your Tailwind class maps alongside components.
+Co-locate Tailwind class maps alongside components using `.twss` files — a CSS-like syntax that pairs with a Turbopack loader and Next.js plugin.
 
 ## What it does
 
@@ -43,22 +43,13 @@ Inline is also valid:
 }
 ```
 
-Importing a `.twss` file gives you a plain object:
-
-```ts
-import styles from "./Button.styles.twss";
-// styles.button          → "cursor-pointer px-4 py-2 rounded-full text-sm font-medium transition-all active:scale-95"
-// styles["button--primary"] → "bg-blue-600 text-white hover:bg-blue-700"
-// styles["button--ghost"]   → "bg-transparent text-blue-600 hover:bg-blue-50"
-```
-
-Pair it with [`@michalshelenberg/modcn`](https://www.npmjs.com/package/@michalshelenberg/modcn) to compose BEM classes ergonomically:
+## Usage
 
 ```tsx
-import { modcn } from "@michalshelenberg/modcn";
+import { twcn } from "tailwind-style-sheets";
 import styles from "./Button.styles.twss";
 
-const cn = modcn(styles);
+const cn = twcn(styles);
 
 export function Button({ variant = "primary", className, children, ...props }) {
   return (
@@ -69,6 +60,8 @@ export function Button({ variant = "primary", className, children, ...props }) {
 }
 ```
 
+`twcn` takes the imported styles object, and returns a function that resolves class names with `tailwind-merge` — pass it style keys, modifiers, and an optional `className` override.
+
 ## Installation
 
 ```bash
@@ -133,9 +126,3 @@ Add to `.vscode/settings.json` to get CSS syntax highlighting and silence the `@
   }
 }
 ```
-
-## How it works
-
-1. **Loader** (`loader.ts`) — Turbopack passes the raw `.twss` file content through the loader. A regex extracts each `.className { @apply ... }` block and converts it to `export default { className: "class1 class2 ..." }`.
-
-2. **HMR watcher** (`plugin.ts`) — In development, `fs.watch` monitors `watchDir` for `.twss` changes. When a change is detected, it touches `globalsCSS`, which causes Next.js to re-run Tailwind's class scan and hot-reload styles.

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { NextConfig } from 'next';
+import { modcn } from 'modcn';
 
 interface TwssPluginOptions {
     /**
@@ -31,4 +32,7 @@ interface TwssPluginOptions {
  */
 declare function withTwssPlugin(nextConfig: NextConfig, options?: TwssPluginOptions): NextConfig;
 
-export { type TwssPluginOptions, withTwssPlugin };
+type StylesMap = Record<string, string>;
+declare function twcn(styles: StylesMap): (...inputs: Parameters<ReturnType<typeof modcn>>) => string;
+
+export { type TwssPluginOptions, twcn, withTwssPlugin };

package/dist/index.js

@@ -47,6 +47,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  twcn: () => twcn,
   withTwssPlugin: () => withTwssPlugin
 });
 module.exports = __toCommonJS(index_exports);
@@ -75,7 +76,16 @@ function withTwssPlugin(nextConfig, options = {}) {
     })
   });
 }
+
+// src/twcn.ts
+var import_modcn = require("modcn");
+var import_tailwind_merge = require("tailwind-merge");
+function twcn(styles) {
+  const cn = (0, import_modcn.modcn)(styles);
+  return (...inputs) => (0, import_tailwind_merge.twMerge)(cn(...inputs));
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  twcn,
   withTwssPlugin
 });

package/dist/loader.js

@@ -1,14 +1,43 @@
 "use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/loader.ts
+var loader_exports = {};
+__export(loader_exports, {
+  default: () => loader_default
+});
+module.exports = __toCommonJS(loader_exports);
+
+// src/parse.ts
 var BLOCK_REGEX = /\.(\w[\w-]*)\s*\{\s*@apply\s+([\s\S]*?)\s*\}/g;
-var twssLoader = function(source) {
+function parseTwss(source) {
   const styles = {};
   let match;
   while ((match = BLOCK_REGEX.exec(source)) !== null) {
     const [, className, classes] = match;
     styles[className] = classes.trim().replace(/\s+/g, " ");
   }
-  return `export default ${JSON.stringify(styles)};`;
+  return styles;
+}
+
+// src/loader.ts
+var twssLoader = function(source) {
+  return `export default ${JSON.stringify(parseTwss(source))};`;
 };
-module.exports = twssLoader;
+var loader_default = twssLoader;

package/dist/vite.d.mts

@@ -0,0 +1,5 @@
+import { Plugin } from 'vite';
+
+declare function twssVitePlugin(): Plugin;
+
+export { twssVitePlugin };

package/dist/vite.mjs

@@ -0,0 +1,37 @@
+// src/parse.ts
+var BLOCK_REGEX = /\.(\w[\w-]*)\s*\{\s*@apply\s+([\s\S]*?)\s*\}/g;
+function parseTwss(source) {
+  const styles = {};
+  let match;
+  while ((match = BLOCK_REGEX.exec(source)) !== null) {
+    const [, className, classes] = match;
+    styles[className] = classes.trim().replace(/\s+/g, " ");
+  }
+  return styles;
+}
+
+// src/vite-plugin.ts
+function twssVitePlugin() {
+  return {
+    name: "tailwind-style-sheets",
+    transform(code, id) {
+      if (!id.endsWith(".twss")) return null;
+      const styles = parseTwss(code);
+      return {
+        code: `export default ${JSON.stringify(styles)};`,
+        map: null
+      };
+    },
+    handleHotUpdate({ file, server }) {
+      if (!file.endsWith(".twss")) return;
+      const mod = server.moduleGraph.getModuleById(file);
+      if (mod) {
+        server.moduleGraph.invalidateModule(mod);
+        server.hot.send({ type: "full-reload" });
+      }
+    }
+  };
+}
+export {
+  twssVitePlugin
+};

package/package.json

@@ -1,17 +1,37 @@
 {
   "name": "tailwind-style-sheets",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./vite": {
+      "types": "./dist/vite.d.mts",
+      "import": "./dist/vite.mjs"
+    }
+  },
   "bin": {
     "tailwind-style-sheets": "./dist/cli.js"
   },
   "scripts": {
-    "build": "tsup",
+    "build": "rm -rf dist && tsup",
     "dev": "tsup --watch"
   },
+  "dependencies": {
+    "tailwind-merge": "^3.5.0"
+  },
   "peerDependencies": {
-    "next": ">=15"
+    "modcn": "^0.0.1",
+    "next": ">=15",
+    "vite": ">=5"
+  },
+  "peerDependenciesMeta": {
+    "next": { "optional": true },
+    "vite": { "optional": true }
   },
   "publishConfig": {
     "access": "public"
@@ -20,6 +40,7 @@
     "@types/node": "^20",
     "next": "16.2.1",
     "tsup": "^8.5.1",
-    "typescript": "^5"
+    "typescript": "^5",
+    "vite": "^8.0.1"
   }
 }

package/src/index.ts

@@ -1,2 +1,3 @@
 export { withTwssPlugin } from "./plugin";
 export type { TwssPluginOptions } from "./plugin";
+export { twcn } from "./twcn";

package/src/loader.ts

@@ -15,18 +15,10 @@
  * Output (JS module):
  *   export default { base: "px-4 py-2 rounded font-semibold", primary: "bg-blue-600 text-white hover:bg-blue-700" }
  */
-const BLOCK_REGEX = /\.(\w[\w-]*)\s*\{\s*@apply\s+([\s\S]*?)\s*\}/g;
+import { parseTwss } from "./parse";
 
 const twssLoader: (source: string) => string = function (source) {
-  const styles: Record<string, string> = {};
-
-  let match: RegExpExecArray | null;
-  while ((match = BLOCK_REGEX.exec(source)) !== null) {
-    const [, className, classes] = match;
-    styles[className] = classes.trim().replace(/\s+/g, " ");
-  }
-
-  return `export default ${JSON.stringify(styles)};`;
+  return `export default ${JSON.stringify(parseTwss(source))};`;
 };
 
-export = twssLoader;
+export default twssLoader;

package/src/parse.ts

@@ -0,0 +1,13 @@
+const BLOCK_REGEX = /\.(\w[\w-]*)\s*\{\s*@apply\s+([\s\S]*?)\s*\}/g;
+
+export function parseTwss(source: string): Record<string, string> {
+  const styles: Record<string, string> = {};
+
+  let match: RegExpExecArray | null;
+  while ((match = BLOCK_REGEX.exec(source)) !== null) {
+    const [, className, classes] = match;
+    styles[className] = classes.trim().replace(/\s+/g, " ");
+  }
+
+  return styles;
+}

package/src/twcn.ts

@@ -0,0 +1,10 @@
+import { modcn } from "modcn";
+import { twMerge } from "tailwind-merge";
+
+type StylesMap = Record<string, string>;
+
+export function twcn(styles: StylesMap) {
+  const cn = modcn(styles);
+  return (...inputs: Parameters<ReturnType<typeof modcn>>) =>
+    twMerge(cn(...inputs));
+}

package/src/vite-plugin.ts

@@ -0,0 +1,28 @@
+import { parseTwss } from "./parse";
+import type { Plugin } from "vite";
+
+export function twssVitePlugin(): Plugin {
+  return {
+    name: "tailwind-style-sheets",
+
+    transform(code, id) {
+      if (!id.endsWith(".twss")) return null;
+
+      const styles = parseTwss(code);
+      return {
+        code: `export default ${JSON.stringify(styles)};`,
+        map: null,
+      };
+    },
+
+    handleHotUpdate({ file, server }) {
+      if (!file.endsWith(".twss")) return;
+
+      const mod = server.moduleGraph.getModuleById(file);
+      if (mod) {
+        server.moduleGraph.invalidateModule(mod);
+        server.hot.send({ type: "full-reload" });
+      }
+    },
+  };
+}

package/src/vite.ts

@@ -0,0 +1 @@
+export { twssVitePlugin } from "./vite-plugin";

package/tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "module": "commonjs",
-    "moduleResolution": "node",
+    "module": "esnext",
+    "moduleResolution": "bundler",
     "skipLibCheck": true,
     "strict": true,
     "esModuleInterop": true,

package/tsup.config.ts

@@ -6,7 +6,12 @@ export default defineConfig([
     format: ["cjs"],
     external: ["./loader"],
     dts: true,
-    clean: true,
+  },
+  {
+    entry: ["src/vite.ts"],
+    format: ["esm"],
+    external: ["vite"],
+    dts: true,
   },
   {
     entry: ["src/cli.ts"],