@fremtind/jokul 5.0.0-next.5 → 5.0.0-next.7

package/README.md

@@ -33,7 +33,7 @@ jokul codemod src app --dry-run
 jokul codemod src app
 ```
 
-Codemoden oppdaterer sikre stier automatisk og varsler når den finner tvetydige stilimports for beta-komponenter som må vurderes manuelt.
+Codemoden oppdaterer sikre stier automatisk og varsler når den finner tvetydige stilimports for beta-komponenter som må vurderes manuelt. Den fjerner `@fremtind/jokul/styles/fonts/webfonts.css`-imports siden `@font-face`-definisjonene nå ligger i `styles/base.css`, bytter ut det gamle font-family-navnet `Fremtind Material Symbols` med `Jokul Icons`, og flagger fjernede Sass-fargevariabler, gamle `light-mode-variables`/`dark-mode-variables`-mixins og utdaterte `text-style`-navn (`"body"`, `"small"`).
 
 ## React-komponenter
 
@@ -137,21 +137,16 @@ Dette gjør du med
 
 Om du ikke bruker Sass kan du bruke CSS-versjonen. Denne versjonen ser **kun** etter fontfilene på URLen `/fonts`, så det beste er å sørge for å kopiere fonter på en måte som gjør at de blir tilgjengelig på den URLen.
 
-Om du er nødt til å legge fontfilene et annet sted må CSS-filen `node_modules/@fremtind/jokul/styles/fonts/webfonts.css`
-kopieres inn i prosjektet. Deretter må du endre URLen i hver `@font-face`-definisjon manuelt så det stemmer med hvor fontfilene ligger. **Husk at man må gjenta prosessen hver gang man oppdaterer pakken!**
+Om du er nødt til å legge fontfilene et annet sted må `@font-face`-definisjonene fra `node_modules/@fremtind/jokul/styles/base.css` kopieres inn i prosjektet. Deretter må du endre URLen i hver `@font-face`-definisjon manuelt så det stemmer med hvor fontfilene ligger. **Husk at man må gjenta prosessen hver gang man oppdaterer pakken!**
 
 ```css
 @font-face {
     font-family: "Jokul";
     font-display: fallback;
-    font-weight: normal;
+    font-weight: 400;
     font-style: normal;
-    src:
-        local("Jokul"),
-        /* Endre de to neste linjene så de stemmer */
-            url("/relative/path/to/font/files/InterVariable.woff2")
-            format("woff2"),
-        url("/relative/path/to/font/files/InterVariable.woff2") format("woff");
+    /* Endre URLen så den stemmer */
+    src: url("/relative/path/to/font/files/InterVariable.woff2") format("woff2");
 }
 ```
 

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

@@ -82,3 +82,192 @@ import "@fremtind/jokul/styles/components/nav-link";
     assert.equal(result.changed, false);
     assert.equal(result.warnings.length, 1);
 });
+
+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";
+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.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";
+`;
+
+    const result = transformImportPaths(source, "/tmp/main.tsx");
+
+    assert.equal(result.text.includes("webfonts"), false);
+    assert.equal(result.warnings.length, 1);
+    assert.match(result.warnings[0], /styles\/base\.css/);
+});
+
+test("removes css @import of webfonts.css", () => {
+    const source = `@import "@fremtind/jokul/styles/components.css";
+@import "@fremtind/jokul/styles/fonts/webfonts.css";
+`;
+
+    const result = transformImportPaths(source, "/tmp/global.css");
+
+    assert.equal(result.text.includes("webfonts"), false);
+    assert.equal(
+        result.text.includes('@import "@fremtind/jokul/styles/components.css";'),
+        true,
+    );
+    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;
+}
+`;
+
+    const result = transformImportPaths(source, "/tmp/banner.scss");
+
+    assert.equal(
+        result.warnings.some((warning) =>
+            /jkl\.\$color-\*/.test(warning),
+        ),
+        true,
+    );
+    // Bare én advarsel per mønster, selv om det er flere forekomster
+    assert.equal(
+        result.warnings.filter((warning) =>
+            /jkl\.\$color-\*/.test(warning),
+        ).length,
+        1,
+    );
+});
+
+test("warns about removed light/dark mode mixins", () => {
+    const source = `@use "@fremtind/jokul/styles/jkl";
+
+@include jkl.light-mode-variables {
+    --min-farge: jkl.$color-granitt;
+}
+@include jkl.dark-mode-variables {
+    --min-farge: jkl.$color-snohvit;
+}
+`;
+
+    const result = transformImportPaths(source, "/tmp/theme.scss");
+
+    assert.equal(
+        result.warnings.some((warning) =>
+            /light-mode-variables/.test(warning),
+        ),
+        true,
+    );
+});
+
+test("warns about deprecated text-style names", () => {
+    const source = `@use "@fremtind/jokul/styles/jkl";
+
+.lead {
+    @include jkl.text-style("body");
+}
+
+.fineprint {
+    @include jkl.text-style("small");
+}
+`;
+
+    const result = transformImportPaths(source, "/tmp/typography.scss");
+
+    assert.equal(
+        result.warnings.some((warning) =>
+            /paragraph-large\/medium\/small/.test(warning),
+        ),
+        true,
+    );
+    assert.equal(
+        result.warnings.some((warning) => /<Text>-komponenten/.test(warning)),
+        true,
+    );
+});
+
+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/icons.scss");
+
+    assert.equal(
+        result.text.includes("Fremtind Material Symbols"),
+        false,
+    );
+    assert.equal(
+        result.text.includes(
+            '"Jokul Icons", "Jokul Icons Fallback", sans-serif',
+        ),
+        true,
+    );
+    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.text.includes("Fremtind Material Symbols"),
+        false,
+    );
+    assert.equal(result.text.includes("'Jokul Icons'"), true);
+});
+
+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);
+}
+`;
+
+    const result = transformImportPaths(source, "/tmp/title.scss");
+
+    assert.deepEqual(result.warnings, []);
+});

