next-yak 0.0.2 → 0.0.4

package/README.md

@@ -98,15 +98,15 @@ next-yak provide class name helpers. This allows using [tailwind](https://tailwi
 ```tsx
 import { styled, css, atoms } from "next-yak";
 
-const SpinningTitle = styled.h1<{ isAnimated: boolean; children: React.ReactNode }>`
-  ${atoms("tw-text-lg md:tw-text-xl tw-bg-red-500")}
-  ${({ isAnimated }) => isAnimated && css`animation: spin 1s linear infinite`)}
+const Button = styled.button<{ $primary?: boolean }>`
+ ${atoms("text-teal-600", "text-base", "rounded-md")}
+ ${props => props.$primary && atoms("shadow-md")}
 `;
 
 const App = () => (
-  <SpinningTitle isAnimated={true}>
+  <Button primary>
     Hello World
-  </SpinningTitle>
+  </Button>
 );
 ```
 
@@ -115,7 +115,8 @@ const App = () => (
 This is a proof of concept. There are a lot of things that need to be done before this can be used in production:
 
  - [ ] improve js parsing - right now it not reusing babel..
- - [ ] config hot module reloading
+ - [ ] sourcemaps
+ - [ ] replace config apporach with a solution similar to vanilla-extracts `.styles.ts` files
 
 ## Prior art
 

package/loaders/cssloader.cjs

@@ -2,7 +2,6 @@
 const babel = require("@babel/core");
 const quasiClassifier = require("./lib/quasiClassifier.cjs");
 const replaceQuasiExpressionTokens = require("./lib/replaceQuasiExpressionTokens.cjs");
-const loadConfigOnce = require("./lib/loadConfigOnce.cjs");
 const murmurhash2_32_gc = require("./lib/hash.cjs");
 const { relative, resolve } = require("path");
 
@@ -15,9 +14,9 @@ module.exports = async function cssLoader(source) {
   // Config for replacing tokens in css template literals
   // can be based on a typescript file
   const options = this.getOptions();
-  const config = options.configPath ? await loadConfigOnce(
-    async () => await this.importModule(resolve(this.rootContext, options.configPath))
-  ) : {};
+  const config = options.configPath ? await this.importModule(resolve(this.rootContext, options.configPath), { 
+    layer: "yak-importModule",
+  }) : {};
   const replaces = config.replaces || {};
 
   // parse source with babel

package/loaders/tsloader.cjs

@@ -3,7 +3,6 @@ const path = require("path");
 const babel = require("@babel/core");
 const quasiClassifier = require("./lib/quasiClassifier.cjs");
 const replaceQuasiExpressionTokens = require("./lib/replaceQuasiExpressionTokens.cjs");
-const loadConfigOnce = require("./lib/loadConfigOnce.cjs");
 const murmurhash2_32_gc = require("./lib/hash.cjs");
 const { relative, resolve } = require("path");
 
@@ -22,9 +21,9 @@ module.exports = async function tsloader(source) {
   // Config for replacing tokens in css template literals
   // can be based on a typescript file
   const options = this.getOptions();
-  const config = options.configPath ? await loadConfigOnce(
-    async () => await this.importModule(resolve(this.rootContext, options.configPath))
-  ) : {};
+  const config = options.configPath ? await this.importModule(resolve(this.rootContext, options.configPath), { 
+    layer: "yak-importModule",
+  }) : {};
   const replaces = config.replaces || {};
 
   /** @type {string | null} */

package/loaders/withYak.cjs

@@ -17,6 +17,11 @@ const addYak = (yakOptions, nextConfig) => {
       test: /\.tsx?$/,
       loader: require.resolve("./tsloader.cjs"),
       options: yakOptions,
+      issuerLayer: {
+        // prevent recursions when calling this.importModule
+        // in the tsloader
+        not: ["yak-importModule"],
+      },
     });
     webpackConfig.module.rules.push({
       test: /\.yak\.module\.css$/,

package/package.json

@@ -1,7 +1,9 @@
 {
   "name": "next-yak",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
     "./withYak": "./loaders/withYak.cjs"

package/loaders/lib/loadConfigOnce.cjs

@@ -1,17 +0,0 @@
-/// @ts-check
-
-/**
- * @type {Promise<{ replaces?: Record<string, Record<string, string>> }>}
- */
-let cache;
-module.exports = function loadConfigOnce(loader) {
-  const config = cache || loader().catch((e) => {
-    console.error("Failed to load yak config:", e);
-    return {};
-  })
-
-  if (!cache) {
-    cache = config;
-  }
-  return config;
-};