next-yak 0.0.35 → 0.0.39

package/loaders/lib/{getCssName.cjs → getCssName.ts}

@@ -1,21 +1,18 @@
-// @ts-check
-
-/** @typedef {import("@babel/types")} babel */
+import type { NodePath, types as babelTypes } from "@babel/core";
 
 /**
  * Extracts the conditions from a path
- * @param {babel.NodePath<babel.types.TaggedTemplateExpression>} path
  */
-function extractConditions(path) {
-  /** @type {string[]} */
-  const conditions = [];
+function extractConditions(
+  path: NodePath<babelTypes.TaggedTemplateExpression>
+) {
+  const conditions: string[] = [];
   const visitedNodes = new Set();
-  /**
-   * @param {babel.types.Node} node
-   * @param {babel.types.Node} previousNode
-   * @param {boolean} isNegated
-   */
-  const getConditions = (node, previousNode, isNegated = false) => {
+  const getConditions = (
+    node: babelTypes.Node,
+    previousNode: babelTypes.Node,
+    isNegated = false
+  ) => {
     if (visitedNodes.has(node)) return;
     visitedNodes.add(node);
     // Support for && and || operators e.g. disabled && "disabled"
@@ -58,10 +55,8 @@ function extractConditions(path) {
       );
     }
   };
-  /** @type {babel.NodePath | null} */
-  let currentPath = path;
-  /** @type {babel.NodePath} */
-  let previousPath = path;
+  let currentPath: NodePath | null = path;
+  let previousPath: NodePath = path;
   while (currentPath) {
     getConditions(currentPath.node, previousPath.node);
     previousPath = currentPath;
@@ -77,11 +72,10 @@ function extractConditions(path) {
  * Try to get the name of a css component from a literal expression
  *
  * e.g. const mixin = css`...` -> "mixin"
- *
- * @param {babel.NodePath<babel.types.TaggedTemplateExpression>} taggedTemplateExpressionPath
- * @returns {string | null}
  */
-const getStyledComponentName = (taggedTemplateExpressionPath) => {
+const getStyledComponentName = (
+  taggedTemplateExpressionPath: NodePath<babelTypes.TaggedTemplateExpression>
+) => {
   const variableDeclaratorPath = taggedTemplateExpressionPath.findParent(
     (path) => path.isVariableDeclarator()
   );
@@ -100,11 +94,8 @@ const getStyledComponentName = (taggedTemplateExpressionPath) => {
  *
  * e.g. props.disabled -> "propsDisabled"
  * e.g. props.user.disabled -> "propsUserDisabled
- *
- * @param {babel.types.MemberExpression} node
- * @returns {string}
  */
-function getMemberExpressionName(node) {
+function getMemberExpressionName(node: babelTypes.MemberExpression): string {
   if (
     !node.object ||
     !node.property ||
@@ -134,11 +125,10 @@ function getMemberExpressionName(node) {
  * Try to get the name of a css literal
  *
  * e.g. ({$disabled}) => $disabled && css`...` -> "is_$disabled"
- *
- * @param {babel.NodePath<babel.types.TaggedTemplateExpression>} literal
- * @returns {string}
  */
-function getCssName(literal) {
+export default function getCssName(
+  literal: NodePath<babelTypes.TaggedTemplateExpression>
+) {
   const conditions = extractConditions(literal);
   if (conditions.length === 0) {
     const mixinName = getStyledComponentName(literal);
@@ -146,5 +136,3 @@ function getCssName(literal) {
   }
   return conditions.join("_").replace(/\$/g, "");
 }
-
-module.exports = getCssName;

package/loaders/lib/{getStyledComponentName.cjs → getStyledComponentName.ts}

@@ -1,19 +1,16 @@
-// @ts-check
-
-/** @typedef {import("@babel/types")} babel */
+import type { NodePath, types as babelTypes } from "@babel/core";
 
 /**
  * Try to get the name of a styled component from a call or member expression
  *
  * e.g. const MyButton = styled.div`...` -> "MyButton"
  * e.g. const FancyButton = styled(MyButton)`...` -> "FancyButton"
- *
- * @param {babel.NodePath<babel.types.TaggedTemplateExpression>} taggedTemplateExpressionPath
- * @returns {string}
  */
-const getStyledComponentName = (taggedTemplateExpressionPath) => {
+const getStyledComponentName = (
+  taggedTemplateExpressionPath: NodePath<babelTypes.TaggedTemplateExpression>
+) => {
   const variableDeclaratorPath = taggedTemplateExpressionPath.findParent(
-    (path) => path.isVariableDeclarator(),
+    (path) => path.isVariableDeclarator()
   );
   if (
     !variableDeclaratorPath ||
@@ -22,10 +19,10 @@ const getStyledComponentName = (taggedTemplateExpressionPath) => {
   ) {
     throw new Error(
       "Could not find variable declaration for styled component at " +
-        taggedTemplateExpressionPath.node.loc,
+        taggedTemplateExpressionPath.node.loc
     );
   }
   return variableDeclaratorPath.node.id.name;
 };
 
-module.exports = getStyledComponentName;
+export default getStyledComponentName;

package/loaders/lib/{getYakImports.cjs → getYakImports.ts}

@@ -1,17 +1,13 @@
-// @ts-check
 /**
  * Finds all imports in a given code string which import from a .yak file
  *
  * Uses regex to work with typescript and javascript
  * Does not support lazy imports
- *
- * @param {string} code
- * @returns { { imports: { localName: string, importedName: string }[], from: string }[] }
  */
-const getYakImports = (code) => {
+const getYakImports = (code: string) => {
   const codeWithoutComments = code.replace(/\/\*[\s\S]*?\*\//g, "");
   const allImports = codeWithoutComments.matchAll(
-    /(^|\n|;)\s*import\s+(?:(\w+(?:\s+as\s+\w+)?)\s*,?\s*)?(?:{([^}]*)})?\s+from\s+["']([^'"]+\.yak)["'](;|\n)/g,
+    /(^|\n|;)\s*import\s+(?:(\w+(?:\s+as\s+\w+)?)\s*,?\s*)?(?:{([^}]*)})?\s+from\s+["']([^'"]+\.yak)["'](;|\n)/g
   );
   return [...allImports].map(([, , defaultImport, namedImports, from]) => {
     // parse named imports to { localName: string, importedName: string }[]
@@ -33,10 +29,8 @@ const getYakImports = (code) => {
 
 /**
  * Parses a default import string
- * @param {string} defaultImport
- * @returns {{ localName: string, importedName: string }}
  */
-function parseDefaultImport(defaultImport) {
+function parseDefaultImport(defaultImport: string) {
   const defaultImportArray = defaultImport.split(/\s+as\s+/);
   return {
     localName: defaultImportArray[1] ?? defaultImportArray[0],
@@ -44,4 +38,4 @@ function parseDefaultImport(defaultImport) {
   };
 }
 
-module.exports = getYakImports;
+export default getYakImports;

package/loaders/lib/{hash.cjs → hash.ts}

@@ -6,10 +6,10 @@
  * @author <a href="mailto:aappleby@gmail.com">Austin Appleby</a>
  * @see http://sites.google.com/site/murmurhash/
  *
- * @param {string} str ASCII only
- * @return {string} Base 36 encoded hash result
+ * @param str ASCII only
+ * @return Base 36 encoded hash result
  */
-function murmurhash2_32_gc(str) {
+export default function murmurhash2_32_gc(str: string) {
   let l = str.length;
   let h = l;
   let i = 0;
@@ -56,5 +56,3 @@ function murmurhash2_32_gc(str) {
 
   return (h >>> 0).toString(36);
 }
-
-module.exports = murmurhash2_32_gc;

package/loaders/lib/{localIdent.cjs → localIdent.ts}

@@ -9,12 +9,12 @@
  * localIdent("myVariableName", 1, "keyframes") // "@keyframes myVariableName_1"
  * localIdent("myVariableName", 1, "animation") // "myVariableName_1"
  * ```
- *
- * @param {string} variableName
- * @param {number | null} i
- * @param {"selector" | "className" | "keyframes" | "animation"} kind
  */
-function localIdent(variableName, i, kind) {
+export default function localIdent(
+  variableName: string,
+  i: number | null,
+  kind: "selector" | "className" | "keyframes" | "animation"
+) {
   switch (kind) {
     case "selector":
       return `.${variableName}${i === null ? "" : `_${i}`}`;
@@ -27,5 +27,3 @@ function localIdent(variableName, i, kind) {
       throw new Error("unknown kind");
   }
 }
-
-module.exports = localIdent;

package/loaders/lib/{quasiClassifier.cjs → quasiClassifier.ts}

@@ -1,5 +1,4 @@
-/// @ts-check
-const stripCssComments = require("./stripCssComments.cjs");
+import stripCssComments from "./stripCssComments.js";
 
 /**
  * Checks a quasiValue and returns its type
@@ -7,18 +6,11 @@ const stripCssComments = require("./stripCssComments.cjs");
  * - empty: no expressions, no text
  * - unknownSelector: starts with a `{` e.g. `{ opacity: 0.5; }` or `,` e.g. `, bar { ... }`
  * - insideCssValue: does not end with a `{` or `}` or `;` e.g. `color: `
- *
- * @param {string} quasiValue
- * @param {string[]} currentNestingScopes - the current nesting scope
- *
- * @returns {{
- *  empty: boolean,
- *  unknownSelector: boolean,
- *  insideCssValue: boolean,
- *  currentNestingScopes: string[],
- * }}
  */
-module.exports = function quasiClassifier(quasiValue, currentNestingScopes) {
+export default function quasiClassifier(
+  quasiValue: string,
+  currentNestingScopes: string[]
+) {
   // TODO - for better performance we could move the comment skipping logic
   // directly in the for loop below instead of calling stripCssComments
   const trimmedCssString = stripCssComments(quasiValue).trim();
@@ -30,8 +22,7 @@ module.exports = function quasiClassifier(quasiValue, currentNestingScopes) {
       currentNestingScopes,
     };
   }
-  /** @type {'"' | "'" | false} */
-  let isInsideString = false;
+  let isInsideString: '"' | "'" | false = false;
   let currentCharacter = "";
   let newNestingLevel = [...currentNestingScopes];
   let currentSelector = "";
@@ -87,4 +78,4 @@ module.exports = function quasiClassifier(quasiValue, currentNestingScopes) {
       currentCharacter !== ";",
     currentNestingScopes: newNestingLevel,
   };
-};
+}

package/loaders/lib/{replaceQuasiExpressionTokens.cjs → replaceQuasiExpressionTokens.ts}

@@ -1,3 +1,5 @@
+import type { NodePath, types as babelTypes } from "@babel/core";
+
 /**
  * Replace tokens with predefined values e.g.
  *
@@ -19,12 +21,12 @@
  * }
  * `
  * ```
- *
- * @param {import("@babel/types").TemplateLiteral} quasi
- * @param {(name: string) => unknown} replacer
- * @param {import("@babel/types")} t
  */
-module.exports = function replaceTokensInQuasiExpressions(quasi, replacer, t) {
+export default function replaceTokensInQuasiExpressions(
+  quasi: babelTypes.TemplateLiteral,
+  replacer: (name: string) => unknown,
+  t: typeof babelTypes
+) {
   // Iterate over the expressions in reverse order
   // so removing items won't affect the index of the next item
   for (let i = quasi.expressions.length - 1; i >= 0; i--) {
@@ -36,23 +38,22 @@ module.exports = function replaceTokensInQuasiExpressions(quasi, replacer, t) {
     const replacement = parts && replacer(parts[0]);
     // if it is a nested value, find the value of the expression
     // e.g. x.y.z -> find the value of z
-    const replacementValue = replacement && getReplacementValue(
-      replacement,
-      parts
-    );
+    const replacementValue =
+      replacement && getReplacementValue(replacement, parts);
     if (replacementValue !== false && replacementValue !== null) {
       replaceExpressionAndMergeQuasis(quasi, i, replacementValue);
-    } 
+    }
   }
-};
+}
 
 /**
  * Replace tokens with predefined values
- * @param {import("@babel/types").TemplateLiteral} quasi
- * @param {number} expressionIndex
- * @param {unknown} replacement
  */
-function replaceExpressionAndMergeQuasis(quasi, expressionIndex, replacement) {
+function replaceExpressionAndMergeQuasis(
+  quasi: babelTypes.TemplateLiteral,
+  expressionIndex: number,
+  replacement: unknown
+) {
   const stringReplacement =
     typeof replacement === "string"
       ? replacement
@@ -77,11 +78,11 @@ function replaceExpressionAndMergeQuasis(quasi, expressionIndex, replacement) {
  *   - `x()` -> ["x"]
  *   - `x.y()` -> ["x", "y"]
  *   - (1 + 2) -> null
- *
- * @param {import("@babel/types").Expression | import("@babel/types").TSType} expression
- * @param {import("@babel/types")} t
  */
-function getExpressionParts(expression, t) {
+function getExpressionParts(
+  expression: babelTypes.Expression | babelTypes.TSType,
+  t: typeof babelTypes
+) {
   let currentExpression = expression;
   /** @type {string[]} */
   const tokens = [];
@@ -93,7 +94,10 @@ function getExpressionParts(expression, t) {
     }
     // e.g. x.y
     if (t.isMemberExpression(currentExpression)) {
-      if (currentExpression.computed === false && t.isIdentifier(currentExpression.property)) {
+      if (
+        currentExpression.computed === false &&
+        t.isIdentifier(currentExpression.property)
+      ) {
         tokens.unshift(currentExpression.property.name);
       } else if (t.isStringLiteral(currentExpression.property)) {
         tokens.unshift(currentExpression.property.value);
@@ -117,15 +121,12 @@ function getExpressionParts(expression, t) {
 
 /**
  * Get the value of the replacement
- * 
+ *
  * e.g. for `replacement.x.y[0]` and `replacement = { x: { y: [42] } }`
  * parts = ["replacement", "x", "y", 0]
  * --> 42
- * 
- * @param {any} replacement
- * @param {string[]} parts
  */
-function getReplacementValue(replacement, parts) {
+function getReplacementValue(replacement: any, parts: string[]) {
   let currentReplacement = replacement;
   for (let i = 1; i < parts.length; i++) {
     const part = parts[i];
@@ -135,4 +136,4 @@ function getReplacementValue(replacement, parts) {
     currentReplacement = currentReplacement[part];
   }
   return currentReplacement;
-}
+}

package/loaders/lib/{stripCssComments.cjs → stripCssComments.ts}

@@ -1,12 +1,6 @@
-/// @ts-check
 // from https://github.com/sindresorhus/strip-css-comments/tree/main
-/**
- *
- * @param {string} cssString
- */
-module.exports = function stripCssComments(cssString) {
-  /** @type {string | false} */
-  let isInsideString = false;
+export default function stripCssComments(cssString: string) {
+  let isInsideString: string | false = false;
   let currentCharacter = "";
   let comment = "";
   let returnValue = "";
@@ -55,4 +49,4 @@ module.exports = function stripCssComments(cssString) {
     returnValue += currentCharacter;
   }
   return returnValue;
-};
+}

package/loaders/{tsloader.cjs → tsloader.ts}

@@ -1,16 +1,14 @@
-/// @ts-check
-const babel = require("@babel/core");
-const getYakImports = require("./lib/getYakImports.cjs");
-const InvalidPositionError =
-  require("./babel-yak-plugin.cjs").InvalidPositionError;
+import babel, { BabelFileResult } from "@babel/core";
+import getYakImports from "./lib/getYakImports.js";
+import { InvalidPositionError } from "./babel-yak-plugin.js";
 
 /**
  * Loader for typescript files that use yak, it replaces the css template literal with a call to the 'styled' function
- * @param {string} source
- * @this {any}
- * @returns {Promise<string | void>}
  */
-module.exports = async function tsloader(source) {
+export default async function tsloader(
+  this: any,
+  source: string
+): Promise<string | void> {
   // ignore files if they don't use yak
   if (!source.includes("next-yak")) {
     return source;
@@ -26,8 +24,7 @@ module.exports = async function tsloader(source) {
   // However .yak files inside .yak files are not be compiled
   // to avoid performance overhead
   const importedYakConstants = isYakFile ? [] : getYakImports(source);
-  /** @type {Record<string, unknown>} */
-  const replaces = {};
+  const replaces: Record<string, unknown> = {};
   await Promise.all(
     importedYakConstants.map(async ({ imports, from }) => {
       const constantValues = await this.importModule(from, {
@@ -39,8 +36,7 @@ module.exports = async function tsloader(source) {
     })
   );
 
-  /** @type {babel.BabelFileResult | null} */
-  let result = null;
+  let result: BabelFileResult | null = null;
   try {
     // Compile the typescript file with babel - this will:
     // - inject the import to the css-module (with .yak.module.css extension)
@@ -54,7 +50,7 @@ module.exports = async function tsloader(source) {
           { isTSX: this.resourcePath.endsWith(".tsx") },
         ],
         [
-          require("./babel-yak-plugin.cjs"),
+          await import("./babel-yak-plugin.js").then((m) => m.default),
           {
             replaces,
             rootContext,
@@ -72,4 +68,4 @@ module.exports = async function tsloader(source) {
     return callback(new Error("babel transform failed"));
   }
   return callback(null, result.code, result.map);
-};
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-yak",
-  "version": "0.0.35",
+  "version": "0.0.39",
   "type": "module",
   "types": "./dist/",
   "exports": {
@@ -17,7 +17,8 @@
       "require": "./dist/runtime-internals/index.cjs"
     },
     "./withYak": {
-      "require": "./withYak/index.cjs"
+      "import": "./dist/withYak/index.js",
+      "require": "./dist/withYak/index.cjs"
     },
     "./context/baseContext": {
       "import": "./dist/context/baseContext.js",
@@ -34,23 +35,6 @@
       }
     }
   },
-  "scripts": {
-    "prepublishOnly": "npm run build && npm run test && npm run test:types:code && npm run test:types:test",
-    "build": "pnpm run --filter . \"/^build:/\"",
-    "build:runtime": "tsup runtime/index.ts --target es2022 --clean --external react --external next-yak/context --format cjs,esm --minify --sourcemap --out-dir dist",
-    "build:runtime:types": "tsup runtime/index.ts --target es2022 --clean --external react --dts-only --format cjs,esm --minify --sourcemap --out-dir dist",
-    "build:runtimeInternals": "tsup runtime/internals/index.ts --target es2022 --clean --external react --external next-yak/runtime-internals --format cjs,esm --minify --sourcemap --out-dir dist/runtime-internals",
-    "build:static": "tsup static/index.ts --target es2022 --clean --external react --external next-yak/context --format cjs,esm --minify --sourcemap --out-dir dist/static",
-    "build:static:types": "tsup static/index.ts --target es2022 --clean --external react --dts-only --format cjs,esm --minify --sourcemap --out-dir dist/static",
-    "build:baseContext": "tsup runtime/context/baseContext.tsx --target es2022 --external react --dts --format cjs,esm --sourcemap --out-dir dist/context/",
-    "build:context:client": "tsup runtime/context/index.tsx --target es2022 --external react --external next-yak/context/baseContext --dts --format cjs,esm --sourcemap --out-dir dist/context/",
-    "build:context:server": "tsup runtime/context/index.server.tsx --target es2022 --external react --external next-yak/context/baseContext --external ./index.js --format cjs,esm --sourcemap --out-dir dist/context/",
-    "build:withYak": "tsup withYak/index.ts --target es2022 --dts --format cjs --sourcemap --out-dir withYak --external ../loaders/tsloader.cjs --external ../loaders/cssloader.cjs",
-    "test": "vitest run",
-    "test:types:code": "tsc -p tsconfig.json",
-    "test:types:test": "tsc -p ./runtime/__tests__/tsconfig.json",
-    "test:watch": "vitest --watch"
-  },
   "dependencies": {
     "@babel/core": "7.23.2",
     "@babel/plugin-syntax-typescript": "7.22.5",
@@ -79,5 +63,12 @@
     "loaders",
     "runtime",
     "withYak"
-  ]
-}
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "test:types:code": "tsc -p tsconfig.json",
+    "test:types:test": "tsc -p ./runtime/__tests__/tsconfig.json",
+    "test:watch": "vitest --watch"
+  }
+}

package/runtime/__tests__/attrs.test.tsx

@@ -256,18 +256,6 @@ it("should work with data and aria attributes", () => {
   `);
 });
 
-// it("merge attrs", () => {
-//   const Comp = styled.button
-//     .attrs(() => ({
-//       type: "button",
-//       tabIndex: 0,
-//     }))
-//     .attrs(() => ({
-//       type: "submit",
-//     }))``;
-//   expect(TestRenderer.create(<Comp />).toJSON()).toMatchInlineSnapshot();
-// });
-
 it("merge attrs when inheriting SC", () => {
   const Parent = styled.button.attrs(() => ({
     type: "button",
@@ -281,7 +269,7 @@ it("merge attrs when inheriting SC", () => {
       className=""
       style={{}}
       tabIndex={0}
-      type="button"
+      type="submit"
     />
   `);
 });
@@ -531,6 +519,8 @@ it("should pass theme if theme is overwritten", () => {
     <pre
       className=""
       style={{}}
-    />
+    >
+      {"color":"blue"}
+    </pre>
   `);
 });

package/runtime/__tests__/styled.test.tsx

@@ -95,13 +95,28 @@ it("should filter out properties starting with $ when passing to custom", () =>
     return null;
   };
   const StyledComponent = styled(Component)``;
-  const { container } = render(
-    <StyledComponent $forwardedProp="notForwarded" />,
-  );
+  render(<StyledComponent $forwardedProp="notForwarded" />);
 
   expect(forwardedProps).toEqual({});
 });
 
+it("should forward properties to the next yak component", () => {
+  const Component = styled.input.attrs(({ $text }) => ({
+    "aria-label": $text,
+  }))``;
+  const StyledComponent = styled(Component)``;
+  const { container } = render(<StyledComponent $text="hello world" />);
+
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      <input
+        aria-label="hello world"
+        class=""
+      />
+    </div>
+  `);
+});
+
 it("should concatenate classNames", () => {
   const Component = styled.input("className1");
 
@@ -256,7 +271,7 @@ it("should remove theme if styled element", () => {
   `);
 });
 
-it("should not remove theme if theme is passed to element", () => {
+it("should keep theme if theme is passed to element", () => {
   const ThemePrinter = ({ theme, ...props }: { theme?: unknown }) => (
     <pre {...props}>{JSON.stringify(theme)}</pre>
   );
@@ -272,7 +287,9 @@ it("should not remove theme if theme is passed to element", () => {
     <div>
       <pre
         class="test"
-      />
+      >
+        {"anything":"test"}
+      </pre>
     </div>
   `);
 });
@@ -314,7 +331,9 @@ it("should not remove theme if theme is passed to wrapped element", () => {
     <div>
       <pre
         class="test-wrapper test"
-      />
+      >
+        {"anything":"test"}
+      </pre>
     </div>
   `);
 });

package/runtime/styled.tsx

@@ -22,7 +22,7 @@ const yakForwardRef: <TProps>(
   // warning: `__yak` is undefined during runtime
   __yak: true;
 } = (component) =>
-  Object.assign(React.forwardRef(component), { component }) as any;
+  Object.assign(React.forwardRef(component), { yak: component }) as any;
 
 /**
  * All valid html tags
@@ -116,6 +116,8 @@ const yakStyled = <
       // prevents passing the theme prop to the DOM element of a styled component
       const { theme: themeAfterAttr, ...combinedPropsWithoutTheme } =
         combinedProps as { theme?: unknown };
+      const propsBeforeFiltering =
+        themeAfterAttr === theme ? combinedPropsWithoutTheme : combinedProps;
 
       const isYakComponent =
         typeof Component !== "string" && "yak" in Component;
@@ -123,10 +125,8 @@ const yakStyled = <
       // remove all props that start with a $ sign for string components e.g. "button" or "div"
       // so that they are not passed to the DOM element
       const filteredProps = !isYakComponent
-        ? removePrefixedProperties(combinedPropsWithoutTheme)
-        : themeAfterAttr === theme
-        ? combinedPropsWithoutTheme
-        : combinedProps;
+        ? removePrefixedProperties(propsBeforeFiltering)
+        : propsBeforeFiltering;
 
       // yak provides a className and style prop that needs to be merged with the
       // user provided className and style prop