@fremtind/jokul 5.0.0-next.10 → 5.0.0-next.11

package/codemods/__tests__/import-paths.test.mjs

@@ -58,71 +58,42 @@ test("migrates internal relative core jkl imports", () => {
 test("rewrites beta style imports when the beta component is used in the same file", () => {
     const source = `
 import { BETA_Select } from "@fremtind/jokul/select";
-import "@fremtind/jokul/styles/components/select/_index.scss";
+import "@fremtind/jokul/styles/components/select";
 `;
 
-    const result = transformImportPaths(source, "/tmp/example.tsx");
+    const result = transformImportPaths(source, "/tmp/MyForm.tsx");
 
     assert.equal(
         result.text.includes(
-            '@fremtind/jokul/styles/components/beta/select/_index.scss',
+            '@fremtind/jokul/styles/components/beta/select',
         ),
         true,
     );
     assert.deepEqual(result.warnings, []);
 });
 
-test("warns when beta style imports are ambiguous", () => {
+test("warns when beta style import is ambiguous (no beta identifier in file)", () => {
     const source = `
-import "@fremtind/jokul/styles/components/nav-link";
+import "@fremtind/jokul/styles/components/select";
 `;
 
-    const result = transformImportPaths(source, "/tmp/example.scss");
+    const result = transformImportPaths(source, "/tmp/global.scss");
 
-    assert.equal(result.changed, false);
     assert.equal(result.warnings.length, 1);
+    assert.match(result.warnings[0], /Select/);
 });
 
-test("removes redundant webfonts.css imports when base or components css is also imported", () => {
-    const source = `import "@fremtind/jokul/styles/styles.css";
-import "@fremtind/jokul/styles/core/core.css";
+test("removes esm webfonts.css import when base or components css is present", () => {
+    const source = `import "@fremtind/jokul/styles/base.css";
 import "@fremtind/jokul/styles/fonts/webfonts.css";
 `;
 
     const result = transformImportPaths(source, "/tmp/main.tsx");
 
-    assert.equal(
-        result.text.includes("@fremtind/jokul/styles/fonts/webfonts.css"),
-        false,
-    );
-    assert.equal(
-        result.text.includes('import "@fremtind/jokul/styles/components.css";'),
-        true,
-    );
-    assert.equal(
-        result.text.includes('import "@fremtind/jokul/styles/base.css";'),
-        true,
-    );
+    assert.equal(result.text.includes("webfonts"), false);
     assert.deepEqual(result.warnings, []);
 });
 
-test("removes minified webfonts.css imports as well", () => {
-    const source = `import "@fremtind/jokul/styles/core/core.min.css";
-import "@fremtind/jokul/styles/fonts/webfonts.min.css";
-`;
-
-    const result = transformImportPaths(source, "/tmp/main.ts");
-
-    assert.equal(
-        result.text.includes("webfonts"),
-        false,
-    );
-    assert.equal(
-        result.text.includes('import "@fremtind/jokul/styles/base.min.css";'),
-        true,
-    );
-});
-
 test("warns when webfonts.css is removed without a base or components import", () => {
     const source = `import "@fremtind/jokul/styles/fonts/webfonts.css";
 `;
@@ -149,121 +120,525 @@ test("removes css @import of webfonts.css", () => {
     assert.deepEqual(result.warnings, []);
 });
 
-test("warns about removed sass color variables", () => {
-    const source = `@use "@fremtind/jokul/styles/jkl";
 
-.banner {
-    background: jkl.$color-granitt;
-    color: jkl.$color-snohvit;
+test("renames Fremtind Material Symbols font-family", () => {
+    const source = `.icon {
+    font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
 }
 `;
 
-    const result = transformImportPaths(source, "/tmp/banner.scss");
+    const result = transformImportPaths(source, "/tmp/icons.scss");
 
     assert.equal(
-        result.warnings.some((warning) =>
-            /jkl\.\$color-\*/.test(warning),
+        result.text.includes("Fremtind Material Symbols"),
+        false,
+    );
+    assert.equal(
+        result.text.includes(
+            '"Jokul Icons", "Jokul Icons Fallback", sans-serif',
         ),
         true,
     );
-    // Bare én advarsel per mønster, selv om det er flere forekomster
+    assert.equal(result.replacements, 2);
+});
+
+test("renames Fremtind Material Symbols inside CSS files too", () => {
+    const source = `.icon {
+    font-family: 'Fremtind Material Symbols';
+}
+`;
+
+    const result = transformImportPaths(source, "/tmp/icons.css");
+
     assert.equal(
-        result.warnings.filter((warning) =>
-            /jkl\.\$color-\*/.test(warning),
-        ).length,
-        1,
+        result.text.includes("Fremtind Material Symbols"),
+        false,
     );
+    assert.equal(result.text.includes("'Jokul Icons'"), true);
 });
 
-test("warns about removed light/dark mode mixins", () => {
-    const source = `@use "@fremtind/jokul/styles/jkl";
+test("renames CSS background-action token", () => {
+    const source = `.btn {
+    background: var(--jkl-color-background-action);
+    color: var(--jkl-color-text-on-action);
+}
+`;
+
+    const result = transformImportPaths(source, "/tmp/button.css");
+
+    assert.equal(result.text.includes("--jkl-color-background-action"), false);
+    assert.equal(result.text.includes("--jkl-color-text-on-action"), false);
+    assert.equal(result.text.includes("--jkl-color-background-contrast"), true);
+    assert.equal(result.text.includes("--jkl-color-text-on-contrast"), true);
+    assert.equal(result.changed, true);
+});
+
+test("renames CSS text-inverted token to text-on-contrast", () => {
+    const source = `.inverted {
+    color: var(--jkl-color-text-inverted);
+}
+`;
+
+    const result = transformImportPaths(source, "/tmp/theme.css");
+
+    assert.equal(result.text.includes("--jkl-color-text-inverted"), false);
+    assert.equal(result.text.includes("--jkl-color-text-on-contrast"), true);
+});
 
-@include jkl.light-mode-variables {
-    --min-farge: jkl.$color-granitt;
+test("renames CSS container-high and container-low tokens", () => {
+    const source = `.card-high {
+    background: var(--jkl-color-background-container-high);
 }
-@include jkl.dark-mode-variables {
-    --min-farge: jkl.$color-snohvit;
+.card-low {
+    background: var(--jkl-color-background-container-low);
 }
 `;
 
-    const result = transformImportPaths(source, "/tmp/theme.scss");
+    const result = transformImportPaths(source, "/tmp/card.css");
 
+    assert.equal(result.text.includes("--jkl-color-background-container-high"), false);
+    assert.equal(result.text.includes("--jkl-color-background-container-low"), false);
     assert.equal(
-        result.warnings.some((warning) =>
-            /light-mode-variables/.test(warning),
-        ),
-        true,
+        result.text.split("--jkl-color-background-container").length - 1,
+        2,
+        "should have two occurrences of the new token",
     );
 });
 
-test("warns about deprecated text-style names", () => {
-    const source = `@use "@fremtind/jokul/styles/jkl";
+test("renames CSS alert tokens to feedback tokens", () => {
+    const source = `.info { background: var(--jkl-color-background-alert-info); }
+.warning { background: var(--jkl-color-background-alert-warning); }
+.error { background: var(--jkl-color-background-alert-error); }
+.success { background: var(--jkl-color-background-alert-success); }
+`;
 
-.lead {
-    @include jkl.text-style("body");
-}
+    const result = transformImportPaths(source, "/tmp/alerts.css");
+
+    assert.equal(result.text.includes("--jkl-color-background-alert-"), false);
+    assert.equal(result.text.includes("--jkl-color-info-background-container"), true);
+    assert.equal(result.text.includes("--jkl-color-warning-background-container"), true);
+    assert.equal(result.text.includes("--jkl-color-error-background-container"), true);
+    assert.equal(result.text.includes("--jkl-color-success-background-container"), true);
+});
 
-.fineprint {
-    @include jkl.text-style("small");
+test("warns about removed interactive tokens", () => {
+    const source = `.item {
+    background: var(--jkl-color-background-interactive);
+    color: var(--jkl-color-text-interactive);
 }
 `;
 
-    const result = transformImportPaths(source, "/tmp/typography.scss");
+    const result = transformImportPaths(source, "/tmp/interactive.css");
 
     assert.equal(
-        result.warnings.some((warning) =>
-            /paragraph-large\/medium\/small/.test(warning),
-        ),
+        result.warnings.some((w) => /interactive/.test(w)),
         true,
     );
     assert.equal(
-        result.warnings.some((warning) => /<Text>-komponenten/.test(warning)),
+        result.warnings.filter((w) => /interactive/.test(w)).length,
+        1,
+        "should produce one warning for both interactive tokens",
+    );
+});
+
+test("warns about removed text-on-alert tokens", () => {
+    const source = `.info { color: var(--jkl-color-text-on-alert-info); }
+`;
+
+    const result = transformImportPaths(source, "/tmp/alerts.css");
+
+    assert.equal(
+        result.warnings.some((w) => /text-on-alert/.test(w)),
         true,
     );
 });
 
-test("renames Fremtind Material Symbols font-family", () => {
-    const source = `.icon {
-    font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
-}
+test("warns about Card variant prop", () => {
+    const source = `<Card variant="outlined">
+    <p>Innhold</p>
+</Card>
 `;
 
-    const result = transformImportPaths(source, "/tmp/icons.scss");
+    const result = transformImportPaths(source, "/tmp/MyCard.tsx");
 
     assert.equal(
-        result.text.includes("Fremtind Material Symbols"),
-        false,
+        result.warnings.some((w) => /variant/.test(w) && /Card/.test(w)),
+        true,
+    );
+});
+
+test("warns about Card variant high and low", () => {
+    const source = `function Page() {
+    return (
+        <>
+            <Card variant="high">Høy</Card>
+            <Card variant="low">Lav</Card>
+        </>
     );
+}
+`;
+
+    const result = transformImportPaths(source, "/tmp/Page.tsx");
+
     assert.equal(
-        result.text.includes(
-            '"Jokul Icons", "Jokul Icons Fallback", sans-serif',
-        ),
+        result.warnings.some((w) => /variant/.test(w)),
         true,
     );
+    assert.equal(
+        result.warnings.filter((w) => /variant/.test(w)).length,
+        1,
+        "should produce one warning even with multiple variant usages",
+    );
+});
+
+test("renames container-inverted to background-contrast", () => {
+    const source = `.inverted { background: var(--jkl-color-background-container-inverted); }
+`;
+
+    const result = transformImportPaths(source, "/tmp/inverted.css");
+
+    assert.equal(result.text.includes("--jkl-color-background-container-inverted"), false);
+    assert.equal(result.text.includes("--jkl-color-background-contrast"), true);
+    assert.deepEqual(result.warnings, []);
+});
+
+// --- idempotency ---
+
+test("is idempotent — running twice gives same result", () => {
+    const source = `import "@fremtind/jokul/styles/core/core.scss";
+
+.btn { background: var(--jkl-color-background-action); }
+`;
+
+    const first = transformImportPaths(source, "/tmp/page.scss");
+    const second = transformImportPaths(first.text, "/tmp/page.scss");
+
+    assert.equal(second.changed, false);
+    assert.equal(second.replacements, 0);
+    assert.equal(second.text, first.text);
+});
+
+// --- no-op ---
+
+test("returns changed: false for an already-migrated file", () => {
+    const source = `import "@fremtind/jokul/styles/base.scss";
+
+.btn { background: var(--jkl-color-background-contrast); }
+`;
+
+    const result = transformImportPaths(source, "/tmp/page.ts");
+
+    assert.equal(result.changed, false);
+    assert.equal(result.replacements, 0);
+    assert.deepEqual(result.warnings, []);
+});
+
+// --- token boundary safety ---
+
+test("does not rename token that is a prefix of a longer token", () => {
+    // --jkl-color-text-inverted should not match inside --jkl-color-text-inverted-extra
+    const source = `.x { color: var(--jkl-color-text-inverted-extra); }`;
+
+    const result = transformImportPaths(source, "/tmp/x.css");
+
+    assert.equal(result.text.includes("--jkl-color-text-inverted-extra"), true);
+    assert.equal(result.changed, false);
+});
+
+test("does not rename --jkl-color-background-container (base token, not a v4 token)", () => {
+    const source = `.x { background: var(--jkl-color-background-container); }`;
+
+    const result = transformImportPaths(source, "/tmp/x.css");
+
+    assert.equal(result.text, source);
+    assert.equal(result.changed, false);
+});
+
+test("renames container-high but leaves sibling container-low and base container intact in same rule", () => {
+    const source = `.x {
+    --high: var(--jkl-color-background-container-high);
+    --low: var(--jkl-color-background-container-low);
+    --base: var(--jkl-color-background-container);
+}
+`;
+
+    const result = transformImportPaths(source, "/tmp/x.css");
+
+    assert.equal(result.text.includes("--jkl-color-background-container-high"), false);
+    assert.equal(result.text.includes("--jkl-color-background-container-low"), false);
+    assert.equal(result.text.includes("var(--jkl-color-background-container)"), true,
+        "base container token must survive unchanged");
     assert.equal(result.replacements, 2);
 });
 
-test("renames Fremtind Material Symbols inside CSS files too", () => {
+test("does not rename alert-info token that has a longer suffix", () => {
+    const source = `.x { background: var(--jkl-color-background-alert-info-extra); }`;
+
+    const result = transformImportPaths(source, "/tmp/x.css");
+
+    assert.equal(result.changed, false);
+});
+
+// --- CSS token as custom property definition ---
+
+test("renames token used as a custom property definition, not just inside var()", () => {
+    const source = `:root {
+    --jkl-color-background-action: #005aa4;
+    --jkl-color-text-inverted: #fff;
+}
+`;
+
+    const result = transformImportPaths(source, "/tmp/overrides.css");
+
+    assert.equal(result.text.includes("--jkl-color-background-action:"), false);
+    assert.equal(result.text.includes("--jkl-color-text-inverted:"), false);
+    assert.equal(result.text.includes("--jkl-color-background-contrast:"), true);
+    assert.equal(result.text.includes("--jkl-color-text-on-contrast:"), true);
+});
+
+// --- webfonts edge cases ---
+
+test("removes webfonts.min.css import", () => {
+    const source = `import "@fremtind/jokul/styles/base.css";
+import "@fremtind/jokul/styles/fonts/webfonts.min.css";
+`;
+
+    const result = transformImportPaths(source, "/tmp/main.tsx");
+
+    assert.equal(result.text.includes("webfonts"), false);
+    assert.deepEqual(result.warnings, []);
+});
+
+test("removes webfonts.css when imported with require()", () => {
+    const source = `require("@fremtind/jokul/styles/base.css");
+require("@fremtind/jokul/styles/fonts/webfonts.css");
+`;
+
+    const result = transformImportPaths(source, "/tmp/main.cjs");
+
+    assert.equal(result.text.includes("webfonts"), false);
+    assert.deepEqual(result.warnings, []);
+});
+
+// --- font family edge cases ---
+
+test("renames only the fallback font-family if primary is absent", () => {
     const source = `.icon {
-    font-family: 'Fremtind Material Symbols';
+    font-family: "Fremtind Material Symbols Fallback";
 }
 `;
 
     const result = transformImportPaths(source, "/tmp/icons.css");
 
-    assert.equal(
-        result.text.includes("Fremtind Material Symbols"),
-        false,
-    );
-    assert.equal(result.text.includes("'Jokul Icons'"), true);
+    assert.equal(result.text.includes("Fremtind Material Symbols Fallback"), false);
+    assert.equal(result.text.includes("Jokul Icons Fallback"), true);
+    assert.equal(result.replacements, 1);
+});
+
+// --- combined transforms ---
+
+test("applies import path and token rename in one pass", () => {
+    const source = `import "@fremtind/jokul/styles/core/core.scss";
+
+.inverted {
+    background: var(--jkl-color-background-action);
+}
+
+export default function Page() {
+    return <section />;
+}
+`;
+
+    const result = transformImportPaths(source, "/tmp/page.tsx");
+
+    assert.equal(result.text.includes("styles/core/core"), false);
+    assert.equal(result.text.includes("--jkl-color-background-action"), false);
+    assert.equal(result.text.includes("styles/base.scss"), true);
+    assert.equal(result.text.includes("--jkl-color-background-contrast"), true);
+    assert.equal(result.replacements, 2);
+});
+
+// --- SCSS-only transforms ---
+
+test("does not reorder font import in a .css file", () => {
+    const source = `@import "@fremtind/jokul/styles/base.css";
+@import "@fremtind/jokul/styles/theme/fonts";
+`;
+
+    const result = transformImportPaths(source, "/tmp/global.css");
+
+    assert.equal(result.reordered, false);
+});
+
+// --- Tailwind color class renames ---
+
+test("renames bg-background-action to bg-background-contrast", () => {
+    const source = `<div className="bg-background-action text-white">Innhold</div>`;
+
+    const result = transformImportPaths(source, "/tmp/component.tsx");
+
+    assert.equal(result.text.includes("bg-background-action"), false);
+    assert.equal(result.text.includes("bg-background-contrast"), true);
+    assert.equal(result.replacements, 1);
 });
 
+test("renames text-text-inverted to text-text-on-contrast", () => {
+    const source = `<p className="text-text-inverted">Tekst</p>`;
+
+    const result = transformImportPaths(source, "/tmp/page.tsx");
+
+    assert.equal(result.text.includes("text-text-inverted"), false);
+    assert.equal(result.text.includes("text-text-on-contrast"), true);
+});
+
+test("renames text-text-on-action to text-text-on-contrast", () => {
+    const source = `<button className="bg-background-contrast text-text-on-action">Knapp</button>`;
+
+    const result = transformImportPaths(source, "/tmp/button.tsx");
+
+    assert.equal(result.text.includes("text-text-on-action"), false);
+    assert.equal(result.text.includes("text-text-on-contrast"), true);
+});
+
+test("renames bg-background-container-high and -low", () => {
+    const source = `<div className="bg-background-container-high md:bg-background-container-low">
+    Innhold
+</div>`;
+
+    const result = transformImportPaths(source, "/tmp/card.tsx");
+
+    assert.equal(result.text.includes("bg-background-container-high"), false);
+    assert.equal(result.text.includes("bg-background-container-low"), false);
+    assert.equal(result.text.includes("bg-background-container"), true);
+    assert.equal(result.replacements, 2);
+});
+
+test("does not rename bg-background-container (base Tailwind class)", () => {
+    const source = `<div className="bg-background-container">Innhold</div>`;
+
+    const result = transformImportPaths(source, "/tmp/card.tsx");
+
+    assert.equal(result.text, source);
+    assert.equal(result.changed, false);
+});
+
+test("renames bg-background-alert-info to bg-info-background-container", () => {
+    const source = `<div className="bg-background-alert-info border-border-subdued">
+    Info
+</div>`;
+
+    const result = transformImportPaths(source, "/tmp/alert.tsx");
+
+    assert.equal(result.text.includes("bg-background-alert-info"), false);
+    assert.equal(result.text.includes("bg-info-background-container"), true);
+    assert.equal(result.replacements, 1);
+});
+
+test("renames all four alert color classes", () => {
+    const source = `className="bg-background-alert-info bg-background-alert-warning bg-background-alert-error bg-background-alert-success"`;
+
+    const result = transformImportPaths(source, "/tmp/alerts.tsx");
+
+    assert.equal(result.text.includes("bg-background-alert-"), false);
+    assert.equal(result.text.includes("bg-info-background-container"), true);
+    assert.equal(result.text.includes("bg-warning-background-container"), true);
+    assert.equal(result.text.includes("bg-error-background-container"), true);
+    assert.equal(result.text.includes("bg-success-background-container"), true);
+    assert.equal(result.replacements, 4);
+});
+
+test("renames Tailwind class with hover: modifier", () => {
+    const source = `<div className="hover:bg-background-action focus:bg-background-action">X</div>`;
+
+    const result = transformImportPaths(source, "/tmp/cmp.tsx");
+
+    assert.equal(result.text.includes("bg-background-action"), false);
+    assert.equal(result.text.includes("hover:bg-background-contrast"), true);
+    assert.equal(result.text.includes("focus:bg-background-contrast"), true);
+    assert.equal(result.replacements, 2);
+});
+
+test("renames Tailwind class with opacity modifier (/50)", () => {
+    const source = `<div className="bg-background-action/50">X</div>`;
+
+    const result = transformImportPaths(source, "/tmp/cmp.tsx");
+
+    assert.equal(result.text.includes("bg-background-action/50"), false);
+    assert.equal(result.text.includes("bg-background-contrast/50"), true);
+    assert.equal(result.replacements, 1);
+});
+
+test("renames Tailwind class in @apply rule", () => {
+    const source = `.btn {
+    @apply bg-background-action text-text-inverted;
+}
+`;
+
+    const result = transformImportPaths(source, "/tmp/styles.css");
+
+    assert.equal(result.text.includes("bg-background-action"), false);
+    assert.equal(result.text.includes("text-text-inverted"), false);
+    assert.equal(result.text.includes("bg-background-contrast"), true);
+    assert.equal(result.text.includes("text-text-on-contrast"), true);
+    assert.equal(result.replacements, 2);
+});
+
+test("renames non-bg prefix: border-background-action", () => {
+    const source = `<div className="border-background-action">X</div>`;
+
+    const result = transformImportPaths(source, "/tmp/cmp.tsx");
+
+    assert.equal(result.text.includes("border-background-action"), false);
+    assert.equal(result.text.includes("border-background-contrast"), true);
+});
+
+test("does not rename longer Tailwind class that shares a prefix", () => {
+    // bg-background-container-inverted-extra must not match bg-background-container-inverted
+    const source = `<div className="bg-background-container-inverted-extra">X</div>`;
+
+    const result = transformImportPaths(source, "/tmp/cmp.tsx");
+
+    assert.equal(result.text, source);
+    assert.equal(result.changed, false);
+});
+
+test("Tailwind renames are idempotent", () => {
+    const source = `<div className="bg-background-contrast text-text-on-contrast">X</div>`;
+
+    const result = transformImportPaths(source, "/tmp/cmp.tsx");
+
+    assert.equal(result.changed, false);
+    assert.equal(result.replacements, 0);
+});
+
+// --- Tailwind warnings ---
+
+test("warns about bg-background-interactive Tailwind class", () => {
+    const source = `<div className="bg-background-interactive hover:bg-background-interactive-hover">X</div>`;
+
+    const result = transformImportPaths(source, "/tmp/cmp.tsx");
+
+    assert.equal(result.warnings.some((w) => /background-interactive/.test(w)), true);
+    assert.equal(result.warnings.filter((w) => /background-interactive/.test(w)).length, 1);
+});
+
+test("warns about border-border-separator Tailwind class", () => {
+    const source = `<div className="border border-border-separator">X</div>`;
+
+    const result = transformImportPaths(source, "/tmp/cmp.tsx");
+
+    assert.equal(result.warnings.some((w) => /border-border-separator/.test(w) || /kantklasser/.test(w)), true);
+});
+
+// --- does not warn about valid 5.0 patterns ---
+
 test("does not warn about valid 5.0 patterns", () => {
     const source = `@use "@fremtind/jokul/styles/jkl";
 
 .title {
     @include jkl.text-style("heading-1");
     color: var(--jkl-color-text-default);
+    background: var(--jkl-color-background-contrast);
 }
 `;