@digdir/designsystemet 0.1.0-next.21 → 0.1.0-next.22

package/dist/bin/designsystemet.js

@@ -15,9 +15,9 @@ program.command("tokens").showHelpAfterError().description("run Designsystemet t
 program.command("migrate").showHelpAfterError().description("run a Designsystemet migration").addArgument(new Argument("[migration]", "Available migrations").choices(Object.keys(migrations))).option("-l --list", "List available migrations").option("-g --glob <glob>", "Glob for files upon which to apply the migration", "./**/*.(tsx|css)").action((migrationKey, opts) => {
   const { glob, list } = opts;
   if (list) {
-    Object.keys(migrations).forEach((key) => {
+    for (const key of Object.keys(migrations)) {
       console.log(key);
-    });
+    }
   } else if (migrationKey) {
     const migration = migrations[migrationKey];
     if (!migration) {

package/dist/src/migrations/codemods/css/plugins.js

@@ -8,11 +8,11 @@ const cssClassRename = (dictionary) => ({
   Rule(rule) {
     const selector = rule.selector;
     if (!selector) return;
-    Object.entries(dictionary).forEach(([from, to]) => {
+    for (const [from, to] of Object.entries(dictionary)) {
       if (!selector.includes(from)) return;
       const newSelector = selector.replace(new RegExp(from, "g"), to);
       rule.selector = newSelector;
-    });
+    }
   }
 });
 const cssVarRename = (dictionary) => ({
@@ -20,22 +20,21 @@ const cssVarRename = (dictionary) => ({
   Declaration(decl) {
     const { value, prop } = decl;
     const deleted = /* @__PURE__ */ new Set();
-    Object.entries(dictionary).forEach(([from, to]) => {
+    for (const [from, to] of Object.entries(dictionary)) {
       if (!R.isEmpty(to)) {
-        switch (true) {
-          case R.includes(from, value):
-            to === "[delete]" && deleted.add(deleteMsg(decl, from));
-            decl.value = value.replace(from, to);
-            break;
-          case R.includes(from, prop):
-            if (decl.variable) {
-              to === "[delete]" && deleted.add(deleteMsg(decl, from));
-              decl.prop = prop.replace(from, to);
-              break;
-            }
+        if (R.includes(from, value)) {
+          if (to === "[delete]") {
+            deleted.add(deleteMsg(decl, from));
+          }
+          decl.value = value.replace(from, to);
+        } else if (R.includes(from, prop) && decl.variable) {
+          if (to === "[delete]") {
+            deleted.add(deleteMsg(decl, from));
+          }
+          decl.prop = prop.replace(from, to);
         }
       }
-    });
+    }
     if (deleted.size > 0) {
       Array.from(deleted).forEach(printDelete);
     }

package/dist/src/migrations/codemods/jsx/classname-prefix.js

@@ -5,11 +5,11 @@ const replaceInLiteral = (node) => {
   return node;
 };
 const replaceInTemplateLiteral = (node) => {
-  node.forEach((element) => {
+  for (const element of node) {
     const value = element.value.raw;
-    if (typeof value !== "string") return;
+    if (typeof value !== "string") continue;
     element.value.raw = replaceInLiteral(value);
-  });
+  }
 };
 const processNode = (node) => {
   if (!node) return;
@@ -46,11 +46,12 @@ const processNode = (node) => {
 function replaceClassNamePrefix(file, api) {
   const j = api.jscodeshift;
   const root = j(file.source);
-  root.find(j.JSXElement).forEach((path) => {
-    j(path).find(j.JSXAttribute, { name: { name: "className" } }).forEach((nodePath) => {
+  for (const path of root.find(j.JSXElement).paths()) {
+    const nodes = j(path).find(j.JSXAttribute, { name: { name: "className" } });
+    for (const nodePath of nodes.paths()) {
       processNode(nodePath.value.value);
-    });
-  });
+    }
+  }
   return root.toSource({
     quote: "single",
     reuseWhitespace: true,

package/dist/src/tokens/actions.js

@@ -18,7 +18,7 @@ const makeEntryFile = {
     }
     const generateImportUrls = R.pipe(
       sortLightmodeFirst,
-      R.map((file) => `@import url('./${theme}/${file.toString()}');`),
+      R.map((file) => `@import url('${theme}/${file.toString()}');`),
       R.join("\n")
     );
     const files = await glob(`**/*`, { cwd: platform.buildPath });

package/dist/src/tokens/build.js

@@ -4,12 +4,13 @@ import chalk from "chalk";
 import * as R from "ramda";
 import StyleDictionary from "style-dictionary";
 import * as configs from "./configs.js";
+import { makeEntryFile } from "./utils/entryfile.js";
 const { permutateThemes, getConfigs } = configs;
 const sd = new StyleDictionary();
 async function run(options) {
   const tokensDir = options.tokens;
   const storefrontOutDir = path.resolve("../../apps/storefront/tokens");
-  const tokensOutDir = path.resolve(options.out);
+  const outPath = path.resolve(options.out);
   const $themes = JSON.parse(fs.readFileSync(path.resolve(`${tokensDir}/$themes.json`), "utf-8"));
   const relevant$themes = $themes.filter((theme) => {
     const group = R.toLower(R.defaultTo("")(theme.group));
@@ -20,9 +21,9 @@ async function run(options) {
   const typographyThemes = R.filter((val) => val.mode === "light", themes);
   const colormodeThemes = R.filter((val) => val.typography === "primary", themes);
   const semanticThemes = R.filter((val) => val.mode === "light" && val.typography === "primary", themes);
-  const colorModeConfigs = getConfigs(configs.colorModeVariables, tokensOutDir, tokensDir, colormodeThemes);
-  const semanticConfigs = getConfigs(configs.semanticVariables, tokensOutDir, tokensDir, semanticThemes);
-  const typographyConfigs = getConfigs(configs.typographyCSS, tokensOutDir, tokensDir, typographyThemes);
+  const colorModeConfigs = getConfigs(configs.colorModeVariables, outPath, tokensDir, colormodeThemes);
+  const semanticConfigs = getConfigs(configs.semanticVariables, outPath, tokensDir, semanticThemes);
+  const typographyConfigs = getConfigs(configs.typographyCSS, outPath, tokensDir, typographyThemes);
   const storefrontConfigs = getConfigs(configs.typescriptTokens, storefrontOutDir, tokensDir, colormodeThemes);
   if (typographyConfigs.length > 0) {
     console.log(`
@@ -35,17 +36,6 @@ async function run(options) {
       })
     );
   }
-  if (semanticConfigs.length > 0) {
-    console.log(`
-\u{1F371} Building ${chalk.green("semantic")}`);
-    await Promise.all(
-      semanticConfigs.map(async ({ theme, config, semantic }) => {
-        console.log(`\u{1F477} ${theme} - ${semantic}`);
-        const typographyClasses = await sd.extend(config);
-        return typographyClasses.buildAllPlatforms();
-      })
-    );
-  }
   if (colorModeConfigs.length > 0) {
     console.log(`
 \u{1F371} Building ${chalk.green("color-mode")}`);
@@ -57,6 +47,17 @@ async function run(options) {
       })
     );
   }
+  if (semanticConfigs.length > 0) {
+    console.log(`
+\u{1F371} Building ${chalk.green("semantic")}`);
+    await Promise.all(
+      semanticConfigs.map(async ({ theme, config, semantic }) => {
+        console.log(`\u{1F477} ${theme} - ${semantic}`);
+        const typographyClasses = await sd.extend(config);
+        return typographyClasses.buildAllPlatforms();
+      })
+    );
+  }
   if (storefrontConfigs.length > 0 && options.preview) {
     console.log(`
 \u{1F371} Building ${chalk.green("Storefront preview tokens")}`);
@@ -68,6 +69,16 @@ async function run(options) {
       })
     );
   }
+  if (semanticConfigs.length > 0) {
+    console.log(`
+\u{1F371} Building ${chalk.green("CSS file")}`);
+    await Promise.all(
+      semanticConfigs.map(async ({ theme }) => {
+        console.log(`\u{1F477} ${theme}.css`);
+        return makeEntryFile({ theme, outPath, buildPath: path.resolve(`${outPath}/${theme}`) });
+      })
+    );
+  }
 }
 export {
   run

package/dist/src/tokens/configs.js

@@ -1,14 +1,14 @@
-import * as tokenStudio from "@tokens-studio/sd-transforms";
+import { register } from "@tokens-studio/sd-transforms";
 import * as R from "ramda";
 import StyleDictionary from "style-dictionary";
 import { outputReferencesFilter } from "style-dictionary/utils";
-import { makeEntryFile } from "./actions.js";
 import * as formats from "./formats/css.js";
 import { jsTokens } from "./formats/js-tokens.js";
 import { nameKebab, sizeRem, typographyShorthand } from "./transformers.js";
 import { permutateThemes as permutateThemes_ } from "./utils/permutateThemes.js";
-import { typeEquals } from "./utils/utils.js";
-void tokenStudio.registerTransforms(StyleDictionary);
+import { pathStartsWithOneOf, typeEquals } from "./utils/utils.js";
+void register(StyleDictionary, { withSDBuiltins: false });
+const usesDtcg = true;
 const prefix = "ds";
 const basePxFontSize = 16;
 const separator = "_";
@@ -20,7 +20,6 @@ StyleDictionary.registerFormat(jsTokens);
 StyleDictionary.registerFormat(formats.colormode);
 StyleDictionary.registerFormat(formats.semantic);
 StyleDictionary.registerFormat(formats.typography);
-StyleDictionary.registerAction(makeEntryFile);
 const dsTransformers = [
   nameKebab.name,
   `ts/resolveMath`,
@@ -31,7 +30,7 @@ const dsTransformers = [
   "ts/color/modifiers",
   "ts/color/css/hexrgba",
   "ts/size/lineheight",
-  "ts/shadow/css/shorthand"
+  "shadow/css/shorthand"
 ];
 const paritionPrimitives = R.partition(R.test(/(?!.*global\.json).*primitives.*/));
 const hasUnknownProps = R.pipe(R.values, R.none(R.equals("unknown")), R.not);
@@ -48,6 +47,7 @@ const colorModeVariables = ({ mode = "light", outPath, theme }) => {
   const selector = `${mode === "light" ? ":root, " : ""}[data-ds-color-mode="${mode}"]`;
   const layer = `ds.theme.color-mode.${mode}`;
   return {
+    usesDtcg,
     log: { verbosity: "silent" },
     preprocessors: ["tokens-studio"],
     platforms: {
@@ -62,7 +62,6 @@ const colorModeVariables = ({ mode = "light", outPath, theme }) => {
         prefix,
         buildPath: `${outPath}/${theme}/`,
         transforms: dsTransformers,
-        actions: [makeEntryFile.name],
         files: [
           {
             destination: `color-mode/${mode}.css`,
@@ -81,8 +80,9 @@ const colorModeVariables = ({ mode = "light", outPath, theme }) => {
 const semanticVariables = ({ outPath, theme }) => {
   const selector = `:root`;
   const layer = `ds.theme.semantic`;
-  const isCalculatedToken = (token) => typeEquals(["spacing", "sizing", "borderRadius"], token);
+  const isCalculatedToken = (token) => pathStartsWithOneOf(["spacing", "sizing", "border-radius"], token);
   return {
+    usesDtcg,
     log: { verbosity: "silent" },
     preprocessors: ["tokens-studio"],
     platforms: {
@@ -98,12 +98,11 @@ const semanticVariables = ({ outPath, theme }) => {
         prefix,
         buildPath: `${outPath}/${theme}/`,
         transforms: dsTransformers,
-        actions: [makeEntryFile.name],
         files: [
           {
             destination: `semantic.css`,
             format: formats.semantic.name,
-            filter: (token) => (!token.isSource || isCalculatedToken(token)) && !typeEquals(["color", "fontWeights", "fontFamilies"], token)
+            filter: (token) => (!token.isSource || isCalculatedToken(token)) && !typeEquals(["color", "fontWeight", "fontFamily"], token)
           }
         ],
         options: {
@@ -116,6 +115,7 @@ const semanticVariables = ({ outPath, theme }) => {
 };
 const typescriptTokens = ({ mode = "unknown", outPath, theme }) => {
   return {
+    usesDtcg,
     log: { verbosity: "silent" },
     preprocessors: ["tokens-studio"],
     platforms: {
@@ -130,9 +130,8 @@ const typescriptTokens = ({ mode = "unknown", outPath, theme }) => {
             format: jsTokens.name,
             outputReferences: outputColorReferences,
             filter: (token) => {
-              if (R.test(/primitives\/modes|\/themes/, token.filePath)) {
-                return false;
-              }
+              if (R.test(/primitives\/modes|\/themes/, token.filePath)) return false;
+              if (pathStartsWithOneOf(["border-width"], token)) return false;
               if (R.test(/accent|neutral|brand1|brand2|brand3|success|danger|warning/, token.name) || R.includes("semantic", token.filePath)) {
                 return true;
               }
@@ -151,6 +150,7 @@ const typographyCSS = ({ outPath, theme, typography }) => {
   const selector = `${typography === "primary" ? ":root, " : ""}[data-ds-typography="${typography}"]`;
   const layer = `ds.theme.typography.${typography}`;
   return {
+    usesDtcg: true,
     log: { verbosity: "silent" },
     preprocessors: ["tokens-studio"],
     platforms: {
@@ -167,10 +167,14 @@ const typographyCSS = ({ outPath, theme, typography }) => {
             destination: `typography/${typography}.css`,
             format: formats.typography.name,
             filter: (token) => {
-              return typeEquals(
-                ["typography", "fontweights", "fontfamilies", "lineheights", "fontsizes", "letterSpacing"],
+              const included = typeEquals(
+                ["typography", "fontweight", "fontFamily", "lineheight", "fontsize", "dimension", "font"],
+                token
+              );
+              return included && !pathStartsWithOneOf(
+                ["spacing", "sizing", "border-width", "border-radius", "theme", "theme2", "theme3", "theme4"],
                 token
-              ) && !(token.path[0] || "").startsWith("theme");
+              );
             }
           }
         ],

package/dist/src/tokens/formats/css.js

@@ -11,14 +11,15 @@ const colormode = {
   name: "ds/css-colormode",
   format: async ({ dictionary, file, options, platform }) => {
     const { allTokens } = dictionary;
-    const { outputReferences } = options;
+    const { outputReferences, usesDtcg } = options;
     const { selector, mode, layer } = platform;
     const mode_ = mode;
     const header = await fileHeader({ file });
     const format = createPropertyFormatter({
       outputReferences,
       dictionary,
-      format: "css"
+      format: "css",
+      usesDtcg
     });
     const colorSchemeProperty = mode_ === "dark" || mode_ === "light" ? `color-scheme: ${mode_};
 ` : "";
@@ -27,10 +28,12 @@ ${allTokens.map(format).join("\n")}
 ${colorSchemeProperty}}
 `;
     const autoSelectorContent = ["light", "dark"].includes(mode_) ? prefersColorScheme(mode_, content) : "";
-    return header + `@layer ${layer} {
+    const body = R.isNotNil(layer) ? `@layer ${layer} {
 ${selector} ${content} ${autoSelectorContent}
 }
+` : `${selector} ${content} ${autoSelectorContent}
 `;
+    return header + body;
   }
 };
 const calculatedVariable = R.pipe(R.split(/:(.*?);/g), (split) => `${split[0]}: calc(${R.trim(split[1])});`);
@@ -38,13 +41,14 @@ const semantic = {
   name: "ds/css-semantic",
   format: async ({ dictionary, file, options, platform }) => {
     const { allTokens } = dictionary;
-    const { outputReferences } = options;
+    const { outputReferences, usesDtcg } = options;
     const { selector, isCalculatedToken, layer } = platform;
     const header = await fileHeader({ file });
     const format = createPropertyFormatter({
       outputReferences,
       dictionary,
-      format: "css"
+      format: "css",
+      usesDtcg
     });
     const formatTokens = R.map((token) => {
       const originalValue = getValue(token.original);
@@ -60,13 +64,15 @@ const semantic = {
 ${formattedVariables.join("\n")}
 }
 `;
-    return header + `@layer ${layer} {
+    const body = R.isNotNil(layer) ? `@layer ${layer} {
 ${selector} ${content}
 }
+` : `${selector} ${content}
 `;
+    return header + body;
   }
 };
-const sortByType = R.sortBy((token) => token?.type === "typography");
+const sortByType = R.sortBy((token) => token?.$type === "typography");
 const getVariableName = R.pipe(
   R.split(":"),
   R.head,
@@ -92,20 +98,21 @@ const sortTypographyLast = R.sortWith([
 const typography = {
   name: "ds/css-typography",
   format: async ({ dictionary, file, options, platform }) => {
-    const { outputReferences } = options;
+    const { outputReferences, usesDtcg } = options;
     const { selector, layer } = platform;
     const header = await fileHeader({ file });
     const format = createPropertyFormatter({
       outputReferences,
       dictionary,
-      format: "css"
+      format: "css",
+      usesDtcg
     });
     const sortedTokens = sortTypographyLast(dictionary.allTokens);
     const formattedTokens = R.pipe(
       sortByType,
       R.reduce(
         (acc, token) => {
-          if (typeEquals("fontweights", token)) {
+          if (typeEquals("fontweight", token)) {
             const className = `
   .${classSelector(token)} {
     font-weight: ${getValue(token)};
@@ -116,7 +123,7 @@ const typography = {
               classes: [...acc.classes, className]
             };
           }
-          if (typeEquals("lineheights", token)) {
+          if (typeEquals("lineheight", token)) {
             const className = `
   .${classSelector(token)} {
     line-height: ${getValue(token)};
@@ -128,21 +135,27 @@ const typography = {
             };
           }
           if (typeEquals("typography", token)) {
-            const references = getReferences(getValue(token.original), dictionary.tokens);
-            const fontweight = R.find(typeEquals(["fontweights"]))(references);
-            const lineheight = R.find(typeEquals(["lineheights"]))(references);
-            const fontsize = R.find(typeEquals(["fontsizes"]))(references);
-            const letterSpacing = R.find(typeEquals(["letterSpacing"]))(references);
+            let references = [];
+            try {
+              references = getReferences(getValue(token.original), dictionary.tokens);
+            } catch (error) {
+              console.error("Error getting references", error);
+              throw new Error(JSON.stringify(token, null, 2));
+            }
+            const fontweight = R.find(typeEquals(["fontweight"]))(references);
+            const lineheight = R.find(typeEquals(["lineheight"]))(references);
+            const fontsize = R.find(typeEquals(["fontsize"]))(references);
+            const letterSpacing = R.find(typeEquals(["dimension"]))(references);
             const fontSizeVar = fontsize ? getVariableName(format(fontsize)) : null;
             const fontWeightVar = fontweight ? getVariableName(format(fontweight)) : null;
             const lineheightVar = lineheight ? getVariableName(format(lineheight)) : null;
             const letterSpacingVar = letterSpacing ? getVariableName(format(letterSpacing)) : null;
             const className = `
   .${classSelector(token)} {
-    ${fontSizeVar && `font-size: ${fontSizeVar};`}
-    ${lineheightVar && `line-height: ${lineheightVar};`}
-    ${fontWeightVar && `font-weight: ${fontWeightVar};`}
-    ${letterSpacingVar && `letter-spacing: ${letterSpacingVar};`}
+    ${fontSizeVar ? `font-size: ${fontSizeVar};` : ""}
+    ${lineheightVar ? `line-height: ${lineheightVar};` : ""}
+    ${fontWeightVar ? `font-weight: ${fontWeightVar};` : ""}
+    ${letterSpacingVar ? `letter-spacing: ${letterSpacingVar};` : ""}
   }`;
             return { ...acc, classes: [className, ...acc.classes] };
           }
@@ -157,10 +170,10 @@ const typography = {
 ${variables}
 ${classes}
 }` : classes;
-    return header + `@layer ${layer} {
+    const body = R.isNotNil(layer) ? `@layer ${layer} {
 ${content}
-}
-`;
+}` : content;
+    return header + body;
   }
 };
 export {

package/dist/src/tokens/formats/js-tokens.js

@@ -3,21 +3,25 @@ import { createPropertyFormatter, fileHeader } from "style-dictionary/utils";
 import { getType } from "../utils/utils.js";
 const groupByType = R.groupBy((token) => getType(token));
 const removeUnwatedTokens = R.filter(
-  (token) => !["fds-base_spacing", "fds-base_sizing"].includes(token.name)
+  (token) => !["ds-base-spacing", "ds-base-sizing"].includes(token.name)
 );
+const dissocExtensions = R.pipe(R.dissoc("$extensions"), R.dissocPath(["original", "$extensions"]));
+const removeUnwatedProps = R.map((token) => dissocExtensions(token));
 const toCssVarName = R.pipe(R.split(":"), R.head, R.trim);
 const jsTokens = {
   name: "ds/js-tokens",
-  format: async ({ dictionary, file }) => {
+  format: async ({ dictionary, file, options }) => {
+    const { usesDtcg } = options;
     const format = createPropertyFormatter({
       dictionary,
-      format: "css"
+      format: "css",
+      usesDtcg
     });
     const formatTokens = R.map((token) => ({
       ...token,
       name: toCssVarName(format(token))
     }));
-    const processTokens = R.pipe(removeUnwatedTokens, formatTokens, groupByType);
+    const processTokens = R.pipe(removeUnwatedTokens, removeUnwatedProps, formatTokens, groupByType);
     const tokens = processTokens(dictionary.allTokens);
     const content = Object.entries(tokens).map(
       ([name, token]) => `export const  ${name} = ${JSON.stringify(token, null, 2).replace(/"([^"]+)":/g, "$1:")} 

package/dist/src/tokens/transformers.js

@@ -1,12 +1,16 @@
 import * as R from "ramda";
 import { noCase } from "./utils/noCase.js";
-import { getValue, typeEquals } from "./utils/utils.js";
+import { getValue, pathStartsWithOneOf, typeEquals } from "./utils/utils.js";
 const isPx = R.test(/\b\d+px\b/g);
 const sizeRem = {
   name: "ds/size/toRem",
   type: "value",
   transitive: true,
-  filter: (token) => typeEquals(["sizing", "spacing", "borderRadius", "fontsizes"], token),
+  filter: (token) => {
+    const hasWantedType = typeEquals(["dimension", "fontsize"], token);
+    const hasWantedPath = pathStartsWithOneOf(["spacing", "sizing", "border-radius", "font-size"], token);
+    return hasWantedType && hasWantedPath;
+  },
   transform: (token, config) => {
     const value = getValue(token);
     if (isPx(value)) {
@@ -34,7 +38,7 @@ const typographyShorthand = {
   name: "typography/shorthand",
   type: "value",
   transitive: true,
-  filter: (token) => token.type === "typography",
+  filter: (token) => typeEquals("typography", token),
   transform: (token) => {
     const typography = getValue(token);
     return `${typography.fontWeight} ${typography.fontSize}/${typography.lineHeight} '${typography.fontFamily}'`;

package/dist/src/tokens/utils/entryfile.js

@@ -0,0 +1,31 @@
+import glob from "fast-glob";
+import fs from "fs-extra";
+import * as R from "ramda";
+const sortLightmodeFirst = R.sortWith([R.descend(R.includes("light")), R.descend(R.includes("secondary"))]);
+const header = `@charset "UTF-8";
+
+@layer ds.reset, ds.theme, ds.base, ds.utilities, ds.components;
+
+`;
+const sortAndConcat = R.pipe(
+  sortLightmodeFirst,
+  R.map((file) => {
+    try {
+      const content = fs.readFileSync(file, "utf-8").toString();
+      return content;
+    } catch (e) {
+      console.error(`Error reading file: ${file}`);
+      return "";
+    }
+  }),
+  R.join("\n")
+);
+const makeEntryFile = async ({ outPath, buildPath, theme }) => {
+  const writePath = `${outPath}/${theme}.css`;
+  const files = await glob(`**/*`, { cwd: buildPath });
+  const content = header + sortAndConcat(files.map((file) => `${buildPath}/${file}`));
+  await fs.writeFile(writePath, content);
+};
+export {
+  makeEntryFile
+};

package/dist/src/tokens/utils/permutateThemes.js

@@ -8,7 +8,7 @@ function permutateThemes(themes, { separator = "-" } = {}) {
     return mapThemesToSetsObject(themes);
   }
   const groups = {};
-  themes.forEach((theme) => {
+  for (const theme of themes) {
     if (theme.group) {
       groups[theme.group] = [...groups[theme.group] ?? [], theme];
     } else {
@@ -16,7 +16,7 @@ function permutateThemes(themes, { separator = "-" } = {}) {
         `Theme ${theme.name} does not have a group property, which is required for multi-dimensional theming.`
       );
     }
-  });
+  }
   if (Object.keys(groups).length <= 1) {
     return mapThemesToSetsObject(themes);
   }

package/dist/src/tokens/utils/utils.js

@@ -1,4 +1,6 @@
 import * as R from "ramda";
+const mapToLowerCase = R.map(R.toLower);
+const hasAnyTruth = R.any(R.equals(true));
 const getType = (token) => (token.$type ?? token.type) || "";
 const getValue = (token) => token.$value ?? token.value;
 const typeEquals = R.curry((types, token) => {
@@ -7,8 +9,17 @@ const typeEquals = R.curry((types, token) => {
   }
   return R.includes(R.toLower(getType(token)), R.map(R.toLower, Array.isArray(types) ? types : [types]));
 });
+const pathStartsWithOneOf = R.curry((paths, token) => {
+  if (R.isNil(token)) {
+    return false;
+  }
+  const tokenPath = mapToLowerCase(token.path);
+  const matchPathsStartingWith = R.map((path) => R.startsWith([path], tokenPath), mapToLowerCase(paths));
+  return hasAnyTruth(matchPathsStartingWith);
+});
 export {
   getType,
   getValue,
+  pathStartsWithOneOf,
   typeEquals
 };

package/dist/types/bin/designsystemet.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=designsystemet.d.ts.map

package/dist/types/bin/designsystemet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"designsystemet.d.ts","sourceRoot":"","sources":["../../../bin/designsystemet.ts"],"names":[],"mappings":""}