@navikt/ds-css 7.7.0 → 7.8.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @navikt/ds-css
 
+## 7.8.1
+
+### Patch Changes
+
+- Alert: Link-components used within Alert variant='inline' now preserves default coloring ([#3461](https://github.com/navikt/aksel/pull/3461))
+
+- Table: :fire: Removed cursor 'pointer' when 'ExpandableRow' is disabled. ([#3462](https://github.com/navikt/aksel/pull/3462))
+
+## 7.8.0
+
+### Minor Changes
+
+- Combobox: Removed clear button, removed tokens staring with `--ac-combobox-clear`, deprecated props `clearButton`/`clearButtonLabel`. ([#3433](https://github.com/navikt/aksel/pull/3433))
+
+### Patch Changes
+
+- CSS: Resolved regression where the complete stylesheet was included in scoped 'components.css' file. ([#3427](https://github.com/navikt/aksel/pull/3427))
+
 ## 7.7.0
 
 ## 7.6.0

package/config/bundle.darkside.ts

@@ -0,0 +1,270 @@
+import browserslist from "browserslist";
+import CleanCss from "clean-css";
+import fastglob from "fast-glob";
+import fs from "fs";
+import { Features, browserslistToTargets, bundleAsync } from "lightningcss";
+import path from "path";
+import {
+  StyleMappings,
+  componentsCss,
+  formCss,
+  primitivesCss,
+} from "../config/_mappings";
+import packageJSON from "../package.json";
+
+bundleDarkside();
+
+async function bundleDarkside() {
+  const buildDir = path.join(__dirname, "..", "dist/darkside");
+  const darksideDir = path.join(__dirname, "..", "darkside");
+
+  /* Make sure every dir is created to make node happy */
+  [buildDir, `${buildDir}/global`, `${buildDir}/component`].forEach((dir) => {
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
+    }
+  });
+
+  /**
+   * Bundles the ./index.css file with LightningCSS.
+   * @param rootParser: Custom parsers that allows for editing the index.css file before bundling it. This allows removing unwanted CSS from being bundled.
+   * @returns Parsed CSS file output. Must be valid CSS.
+   */
+  async function bundleCSS(rootParser?: (rootFile: string) => string) {
+    const { code } = await bundleAsync({
+      filename: `${darksideDir}/index.css`,
+      minify: false,
+      include:
+        Features.Nesting | Features.MediaRangeSyntax | Features.HexAlphaColors,
+
+      drafts: {
+        customMedia: false,
+      },
+      targets: browserslistToTargets(
+        browserslist(">= 0.5% in NO, safari >= 15.4, iOS >= 15.4, not dead"),
+      ),
+      resolver: {
+        read(filePath) {
+          const file = fs.readFileSync(filePath, "utf8");
+          if (filePath === `${darksideDir}/index.css` && rootParser) {
+            return rootParser(file);
+          }
+
+          return file;
+        },
+      },
+    });
+
+    let codeString = code.toString();
+
+    /**
+     * LightningCSS adds these tokens to the bundle that we want removed:
+     * --lightningcss-light: initial;
+     * --lightningcss-dark: ;
+     */
+    codeString = codeString
+      .split("\n")
+      .filter((line) => !line.includes("--lightningcss-"))
+      .join("\n");
+
+    return codeString;
+  }
+
+  /**
+   * Writes the CSS file to the build directory. Includes a minified version with the .min.css suffix.
+   * @param file: CSS file content
+   * @param filePath: Path to the file in the build directory
+   */
+  function writeFile({ file, filePath }: { file: string; filePath: string }) {
+    fs.writeFileSync(`${buildDir}/${filePath}`, file);
+
+    /**
+     * We use CleanCss package here since we only want it to optimize filesize, not transform any CSS like LightningCSS minifier does.
+     * This is because we want to keep the CSS as close to the original as possible.
+     * Since CleanCSS is not part of the PostCSS ecosystem, we use it in replacement for cssnano.
+     */
+    const minifiedCss = new CleanCss({}).minify(file);
+
+    if (minifiedCss.errors.length > 0) {
+      throw new Error(
+        `Errors found when minifying for ${filePath} CSS. Stopped bundling\n${minifiedCss.errors}`,
+      );
+    }
+
+    fs.writeFileSync(
+      `${buildDir}/${filePath.replace(".css", ".min.css")}`,
+      minifiedCss.styles,
+    );
+  }
+
+  /* ----------------------------- index.css build ---------------------------- */
+  await bundleCSS().then((file) => {
+    writeFile({
+      file,
+      filePath: "index.css",
+    });
+  });
+
+  /* --------------------------- component.css build -------------------------- */
+  function rootComponentsParser(rootString: string) {
+    let parsed = rootString
+      .split("\n")
+      .filter((line) => {
+        /* We assume that all components is added under the layer components or layout */
+        return (
+          line.endsWith("layer(aksel.components);") ||
+          line.endsWith("layer(aksel.layout);")
+        );
+      })
+      .join("\n");
+
+    /* If one imports this file standalone, we would like to make sure the layering order is included.  */
+    const layerDefinition = rootString
+      .split("\n")
+      .find((line) => line.startsWith("@layer"));
+
+    if (!layerDefinition) {
+      throw new Error(
+        "No layer definition found in index.css. Stopped bundling",
+      );
+    }
+
+    parsed = layerDefinition + "\n" + parsed;
+
+    return parsed;
+  }
+
+  await bundleCSS(rootComponentsParser).then((file) => {
+    writeFile({
+      file,
+      filePath: componentsCss,
+    });
+  });
+
+  /* ------------------------------ /global build ----------------------------- */
+  for (const style of StyleMappings.baseline) {
+    // eslint-disable-next-line no-inner-declarations
+    function parser(input: string) {
+      return input
+        .split("\n")
+        .filter((line) => line.startsWith("@import"))
+        .filter((line) =>
+          line.replace(".darkside.css", ".css").includes(style.main),
+        )
+        .join("\n");
+    }
+
+    await bundleCSS(parser).then((file) => {
+      writeFile({
+        file,
+        filePath: `global/${style.main}`,
+      });
+    });
+  }
+
+  /* ------------------------------ form build ----------------------------- */
+  function rootFormParser(input: string) {
+    return input
+      .split("\n")
+      .filter((line) => line.startsWith("@import"))
+      .filter((line) => line.includes("form/index.css"))
+      .join("\n");
+  }
+
+  await bundleCSS(rootFormParser).then((file) => {
+    writeFile({
+      file,
+      filePath: `component/${formCss}`,
+    });
+  });
+
+  /* ------------------------------ Primitives build ----------------------------- */
+  function rootPrimitivesParser(input: string) {
+    return input
+      .split("\n")
+      .filter((line) => line.startsWith("@import"))
+      .filter((line) => line.includes("primitives/index.css"))
+      .join("\n");
+  }
+
+  await bundleCSS(rootPrimitivesParser).then((file) => {
+    writeFile({
+      file,
+      filePath: `component/${primitivesCss}`,
+    });
+  });
+
+  /* ---------------------------- /component build ---------------------------- */
+
+  function componentFiles(): string[] {
+    const indexFile = fs.readFileSync(`${darksideDir}/index.css`, "utf8");
+
+    /* Since forms and primitives is under the same layers, but diffferent files we filter them out to avoid duplicates */
+    const formLine = rootFormParser(indexFile);
+    const primitivesLine = rootPrimitivesParser(indexFile);
+
+    return indexFile
+      .split("\n")
+      .filter((line) => line.startsWith("@import"))
+      .filter((line) => !formLine.includes(line))
+      .filter((line) => !primitivesLine.includes(line))
+      .filter((line) => line.endsWith("layer(aksel.components);"));
+  }
+
+  for (const componentLine of componentFiles()) {
+    // eslint-disable-next-line no-inner-declarations
+    function parser(input: string) {
+      return input
+        .split("\n")
+        .filter((line) => line === componentLine)
+        .join("\n");
+    }
+
+    await bundleCSS(parser).then((file) => {
+      const componentName = componentLine
+        /* Matches everything between " */
+        .match(/".*"/gm)?.[0]
+        /* Replaces every " with nothing */
+        .replace(/"/gm, "")
+        /* Removes start of import-string */
+        .replace("./", "")
+        .replace(".darkside.css", ".css");
+
+      if (!componentName) {
+        throw new Error(
+          `Could not find component name for line: ${componentLine}`,
+        );
+      }
+
+      const sanitizedName = componentName
+        /*
+         * https://regex101.com/r/MAj58n/1
+         * Removes every - and space
+         */
+        .replace(/[\s-]/g, "")
+        .replace(".css", "")
+        .toLowerCase();
+
+      writeFile({
+        file,
+        filePath: `component/${sanitizedName}.css`,
+      });
+    });
+  }
+
+  const version = packageJSON.version;
+
+  const files = fastglob.sync("**/*.css", {
+    cwd: buildDir,
+    ignore: ["**/version/**"],
+  });
+
+  for (const file of files) {
+    const css = fs.readFileSync(`${buildDir}/${file}`, "utf-8");
+
+    const filename = `${buildDir}/version/${version}/${file}`;
+    fs.mkdirSync(path.dirname(filename), { recursive: true });
+
+    fs.writeFileSync(filename, css);
+  }
+}

package/config/tests/bundle.test.ts

@@ -0,0 +1,46 @@
+import fastglob from "fast-glob";
+import path from "path";
+import { describe, expect, test } from "vitest";
+
+/**
+ * Darkside config might have some new files added. We can skip these when checking for equality.
+ */
+const newFiles = ["theme"];
+
+describe("Check that old and new (darkside) bundle matches", () => {
+  test("Darkside includes the same files as old bundle", () => {
+    const oldBundleDir = path.join(__dirname, "../../dist");
+    const darksideDir = path.join(__dirname, "../../dist/darkside");
+
+    const oldFiles = fastglob.sync("**/*.css", {
+      cwd: oldBundleDir,
+      ignore: ["**/version/**", "**/darkside/**"],
+    });
+
+    const darksideFiles = fastglob.sync("**/*.css", {
+      cwd: darksideDir,
+      ignore: ["**/version/**"],
+    });
+
+    expect(oldFiles.length).toBeGreaterThan(0);
+    expect(darksideFiles.length).toBeGreaterThan(0);
+
+    // Compare file names
+    oldFiles.forEach((file) => {
+      expect(darksideFiles).toContain(file);
+    });
+
+    darksideFiles.forEach((file) => {
+      if (newFiles.find((newFile) => file.includes(newFile))) {
+        return;
+      }
+      expect(oldFiles).toContain(file);
+    });
+
+    /**
+     * Check that darkside has the same amount of files as old bundle
+     * (minus the new files * 2 since .min.css is also included)
+     */
+    expect(darksideFiles.length - newFiles.length * 2).toBe(oldFiles.length);
+  });
+});

package/darkside/baseline/{utilities.darkside.css → baseline.darkside.css}

@@ -1,3 +1,12 @@
+/* ------------------------- Global typo-definitions ------------------------ */
+body,
+:host {
+  font-family: var(--ax-font-family, "Source Sans 3", "Source Sans Pro", Arial, sans-serif);
+  line-height: 1.333;
+  font-size: 1.125rem;
+}
+
+/* ---------------------------- Inline utilities ---------------------------- */
 [hidden] {
   display: none !important;
 }

package/darkside/baseline/tokens.darkside.css

@@ -0,0 +1 @@
+@import "../../../tokens/dist/darkside/tokens.css";

package/darkside/button.darkside.css

@@ -260,7 +260,7 @@
 }
 
 .navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
-  opacity: 0.3;
+  opacity: var(--ax-opacity-disabled);
 }
 
 /* Loader overrides */

package/darkside/copybutton.darkside.css

@@ -31,7 +31,7 @@
 
   &:disabled {
     cursor: not-allowed;
-    opacity: 0.3;
+    opacity: var(--ax-opacity-disabled);
   }
 
   &:disabled:hover {

package/darkside/dropdown.darkside.css

@@ -74,7 +74,7 @@
 
 .navds-dropdown__item:disabled {
   color: var(--ac-dropdown-item-text, var(--a-text-action));
-  opacity: 0.3;
+  opacity: var(--ax-opacity-disabled);
   background: transparent;
   cursor: not-allowed;
 }

package/darkside/form/combobox.darkside.css

@@ -28,7 +28,7 @@
 }
 
 .navds-combobox--disabled {
-  opacity: 0.3;
+  opacity: var(--ax-opacity-disabled);
 
   & .navds-combobox__wrapper {
     & *:hover {
@@ -69,7 +69,6 @@
   }
 }
 
-.navds-combobox__button-clear svg,
 .navds-combobox__button-toggle-list svg,
 .navds-combobox__list svg {
   width: var(--__axc-combobox-icon-size);
@@ -203,19 +202,6 @@
   }
 }
 
-.navds-combobox__button-clear {
-  border-radius: var(--ax-border-radius-medium);
-  color: var(--ax-text-subtle);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  background: none;
-  border: none;
-  font-size: 1rem;
-  padding: 0;
-}
-
 .navds-combobox__input::-webkit-search-cancel-button {
   display: none;
 }
@@ -231,10 +217,7 @@
   border: none;
   font-size: 1rem;
   padding: 0;
-}
 
-.navds-combobox__button-clear,
-.navds-combobox__button-toggle-list {
   &:hover {
     color: var(--ax-text-accent);
 
@@ -405,10 +388,6 @@
 }
 
 @media (forced-colors: active) {
-  .navds-combobox__button-clear:hover {
-    color: highlight;
-  }
-
   .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
     outline-color: highlight;
   }

package/darkside/form/fieldset.darkside.css

@@ -32,7 +32,7 @@
 
 .navds-fieldset:disabled > .navds-fieldset__legend,
 .navds-fieldset:disabled > .navds-fieldset__description {
-  opacity: 0.3;
+  opacity: var(--ax-opacity-disabled);
 }
 
 @media (forced-colors: active) {

package/darkside/form/form.darkside.css

@@ -23,7 +23,7 @@
 }
 
 .navds-form-field--disabled {
-  opacity: 0.3;
+  opacity: var(--ax-opacity-disabled);
   cursor: not-allowed;
 }
 
@@ -41,7 +41,7 @@
 
 .navds-form-field__readonly-icon {
   margin-top: var(--ax-spacing-05);
-  margin-right: var(--ax-spacing-2);
+  margin-right: var(--ax-spacing-1);
   flex-shrink: 0;
   align-self: flex-start;
 }

package/darkside/form/radio-checkbox.darkside.css

@@ -172,7 +172,7 @@
 
 .navds-checkbox--disabled,
 .navds-radio--disabled {
-  opacity: 0.3;
+  opacity: var(--ax-opacity-disabled);
 }
 
 .navds-checkbox--disabled > .navds-checkbox__input,

package/darkside/form/search.darkside.css

@@ -81,7 +81,7 @@
   font-size: 1.5rem;
 
   .navds-search--disabled & {
-    opacity: 0.3;
+    opacity: var(--ax-opacity-disabled);
   }
 }
 
@@ -105,6 +105,10 @@
   --__axc-button-border-width: 1px;
   --__axc-button-border-color: var(--ax-border-default);
 
+  &:not(:hover, :active) {
+    background-color: var(--ax-bg-input);
+  }
+
   &:hover:not(:disabled) {
     --__axc-button-border-color: var(--ax-border-accent-strong);
   }
@@ -144,7 +148,7 @@
 /* We can't re-use disabled-state for form-fields since opacity multiplies on search-button */
 .navds-search--disabled {
   .navds-search__input {
-    opacity: 0.3;
+    opacity: var(--ax-opacity-disabled);
     cursor: not-allowed;
   }
 }

package/darkside/form/switch.darkside.css

@@ -169,7 +169,7 @@
 }
 
 .navds-switch--disabled:not(.navds-switch--loading) {
-  opacity: 0.3;
+  opacity: var(--ax-opacity-disabled);
 }
 
 .navds-switch__input:disabled,