next-yak 0.0.22 → 0.0.24

package/README.md

@@ -172,6 +172,33 @@ module.exports = {
 
 [Nesting Example (video)](https://github.com/jantimon/next-yak/assets/4113649/33eeeb13-b0cf-499f-a1d3-ba6f51cf4308)
 
+## Build Time Constants
+
+The downside of dynamic properties is that they require inline style attributes.  
+While this is not a problem for most cases, we can't use them for media queries.
+
+`next-yak` allows you to define build time constants which can be used in your styles:
+
+```jsx
+import { styled } from 'next-yak';
+import { breakpoints, spacings } from './constants.yak';
+
+const Container = styled.div`
+  padding: ${spacings.md};
+  ${breakpoints.md} {
+    padding: ${spacings.lg};
+  }
+`;
+```
+
+| Feature          | Code                                            | Yak Constant files                             |
+|----------------  |-----------------------------------------------  |----------------------------------------------  |
+| File Extension   | `.js`, `.jsx`, `.tsx`, etc.                     | `.yak.js`, `.yak.jsx`, `.yak.tsx`, etc.        |
+| Runs at          | Compile time (Bundler)                          | Runtime (Node or Browser)                      |
+| Side effects     | Allowed                                         | Forbidden                                      |
+| Yak Features     | All (`styled`, `css`, ...)                      | -                                              | 
+
+
 ## Motivation
 
 Most of the existing CSS-in-JS libraries are either slow or have a complex api. This project tries to find a middle ground between speed and api complexity.

package/loaders/__tests__/cssloader.test.ts

@@ -40,7 +40,7 @@ const headline = css\`
 `
       )
     ).toMatchInlineSnapshot(`
-      "._yak_0 {
+      ".headline_0 {
         font-size: 2rem;
         font-weight: bold;
         color: red;
@@ -77,15 +77,15 @@ const headline = css\`
 `
       )
     ).toMatchInlineSnapshot(`
-      "._yak_0 {
+      ".headline_0 {
         font-size: 2rem;
         font-weight: bold;
         color: red;
-        &:where(._yak_1) {
+        &:where(.headline_1) {
           color: orange;
         }
 
-        &:where(._yak_2) {
+        &:where(.headline_2) {
           color: teal;
         }
         &:hover {
@@ -113,9 +113,9 @@ const headline = css\`
 `
       )
     ).toMatchInlineSnapshot(`
-      "._yak_0 {
+      ".headline_0 {
         /* comment */
-        &:where(._yak_1) {
+        &:where(.headline_1) {
           color: blue;
         }
       }"
@@ -138,12 +138,12 @@ const headline = css\`
 `
       )
     ).toMatchInlineSnapshot(`
-    "._yak_0 {
-      &:hover {
-        color: var(--🦬18fi82j0);
-      }
-    }"
-  `);
+      ".headline_0 {
+        &:hover {
+          color: var(--🦬18fi82j0);
+        }
+      }"
+    `);
   });
 
   it("should support attrs on intrinsic elements", async () => {
@@ -211,14 +211,14 @@ const headline = css\`
 `
       )
     ).toMatchInlineSnapshot(`
-    "._yak_0 {
-      transition: color var(--🦬18fi82j0) var(--🦬18fi82j1);
-      display: block;
-        &:where(._yak_1) {
-    color: orange
-        }
-    }"
-  `);
+      ".headline_0 {
+        transition: color var(--🦬18fi82j0) var(--🦬18fi82j1);
+        display: block;
+          &:where(.headline_1) {
+      color: orange
+          }
+      }"
+    `);
   });
 
   it("should replace breakpoint references with actual media queries", async () => {
@@ -241,18 +241,18 @@ const headline = css\`
 `
       )
     ).toMatchInlineSnapshot(`
-    "._yak_0 {
-      color: blue;
-      @media (min-width: 640px) {
-        color: red;
-      }
-      transition: color var(--🦬18fi82j0) var(--🦬18fi82j1);
-      display: block;
-        &:where(._yak_1) {
-    color: orange
+      ".headline_0 {
+        color: blue;
+        @media (min-width: 640px) {
+          color: red;
         }
-    }"
-  `);
+        transition: color var(--🦬18fi82j0) var(--🦬18fi82j1);
+        display: block;
+          &:where(.headline_1) {
+      color: orange
+          }
+      }"
+    `);
   });
 
   it("should replace breakpoint references with actual media queries from single quote imports", async () => {
@@ -275,18 +275,18 @@ const headline = css\`
 `
       )
     ).toMatchInlineSnapshot(`
-    "._yak_0 {
-      color: blue;
-      @media (min-width: 640px) {
-        color: red;
-      }
-      transition: color var(--🦬18fi82j0) var(--🦬18fi82j1);
-      display: block;
-        &:where(._yak_1) {
-    color: orange
+      ".headline_0 {
+        color: blue;
+        @media (min-width: 640px) {
+          color: red;
         }
-    }"
-  `);
+        transition: color var(--🦬18fi82j0) var(--🦬18fi82j1);
+        display: block;
+          &:where(.headline_1) {
+      color: orange
+          }
+      }"
+    `);
   });
 
   it("should prevent double escaped chars", async () => {
@@ -311,16 +311,16 @@ const headline = css\`
 `
       )
     ).toMatchInlineSnapshot(`
-    "._yak_0 {
-      :before {
-        content: \\"\\\\2022\\";
-      }
-      :after {
-        content: \\"\\\\2022\\";
-      }
-      content: \\"\\\\\\\\\\"
-    }"
-  `);
+      ".headline_0 {
+        :before {
+          content: \\"\\\\2022\\";
+        }
+        :after {
+          content: \\"\\\\2022\\";
+        }
+        content: \\"\\\\\\\\\\"
+      }"
+    `);
   });
 
   it("should convert keyframes", async () => {
@@ -481,16 +481,16 @@ const Component2 = styled.div\`
       ".Component {
           background-color: red;
           color: white;
-            &:where(._yak_0) {
+            &:where(.active_0) {
               background-color: blue;
             }
           border: 1px solid black;
 
           &:focus {
               background-color: green;
-                &:where(._yak_1) {
+                &:where(.active_1) {
                   background-color: blue;
-                    &:where(._yak_2) {
+                    &:where(.active_and_active_2) {
                       background-color: brown;
                     }
                 }
@@ -535,17 +535,17 @@ const Component = styled.div\`
       ".Component {
           background-color: red;
           color: white;
-            &:where(._yak_0) {
+            &:where(.active_0) {
               background-color: blue;
             }
-            &:where(._yak_1) {
+            &:where(.not_active_1) {
               background-color: var(--🦬18fi82j0);
             }
           border: 1px solid black;
-            &:where(._yak_2) {
+            &:where(.active_2) {
               color: orange;
             }
-            &:where(._yak_3) {
+            &:where(.not_active_3) {
               transition: color var(--🦬18fi82j1) var(--🦬18fi82j2);
             }
         }"

package/loaders/__tests__/getCssName.test.ts

@@ -0,0 +1,170 @@
+import { parse, traverse } from "@babel/core";
+import { NodePath } from "@babel/core";
+import getCssName from "../lib/getCssName.cjs";
+import type { TaggedTemplateExpression } from "@babel/types";
+import { describe, it, expect } from "vitest";
+
+function getCssLiteral(code: string) {
+  let result: NodePath<TaggedTemplateExpression> | null = null;
+  const ast = parse(code);
+  if (!ast) {
+    throw new Error("Could not parse code");
+  }
+  traverse(ast, {
+    TaggedTemplateExpression(path: NodePath<TaggedTemplateExpression>) {
+      if (path.node.tag.type === "Identifier" && path.node.tag.name === "css") {
+        result = path;
+      }
+    },
+  });
+  if (!result) {
+    throw new Error("Could not find css literal");
+  }
+  return result;
+}
+
+describe("getCssName", () => {
+  it("should guess the css name from the condition of a logical expression", () => {
+    const literal = getCssLiteral(`({$active}) => $active && css\`\``);
+    const cssName = getCssName(literal);
+    expect(cssName).toBe("active");
+  });
+
+  it("should guess the css name from the condition of a ternary expression", () => {
+    const literal = getCssLiteral(`({$active}) => $active ? css\`\` : null`);
+    const cssName = getCssName(literal);
+    expect(cssName).toBe("active");
+  });
+
+  it("should guess the css name from the condition of a logical expression with negation", () => {
+    const literal = getCssLiteral(`({$active}) => !$active && css\`\``);
+    const cssName = getCssName(literal);
+    expect(cssName).toBe("not_active");
+  });
+
+  it("should guess the css name from the condition of a ternary expression for the else case", () => {
+    const literal = getCssLiteral(`({$active}) => $active ? null : css\`\``);
+    const cssName = getCssName(literal);
+    expect(cssName).toBe("not_active");
+  });
+
+  it("should guess the css name from the condition of a logical expression with multiple conditions", () => {
+    const literal = getCssLiteral(
+      `({$active, $visible}) => $active && $visible && css\`\``
+    );
+    const cssName = getCssName(literal);
+    expect(cssName).toBe("active_and_visible");
+  });
+
+  it("should guess the css name from the condition of a ternary expression with multiple conditions", () => {
+    const literal = getCssLiteral(
+      `({$active, $visible}) => $active ? ($visible ? css\`\` : null) : null`
+    );
+    const cssName = getCssName(literal);
+    expect(cssName).toBe("active_and_visible");
+  });
+
+  it("should guess the css name from the condition of a logical expression with negation and multiple conditions", () => {
+    const literal = getCssLiteral(
+      `({$active, $visible}) => !$active && $visible && css\`\``
+    );
+    const cssName = getCssName(literal);
+    expect(cssName).toBe("not_active_and_visible");
+  });
+
+  it("should guess the css name from the condition of a ternary expression with negation and multiple conditions", () => {
+    const literal = getCssLiteral(
+      `({$active, $visible}) => !$active ? ($visible ? css\`\`: null) : null`
+    );
+    const cssName = getCssName(literal);
+    expect(cssName).toBe("not_active_and_visible");
+  });
+
+  it("should guess the css name from the condition of a logical expression with negation and multiple conditions for the else case", () => {
+    const literal = getCssLiteral(
+      `({$active, $visible}) => $active && !$visible && css\`\``
+    );
+    const cssName = getCssName(literal);
+    expect(cssName).toBe("active_and_not_visible");
+  });
+
+  it("should guess the css name from the condition of a ternary expression with negation and multiple conditions for the else case", () => {
+    const literal = getCssLiteral(
+      `({$active, $visible}) => $active ? ($visible ? null : css\`\`) : null`
+    );
+    const cssName = getCssName(literal);
+    expect(cssName).toBe("active_and_not_visible");
+  });
+
+  it("should guess the css name from the condition of a nested logical expression", () => {
+    const literal = getCssLiteral(
+      `({ $visible }) => $visible && (({ $active }) => $active && css\`\`)`
+    );
+    const cssName = getCssName(literal);
+    expect(cssName).toBe("visible_and_active");
+  });
+
+  it("should guess the css name from a complex expression using AND and OR operators", () => {
+    const literal = getCssLiteral(
+      `({$active, $visible, $enabled}) => ($active || $visible) && $enabled && css\`\``
+    );
+    const cssName = getCssName(literal);
+    expect(cssName).toBe("active_or_visible_and_enabled");
+  });
+
+  it("should guess the css name from nested logical expressions", () => {
+    const literal = getCssLiteral(
+      `({$active, $visible, $enabled}) => ($active && ($visible || $enabled)) && css\`\``
+    );
+    const cssName = getCssName(literal);
+    expect(cssName).toBe("active_and_visible_or_enabled");
+  });
+
+  it("should guess the css name from an expression with multiple OR conditions", () => {
+    const literal = getCssLiteral(
+      `({$active, $visible, $enabled}) => $active || $visible || $enabled && css\`\``
+    );
+    const cssName = getCssName(literal);
+    expect(cssName).toBe("active_or_visible_or_enabled");
+  });
+
+  it("should guess the css name from a complex combination of AND and OR operators", () => {
+    const literal = getCssLiteral(
+      `({$active, $visible, $enabled}) => ($active && $visible) || ($visible && $enabled) && css\`\``
+    );
+    const cssName = getCssName(literal);
+    expect(cssName).toBe("active_and_visible_or_visible_and_enabled");
+  });
+
+  it("should guess the css name from a condition using Boolean() function", () => {
+    const literal = getCssLiteral(`({$active}) => Boolean($active) && css\`\``);
+    const cssName = getCssName(literal);
+    expect(cssName).toBe("active");
+  });
+
+  it("should guess the css name from a condition using double negation", () => {
+    const literal = getCssLiteral(`({$active}) => !!$active && css\`\``);
+    const cssName = getCssName(literal);
+    expect(cssName).toBe("active");
+  });
+
+  it("should guess the css name from the variable name", () => {
+    const literal = getCssLiteral(`const Mixin = css\`\``);
+    const cssName = getCssName(literal);
+    expect(cssName).toBe("Mixin");
+  });
+
+  it("should guess the css name from a single member expression and camelCase it", () => {
+    const literal = getCssLiteral(`({theme}) => theme.highContrast && css\`\``);
+    const cssName = getCssName(literal);
+    expect(cssName).toBe("themeHighContrast");
+  });
+
+  it("should guess the css name from a nested member expression and camelCase it", () => {
+    const literal = getCssLiteral(
+      `({$user}) => $user.auth.loggedIn && css\`\``
+    );
+    const cssName = getCssName(literal);
+    expect(cssName).toBe("userAuthLoggedIn");
+  });
+});

