@fremtind/jokul 5.0.0-next.8 → 5.0.0

package/codemods/import-paths.mjs

@@ -1,6 +1,21 @@
-import { readdir, readFile, stat, writeFile } from "node:fs/promises";
+import { readFile, readdir, stat, writeFile } from "node:fs/promises";
 import path from "node:path";
 
+import {
+    applyCssTokenRenames,
+    applyTailwindColorRenames,
+} from "./transforms/color-tokens.mjs";
+import { applyExpandablePanelTransforms } from "./transforms/expandable-panel.mjs";
+import { applyFontFamilyReplacements } from "./transforms/font-family.mjs";
+import {
+    BASE_OR_COMPONENT_CSS_PATTERN,
+    applyBetaStyleReplacements,
+    applyDirectReplacements,
+    removeRedundantWebfontsCssImport,
+    reorderConfiguredFontImport,
+} from "./transforms/import-specifiers.mjs";
+import { collectManualMigrationWarnings } from "./transforms/warnings.mjs";
+
 const TEXT_EXTENSIONS = new Set([
     ".cjs",
     ".css",
@@ -38,116 +53,8 @@ const IGNORED_FILE_PATTERNS = [
     "/packages/jokul/codemods/",
 ];
 
-const DIRECT_REPLACEMENTS = [
-    [
-        "@fremtind/jokul/styles/core/core.min.css",
-        "@fremtind/jokul/styles/base.min.css",
-    ],
-    [
-        "@fremtind/jokul/styles/core/core.css",
-        "@fremtind/jokul/styles/base.css",
-    ],
-    [
-        "@fremtind/jokul/styles/core/core.scss",
-        "@fremtind/jokul/styles/base.scss",
-    ],
-    ["@fremtind/jokul/styles/core/core", "@fremtind/jokul/styles/base"],
-    [
-        "@fremtind/jokul/styles/styles.min.css",
-        "@fremtind/jokul/styles/components.min.css",
-    ],
-    ["@fremtind/jokul/styles/styles.css", "@fremtind/jokul/styles/components.css"],
-    [
-        "@fremtind/jokul/styles/styles.scss",
-        "@fremtind/jokul/styles/components.scss",
-    ],
-    ["@fremtind/jokul/styles/styles", "@fremtind/jokul/styles/components"],
-    [
-        "@fremtind/jokul/styles/core/jkl/index",
-        "@fremtind/jokul/styles/jkl",
-    ],
-    ["@fremtind/jokul/styles/core/jkl", "@fremtind/jokul/styles/jkl"],
-    [
-        "@fremtind/jokul/styles/fonts/webfonts.scss",
-        "@fremtind/jokul/styles/theme/fonts",
-    ],
-    [
-        "@fremtind/jokul/styles/fonts/webfonts",
-        "@fremtind/jokul/styles/theme/fonts",
-    ],
-    ["@fremtind/jokul/styles/fonts", "@fremtind/jokul/styles/theme/fonts"],
-    ["../../../core/jkl/index", "../../../styles/jkl"],
-    ["../../../core/jkl", "../../../styles/jkl"],
-    ["../../core/jkl/index", "../../styles/jkl"],
-    ["../../core/jkl", "../../styles/jkl"],
-    ["../core/jkl/index", "../styles/jkl"],
-    ["../core/jkl", "../styles/jkl"],
-    ["@fremtind/jokul/tailwind/v4", "@fremtind/jokul/styles/tailwind"],
-    ["@fremtind/jokul/styles/core", "@fremtind/jokul/styles/base.scss"],
-    ["@fremtind/jokul/styles", "@fremtind/jokul/styles/components.scss"],
-    ["@fremtind/jokul/core", "@fremtind/jokul/utilities"],
-].sort(([a], [b]) => b.length - a.length);
-
-const BETA_STYLE_MIGRATIONS = [
-    {
-        component: "DescriptionList",
-        betaIdentifiers: ["BETA_DescriptionList", "BETA_DescriptionListItem"],
-        replacements: [
-            [
-                "@fremtind/jokul/styles/components/description-list/_index.scss",
-                "@fremtind/jokul/styles/components/beta/description-list/_index.scss",
-            ],
-            [
-                "@fremtind/jokul/styles/components/description-list/description-list.scss",
-                "@fremtind/jokul/styles/components/beta/description-list/description-list.scss",
-            ],
-            [
-                "@fremtind/jokul/styles/components/description-list",
-                "@fremtind/jokul/styles/components/beta/description-list",
-            ],
-        ],
-    },
-    {
-        component: "NavLink",
-        betaIdentifiers: ["BETA_NavLink"],
-        replacements: [
-            [
-                "@fremtind/jokul/styles/components/nav-link/_index.scss",
-                "@fremtind/jokul/styles/components/beta/nav-link/_index.scss",
-            ],
-            [
-                "@fremtind/jokul/styles/components/nav-link/nav-link.scss",
-                "@fremtind/jokul/styles/components/beta/nav-link/navlink.scss",
-            ],
-            [
-                "@fremtind/jokul/styles/components/nav-link",
-                "@fremtind/jokul/styles/components/beta/nav-link",
-            ],
-        ],
-    },
-    {
-        component: "Select",
-        betaIdentifiers: ["BETA_Select"],
-        replacements: [
-            [
-                "@fremtind/jokul/styles/components/select/_index.scss",
-                "@fremtind/jokul/styles/components/beta/select/_index.scss",
-            ],
-            [
-                "@fremtind/jokul/styles/components/select/select.scss",
-                "@fremtind/jokul/styles/components/beta/select/select.scss",
-            ],
-            [
-                "@fremtind/jokul/styles/components/select",
-                "@fremtind/jokul/styles/components/beta/select",
-            ],
-        ],
-    },
-];
-
 function shouldIgnoreFile(filePath) {
     const normalizedPath = filePath.split(path.sep).join("/");
-
     return IGNORED_FILE_PATTERNS.some((pattern) =>
         normalizedPath.includes(pattern),
     );
@@ -157,225 +64,15 @@ function shouldIgnoreDirectory(directoryPath) {
     return IGNORED_DIRECTORIES.has(path.basename(directoryPath));
 }
 
-function escapeRegExp(value) {
-    return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
-
-function replaceSpecifier(text, from, to) {
-    const pattern = new RegExp(
-        `(?<![A-Za-z0-9_./-])${escapeRegExp(from)}(?![A-Za-z0-9_./-])`,
-        "g",
-    );
-
-    let count = 0;
-    const next = text.replace(pattern, () => {
-        count += 1;
-        return to;
-    });
-
-    return { text: next, count };
-}
-
-function applyDirectReplacements(text) {
-    let next = text;
-    let replacements = 0;
-
-    for (const [from, to] of DIRECT_REPLACEMENTS) {
-        const result = replaceSpecifier(next, from, to);
-        next = result.text;
-        replacements += result.count;
-    }
-
-    return { text: next, replacements };
-}
-
-function applyBetaStyleReplacements(text) {
-    let next = text;
-    let replacements = 0;
-    const warnings = [];
-
-    for (const migration of BETA_STYLE_MIGRATIONS) {
-        const mentionsBeta = migration.betaIdentifiers.some((identifier) =>
-            next.includes(identifier),
-        );
-
-        const hasOldSpecifier = migration.replacements.some(([from]) =>
-            new RegExp(
-                `(?<![A-Za-z0-9_./-])${escapeRegExp(from)}(?![A-Za-z0-9_./-])`,
-            ).test(next),
-        );
-
-        if (!hasOldSpecifier) {
-            continue;
-        }
-
-        if (!mentionsBeta) {
-            warnings.push(
-                `Manuell vurdering: gammel stilimport for ${migration.component} kan peke på enten stabil eller beta-variant.`,
-            );
-            continue;
-        }
-
-        for (const [from, to] of migration.replacements) {
-            const result = replaceSpecifier(next, from, to);
-            next = result.text;
-            replacements += result.count;
-        }
-    }
-
-    return { text: next, replacements, warnings };
-}
-
-/**
- * Font-family-navnet "Fremtind Material Symbols" (og tilhørende fallback) ble
- * omdøpt til "Jokul Icons" i Jøkul 5. Konsumenter som har skrevet font-family
- * direkte i sin egen CSS/SCSS får ellers en stille brutt referanse.
- *
- * Fallback-navnet erstattes først (lengst først), slik at det ikke blir
- * delvis overskrevet av kortere mønster.
- */
-const FONT_FAMILY_REPLACEMENTS = [
-    ["Fremtind Material Symbols Fallback", "Jokul Icons Fallback"],
-    ["Fremtind Material Symbols", "Jokul Icons"],
-];
-
-function applyFontFamilyReplacements(text) {
-    let next = text;
-    let count = 0;
-
-    for (const [from, to] of FONT_FAMILY_REPLACEMENTS) {
-        const pattern = new RegExp(escapeRegExp(from), "g");
-        next = next.replace(pattern, () => {
-            count += 1;
-            return to;
-        });
-    }
-
-    return { text: next, count };
-}
-
-const WEBFONTS_CSS_SPECIFIER =
-    "@fremtind/jokul/styles/fonts/webfonts(?:\\.min)?\\.css";
-
-const BASE_OR_COMPONENT_CSS_PATTERN = new RegExp(
-    "@fremtind/jokul/styles/(?:base|components)(?:\\.min)?\\.css",
-);
-
-const WEBFONTS_CSS_REMOVAL_PATTERNS = [
-    // import "@fremtind/jokul/styles/fonts/webfonts.css"; (ESM)
-    new RegExp(
-        `^[ \\t]*import\\s+["']${WEBFONTS_CSS_SPECIFIER}["']\\s*;?[ \\t]*\\r?\\n?`,
-        "gm",
-    ),
-    // require("@fremtind/jokul/styles/fonts/webfonts.css"); (CJS)
-    new RegExp(
-        `^[ \\t]*require\\(\\s*["']${WEBFONTS_CSS_SPECIFIER}["']\\s*\\)\\s*;?[ \\t]*\\r?\\n?`,
-        "gm",
-    ),
-    // @import "@fremtind/jokul/styles/fonts/webfonts.css"; (CSS / SCSS)
-    new RegExp(
-        `^[ \\t]*@import\\s+["']${WEBFONTS_CSS_SPECIFIER}["']\\s*;?[ \\t]*\\r?\\n?`,
-        "gm",
-    ),
-];
-
-/**
- * I Jøkul 5 er `@font-face`-definisjonene flyttet inn i `styles/base.css`, og den
- * frittstående `styles/fonts/webfonts.css` finnes ikke lenger i pakken. For
- * .css-konsumenter betyr det at gamle `webfonts.css`-imports må fjernes – ellers
- * blir bygget brutt fordi filen er borte. SCSS-konsumenter håndteres av
- * `DIRECT_REPLACEMENTS` siden de kan ha behov for å overstyre `$webfonts-dir`.
- */
-function removeRedundantWebfontsCssImport(text) {
-    let next = text;
-    let count = 0;
-
-    for (const pattern of WEBFONTS_CSS_REMOVAL_PATTERNS) {
-        next = next.replace(pattern, () => {
-            count += 1;
-            return "";
-        });
-    }
-
-    return { text: next, count };
-}
-
-/**
- * Patterns som ikke kan auto-erstattes, men som krever manuell migrering ved
- * oppgradering fra Jøkul 4 til 5. Hvert mønster gir én advarsel per fil det
- * matcher i (uavhengig av antall forekomster), med peker til hva man skal
- * gjøre i stedet.
- */
-const MANUAL_MIGRATION_WARNINGS = [
-    {
-        // jkl.$color-granitt, jkl.$color-varde, osv. Alle Sass-fargevariabler
-        // ble fjernet i Jøkul 5 til fordel for semantiske CSS-variabler.
-        pattern: /\bjkl\.\$color-[a-z][a-z0-9-]*/i,
-        message:
-            "Fjernede Sass-fargevariabler (jkl.$color-*). I Jøkul 5 er alle gamle fargenavn (granitt, varde, snohvit osv.) fjernet — bruk semantiske CSS-variabler, f.eks. var(--jkl-color-text-default). Se https://jokul-portal.intern.app.prodaws.fremtind.no/fundamenter/farger.",
-    },
-    {
-        // @include jkl.light-mode-variables { ... } / dark-mode-variables { ... }
-        pattern: /@include\s+jkl\.(?:light|dark)-mode-variables\b/,
-        message:
-            "Fjernede mixins for custom light/dark-farger (jkl.light-mode-variables / jkl.dark-mode-variables). I Jøkul 5 må du bruke semantiske CSS-variabler i stedet for å definere egne dark/light-varianter.",
-    },
-    {
-        // @include jkl.text-style("body") / text-style("small")
-        pattern: /\btext-style\(\s*["'](?:body|small)["']\s*\)/,
-        message:
-            'Fjernede tekststiler ("body", "small") i text-style-mixin. Foretrekk å bruke <Text>-komponenten der det er mulig (`import { Text } from "@fremtind/jokul/components/typography"`). Hvis du må sette stiler direkte, bytt til "paragraph-large/medium/small" eller "text-large/medium/small/micro" — se https://jokul-portal.intern.app.prodaws.fremtind.no/fundamenter/typografi.',
-    },
-];
-
-function collectManualMigrationWarnings(text) {
-    const warnings = [];
-
-    for (const { pattern, message } of MANUAL_MIGRATION_WARNINGS) {
-        if (pattern.test(text)) {
-            warnings.push(`Manuell vurdering: ${message}`);
-        }
-    }
-
-    return warnings;
-}
-
-function reorderConfiguredFontImport(text) {
-    const fontImportPattern =
-        /^@use\s+["']@fremtind\/jokul\/styles\/theme\/fonts["'][\s\S]*?;\s*/m;
-    const baseImportPattern =
-        /^@use\s+["']@fremtind\/jokul\/styles\/base(?:\.scss)?["'][^;]*;\s*/m;
-
-    const fontMatch = fontImportPattern.exec(text);
-    const baseMatch = baseImportPattern.exec(text);
-
-    if (!fontMatch || !baseMatch || fontMatch.index < baseMatch.index) {
-        return { text, reordered: false };
-    }
-
-    const withoutFontImport =
-        text.slice(0, fontMatch.index) +
-        text.slice(fontMatch.index + fontMatch[0].length);
-    const nextBaseMatch = baseImportPattern.exec(withoutFontImport);
-
-    if (!nextBaseMatch) {
-        return { text, reordered: false };
-    }
-
-    const nextText =
-        withoutFontImport.slice(0, nextBaseMatch.index) +
-        fontMatch[0] +
-        withoutFontImport.slice(nextBaseMatch.index);
-
-    return { text: nextText, reordered: true };
-}
-
 export function transformImportPaths(text, filePath = "") {
     const webfontsRemoval = removeRedundantWebfontsCssImport(text);
     const fontFamily = applyFontFamilyReplacements(webfontsRemoval.text);
     const direct = applyDirectReplacements(fontFamily.text);
     const beta = applyBetaStyleReplacements(direct.text);
-    let next = beta.text;
+    const cssTokens = applyCssTokenRenames(beta.text);
+    const tailwindColors = applyTailwindColorRenames(cssTokens.text);
+    const expandablePanel = applyExpandablePanelTransforms(tailwindColors.text);
+    let next = expandablePanel.text;
     let reordered = false;
 
     if (/\.(sass|scss)$/i.test(filePath)) {
@@ -405,7 +102,10 @@ export function transformImportPaths(text, filePath = "") {
             direct.replacements +
             beta.replacements +
             webfontsRemoval.count +
-            fontFamily.count,
+            fontFamily.count +
+            cssTokens.count +
+            tailwindColors.count +
+            expandablePanel.count,
         warnings,
         reordered,
     };
@@ -428,14 +128,16 @@ async function collectFiles(targetPath, collected) {
             if (entry.isDirectory() && IGNORED_DIRECTORIES.has(entry.name)) {
                 continue;
             }
-
             await collectFiles(path.join(targetPath, entry.name), collected);
         }
 
         return collected;
     }
 
-    if (TEXT_EXTENSIONS.has(path.extname(targetPath)) && !shouldIgnoreFile(targetPath)) {
+    if (
+        TEXT_EXTENSIONS.has(path.extname(targetPath)) &&
+        !shouldIgnoreFile(targetPath)
+    ) {
         collected.push(targetPath);
     }
 
@@ -443,10 +145,7 @@ async function collectFiles(targetPath, collected) {
 }
 
 function parseArguments(rawArgs) {
-    const options = {
-        dryRun: false,
-        verbose: false,
-    };
+    const options = { dryRun: false, verbose: false };
     const targets = [];
 
     for (const arg of rawArgs) {
@@ -454,25 +153,19 @@ function parseArguments(rawArgs) {
             options.dryRun = true;
             continue;
         }
-
         if (arg === "--verbose") {
             options.verbose = true;
             continue;
         }
-
         if (arg === "--help" || arg === "-h") {
             throw new Error(
                 "Bruk: jokul codemod [import-paths] [sti ...] [--dry-run] [--verbose]",
             );
         }
-
         targets.push(arg);
     }
 
-    return {
-        options,
-        targets: targets.length > 0 ? targets : ["."],
-    };
+    return { options, targets: targets.length > 0 ? targets : ["."] };
 }
 
 export async function runImportPathsCodemod(rawArgs = []) {
@@ -510,7 +203,9 @@ export async function runImportPathsCodemod(rawArgs = []) {
         }
 
         if (options.verbose || options.dryRun) {
-            console.log(`${options.dryRun ? "Ville endret" : "Endret"} ${filePath}`);
+            console.log(
+                `${options.dryRun ? "Ville endret" : "Endret"} ${filePath}`,
+            );
         }
     }
 
@@ -522,6 +217,6 @@ export async function runImportPathsCodemod(rawArgs = []) {
     }
 
     console.log(
-        `\n${options.dryRun ? "Dry run ferdig" : "Codemod ferdig"}: ${changedFiles} filer, ${changedSpecifiers} erstattede imports${reorderedFiles > 0 ? `, ${reorderedFiles} justerte font-importrekkefølger` : ""}.`,
+        `\n${options.dryRun ? "Dry run ferdig" : "Codemod ferdig"}: ${changedFiles} filer, ${changedSpecifiers} erstatninger${reorderedFiles > 0 ? `, ${reorderedFiles} justerte font-importrekkefølger` : ""}.`,
     );
 }

package/codemods/transforms/color-tokens.mjs

@@ -0,0 +1,102 @@
+import { replaceSpecifier, replaceTailwindClass } from "../utils.mjs";
+
+// Sortert lengst-først: spesifikke tokens (f.eks. -alert-info) må ikke bli
+// delvis matchet av kortere prefiks.
+const CSS_TOKEN_RENAMES = [
+    [
+        "--jkl-color-background-alert-warning",
+        "--jkl-color-warning-background-container",
+    ],
+    [
+        "--jkl-color-background-alert-success",
+        "--jkl-color-success-background-container",
+    ],
+    [
+        "--jkl-color-background-alert-error",
+        "--jkl-color-error-background-container",
+    ],
+    [
+        "--jkl-color-background-alert-info",
+        "--jkl-color-info-background-container",
+    ],
+    [
+        "--jkl-color-background-container-high",
+        "--jkl-color-background-container",
+    ],
+    [
+        "--jkl-color-background-container-low",
+        "--jkl-color-background-container",
+    ],
+    [
+        "--jkl-color-background-container-inverted",
+        "--jkl-color-background-contrast",
+    ],
+    ["--jkl-color-background-action", "--jkl-color-background-contrast"],
+    ["--jkl-color-text-on-action", "--jkl-color-text-on-contrast"],
+    ["--jkl-color-text-inverted", "--jkl-color-text-on-contrast"],
+].sort(([a], [b]) => b.length - a.length);
+
+// Tilsvarende omdøyping for Tailwind --color-{nøkkel}-variablar.
+const TAILWIND_COLOR_RENAMES = [
+    ["background-alert-warning", "warning-background-container"],
+    ["background-alert-success", "success-background-container"],
+    ["background-alert-error", "error-background-container"],
+    ["background-alert-info", "info-background-container"],
+    ["background-container-high", "background-container"],
+    ["background-container-low", "background-container"],
+    ["background-container-inverted", "background-contrast"],
+    ["background-action", "background-contrast"],
+    ["text-on-action", "text-on-contrast"],
+    ["text-inverted", "text-on-contrast"],
+].sort(([a], [b]) => b.length - a.length);
+
+const TAILWIND_COLOR_PREFIXES = [
+    "bg",
+    "text",
+    "border",
+    "ring",
+    "shadow",
+    "fill",
+    "stroke",
+    "accent",
+    "caret",
+    "outline",
+    "placeholder",
+    "divide",
+    "from",
+    "via",
+    "to",
+    "decoration",
+];
+
+export function applyCssTokenRenames(text) {
+    let next = text;
+    let count = 0;
+
+    for (const [from, to] of CSS_TOKEN_RENAMES) {
+        const result = replaceSpecifier(next, from, to);
+        next = result.text;
+        count += result.count;
+    }
+
+    return { text: next, count };
+}
+
+export function applyTailwindColorRenames(text) {
+    let next = text;
+    let count = 0;
+
+    for (const [fromKey, toKey] of TAILWIND_COLOR_RENAMES) {
+        for (const prefix of TAILWIND_COLOR_PREFIXES) {
+            const result = replaceTailwindClass(
+                next,
+                `${prefix}-${fromKey}`,
+                `${prefix}-${toKey}`,
+            );
+            next = result.text;
+            count += result.count;
+        }
+    }
+
+    return { text: next, count };
+}

package/codemods/transforms/expandable-panel.mjs

@@ -0,0 +1,41 @@
+// Variant-prop-endringer i ExpandablePanel:
+//   variant="fill"   → fjernet (fill er default-atferd, prop eksisterer ikke lenger)
+//   variant="stroke" → outlined (boolean prop)
+//
+// CSS-klasseendring:
+//   jkl-expandable--stroke → jkl-expandable--outlined
+
+const STROKE_PROP_PATTERN =
+    /variant=(?:"stroke"|'stroke'|\{"stroke"}|\{'stroke'})/;
+
+const FILL_PROP_PATTERN = /\s+variant=(?:"fill"|'fill'|\{"fill"}|\{'fill'})/;
+
+const CSS_CLASS_PATTERN = /\bjkl-expandable--stroke\b/g;
+
+// Matches an ExpandablePanel opening or self-closing tag.
+// [^>]* is safe for JSX since > in prop values must be escaped ({">"}  or >).
+const EXPANDABLE_PANEL_TAG = /<ExpandablePanel\b[^>]*>/g;
+
+export function applyExpandablePanelTransforms(text) {
+    let next = text;
+    let count = 0;
+
+    next = next.replace(CSS_CLASS_PATTERN, () => {
+        count++;
+        return "jkl-expandable-panel--outlined";
+    });
+
+    next = next.replace(EXPANDABLE_PANEL_TAG, (tag) =>
+        tag
+            .replace(FILL_PROP_PATTERN, () => {
+                count++;
+                return "";
+            })
+            .replace(STROKE_PROP_PATTERN, () => {
+                count++;
+                return "outlined";
+            }),
+    );
+
+    return { text: next, count };
+}

package/codemods/transforms/font-family.mjs

@@ -0,0 +1,23 @@
+import { escapeRegExp } from "../utils.mjs";
+
+// Fallback-navnet kommer først (lengst-først) slik at det ikke blir delvis
+// overskrevet av det kortere primærnavnet.
+const FONT_FAMILY_REPLACEMENTS = [
+    ["Fremtind Material Symbols Fallback", "Jokul Icons Fallback"],
+    ["Fremtind Material Symbols", "Jokul Icons"],
+];
+
+export function applyFontFamilyReplacements(text) {
+    let next = text;
+    let count = 0;
+
+    for (const [from, to] of FONT_FAMILY_REPLACEMENTS) {
+        const pattern = new RegExp(escapeRegExp(from), "g");
+        next = next.replace(pattern, () => {
+            count += 1;
+            return to;
+        });
+    }
+
+    return { text: next, count };
+}