tailwind-style-sheets 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Michal Shelenberg
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,141 @@
+# tailwind-style-sheets
+
+A Turbopack loader and Next.js plugin for `.twss` files — co-locate your Tailwind class maps alongside components.
+
+## 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:
+
+```css
+/* Button.styles.twss */
+.button {
+  @apply
+  cursor-pointer
+  px-4
+  py-2
+  rounded-full
+  text-sm
+  font-medium
+  transition-all
+  active:scale-95
+}
+
+.button--primary {
+  @apply
+  bg-blue-600
+  text-white
+  hover:bg-blue-700
+}
+
+.button--ghost {
+  @apply
+  bg-transparent
+  text-blue-600
+  hover:bg-blue-50
+}
+```
+
+Inline is also valid:
+
+```css
+.button {
+  @apply cursor-pointer px-4 py-2 rounded-full text-sm font-medium transition-all active:scale-95
+}
+```
+
+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:
+
+```tsx
+import { modcn } from "@michalshelenberg/modcn";
+import styles from "./Button.styles.twss";
+
+const cn = modcn(styles);
+
+export function Button({ variant = "primary", className, children, ...props }) {
+  return (
+    <button {...props} className={cn("button", `button--${variant}`, className)}>
+      {children}
+    </button>
+  );
+}
+```
+
+## Installation
+
+```bash
+npx tailwind-style-sheets init
+```
+
+This scaffolds all required files and installs the package.
+
+## Manual installation
+
+```bash
+npm install tailwind-style-sheets
+```
+
+### `next.config.ts`
+
+```ts
+import type { NextConfig } from "next";
+import path from "path";
+import { withTwssPlugin } from "tailwind-style-sheets";
+
+const nextConfig: NextConfig = {};
+
+export default withTwssPlugin(nextConfig, {
+  globalsCSS: path.resolve(__dirname, "src/app/globals.css"),
+  watchDir: path.resolve(__dirname, "src"),
+});
+```
+
+`withTwssPlugin` options:
+
+| Option       | Type     | Description                                                                          |
+| ------------ | -------- | ------------------------------------------------------------------------------------ |
+| `globalsCSS` | `string` | Absolute path to your global CSS file. Touched on `.twss` changes to trigger HMR.   |
+| `watchDir`   | `string` | Directory to watch recursively for `.twss` file changes. Only active in development. |
+
+Both options are optional. Omitting them disables the HMR watcher (the loader still works).
+
+### TypeScript
+
+Add a declaration file so TypeScript knows `.twss` imports return `Record<string, string>`:
+
+```ts
+// global.d.ts
+declare module "*.twss" {
+  const styles: Record<string, string>;
+  export default styles;
+}
+```
+
+### VSCode
+
+Install the [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension to get Tailwind class autocomplete and hover previews inside `.twss` files.
+
+Add to `.vscode/settings.json` to get CSS syntax highlighting and silence the `@apply` warning:
+
+```json
+{
+  "css.lint.unknownAtRules": "ignore",
+  "files.associations": {
+    "*.twss": "css"
+  }
+}
+```
+
+## 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/cli.js

@@ -0,0 +1,121 @@
+#!/usr/bin/env node
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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 __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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/cli.ts
+var import_fs = __toESM(require("fs"));
+var import_path = __toESM(require("path"));
+var import_child_process = require("child_process");
+var cwd = process.cwd();
+function writeIfAbsent(filePath, content) {
+  if (!import_fs.default.existsSync(filePath)) {
+    import_fs.default.writeFileSync(filePath, content, "utf8");
+    console.log(`created  ${import_path.default.relative(cwd, filePath)}`);
+  } else {
+    console.log(`skipped  ${import_path.default.relative(cwd, filePath)} (already exists)`);
+  }
+}
+function appendIfMissing(filePath, line) {
+  const existing = import_fs.default.existsSync(filePath) ? import_fs.default.readFileSync(filePath, "utf8") : "";
+  if (!existing.includes(line)) {
+    import_fs.default.writeFileSync(filePath, existing + (existing.endsWith("\n") || existing === "" ? "" : "\n") + line + "\n", "utf8");
+    console.log(`updated  ${import_path.default.relative(cwd, filePath)}`);
+  } else {
+    console.log(`skipped  ${import_path.default.relative(cwd, filePath)} (already contains entry)`);
+  }
+}
+writeIfAbsent(
+  import_path.default.join(cwd, "global.d.ts"),
+  `declare module "*.twss" {
+  const styles: Record<string, string>;
+  export default styles;
+}
+`
+);
+appendIfMissing(import_path.default.join(cwd, ".prettierignore"), "**/*.twss");
+var vscodeDir = import_path.default.join(cwd, ".vscode");
+if (!import_fs.default.existsSync(vscodeDir)) import_fs.default.mkdirSync(vscodeDir);
+var vscodeSettings = import_path.default.join(vscodeDir, "settings.json");
+var settings = import_fs.default.existsSync(vscodeSettings) ? JSON.parse(import_fs.default.readFileSync(vscodeSettings, "utf8")) : {};
+var vscodeChanged = false;
+if (settings["css.lint.unknownAtRules"] !== "ignore") {
+  settings["css.lint.unknownAtRules"] = "ignore";
+  vscodeChanged = true;
+}
+var _a;
+if (!((_a = settings["files.associations"]) == null ? void 0 : _a["*.twss"])) {
+  settings["files.associations"] = __spreadProps(__spreadValues({}, settings["files.associations"]), { "*.twss": "css" });
+  vscodeChanged = true;
+}
+if (vscodeChanged) {
+  import_fs.default.writeFileSync(vscodeSettings, JSON.stringify(settings, null, 2) + "\n", "utf8");
+  console.log(`updated  .vscode/settings.json`);
+} else {
+  console.log(`skipped  .vscode/settings.json (already configured)`);
+}
+console.log("installing tailwind-style-sheets...");
+(0, import_child_process.execSync)("npm install tailwind-style-sheets", { stdio: "inherit", cwd });
+var nextConfigPath = ["next.config.ts", "next.config.mjs", "next.config.js"].map((f) => import_path.default.join(cwd, f)).find((f) => import_fs.default.existsSync(f));
+if (!nextConfigPath) {
+  console.log("skipped  next.config.ts (not found)");
+} else {
+  let src = import_fs.default.readFileSync(nextConfigPath, "utf8");
+  if (src.includes("withTwssPlugin")) {
+    console.log(`skipped  ${import_path.default.relative(cwd, nextConfigPath)} (already contains withTwssPlugin)`);
+  } else {
+    const lastImportIdx = [...src.matchAll(/^import .+$/gm)].at(-1);
+    const insertAfter = lastImportIdx ? lastImportIdx.index + lastImportIdx[0].length : 0;
+    const imports = `
+import path from "path";
+import { withTwssPlugin } from "tailwind-style-sheets";`;
+    src = src.slice(0, insertAfter) + imports + src.slice(insertAfter);
+    src = src.replace(
+      /export default (\w+);/,
+      `export default withTwssPlugin($1, {
+  globalsCSS: path.resolve(__dirname, "src/app/globals.css"),
+  watchDir: path.resolve(__dirname, "src"),
+});`
+    );
+    import_fs.default.writeFileSync(nextConfigPath, src, "utf8");
+    console.log(`updated  ${import_path.default.relative(cwd, nextConfigPath)}`);
+  }
+}
+console.log("\ndone.");

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+import { NextConfig } from 'next';
+
+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;
+
+export { type TwssPluginOptions, withTwssPlugin };

package/dist/index.js

@@ -0,0 +1,81 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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 __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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  withTwssPlugin: () => withTwssPlugin
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/plugin.ts
+var import_fs = __toESM(require("fs"));
+function withTwssPlugin(nextConfig, options = {}) {
+  var _a;
+  const { globalsCSS, watchDir } = options;
+  if (process.env.NODE_ENV === "development" && globalsCSS && watchDir) {
+    import_fs.default.watch(watchDir, { recursive: true }, (_, filename) => {
+      if (filename == null ? void 0 : filename.endsWith(".twss")) {
+        const now = /* @__PURE__ */ new Date();
+        import_fs.default.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"
+        }
+      })
+    })
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  withTwssPlugin
+});