package/loaders/__tests__/tsloader.test.ts

@@ -60,7 +60,7 @@ export const Main = () => <h1 className={headline({}).className}>Hello World</h1
       import { css } from \\"next-yak\\";
       import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
       type x = number;
-      const headline = css(__styleYak._yak_0);
+      const headline = css(__styleYak.headline_0);
       export const Main = () => <h1 className={headline({}).className}>Hello World</h1>;"
     `);
   });
@@ -91,7 +91,7 @@ const headline = css\`
       import { css } from \\"next-yak\\";
       import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
       const x = Math.random();
-      const headline = css(__styleYak._yak_0, x > 0.5 && css(__styleYak._yak_1));"
+      const headline = css(__styleYak.headline_0, x > 0.5 && css(__styleYak.headline_1));"
     `);
   });
 
@@ -125,7 +125,7 @@ const FancyButton = styled(Button)\`
       import { styled, css } from \\"next-yak\\";
       import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
       const x = Math.random();
-      const Button = styled.button(__styleYak.Button, x > 0.5 && css(__styleYak._yak_0));
+      const Button = styled.button(__styleYak.Button, x > 0.5 && css(__styleYak.Button_0));
       const FancyButton = styled(Button)(__styleYak.FancyButton);"
     `);
   });
@@ -162,7 +162,7 @@ const FancyButton = styled(Button)\`
       const x = Math.random();
       const Button = styled.button(__styleYak.Button, ({
         theme
-      }) => theme.mode === \\"dark\\" && css(__styleYak._yak_0));
+      }) => theme.mode === \\"dark\\" && css(__styleYak.Button_0));
       const FancyButton = styled(Button)(__styleYak.FancyButton);"
     `);
   });
