@navikt/ds-css 8.10.1 → 8.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "8.10.1",
+  "version": "8.10.3",
   "description": "CSS for Nav Designsystem",
   "author": "Aksel | Nav designsystem team",
   "keywords": [
@@ -14,7 +14,8 @@
   "files": [
     "*",
     "!dist/version",
-    "!config/bundle.js"
+    "!config/bundle.ts",
+    "!config/get-version.js"
   ],
   "repository": {
     "type": "git",
@@ -30,7 +31,7 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^8.10.1",
+    "@navikt/ds-tokens": "^8.10.3",
     "browserslist": "^4.25.0",
     "esbuild": "^0.27.4",
     "fast-glob": "3.3.3",
@@ -46,9 +47,13 @@
   ],
   "main": "./dist/index.css",
   "exports": {
-    ".": "./dist/index.css",
-    "./dist/*": "./dist/*",
-    "./tokens.json": "./tokens.json",
-    "./config/_mappings": "./config/_mappings.js"
+    ".": {
+      "types": "./types.d.ts",
+      "default": "./dist/index.css"
+    },
+    "./dist/*": {
+      "types": "./types.d.ts",
+      "default": "./dist/*"
+    }
   }
 }

package/src/data-table.css

@@ -1,3 +1,4 @@
+/* stylelint-disable csstools/value-no-unknown-custom-properties */
 /* stylelint-disable no-duplicate-selectors */
 
 .aksel-data-table__border-wrapper {
@@ -153,6 +154,14 @@
   scroll-margin: var(--ax-space-0);
   padding: 0;
 
+  &[data-nested="true"] {
+    position: relative;
+
+    & > div {
+      margin-inline-start: calc(32px + 8px + calc(var(--__axc-data-table-nested-depth) * var(--ax-space-16)));
+    }
+  }
+
   .aksel-data-table__thead & {
     background-color: var(--ax-bg-neutral-soft);
   }
@@ -220,9 +229,11 @@
     }
   }
 
