@fremtind/jokul 5.0.0-next.8 → 5.0.0

package/codemods/transforms/import-specifiers.mjs

@@ -0,0 +1,226 @@
+import { escapeRegExp, replaceSpecifier } from "../utils.mjs";
+
+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",
+            ],
+        ],
+    },
+];
+
+const WEBFONTS_CSS_SPECIFIER =
+    "@fremtind/jokul/styles/fonts/webfonts(?:\\.min)?\\.css";
+
+export const BASE_OR_COMPONENT_CSS_PATTERN =
+    /@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",
+    ),
+];
+
+export 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 };
+}
+
+export 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 };
+}
+
+// I Jøkul 5 er @font-face-definisjonene flyttet inn i styles/base.css. Standalone
+// CSS-importer av webfonts.css fjernes; SCSS-konsumenter håndteres av
+// DIRECT_REPLACEMENTS siden de kan overstyre $webfonts-dir.
+export 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 };
+}
+
+export 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 };
+}

package/codemods/transforms/warnings.mjs

@@ -0,0 +1,41 @@
+const MANUAL_MIGRATION_WARNINGS = [
+    {
+        pattern: /--jkl-color-text-on-alert-/,
+        message:
+            "Tokens --jkl-color-text-on-alert-* er fjernet. Bruk --jkl-color-<rolle>-text-default i stedet, f.eks. --jkl-color-info-text-default.",
+    },
+    {
+        pattern: /--jkl-color-(?:background|text)-interactive\b/,
+        message:
+            "Tokens --jkl-color-background-interactive og --jkl-color-text-interactive er fjernet og skal ikke brukes lenger.",
+    },
+    {
+        pattern: /\bvariant=["'](?:outlined|high|low)["']/,
+        message:
+            'Card variant-prop er fjernet i Jøkul 5. Bruk `outlined`-prop (boolean) for ramme: `<Card outlined>`. Fjern `variant="high"` og `variant="low"` — de er erstattet av standard flat flate.',
+    },
+    {
+        pattern:
+            /(?<![A-Za-z0-9-])(?:bg|text|border|ring|shadow|fill|stroke|accent|caret|outline|placeholder|divide|from|via|to|decoration)-(?:background-interactive|text-interactive)(?![A-Za-z0-9-])/,
+        message:
+            "Fjernede Tailwind-klasser basert på background-interactive og text-interactive (f.eks. bg-background-interactive, text-text-interactive). Disse er fjernet fra Jøkul 5-temaet og skal ikke brukes lenger.",
+    },
+    {
+        pattern:
+            /(?<![A-Za-z0-9-])(?:border|ring|outline|divide|decoration)-border-(?:action|input(?:-focus)?|separator(?:-strong|-hover)?)(?![A-Za-z0-9-])/,
+        message:
+            "Fjernede Tailwind-kantklasser (border-border-action, border-border-input, border-border-separator m.fl.). Bruk border-border-default, border-border-subdued eller border-border-strong i stedet.",
+    },
+];
+
+export function collectManualMigrationWarnings(text) {
+    const warnings = [];
+
+    for (const { pattern, message } of MANUAL_MIGRATION_WARNINGS) {
+        if (pattern.test(text)) {
+            warnings.push(`Manuell vurdering: ${message}`);
+        }
+    }
+
+    return warnings;
+}

package/codemods/utils.mjs

@@ -0,0 +1,35 @@
+export function escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+export 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 };
+}
+
+// Som replaceSpecifier, men uten "/" i grensemengden slik at Tailwind-modifikatorer
+// som opacity (/50) og vilkårsverdier ([&_svg]:) fortsatt matches.
+export function replaceTailwindClass(text, fromClass, toClass) {
+    const pattern = new RegExp(
+        `(?<![A-Za-z0-9-])${escapeRegExp(fromClass)}(?![A-Za-z0-9-])`,
+        "g",
+    );
+
+    let count = 0;
+    const next = text.replace(pattern, () => {
+        count += 1;
+        return toClass;
+    });
+
+    return { text: next, count };
+}

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@fremtind/jokul",
-  "version": "5.0.0-next.8",
+  "version": "5.0.0",
   "type": "module",
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -83,8 +86,8 @@
   "devDependencies": {
     "@babel/cli": "^7.28.6",
     "@babel/preset-react": "^7.27.1",
-    "@figma/code-connect": "^1.3.8",
-    "@rollup/plugin-terser": "^0.4.4",
+    "@figma/code-connect": "^1.4.4",
+    "@rollup/plugin-terser": "^1.0.0",
     "@types/react": "18.3.1",
     "@vitejs/plugin-react": "^4.7.0",
     "@vitejs/plugin-react-swc": "^3.11.0",
@@ -109,7 +112,7 @@
     "style-dictionary": "^5.0.1",
     "tailwindcss": "^3.4.17",
     "tsx": "^4.20.6",
-    "vite": "^7.1.2",
+    "vite": "^7.3.2",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4",
     "vitest-axe": "^0.1.0"
@@ -140,6 +143,7 @@
     "compile:scripts": "vite build --config vite.build.config.mjs",
     "test": "vitest --config vite.test.config.mjs",
     "figma:test": "figma connect publish --dry-run",
+    "figma:test:ci": "figma connect publish --dry-run --exit-on-unreadable-files --skip-update-check",
     "figma:publish": "figma connect publish"
   }
 }