package/dist/loader.d.ts

@@ -0,0 +1,3 @@
+declare const twssLoader: (source: string) => string;
+
+export { twssLoader as default };

package/dist/loader.js

@@ -0,0 +1,14 @@
+"use strict";
+
+// src/loader.ts
+var BLOCK_REGEX = /\.(\w[\w-]*)\s*\{\s*@apply\s+([\s\S]*?)\s*\}/g;
+var twssLoader = function(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)};`;
+};
+module.exports = twssLoader;

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "tailwind-style-sheets",
+  "version": "0.0.1",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "bin": {
+    "tailwind-style-sheets": "./dist/cli.js"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "peerDependencies": {
+    "next": ">=15"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "next": "16.2.1",
+    "tsup": "^8.5.1",
+    "typescript": "^5"
+  }
+}

package/src/cli.ts

@@ -0,0 +1,95 @@
+import fs from "fs";
+import path from "path";
+import { execSync } from "child_process";
+
+const cwd = process.cwd();
+
+function writeIfAbsent(filePath: string, content: string) {
+  if (!fs.existsSync(filePath)) {
+    fs.writeFileSync(filePath, content, "utf8");
+    console.log(`created  ${path.relative(cwd, filePath)}`);
+  } else {
+    console.log(`skipped  ${path.relative(cwd, filePath)} (already exists)`);
+  }
+}
+
+function appendIfMissing(filePath: string, line: string) {
+  const existing = fs.existsSync(filePath) ? fs.readFileSync(filePath, "utf8") : "";
+  if (!existing.includes(line)) {
+    fs.writeFileSync(filePath, existing + (existing.endsWith("\n") || existing === "" ? "" : "\n") + line + "\n", "utf8");
+    console.log(`updated  ${path.relative(cwd, filePath)}`);
+  } else {
+    console.log(`skipped  ${path.relative(cwd, filePath)} (already contains entry)`);
+  }
+}
+
+// global.d.ts
+writeIfAbsent(
+  path.join(cwd, "global.d.ts"),
+  `declare module "*.twss" {\n  const styles: Record<string, string>;\n  export default styles;\n}\n`
+);
+
+// .prettierignore
+appendIfMissing(path.join(cwd, ".prettierignore"), "**/*.twss");
+
+// .vscode/settings.json
+const vscodeDir = path.join(cwd, ".vscode");
+if (!fs.existsSync(vscodeDir)) fs.mkdirSync(vscodeDir);
+
+const vscodeSettings = path.join(vscodeDir, "settings.json");
+const settings = fs.existsSync(vscodeSettings)
+  ? JSON.parse(fs.readFileSync(vscodeSettings, "utf8"))
+  : {};
+
+let vscodeChanged = false;
+if (settings["css.lint.unknownAtRules"] !== "ignore") {
+  settings["css.lint.unknownAtRules"] = "ignore";
+  vscodeChanged = true;
+}
+if (!settings["files.associations"]?.["*.twss"]) {
+  settings["files.associations"] = { ...settings["files.associations"], "*.twss": "css" };
+  vscodeChanged = true;
+}
+if (vscodeChanged) {
+  fs.writeFileSync(vscodeSettings, JSON.stringify(settings, null, 2) + "\n", "utf8");
+  console.log(`updated  .vscode/settings.json`);
+} else {
+  console.log(`skipped  .vscode/settings.json (already configured)`);
+}
+
+// install tailwind-style-sheets
+console.log("installing tailwind-style-sheets...");
+execSync("npm install tailwind-style-sheets", { stdio: "inherit", cwd });
+
+// next.config.ts
+const nextConfigPath = ["next.config.ts", "next.config.mjs", "next.config.js"]
+  .map((f) => path.join(cwd, f))
+  .find((f) => fs.existsSync(f));
+
+if (!nextConfigPath) {
+  console.log("skipped  next.config.ts (not found)");
+} else {
+  let src = fs.readFileSync(nextConfigPath, "utf8");
+  if (src.includes("withTwssPlugin")) {
+    console.log(`skipped  ${path.relative(cwd, nextConfigPath)} (already contains withTwssPlugin)`);
+  } else {
+    // add imports after the last existing import line
+    const lastImportIdx = [...src.matchAll(/^import .+$/gm)].at(-1);
+    const insertAfter = lastImportIdx
+      ? lastImportIdx.index! + lastImportIdx[0].length
+      : 0;
+    const imports = `\nimport path from "path";\nimport { withTwssPlugin } from "tailwind-style-sheets";`;
+    src = src.slice(0, insertAfter) + imports + src.slice(insertAfter);
+
+    // wrap export default <id>; with withTwssPlugin
+    src = src.replace(
+      /export default (\w+);/,
+      `export default withTwssPlugin($1, {\n  globalsCSS: path.resolve(__dirname, "src/app/globals.css"),\n  watchDir: path.resolve(__dirname, "src"),\n});`
+    );
+
+    fs.writeFileSync(nextConfigPath, src, "utf8");
+    console.log(`updated  ${path.relative(cwd, nextConfigPath)}`);
+  }
+}
+
+console.log("\ndone.");

package/src/index.ts

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

package/src/loader.ts

@@ -0,0 +1,32 @@
+/**
+ * Turbopack loader for .twss files.
+ *
+ * Parses CSS-like blocks using `@apply` and emits a JS module that maps
+ * each class name to a plain Tailwind class string.
+ *
+ * Input (.twss file):
+ *   .base {
+ *     @apply px-4 py-2 rounded font-semibold;
+ *   }
+ *   .primary {
+ *     @apply bg-blue-600 text-white hover:bg-blue-700;
+ *   }
+ *
+ * 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;
+
+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)};`;
+};
+
+export = twssLoader;