package/codemods/import-paths.mjs

@@ -226,6 +226,120 @@ function applyBetaStyleReplacements(text) {
     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;
@@ -257,7 +371,9 @@ function reorderConfiguredFontImport(text) {
 }
 
 export function transformImportPaths(text, filePath = "") {
-    const direct = applyDirectReplacements(text);
+    const webfontsRemoval = removeRedundantWebfontsCssImport(text);
+    const fontFamily = applyFontFamilyReplacements(webfontsRemoval.text);
+    const direct = applyDirectReplacements(fontFamily.text);
     const beta = applyBetaStyleReplacements(direct.text);
     let next = beta.text;
     let reordered = false;
@@ -268,11 +384,29 @@ export function transformImportPaths(text, filePath = "") {
         reordered = reorderedResult.reordered;
     }
 
+    const warnings = [
+        ...beta.warnings,
+        ...collectManualMigrationWarnings(text),
+    ];
+
+    if (
+        webfontsRemoval.count > 0 &&
+        !BASE_OR_COMPONENT_CSS_PATTERN.test(next)
+    ) {
+        warnings.push(
+            "Manuell vurdering: fjernet import av `styles/fonts/webfonts.css`. `@font-face`-definisjonene ligger nå i `@fremtind/jokul/styles/base.css`, så den må importeres for at fontene skal lastes.",
+        );
+    }
+
     return {
         text: next,
         changed: next !== text,
-        replacements: direct.replacements + beta.replacements,
-        warnings: beta.warnings,
+        replacements:
+            direct.replacements +
+            beta.replacements +
+            webfontsRemoval.count +
+            fontFamily.count,
+        warnings,
         reordered,
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fremtind/jokul",
-  "version": "5.0.0-next.5",
+  "version": "5.0.0-next.7",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -26,6 +26,7 @@
   },
   "exports": {
     "./package.json": "./package.json",
+    "./styles/jkl": "./styles/jkl/_index.scss",
     "./styles/*": "./styles/*",
     "./tailwind": {
       "import": {

package/styles/base.css

@@ -267,16 +267,6 @@
     font-style: normal;
     src: url("/fonts/InterVariable.woff2") format("woff2");
   }
-  @font-face {
-    font-family: "Adjusted Arial Fallback";
-    font-weight: 400;
-    font-style: normal;
-    src: local(arial);
-    size-adjust: 104%;
-    ascent-override: 82%;
-    descent-override: normal;
-    line-gap-override: 32%;
-  }
   @font-face {
     font-family: Jokul;
     font-display: fallback;
@@ -285,56 +275,45 @@
     src: url("/fonts/InterVariable.woff2") format("woff2");
   }
   @font-face {
-    font-family: "Adjusted Arial Fallback";
-    font-weight: 700;
+    font-family: "Jokul Display";
+    font-display: fallback;
+    font-weight: 400;
     font-style: normal;
-    src: local(arial);
-    size-adjust: 108%;
-    ascent-override: 83%;
-    descent-override: normal;
-    line-gap-override: 28%;
+    src: url("/fonts/InterVariable.woff2") format("woff2");
   }
   @font-face {
-    font-family: Jokul;
+    font-family: "Jokul Mono";
     font-display: fallback;
     font-weight: 400;
-    font-style: italic;
+    font-style: normal;
     src: url("/fonts/InterVariable.woff2") format("woff2");
   }
+  @font-face {
+    font-family: "Jokul Icons";
+    font-weight: 300 400;
+    font-style: normal;
+    src: url("/fonts/Fremtind-Material-Symbols.woff2") format("woff2");
+  }
   @font-face {
     font-family: "Adjusted Arial Fallback";
     font-weight: 400;
-    font-style: italic;
+    font-style: normal;
     src: local(arial);
-    size-adjust: 106%;
-    ascent-override: 83%;
+    size-adjust: 104%;
+    ascent-override: 82%;
     descent-override: normal;
-    line-gap-override: 28%;
-  }
-  @font-face {
-    font-family: Jokul;
-    font-display: fallback;
-    font-weight: 700;
-    font-style: italic;
-    src: url("/fonts/InterVariable.woff2") format("woff2");
+    line-gap-override: 32%;
   }
   @font-face {
     font-family: "Adjusted Arial Fallback";
     font-weight: 700;
-    font-style: italic;
+    font-style: normal;
     src: local(arial);
     size-adjust: 108%;
     ascent-override: 83%;
     descent-override: normal;
     line-gap-override: 28%;
   }
-  @font-face {
-    font-family: "Jokul Display";
-    font-display: fallback;
-    font-weight: 400;
-    font-style: normal;
-    src: url("/fonts/InterVariable.woff2") format("woff2");
-  }
   @font-face {
     font-family: "Adjusted Arial Display Fallback";
     font-weight: 400;
@@ -345,13 +324,6 @@
     descent-override: normal;
     line-gap-override: 40%;
   }
-  @font-face {
-    font-family: "Jokul Mono";
-    font-display: fallback;
-    font-weight: 400;
-    font-style: normal;
-    src: url("/fonts/InterVariable.woff2") format("woff2");
-  }
   @font-face {
     font-family: "Adjusted Courier New Fallback";
     font-weight: 400;
@@ -363,13 +335,7 @@
     line-gap-override: 27%;
   }
   @font-face {
-    font-family: "Jokul Material Symbols";
-    font-weight: 300 400;
-    font-style: normal;
-    src: url("/fonts/Fremtind-Material-Symbols.woff2") format("woff2");
-  }
-  @font-face {
-    font-family: "Jokul Material Symbols Fallback";
+    font-family: "Jokul Icons Fallback";
     src: local(courier new);
     font-weight: 300 400;
     font-style: normal;
@@ -1204,7 +1170,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 @layer jokul.theme {
-  [data-brand=jokul] {
+  [data-brand=fremtind] {
     /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback and light-dark() declarations are intentionally paired. */
     --jkl-color-neutral-background-page: #F4F2EF;
     --jkl-color-neutral-background-page: light-dark(#F4F2EF, #1B1917);
@@ -1321,35 +1287,21 @@
  * Do not edit directly, this file was auto-generated.
  */
 @layer jokul.theme {
-  @font-face {
-    font-family: "Inter";
-    font-display: fallback;
-    font-weight: 300;
-    font-style: normal;
-    src: url("/fonts/brands/jokul/InterVariable.woff2") format("woff2");
-  }
   @font-face {
     font-family: "Inter";
     font-display: fallback;
     font-weight: 400;
     font-style: normal;
-    src: url("/fonts/brands/jokul/InterVariable.woff2") format("woff2");
-  }
-  @font-face {
-    font-family: "Inter";
-    font-display: fallback;
-    font-weight: 600;
-    font-style: normal;
-    src: url("/fonts/brands/jokul/InterVariable.woff2") format("woff2");
+    src: url("/fonts/brands/fremtind/InterVariable.woff2") format("woff2");
   }
   @font-face {
     font-family: "Inter";
     font-display: fallback;
     font-weight: 700;
     font-style: normal;
-    src: url("/fonts/brands/jokul/InterVariable.woff2") format("woff2");
+    src: url("/fonts/brands/fremtind/InterVariable.woff2") format("woff2");
   }
-  [data-brand=jokul] {
+  [data-brand=fremtind] {
     --jkl-font-family-regular: Inter, "Adjusted Arial Fallback", arial, sans-serif;
     --jkl-font-family-display: Inter, "Adjusted Arial Display Fallback", arial, sans-serif;
     --jkl-font-family-mono: monospace, -apple-system, blinkmacsystemfont;