@digigov/css 2.0.0-85c27c19 → 2.0.0-87b6232d

package/themes.plugin.js

@@ -1,148 +0,0 @@
-const fs = require("fs");
-const path = require("path");
-const postcss = require("postcss");
-const postcssrc = require("postcss-load-config");
-const postcssJs = require("postcss-js");
-
-const prefix = "ds";
-const mediaQueriesMapping = {
-  xs: "@media (min-width: 0px)",
-  sm: "@media (min-width: 640px)",
-  md: "@media (min-width: 768px)",
-  lg: "@media (min-width: 1024px)",
-  print: "@media print",
-};
-
-let hasRun = false;
-
-module.exports = function addThemes({ addBase, config }) {
-  if (hasRun) {
-    return;
-  }
-  hasRun = true;
-
-  let base = {};
-  const themes = config("themes");
-  const defaultTheme = config("defaultTheme");
-  for (const customTheme in themes) {
-    const customThemeObject = require(themes[customTheme]);
-    if (customThemeObject.overrides) {
-      console.log("Loading theme css from source...");
-      const css = fs
-        .readFileSync(
-          path.resolve(
-            path.dirname(themes[customTheme]),
-            "overrides/index.css",
-          ),
-        )
-        .toString();
-      const ctx = {};
-      const { plugins, options } = postcssrc.sync(ctx);
-      const result = postcss(plugins).process(css, options).result.root;
-      const cssJs = postcssJs.objectify(result);
-      base[`.${customTheme}`] = cssJs;
-    }
-    if (customTheme === defaultTheme) {
-      base[`:root,:root.${customTheme},::before,::after`] =
-        extractVars(customThemeObject);
-    } else {
-      base[
-        `:root.${customTheme},.${customTheme},.${customTheme} *::before,.${customTheme} *::after`
-      ] = extractVars(customThemeObject);
-    }
-
-    if (customThemeObject.variables && customThemeObject.variables.components) {
-      const extractedVariables = extractMediaQueriesFromComponentVars(
-        customThemeObject.variables.components,
-        customTheme,
-        defaultTheme,
-      );
-      Object.keys(extractedVariables).forEach((key) => {
-        if (base[key]) {
-          base[key] = { ...base[key], ...extractedVariables[key] };
-        } else {
-          base[key] = extractedVariables[key];
-        }
-      });
-    }
-  }
-  addBase(base);
-};
-
-function extractVars(themeObj) {
-  const colorVars = extractColorVars(themeObj.colors);
-  const globalVars =
-    themeObj.variables && themeObj.variables.globals
-      ? extractGlobalVars(themeObj.variables.globals)
-      : {};
-  return { ...colorVars, ...globalVars };
-}
-
-function extractColorVars(colorObj, colorGroup = "") {
-  return Object.keys(colorObj).reduce((vars, colorKey) => {
-    const value = colorObj[colorKey];
-    const colorName =
-      colorKey == "default"
-        ? `--color${colorGroup}`
-        : `--color${colorGroup}-${colorKey}`;
-    const newVars =
-      typeof value === "string"
-        ? {
-            [colorName]: value,
-            [`${colorName}-rgb`]: hexToRGB(value),
-          }
-        : extractColorVars(value, `-${colorKey}`);
-    return { ...vars, ...newVars };
-  }, {});
-}
-
-function extractGlobalVars(globalVarsObj) {
-  return Object.keys(globalVarsObj).reduce((vars, varKey) => {
-    const value = globalVarsObj[varKey];
-    vars[`--${varKey}`] = value;
-    return vars;
-  }, {});
-}
-
-function hexToRGB(hex) {
-  const r = parseInt(hex.slice(1, 3), 16),
-    g = parseInt(hex.slice(3, 5), 16),
-    b = parseInt(hex.slice(5, 7), 16);
-
-  return r + ", " + g + ", " + b;
-}
-
-function extractMediaQueriesFromComponentVars(
-  componentObj,
-  customTheme,
-  defaultTheme,
-) {
-  let mediaObj = {};
-  Object.keys(componentObj).forEach((componentClass) => {
-    Object.keys(componentObj[componentClass]).forEach((componentAttr) => {
-      Object.keys(componentObj[componentClass][componentAttr]).forEach(
-        (componentMedia) => {
-          const newAttrKey = `--${componentClass}-${componentAttr}`;
-          const newAttrValue =
-            componentObj[componentClass][componentAttr][componentMedia];
-          const newAttr = { [newAttrKey]: newAttrValue };
-          const newClass = `.${prefix}-${componentClass}`;
-          const newMedia = mediaQueriesMapping[componentMedia];
-          const newTheme =
-            customTheme === defaultTheme ? "" : `.${customTheme}`;
-
-          if (mediaObj[newMedia]) {
-            if (mediaObj[newMedia][newTheme][newClass]) {
-              mediaObj[newMedia][newTheme][newClass][newAttrKey] = newAttrValue;
-            } else {
-              mediaObj[newMedia][newTheme][newClass] = newAttr;
-            }
-          } else {
-            mediaObj[newMedia] = { [newTheme]: { [newClass]: newAttr } };
-          }
-        },
-      );
-    });
-  });
-  return mediaObj;
-}