package/src/plugin.ts

@@ -0,0 +1,59 @@
+import fs from "fs";
+import type { NextConfig } from "next";
+
+export 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"),
+ * });
+ */
+export function withTwssPlugin(nextConfig: NextConfig, options: TwssPluginOptions = {}): NextConfig {
+  const { globalsCSS, watchDir } = options;
+
+  if (process.env.NODE_ENV === "development" && globalsCSS && watchDir) {
+    fs.watch(watchDir, { recursive: true }, (_, filename) => {
+      if (filename?.endsWith(".twss")) {
+        const now = new Date();
+        fs.utimesSync(globalsCSS, now, now);
+      }
+    });
+  }
+
+  return {
+    ...nextConfig,
+    turbopack: {
+      ...nextConfig.turbopack,
+      rules: {
+        ...nextConfig.turbopack?.rules,
+        "*.twss": {
+          loaders: [require.resolve("./loader")],
+          as: "*.js",
+        },
+      },
+    },
+  };
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "declaration": true,
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src"]
+}

package/tsup.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig([
+  {
+    entry: ["src/index.ts", "src/loader.ts"],
+    format: ["cjs"],
+    external: ["./loader"],
+    dts: true,
+    clean: true,
+  },
+  {
+    entry: ["src/cli.ts"],
+    format: ["cjs"],
+    esbuildOptions(options) {
+      options.banner = { js: "#!/usr/bin/env node" };
+    },
+  },
+]);