adds constants file

build.js

@@ -9,43 +9,43 @@ import formatResponsiveCSS from "./utils/formats/formatResponsiveCSS.js";
 import transformFont from "./utils/transforms/transformFont.js";
 import transformToRem from "./utils/transforms/transformToRem.js";
 
+import CONSTANTS from "./utils/constants.js";
+
 registerTransforms(StyleDictionary);
 
 const tokenGroups = ["core", "semantic"];
+const excludeBreakpoints = Object.values(CONSTANTS.BREAKPOINTS);
 
 const common = {
   buildPath: "tokens-generated/",
   prefix: "wds",
   transformGroup: "tokens-studio",
 };
 
+const baseTokens = () => {
+  return tokenGroups.map((groupName) => {
+    const excluded = groupName === "semantic" ? excludeBreakpoints : [];
+
+    return {
+      destination: `css/${groupName}.css`,
+      format: "css/variables",
+      filter: (token) =>
+        token.filePath === `tokens/tokens-figma/${groupName}.json` &&
+        filterExcludeTokens(token, excluded),
+    };
+  });
+};
+
 const sd = new StyleDictionary({
   source: ["tokens/**/*.json"],
   platforms: {
     css: {
-      ...common,
-      transforms: ["name/kebab", "custom/rem"],
-      files: tokenGroups.map((groupName) => {
-        const extraPath =
-          groupName === "semantic"
-            ? ["breakpoint-lg", "breakpoint-md", "breakpoint-sm"]
-            : [];
-
-        return {
-          destination: `css/${groupName}.css`,
-          format: "css/variables",
-          filter: (token) =>
-            token.filePath === `tokens/tokens-figma/${groupName}.json` &&
-            filterExcludeTokens(token, extraPath),
-        };
-      }),
-    },
-    cssResponsive: {
       ...common,
       transforms: ["name/kebab", "custom/rem"],
       files: [
+        ...baseTokens(),
         {
-          destination: "css/responsive.css",
+          destination: "css/semantic-responsive.css",
           format: "custom/css/responsive",
           filter: (token) => filterExcludeTokens(token),
         },

utils/constants.js

@@ -0,0 +1,9 @@
+const CONSTANTS = {
+  BREAKPOINTS: {
+    mobile: "breakpoint-sm",
+    tablet: "breakpoint-md",
+    desktop: "breakpoint-lg",
+  },
+};
+
+export default CONSTANTS;

utils/formats/formatResponsiveCSS.js

@@ -1,18 +1,16 @@
-const bgName = {
-  mobile: "breakpoint-sm",
-  tablet: "breakpoint-md",
-  desktop: "breakpoint-lg",
-};
+import CONSTANTS from "../constants.js";
 
 const createRegex = () => {
-  const regexStr = Object.values(bgName)
+  const regexStr = Object.values(CONSTANTS.BREAKPOINTS)
     .map((value) => `-${value}`)
     .join("|");
 
   return new RegExp(regexStr, "g");
 };
 
 const formatResponsiveCSS = (dictionary) => {
+  const breakpoints = CONSTANTS.BREAKPOINTS;
+
   const deviceTokenName = "grid";
   const excludeTokens = [deviceTokenName];
 
@@ -21,6 +19,7 @@ const formatResponsiveCSS = (dictionary) => {
   const excludedTokens = dictionary.allTokens.filter(
     (token) => !excludeTokens.some((exclude) => token.path.includes(exclude)),
   );
+
   const filterTokens = (name) =>
     excludedTokens.filter(
       (token) =>
@@ -45,20 +44,20 @@ const formatResponsiveCSS = (dictionary) => {
   };
 
   // Add mobile first tokens
-  const mobileTokens = filterTokens(bgName.mobile);
+  const mobileTokens = filterTokens(breakpoints.mobile);
   if (mobileTokens?.length > 0) {
     output += `:root {\n`;
     output += createVariables(mobileTokens);
     output += `}\n\n`;
   }
 
   // Find breakpoint values
-  const tablet = findDevice(bgName.tablet);
-  const desktop = findDevice(bgName.desktop);
+  const tablet = findDevice(breakpoints.tablet);
+  const desktop = findDevice(breakpoints.desktop);
 
   if (tablet || desktop) {
     // Add tablet tokens inside media query
-    const tabletTokens = filterTokens(bgName.tablet);
+    const tabletTokens = filterTokens(breakpoints.tablet);
 
     if (tabletTokens?.length > 0) {
       output += `@media (min-width: ${tablet.value}) {\n`;
@@ -69,7 +68,7 @@ const formatResponsiveCSS = (dictionary) => {
     }
 
     // Add desktop tokens inside media query
-    const desktopTokens = filterTokens(bgName.desktop);
+    const desktopTokens = filterTokens(breakpoints.desktop);
 
     if (desktopTokens?.length > 0) {
       output += `@media (min-width: ${desktop.value}) {\n`;