typewritingclass-next 0.1.5 → 0.2.1

package/dist/index.cjs

@@ -40,8 +40,24 @@ module.exports = __toCommonJS(src_exports);
 // src/TWCStyles.tsx
 var import_react = __toESM(require("react"), 1);
 var import_server = require("typewritingclass-react/server");
-function TWCStyles() {
-  const css = (0, import_server.getStyleSheet)();
+var import_fs = require("fs");
+var import_path = require("path");
+function TWCStyles({ cssFile } = {}) {
+  const runtimeCss = (0, import_server.getStyleSheet)();
+  let compiledCss = "";
+  try {
+    const filePath = (0, import_path.resolve)(process.cwd(), cssFile || ".next/twc.css");
+    compiledCss = (0, import_fs.readFileSync)(filePath, "utf-8");
+  } catch {
+    try {
+      compiledCss = (0, import_fs.readFileSync)(
+        (0, import_path.resolve)(process.cwd(), ".next/cache/twc/compiled.css"),
+        "utf-8"
+      );
+    } catch {
+    }
+  }
+  const css = [compiledCss, runtimeCss].filter(Boolean).join("\n");
   return import_react.default.createElement("style", {
     "data-twc": "",
     dangerouslySetInnerHTML: { __html: css }

package/dist/index.d.cts

@@ -2,12 +2,17 @@ import React from 'react';
 export { useStyle } from 'typewritingclass-react';
 export { getStyleSheet, getStyleTag } from 'typewritingclass-react/server';
 
+interface TWCStylesProps {
+    /** Path to the compiler-generated CSS file. Default: ".next/twc.css" */
+    cssFile?: string;
+}
 /**
  * Server component that injects typewritingclass CSS into the document head.
  *
+ * Combines both compiler-extracted CSS (from the build-time Rust transform)
+ * and runtime-generated CSS (from dynamic styles resolved during SSR).
+ *
  * Place this in your root layout to ensure all styles are included during SSR.
- * This component is safe to use in React Server Components — it has no client-side
- * dependencies.
  *
  * @example app/layout.tsx
  * ```tsx
@@ -25,6 +30,6 @@ export { getStyleSheet, getStyleTag } from 'typewritingclass-react/server';
  * }
  * ```
  */
-declare function TWCStyles(): React.JSX.Element;
+declare function TWCStyles({ cssFile }?: TWCStylesProps): React.JSX.Element;
 
 export { TWCStyles };

package/dist/index.d.ts

@@ -2,12 +2,17 @@ import React from 'react';
 export { useStyle } from 'typewritingclass-react';
 export { getStyleSheet, getStyleTag } from 'typewritingclass-react/server';
 
+interface TWCStylesProps {
+    /** Path to the compiler-generated CSS file. Default: ".next/twc.css" */
+    cssFile?: string;
+}
 /**
  * Server component that injects typewritingclass CSS into the document head.
  *
+ * Combines both compiler-extracted CSS (from the build-time Rust transform)
+ * and runtime-generated CSS (from dynamic styles resolved during SSR).
+ *
  * Place this in your root layout to ensure all styles are included during SSR.
- * This component is safe to use in React Server Components — it has no client-side
- * dependencies.
  *
  * @example app/layout.tsx
  * ```tsx
@@ -25,6 +30,6 @@ export { getStyleSheet, getStyleTag } from 'typewritingclass-react/server';
  * }
  * ```
  */
-declare function TWCStyles(): React.JSX.Element;
+declare function TWCStyles({ cssFile }?: TWCStylesProps): React.JSX.Element;
 
 export { TWCStyles };

package/dist/index.js

@@ -1,8 +1,24 @@
 // src/TWCStyles.tsx
 import React from "react";
 import { getStyleSheet } from "typewritingclass-react/server";
-function TWCStyles() {
-  const css = getStyleSheet();
+import { readFileSync } from "fs";
+import { resolve } from "path";
+function TWCStyles({ cssFile } = {}) {
+  const runtimeCss = getStyleSheet();
+  let compiledCss = "";
+  try {
+    const filePath = resolve(process.cwd(), cssFile || ".next/twc.css");
+    compiledCss = readFileSync(filePath, "utf-8");
+  } catch {
+    try {
+      compiledCss = readFileSync(
+        resolve(process.cwd(), ".next/cache/twc/compiled.css"),
+        "utf-8"
+      );
+    } catch {
+    }
+  }
+  const css = [compiledCss, runtimeCss].filter(Boolean).join("\n");
   return React.createElement("style", {
     "data-twc": "",
     dangerouslySetInnerHTML: { __html: css }

package/dist/loader.cjs

@@ -0,0 +1,116 @@
+"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: () => twcLoader
+});
+module.exports = __toCommonJS(loader_exports);
+
+// ../../node_modules/.pnpm/tsup@8.5.1_postcss@8.5.6_typescript@5.9.3/node_modules/tsup/assets/cjs_shims.js
+var getImportMetaUrl = () => typeof document === "undefined" ? new URL(`file:${__filename}`).href : document.currentScript && document.currentScript.tagName.toUpperCase() === "SCRIPT" ? document.currentScript.src : new URL("main.js", document.baseURI).href;
+var importMetaUrl = /* @__PURE__ */ getImportMetaUrl();
+
+// src/loader.ts
+var import_module = require("module");
+var import_path = require("path");
+var import_url = require("url");
+var import_fs = require("fs");
+var import_loadTheme = require("typewritingclass-compiler/loadTheme");
+var require2 = (0, import_module.createRequire)(importMetaUrl);
+var __dirname = (0, import_path.dirname)((0, import_url.fileURLToPath)(importMetaUrl));
+var compilerDir = (0, import_path.dirname)(require2.resolve("typewritingclass-compiler/package.json"));
+var native = require2((0, import_path.resolve)(compilerDir, "index.node"));
+var themeInput = null;
+var nextLayer = 0;
+var fileRules = /* @__PURE__ */ new Map();
+var fileLayers = /* @__PURE__ */ new Map();
+function twcLoader(source) {
+  const filename = this.resourcePath;
+  const options = this.getOptions?.() ?? {};
+  const strict = options.strict ?? true;
+  const outputFile = options.outputFile ?? ".next/twc.css";
+  if (!source.includes("typewritingclass")) return source;
+  if (filename.includes("node_modules")) return source;
+  if (!/\.[jt]sx?$/.test(filename)) return source;
+  if (!themeInput) {
+    themeInput = (0, import_loadTheme.loadThemeSync)();
+    const cacheFile = (0, import_path.resolve)(".next/cache/twc/rules-cache.json");
+    if ((0, import_fs.existsSync)(cacheFile)) {
+      try {
+        const cached = JSON.parse((0, import_fs.readFileSync)(cacheFile, "utf-8"));
+        for (const [key, value] of Object.entries(cached.fileRules)) {
+          fileRules.set(key, value);
+        }
+        for (const [key, value] of Object.entries(cached.fileLayers)) {
+          fileLayers.set(key, value);
+        }
+        nextLayer = Math.max(nextLayer, cached.nextLayer ?? 0);
+      } catch {
+      }
+    }
+  }
+  const layer = fileLayers.get(filename) ?? nextLayer;
+  try {
+    const result = native.transform(source, filename, layer, themeInput, strict);
+    if (!fileLayers.has(filename)) {
+      fileLayers.set(filename, layer);
+    }
+    nextLayer = Math.max(nextLayer, result.nextLayer);
+    for (const diag of result.diagnostics) {
+      const location = `${filename}:${diag.line}:${diag.column}`;
+      if (diag.severity === "error") {
+        this.emitError(new Error(`[typewritingclass] ${location} - ${diag.message}`));
+      } else {
+        this.emitWarning(new Error(`[typewritingclass] ${location} - ${diag.message}`));
+      }
+    }
+    if (result.rules.length > 0) {
+      fileRules.set(filename, result.rules.map((r) => r.cssText));
+      const allRules = [];
+      for (const rules of fileRules.values()) {
+        allRules.push(...rules);
+      }
+      const css = native.generateCss(JSON.stringify(allRules));
+      if (css) {
+        const outputDir = (0, import_path.dirname)((0, import_path.resolve)(outputFile));
+        (0, import_fs.mkdirSync)(outputDir, { recursive: true });
+        (0, import_fs.writeFileSync)((0, import_path.resolve)(outputFile), css, "utf-8");
+        const cacheDir = (0, import_path.resolve)(".next/cache/twc");
+        (0, import_fs.mkdirSync)(cacheDir, { recursive: true });
+        (0, import_fs.writeFileSync)((0, import_path.resolve)(cacheDir, "compiled.css"), css, "utf-8");
+        (0, import_fs.writeFileSync)(
+          (0, import_path.resolve)(cacheDir, "rules-cache.json"),
+          JSON.stringify({
+            fileRules: Object.fromEntries(fileRules),
+            fileLayers: Object.fromEntries(fileLayers),
+            nextLayer
+          }),
+          "utf-8"
+        );
+      }
+    }
+    return result.code;
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    console.error(`[typewritingclass] Failed to transform ${filename}: ${message}`);
+    return source;
+  }
+}

package/dist/loader.d.cts

@@ -0,0 +1,11 @@
+interface TwcLoaderOptions {
+    outputFile?: string;
+    strict?: boolean;
+}
+/**
+ * Custom webpack loader that runs the native Rust compiler transform.
+ * Only transforms the source code — leaves TypeScript/JSX to SWC/Babel.
+ */
+declare function twcLoader(this: any, source: string): string;
+
+export { type TwcLoaderOptions, twcLoader as default };

package/dist/loader.d.ts

@@ -0,0 +1,11 @@
+interface TwcLoaderOptions {
+    outputFile?: string;
+    strict?: boolean;
+}
+/**
+ * Custom webpack loader that runs the native Rust compiler transform.
+ * Only transforms the source code — leaves TypeScript/JSX to SWC/Babel.
+ */
+declare function twcLoader(this: any, source: string): string;
+
+export { type TwcLoaderOptions, twcLoader as default };

package/dist/loader.js

@@ -0,0 +1,89 @@
+// src/loader.ts
+import { createRequire } from "module";
+import { resolve, dirname } from "path";
+import { fileURLToPath } from "url";
+import { writeFileSync, readFileSync, mkdirSync, existsSync } from "fs";
+import { loadThemeSync } from "typewritingclass-compiler/loadTheme";
+var require2 = createRequire(import.meta.url);
+var __dirname = dirname(fileURLToPath(import.meta.url));
+var compilerDir = dirname(require2.resolve("typewritingclass-compiler/package.json"));
+var native = require2(resolve(compilerDir, "index.node"));
+var themeInput = null;
+var nextLayer = 0;
+var fileRules = /* @__PURE__ */ new Map();
+var fileLayers = /* @__PURE__ */ new Map();
+function twcLoader(source) {
+  const filename = this.resourcePath;
+  const options = this.getOptions?.() ?? {};
+  const strict = options.strict ?? true;
+  const outputFile = options.outputFile ?? ".next/twc.css";
+  if (!source.includes("typewritingclass")) return source;
+  if (filename.includes("node_modules")) return source;
+  if (!/\.[jt]sx?$/.test(filename)) return source;
+  if (!themeInput) {
+    themeInput = loadThemeSync();
+    const cacheFile = resolve(".next/cache/twc/rules-cache.json");
+    if (existsSync(cacheFile)) {
+      try {
+        const cached = JSON.parse(readFileSync(cacheFile, "utf-8"));
+        for (const [key, value] of Object.entries(cached.fileRules)) {
+          fileRules.set(key, value);
+        }
+        for (const [key, value] of Object.entries(cached.fileLayers)) {
+          fileLayers.set(key, value);
+        }
+        nextLayer = Math.max(nextLayer, cached.nextLayer ?? 0);
+      } catch {
+      }
+    }
+  }
+  const layer = fileLayers.get(filename) ?? nextLayer;
+  try {
+    const result = native.transform(source, filename, layer, themeInput, strict);
+    if (!fileLayers.has(filename)) {
+      fileLayers.set(filename, layer);
+    }
+    nextLayer = Math.max(nextLayer, result.nextLayer);
+    for (const diag of result.diagnostics) {
+      const location = `${filename}:${diag.line}:${diag.column}`;
+      if (diag.severity === "error") {
+        this.emitError(new Error(`[typewritingclass] ${location} - ${diag.message}`));
+      } else {
+        this.emitWarning(new Error(`[typewritingclass] ${location} - ${diag.message}`));
+      }
+    }
+    if (result.rules.length > 0) {
+      fileRules.set(filename, result.rules.map((r) => r.cssText));
+      const allRules = [];
+      for (const rules of fileRules.values()) {
+        allRules.push(...rules);
+      }
+      const css = native.generateCss(JSON.stringify(allRules));
+      if (css) {
+        const outputDir = dirname(resolve(outputFile));
+        mkdirSync(outputDir, { recursive: true });
+        writeFileSync(resolve(outputFile), css, "utf-8");
+        const cacheDir = resolve(".next/cache/twc");
+        mkdirSync(cacheDir, { recursive: true });
+        writeFileSync(resolve(cacheDir, "compiled.css"), css, "utf-8");
+        writeFileSync(
+          resolve(cacheDir, "rules-cache.json"),
+          JSON.stringify({
+            fileRules: Object.fromEntries(fileRules),
+            fileLayers: Object.fromEntries(fileLayers),
+            nextLayer
+          }),
+          "utf-8"
+        );
+      }
+    }
+    return result.code;
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    console.error(`[typewritingclass] Failed to transform ${filename}: ${message}`);
+    return source;
+  }
+}
+export {
+  twcLoader as default
+};

package/dist/plugin.cjs

@@ -23,11 +23,21 @@ __export(plugin_exports, {
   withTwc: () => withTwc
 });
 module.exports = __toCommonJS(plugin_exports);
+
+// ../../node_modules/.pnpm/tsup@8.5.1_postcss@8.5.6_typescript@5.9.3/node_modules/tsup/assets/cjs_shims.js
+var getImportMetaUrl = () => typeof document === "undefined" ? new URL(`file:${__filename}`).href : document.currentScript && document.currentScript.tagName.toUpperCase() === "SCRIPT" ? document.currentScript.src : new URL("main.js", document.baseURI).href;
+var importMetaUrl = /* @__PURE__ */ getImportMetaUrl();
+
+// src/plugin.ts
+var import_path = require("path");
+var import_url = require("url");
+var __dirname = (0, import_path.dirname)((0, import_url.fileURLToPath)(importMetaUrl));
 function withTwc(nextConfig = {}, options = {}) {
-  const babelOptions = {
+  const loaderOptions = {
     outputFile: options.outputFile ?? ".next/twc.css",
     strict: options.strict ?? true
   };
+  const loaderPath = (0, import_path.resolve)(__dirname, "loader.cjs");
   return {
     ...nextConfig,
     webpack(config, context) {
@@ -35,12 +45,8 @@ function withTwc(nextConfig = {}, options = {}) {
         test: /\.[jt]sx?$/,
         exclude: /node_modules/,
         use: {
-          loader: "babel-loader",
-          options: {
-            plugins: [
-              ["typewritingclass-babel", babelOptions]
-            ]
-          }
+          loader: loaderPath,
+          options: loaderOptions
         }
       });
       if (typeof nextConfig.webpack === "function") {

package/dist/plugin.d.cts

@@ -11,8 +11,9 @@ interface TwcNextPluginOptions {
 /**
  * Next.js plugin that integrates typewritingclass build-time CSS extraction.
  *
- * Configures webpack to run the typewritingclass Babel transform on your source
- * files, extracting static CSS at build time.
+ * Configures webpack with a custom loader that runs the native Rust compiler
+ * on source files, extracting static CSS at build time. Works alongside
+ * Next.js's SWC compiler — no Babel required.
  *
  * @example next.config.mjs
  * ```js
@@ -22,15 +23,6 @@ interface TwcNextPluginOptions {
  *   // your next config
  * })
  * ```
- *
- * @example With options
- * ```js
- * import { withTwc } from 'typewritingclass-next/plugin'
- *
- * export default withTwc({
- *   // your next config
- * }, { strict: true })
- * ```
  */
 declare function withTwc(nextConfig?: NextConfig, options?: TwcNextPluginOptions): NextConfig;
 

package/dist/plugin.d.ts

@@ -11,8 +11,9 @@ interface TwcNextPluginOptions {
 /**
  * Next.js plugin that integrates typewritingclass build-time CSS extraction.
  *
- * Configures webpack to run the typewritingclass Babel transform on your source
- * files, extracting static CSS at build time.
+ * Configures webpack with a custom loader that runs the native Rust compiler
+ * on source files, extracting static CSS at build time. Works alongside
+ * Next.js's SWC compiler — no Babel required.
  *
  * @example next.config.mjs
  * ```js
@@ -22,15 +23,6 @@ interface TwcNextPluginOptions {
  *   // your next config
  * })
  * ```
- *
- * @example With options
- * ```js
- * import { withTwc } from 'typewritingclass-next/plugin'
- *
- * export default withTwc({
- *   // your next config
- * }, { strict: true })
- * ```
  */
 declare function withTwc(nextConfig?: NextConfig, options?: TwcNextPluginOptions): NextConfig;
 

package/dist/plugin.js

@@ -1,9 +1,13 @@
 // src/plugin.ts
+import { resolve, dirname } from "path";
+import { fileURLToPath } from "url";
+var __dirname = dirname(fileURLToPath(import.meta.url));
 function withTwc(nextConfig = {}, options = {}) {
-  const babelOptions = {
+  const loaderOptions = {
     outputFile: options.outputFile ?? ".next/twc.css",
     strict: options.strict ?? true
   };
+  const loaderPath = resolve(__dirname, "loader.cjs");
   return {
     ...nextConfig,
     webpack(config, context) {
@@ -11,12 +15,8 @@ function withTwc(nextConfig = {}, options = {}) {
         test: /\.[jt]sx?$/,
         exclude: /node_modules/,
         use: {
-          loader: "babel-loader",
-          options: {
-            plugins: [
-              ["typewritingclass-babel", babelOptions]
-            ]
-          }
+          loader: loaderPath,
+          options: loaderOptions
         }
       });
       if (typeof nextConfig.webpack === "function") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "typewritingclass-next",
-  "version": "0.1.5",
+  "version": "0.2.1",
   "type": "module",
   "repository": {
     "type": "git",
@@ -27,6 +27,16 @@
         "types": "./dist/plugin.d.cts",
         "default": "./dist/plugin.cjs"
       }
+    },
+    "./loader": {
+      "import": {
+        "types": "./dist/loader.d.ts",
+        "default": "./dist/loader.js"
+      },
+      "require": {
+        "types": "./dist/loader.d.cts",
+        "default": "./dist/loader.cjs"
+      }
     }
   },
   "main": "./dist/index.cjs",
@@ -38,19 +48,19 @@
   "peerDependencies": {
     "next": "^13 || ^14 || ^15",
     "react": "^18 || ^19",
-    "typewritingclass": "0.2.6",
-    "typewritingclass-react": "0.2.2"
+    "typewritingclass": "0.3.1",
+    "typewritingclass-react": "0.2.4"
   },
   "dependencies": {
-    "typewritingclass-babel": "0.1.4"
+    "typewritingclass-compiler": "0.2.1"
   },
   "devDependencies": {
     "next": "^15.0.0",
     "react": "^19.0.0",
     "@types/react": "^19.0.0",
     "typescript": "^5.7.3",
-    "typewritingclass": "0.2.6",
-    "typewritingclass-react": "0.2.2"
+    "typewritingclass": "0.3.1",
+    "typewritingclass-react": "0.2.4"
   },
   "scripts": {
     "build": "tsup",