@@ -240,7 +240,7 @@ const headline = css\`
       import { css } from \\"next-yak\\";
       import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
       import { easing } from \\"styleguide\\";
-      const headline = css(__styleYak._yak_0, css(__styleYak._yak_1), css(__styleYak._yak_2), {
+      const headline = css(__styleYak.headline_0, css(__styleYak.headline_1), css(__styleYak.headline_2), {
         \\"style\\": {
           \\"--\\\\uD83E\\\\uDDAC18fi82j0\\": ({
             i
@@ -477,12 +477,12 @@ const headline = css\`
 `
       )
     ).toMatchInlineSnapshot(`
-  "import styles from \\"./page.module.css\\";
-  import { css } from \\"next-yak\\";
-  import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
-  const x = Math.random();
-  const headline = css(__styleYak._yak_0, x > 0.5 && css(__styleYak._yak_1));"
-`);
+      "import styles from \\"./page.module.css\\";
+      import { css } from \\"next-yak\\";
+      import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
+      const x = Math.random();
+      const headline = css(__styleYak.headline_0, x > 0.5 && css(__styleYak.headline_1));"
+    `);
   });
 
   it("should show error when a dynamic selector is used after a comma", async () => {
@@ -552,13 +552,13 @@ const Button = styled.button\`
      `
       )
     ).toMatchInlineSnapshot(`
-       "import styles from \\"./page.module.css\\";
-       import { styled, css } from \\"next-yak\\";
-       import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
-       const Icon = styled.svg(__styleYak.Icon);
-       const Button = styled.button(__styleYak.Button, ({
-         $primary
-       }) => $primary && css(__styleYak._yak_0));"
-     `);
+      "import styles from \\"./page.module.css\\";
+      import { styled, css } from \\"next-yak\\";
+      import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
+      const Icon = styled.svg(__styleYak.Icon);
+      const Button = styled.button(__styleYak.Button, ({
+        $primary
+      }) => $primary && css(__styleYak.primary_0));"
+    `);
   });
 });

package/loaders/babel-yak-plugin.cjs

@@ -5,6 +5,7 @@ const murmurhash2_32_gc = require("./lib/hash.cjs");
 const { relative, resolve, basename } = require("path");
 const localIdent = require("./lib/localIdent.cjs");
 const getStyledComponentName = require("./lib/getStyledComponentName.cjs");
+const getCssName = require("./lib/getCssName.cjs");
 
 /** @typedef {{replaces: Record<string, unknown>, rootContext?: string}} YakBabelPluginOptions */
 /** @typedef {{ css: string | undefined, styled: string | undefined, keyframes: string | undefined }} YakLocalIdentifierNames */
@@ -246,11 +247,13 @@ module.exports = function (babel, options) {
         const variableName =
           styledApi || expressionType === "keyframesLiteral"
             ? getStyledComponentName(path)
+            : expressionType === "cssLiteral" ?
+              getCssName(path)
             : null;
 
         const identifier = localIdent(
           variableName || "_yak",
-          variableName ? null : this.classNameCount++,
+          variableName && expressionType !== "cssLiteral" ? null : this.classNameCount++,
           expressionType === "keyframesLiteral" ? "animation" : "className"
         );
 

package/loaders/cssloader.cjs

@@ -5,6 +5,7 @@ const quasiClassifier = require("./lib/quasiClassifier.cjs");
 const localIdent = require("./lib/localIdent.cjs");
 const replaceQuasiExpressionTokens = require("./lib/replaceQuasiExpressionTokens.cjs");
 const getStyledComponentName = require("./lib/getStyledComponentName.cjs");
+const getCssName = require("./lib/getCssName.cjs");
 const murmurhash2_32_gc = require("./lib/hash.cjs");
 const { relative } = require("path");
 
@@ -192,11 +193,12 @@ module.exports = async function cssLoader(source) {
       const variableName =
         isStyledLiteral || isStyledCall || isAttrsCall || isKeyFrameLiteral
           ? getStyledComponentName(path)
+          : isCssLiteral ? getCssName(path)
           : null
 
       const literalSelector = localIdent(
         variableName || "_yak",
-        variableName ? null : index++,
+        variableName && !isCssLiteral ? null : index++,
         isKeyFrameLiteral ? "keyframes" : "selector"
       );
 

package/loaders/lib/getCssName.cjs

@@ -0,0 +1,151 @@
+// @ts-check
+
+/** @typedef {import("@babel/types")} babel */
+
+/**
+ * Extracts the conditions from a path
+ * @param {babel.NodePath<babel.types.TaggedTemplateExpression>} path
+ */
+function extractConditions(path) {
+  /** @type {string[]} */
+  const conditions = [];
+  const visitedNodes = new Set();
+  /**
+   * @param {babel.types.Node} node
+   * @param {babel.types.Node} previousNode
+   * @param {boolean} isNegated
+   */
+  const getConditions = (node, previousNode, isNegated = false) => {
+    if (visitedNodes.has(node)) return;
+    visitedNodes.add(node);
+    // Support for && and || operators e.g. disabled && "disabled"
+    if (node.type === "LogicalExpression") {
+      if (node.operator === "&&") {
+        getConditions(node.right, previousNode, isNegated);
+        conditions.push("and");
+        getConditions(node.left, previousNode, isNegated);
+      } else if (node.operator === "||") {
+        getConditions(node.right, previousNode, isNegated);
+        conditions.push("or");
+        getConditions(node.left, previousNode, isNegated);
+      }
+    }
+    // Support for ternary operator e.g. disabled ? "disabled" : "enabled"
+    else if (node.type === "ConditionalExpression") {
+      conditions.push("and");
+      getConditions(node.test, previousNode, node.alternate === previousNode);
+    }
+    // Support for ! operator e.g. !disabled
+    else if (node.type === "UnaryExpression" && node.operator === "!") {
+      getConditions(node.argument, previousNode, !isNegated);
+    }
+    // Support for Boolean() function e.g. Boolean(disabled)
+    else if (
+      node.type === "CallExpression" &&
+      node.callee.type === "Identifier" &&
+      node.callee.name === "Boolean"
+    ) {
+      getConditions(node.arguments[0], previousNode, isNegated);
+    }
+    // Get the name of the variable e.g. disabled
+    else if (node.type === "Identifier") {
+      conditions.push((isNegated ? "not_" : "") + node.name);
+    }
+    // Get the name of a member expression e.g. props.disabled
+    else if (node.type === "MemberExpression") {
+      conditions.push(
+        (isNegated ? "not_" : "") + getMemberExpressionName(node)
+      );
+    }
+  };
+  /** @type {babel.NodePath | null} */
+  let currentPath = path;
+  /** @type {babel.NodePath} */
+  let previousPath = path;
+  while (currentPath) {
+    getConditions(currentPath.node, previousPath.node);
+    previousPath = currentPath;
+    currentPath = currentPath.parentPath;
+  }
+  if (conditions[0] === "or" || conditions[0] === "and") {
+    conditions.shift();
+  }
+  return conditions.reverse();
+}
+
+/**
+ * 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 variableDeclaratorPath = taggedTemplateExpressionPath.findParent(
+    (path) => path.isVariableDeclarator()
+  );
+  if (
+    !variableDeclaratorPath ||
+    !("id" in variableDeclaratorPath.node) ||
+    variableDeclaratorPath.node.id?.type !== "Identifier"
+  ) {
+    return null;
+  }
+  return variableDeclaratorPath.node.id.name;
+};
+
+/**
+ * Try to get the name of a member expression
+ *
+ * e.g. props.disabled -> "propsDisabled"
+ * e.g. props.user.disabled -> "propsUserDisabled
+ *
+ * @param {babel.types.MemberExpression} node
+ * @returns {string}
+ */
+function getMemberExpressionName(node) {
+  console.log(node.object, node.property.type);
+  if (
+    !node.object ||
+    !node.property ||
+    (node.object.type !== "Identifier" &&
+      node.object.type !== "MemberExpression")
+  ) {
+    return "";
+  }
+  const objectName =
+    node.object.type === "Identifier"
+      ? node.object.name
+      : getMemberExpressionName(node.object);
+  const property = node.property;
+  let propertyName = "";
+  if (property.type === "Identifier") {
+    propertyName = property.name;
+  } else if (property.type === "StringLiteral") {
+    propertyName = property.value;
+  }
+  if (!propertyName) {
+    return "";
+  }
+  return objectName + propertyName[0].toUpperCase() + propertyName.slice(1);
+}
+
+/**
+ * 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) {
+  const conditions = extractConditions(literal);
+  if (conditions.length === 0) {
+    const mixinName = getStyledComponentName(literal);
+    return mixinName ? mixinName : "yak";
+  }
+  return conditions.join("_").replace(/\$/g, "");
+}
+
+module.exports = getCssName;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-yak",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "type": "module",
   "types": "./dist/",
   "exports": {