+  --__axc-data-table-pi-cell: var(--ax-space-16);
+
   &:not([data-selectable="true"]) > div {
     padding-block: var(--__axc-data-table-density);
-    padding-inline: var(--ax-space-16);
+    padding-inline: var(--__axc-data-table-pi-cell);
 
     .aksel-data-table[data-truncate-content="true"] & {
       text-overflow: ellipsis;
@@ -241,11 +252,11 @@
   position: relative;
   font-weight: var(--ax-font-weight-bold);
 
-  &:has(.aksel-data-table__th-sort-button):hover {
+  &:has(.aksel-data-table__th-sort-button:hover) {
     background-color: var(--ax-bg-neutral-moderate-hover);
   }
 
-  &:has(.aksel-data-table__th-sort-button):active {
+  &:has(.aksel-data-table__th-sort-button:active) {
     background-color: var(--ax-bg-neutral-moderate-pressed);
   }
 
@@ -573,3 +584,12 @@ html[data-dragging-cursor="true"] *::before,
 html[data-dragging-cursor="true"] *::after {
   cursor: grabbing !important;
 }
+
+/* TODO: alignment not optimal when resizing column with nesting */
+.aksel-data-table__nested-toggle {
+  position: absolute;
+  inset-block: 0;
+  left: calc(var(--__axc-data-table-pi-cell) + var(--__axc-data-table-nested-depth) * var(--ax-space-16));
+  display: flex;
+  align-items: center;
+}

package/src/dialog.css

@@ -96,7 +96,7 @@
       transform: translateY(calc(1rem * var(--__axc-nested-level) * -1)) scale(calc(1 - 0.02 * var(--__axc-nested-level)));
     }
 
-    @media (max-width: 768px) or (max-height: 479px) {
+    @media (max-width: 480px) or (max-height: 479px) {
       --__axc-dialog-transform: translateY(35%);
 
       max-height: calc(100dvh - max(16px, 10dvh));

package/types.d.ts

@@ -0,0 +1 @@
+declare module "@navikt/ds-css" {}

package/config/bundle.ts

@@ -1,279 +0,0 @@
-import browserslist from "browserslist";
-import esbuild from "esbuild";
-import fastglob from "fast-glob";
-import { Features, browserslistToTargets, bundleAsync } from "lightningcss";
-import fs from "node:fs";
-import path from "node:path";
-import {
-  StyleMappings,
-  componentsCss,
-  formCss,
-  primitivesCss,
-} from "../config/_mappings";
-import packageJSON from "../package.json";
-
-bundle();
-
-async function bundle() {
-  const srcDir = path.join(__dirname, "..", "src");
-  const distDir = path.join(__dirname, "..", "dist");
-
-  const indexFileContent = fs.readFileSync(`${srcDir}/index.css`, "utf8");
-  const layerDefinition = indexFileContent
-    .split("\n")
-    .find((line) => line.startsWith("@layer"));
-
-  if (!layerDefinition) {
-    throw new Error("No layer definition found in index.css. Stopped bundling");
-  }
-
-  /* Make sure every dir is created to make node happy */
-  [distDir, `${distDir}/global`, `${distDir}/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: `${srcDir}/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 === `${srcDir}/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 }) {
-    const buildPath = `${distDir}/${filePath}`;
-    fs.writeFileSync(buildPath, file);
-
-    /**
-     * We use Esbuild 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.
-     */
-    const result = esbuild.buildSync({
-      entryPoints: [buildPath],
-      outfile: buildPath.replace(".css", ".min.css"),
-      minify: true, // Enable minification
-      bundle: false,
-      write: true,
-      format: "iife",
-      loader: {
-        ".css": "css",
-      },
-    });
-
-    if (result.errors.length > 0) {
-      throw new Error(
-        `Errors found when minifying for ${filePath} CSS. Stopped bundling\n${result.errors}`,
-      );
-    }
-  }
-
-  /* ----------------------------- 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.includes("layer(aksel.components") ||
-          line.includes("layer(aksel.layout")
-        );
-      })
-      .join("\n");
-
-    parsed = layerDefinition + "\n" + parsed;
-
-    return parsed;
-  }
-
-  await bundleCSS(rootComponentsParser).then((file) => {
-    writeFile({
-      file,
-      filePath: componentsCss,
-    });
-  });
-
-  /* ------------------------------ /global build ----------------------------- */
-  for (const style of StyleMappings.baseline) {
-    function parser(input: string) {
-      const parsed = input
-        .split("\n")
-        .filter((line) => line.startsWith("@import"))
-        .filter((line) => line.includes(style.main))
-        .join("\n");
-      return layerDefinition + "\n" + parsed;
-    }
-
-    await bundleCSS(parser).then((file) => {
-      writeFile({
-        file,
-        filePath: `global/${style.main}`,
-      });
-    });
-  }
-
-  /* ------------------------------ form build ----------------------------- */
-  function rootFormParser(input: string) {
-    const parsed = input
-      .split("\n")
-      .filter((line) => line.startsWith("@import"))
-      .filter((line) => line.includes("form/index.css"))
-      .join("\n");
-    return layerDefinition + "\n" + parsed;
-  }
-
-  await bundleCSS(rootFormParser).then((file) => {
-    writeFile({
-      file,
-      filePath: `component/${formCss}`,
-    });
-  });
-
-  /* ------------------------------ Primitives build ----------------------------- */
-  function rootPrimitivesParser(input: string) {
-    const parsed = input
-      .split("\n")
-      .filter((line) => line.startsWith("@import"))
-      .filter((line) => line.includes("primitives/index.css"))
-      .join("\n");
-    return layerDefinition + "\n" + parsed;
-  }
-
-  await bundleCSS(rootPrimitivesParser).then((file) => {
-    writeFile({
-      file,
-      filePath: `component/${primitivesCss}`,
-    });
-  });
-
-  /* ---------------------------- /component build ---------------------------- */
-
-  function componentFiles(): string[] {
-    const indexFile = indexFileContent;
-
-    /* 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.includes("layer(aksel.components"));
-  }
-
-  for (const componentLine of componentFiles()) {
-    function parser(input: string) {
-      const parsed = input
-        .split("\n")
-        .filter((line) => line === componentLine)
-        .join("\n");
-      return layerDefinition + "\n" + parsed;
-    }
-
-    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("./", "");
-
-      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;
-
-  /**
-   * We only publish
-   * - index.css
-   * - index.min.css
-   *
-   * to CDNs with versioning
-   */
-  const files = fastglob.sync("**/index*.css", {
-    cwd: distDir,
-    ignore: ["**/version/**"],
-  });
-
-  for (const file of files) {
-    const css = fs.readFileSync(`${distDir}/${file}`, "utf-8");
-
-    const filename = `${distDir}/version/${version}/${file}`;
-    fs.mkdirSync(path.dirname(filename), { recursive: true });
-
-    fs.writeFileSync(filename, css);
-  }
-}

package/config/get-version.js

@@ -1,4 +0,0 @@
-const packageJson = require("../package.json");
-
-/* Make package-version accessible for github-workflow */
-console.info(packageJson.version);