next-yak 0.0.22 → 0.0.23

package/loaders/__tests__/cssloader.test.ts

@@ -40,7 +40,7 @@ const headline = css\`
 `
       )
     ).toMatchInlineSnapshot(`
-      "._yak_0 {
+      ".yak_0 {
         font-size: 2rem;
         font-weight: bold;
         color: red;
@@ -77,15 +77,15 @@ const headline = css\`
 `
       )
     ).toMatchInlineSnapshot(`
-      "._yak_0 {
+      ".yak_0 {
         font-size: 2rem;
         font-weight: bold;
         color: red;
-        &:where(._yak_1) {
+        &:where(.yak_1) {
           color: orange;
         }
 
-        &:where(._yak_2) {
+        &:where(.yak_2) {
           color: teal;
         }
         &:hover {
@@ -113,9 +113,9 @@ const headline = css\`
 `
       )
     ).toMatchInlineSnapshot(`
-      "._yak_0 {
+      ".yak_0 {
         /* comment */
-        &:where(._yak_1) {
+        &:where(.yak_1) {
           color: blue;
         }
       }"
@@ -138,12 +138,12 @@ const headline = css\`
 `
       )
     ).toMatchInlineSnapshot(`
-    "._yak_0 {
-      &:hover {
-        color: var(--🦬18fi82j0);
-      }
-    }"
-  `);
+      ".yak_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
-        }
-    }"
-  `);
+      ".yak_0 {
+        transition: color var(--🦬18fi82j0) var(--🦬18fi82j1);
+        display: block;
+          &:where(.yak_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
+      ".yak_0 {
+        color: blue;
+        @media (min-width: 640px) {
+          color: red;
         }
-    }"
-  `);
+        transition: color var(--🦬18fi82j0) var(--🦬18fi82j1);
+        display: block;
+          &:where(.yak_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
+      ".yak_0 {
+        color: blue;
+        @media (min-width: 640px) {
+          color: red;
         }
-    }"
-  `);
+        transition: color var(--🦬18fi82j0) var(--🦬18fi82j1);
+        display: block;
+          &:where(.yak_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: \\"\\\\\\\\\\"
-    }"
-  `);
+      ".yak_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_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,83 @@
+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 extractConditionsWithBabel(code: string) {
+  let result: string = "";
+  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 = getCssName(path);
+      }
+    },
+  });
+  return result;
+}
+
+describe("getCssName", () => {
+  it("should guess the css name from the condition of a logical expression", () => {
+    const code = `({$active}) => $active && css\`\``;
+    const cssName = extractConditionsWithBabel(code);
+    expect(cssName).toBe("active");
+  });
+
+  it("should guess the css name from the condition of a ternary expression", () => {
+    const code = `({$active}) => $active ? css\`\` : null`;
+    const cssName = extractConditionsWithBabel(code);
+    expect(cssName).toBe("active");
+  });
+
+  it("should guess the css name from the condition of a logical expression with negation", () => {
+    const code = `({$active}) => !$active && css\`\``;
+    const cssName = extractConditionsWithBabel(code);
+    expect(cssName).toBe("not_active");
+  });
+
+  it("should guess the css name from the condition of a ternary expression for the else case", () => {
+    const code = `({$active}) => $active ? null : css\`\``;
+    const cssName = extractConditionsWithBabel(code);
+    expect(cssName).toBe("not_active");
+  });
+
+  it("should guess the css name from the condition of a logical expression with multiple conditions", () => {
+    const code = `({$active, $visible}) => $active && $visible && css\`\``;
+    const cssName = extractConditionsWithBabel(code);
+    expect(cssName).toBe("active_and_visible");
+  });
+
+  it("should guess the css name from the condition of a ternary expression with multiple conditions", () => {
+    const code = `({$active, $visible}) => $active ? ($visible ? css\`\` : null) : null`;
+    const cssName = extractConditionsWithBabel(code);
+    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 code = `({$active, $visible}) => !$active && $visible && css\`\``;
+    const cssName = extractConditionsWithBabel(code);
+    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 code = `({$active, $visible}) => !$active ? ($visible ? css\`\`: null) : null`;
+    const cssName = extractConditionsWithBabel(code);
+    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 code = `({$active, $visible}) => $active && !$visible && css\`\``;
+    const cssName = extractConditionsWithBabel(code);
+    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 code = `({$active, $visible}) => $active ? ($visible ? null : css\`\`) : null`;
+    const cssName = extractConditionsWithBabel(code);
+    expect(cssName).toBe("active_and_not_visible");
+  });
+});

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.yak_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.yak_0, x > 0.5 && css(__styleYak.yak_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.yak_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.yak_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.yak_0, css(__styleYak.yak_1), css(__styleYak.yak_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.yak_0, x > 0.5 && css(__styleYak.yak_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,131 @@
+// @ts-check
+
+/** @typedef {import("@babel/types")} babel */
+
+/**
+ * Try to get the name of a css literal
+ *
+ * e.g. ({$disabled}) => $disabled && css`...` -> "is_$disabled"
+ *
+ * @param {babel.NodePath<babel.types.TaggedTemplateExpression>} path
+ * @returns {string}
+ */
+function getCssName(path) {
+  const conditions = extractConditions(path);
+  if (conditions.length === 0) {
+    return "yak";
+  }
+  return conditions
+    .map((condition) => {
+      if (condition === "&&") {
+        return "and";
+      }
+      if (condition === "||") {
+        return "or";
+      }
+      return condition;
+    })
+    .join("_")
+    .replace(/\$/g, "")
+    .replace(/!/g, "not_");
+}
+
+/**
+ * Extracts the conditions from a given path.
+ *
+ * @param {babel.NodePath} path - The path to extract conditions from.
+ */
+function extractConditions(path) {
+  const conditions = [];
+  let currentPath = path.parentPath;
+  let child = path.node;
+  while (
+    currentPath &&
+    (currentPath.isLogicalExpression() || currentPath.isConditionalExpression())
+  ) {
+    if (currentPath.isConditionalExpression() && conditions.length > 0) {
+      conditions.push(operatorToWord("&&", false));
+    }
+    let left = currentPath.isLogicalExpression()
+      ? currentPath.node.left
+      : currentPath.node.test;
+    const negated = currentPath.isConditionalExpression() && currentPath.node.alternate === child;
+    const leftName = extractIdentifier(left, negated);
+    if (leftName) {
+      conditions.push(leftName);
+    }
+    while (left && left.type === "LogicalExpression") {
+      if (left.type === "LogicalExpression" && left.right !== path.node) {
+        const rightName = extractIdentifier(left.right, negated);
+        if (rightName) {
+          conditions.push(rightName);
+          conditions.push(operatorToWord(left.operator, negated));
+        }
+      }
+      left = left.left;
+      const leftName = extractIdentifier(left, negated);
+      if (leftName) {
+        conditions.push(leftName);
+      }
+    }
+    child = currentPath.node;
+    currentPath = currentPath.parentPath;
+  }
+  return conditions.reverse();
+}
+
+/**
+ * Extracts the identifier from a given node.
+ * @param {babel.types.Node} node - The node to extract the identifier from.
+ * @param {boolean} negated - Whether the node is negated.
+ */
+function extractIdentifier(node, negated) {
+  if (node.type === "Identifier") {
+    return prepend(node.name, "!", negated);
+  }
+  if (node.type === "MemberExpression" && node.object.type === "Identifier" &&  node.property.type === "Identifier") {
+    return prepend(node.object.name + node.property.name[0].toUpperCase() + node.property.name.slice(1), "!", negated);
+  }
+  if (node.type === "UnaryExpression" && node.argument.type === "Identifier") {
+    return prepend(node.argument.name, "!", !negated);
+  }
+  if (
+    node.type === "UnaryExpression" &&
+    node.argument.type === "UnaryExpression" &&
+    node.argument.argument.type === "Identifier"
+  ) {
+    return prepend(node.argument.argument.name, "!", negated);
+  }
+  return null;
+}
+
+
+/**
+ * Negates the operator if negated is true.
+ *
+ * @param {string} operator
+ * @param {boolean} negated
+
+ */
+function operatorToWord(operator, negated) {
+  switch (operator) {
+    case "&&":
+      return negated ? "or" : "and";
+    case "||":
+      return negated ? "and" : "or";
+    default:
+      return operator;
+  }  
+}
+
+/**
+ * Prepends a prefix to a string if active is true.
+ * @param {string} str - The string to prepend the prefix to.
+ * @param {string} prefix - The prefix to prepend.
+ * @param {boolean} active - Whether to prepend the prefix.
+ */
+function prepend(str, prefix, active) {
+  return active ? prefix + str : str;
+}
+
+module.exports = getCssName;

package/package.json

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