tailwind-style-sheets 0.0.1 → 0.0.3

package/README.md

@@ -1,10 +1,10 @@
 # tailwind-style-sheets
 
-A Turbopack loader and Next.js plugin for `.twss` files — co-locate your Tailwind class maps alongside components.
+Use standard CSS class names in your components — `.twss` files map them to Tailwind utilities at build time.
 
 ## What it does
 
-`.twss` files use a CSS-like syntax to define named Tailwind class groups. Each class can be written on its own line — this is the preferred style as it keeps diffs clean and classes easy to scan:
+Define your class names and their Tailwind mappings in `.twss` files using familiar CSS syntax with `@apply`:
 
 ```css
 /* Button.styles.twss */
@@ -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
@@ -83,9 +76,10 @@ This scaffolds all required files and installs the package.
 npm install tailwind-style-sheets
 ```
 
-### `next.config.ts`
+### Next.js (Turbopack)
 
 ```ts
+// next.config.ts
 import type { NextConfig } from "next";
 import path from "path";
 import { withTwssPlugin } from "tailwind-style-sheets";
@@ -107,6 +101,22 @@ export default withTwssPlugin(nextConfig, {
 
 Both options are optional. Omitting them disables the HMR watcher (the loader still works).
 
+### Vite
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+import { twssVitePlugin } from "tailwind-style-sheets/vite";
+
+export default defineConfig({
+  plugins: [react(), tailwindcss(), twssVitePlugin()],
+});
+```
+
+The Vite plugin transforms `.twss` files and handles HMR automatically — no additional options needed.
+
 ### TypeScript
 
 Add a declaration file so TypeScript knows `.twss` imports return `Record<string, string>`:
@@ -133,9 +143,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/chunk-OFTF64MC.mjs

@@ -0,0 +1,31 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+export {
+  __spreadValues,
+  __spreadProps,
+  __require
+};

package/dist/index.d.mts

@@ -0,0 +1,38 @@
+import { NextConfig } from 'next';
+import { modcn } from 'modcn';
+
+interface TwssPluginOptions {
+    /**
+     * Absolute path to your global CSS file (e.g. `src/app/globals.css`).
+     * Touched on `.twss` file changes to trigger Tailwind's class scan and HMR.
+     */
+    globalsCSS?: string;
+    /**
+     * Directory to watch recursively for `.twss` file changes.
+     * Only active in `development`. Omit to disable the HMR watcher.
+     */
+    watchDir?: string;
+}
+/**
+ * Next.js plugin that enables `.twss` file imports as Tailwind class maps.
+ *
+ * Registers the Turbopack loader for `*.twss` files and, in development,
+ * watches `watchDir` for changes — touching `globalsCSS` on each change
+ * so Next.js re-runs Tailwind's class scan and hot-reloads styles.
+ *
+ * @example
+ * // next.config.ts
+ * import path from "path";
+ * import { withTwssPlugin } from "tailwind-style-sheets";
+ *
+ * export default withTwssPlugin({}, {
+ *   globalsCSS: path.resolve(__dirname, "src/app/globals.css"),
+ *   watchDir: path.resolve(__dirname, "src"),
+ * });
+ */
+declare function withTwssPlugin(nextConfig: NextConfig, options?: TwssPluginOptions): NextConfig;
+
+type StylesMap = Record<string, string>;
+declare function twcn(styles: StylesMap): (...inputs: Parameters<ReturnType<typeof modcn>>) => string;
+
+export { type TwssPluginOptions, twcn, withTwssPlugin };

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/index.mjs

@@ -0,0 +1,42 @@
+import {
+  __require,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-OFTF64MC.mjs";
+
+// src/plugin.ts
+import fs from "fs";
+function withTwssPlugin(nextConfig, options = {}) {
+  var _a;
+  const { globalsCSS, watchDir } = options;
+  if (process.env.NODE_ENV === "development" && globalsCSS && watchDir) {
+    fs.watch(watchDir, { recursive: true }, (_, filename) => {
+      if (filename == null ? void 0 : filename.endsWith(".twss")) {
+        const now = /* @__PURE__ */ new Date();
+        fs.utimesSync(globalsCSS, now, now);
+      }
+    });
+  }
+  return __spreadProps(__spreadValues({}, nextConfig), {
+    turbopack: __spreadProps(__spreadValues({}, nextConfig.turbopack), {
+      rules: __spreadProps(__spreadValues({}, (_a = nextConfig.turbopack) == null ? void 0 : _a.rules), {
+        "*.twss": {
+          loaders: [__require.resolve("./loader")],
+          as: "*.js"
+        }
+      })
+    })
+  });
+}
+
+// src/twcn.ts
+import { modcn } from "modcn";
+import { twMerge } from "tailwind-merge";
+function twcn(styles) {
+  const cn = modcn(styles);
+  return (...inputs) => twMerge(cn(...inputs));
+}
+export {
+  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,39 @@
+import "./chunk-OFTF64MC.mjs";
+
+// 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.3",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "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/index.ts", "src/vite.ts"],
+    format: ["esm"],
+    external: ["vite"],
+    dts: true,
   },
   {
     entry: ["src/cli.ts"],