tailwind-style-sheets 0.0.2 → 0.0.3

package/README.md

@@ -1,10 +1,10 @@
 # tailwind-style-sheets
 
-Co-locate Tailwind class maps alongside components using `.twss` files — a CSS-like syntax that pairs with a Turbopack loader and Next.js plugin.
+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 */
@@ -76,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";
@@ -100,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>`:

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

@@ -1,3 +1,5 @@
+import "./chunk-OFTF64MC.mjs";
+
 // src/parse.ts
 var BLOCK_REGEX = /\.(\w[\w-]*)\s*\{\s*@apply\s+([\s\S]*?)\s*\}/g;
 function parseTwss(source) {

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "tailwind-style-sheets",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
+      "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
     "./vite": {

package/tsup.config.ts

@@ -8,7 +8,7 @@ export default defineConfig([
     dts: true,
   },
   {
-    entry: ["src/vite.ts"],
+    entry: ["src/index.ts", "src/vite.ts"],
     format: ["esm"],
     external: ["vite"],
     dts: true,