@heliux-org/ui-style 1.0.22

package/stylelint-config/rules/use-defined-css-var-when-available/index.js

@@ -0,0 +1,105 @@
+const stylelint = require("stylelint");
+const valueParser = require("postcss-value-parser");
+const { getPropsToAllowedCssVars } = require("./parse-monday-css");
+
+const { report, ruleMessages, validateOptions } = stylelint.utils;
+
+const RULE_NAME = "@heliux-org/ui-style/use-defined-css-var-when-available";
+const CONFIGS_THAT_MEAN_IGNORE_FILE = ["disabled", "disable", "off", "0"];
+
+const messages = ruleMessages(RULE_NAME, {
+  expected: (original, expected) => {
+    const asArray = Array.isArray(expected) ? expected : [expected];
+    const multipleValues = asArray.length > 1;
+    const expectedMsg = multipleValues ? `one of vars: \n${asArray.join("\n")}\n` : `"var(${asArray[0]})"`;
+    return `Expected "${original}" to be ${expectedMsg}`;
+  }
+});
+
+module.exports = stylelint.createPlugin(RULE_NAME, (primaryOption, secondaryOptionObject, context) => {
+  const propsToAllowedCssVars = getPropsToAllowedCssVars();
+
+  return function lint(postcssRoot, postcssResult) {
+    const validOptions = validateOptions(
+      postcssResult,
+      RULE_NAME,
+      {
+        actual: primaryOption,
+        possible: [...CONFIGS_THAT_MEAN_IGNORE_FILE, true, "true"],
+        optional: true
+      },
+      {
+        actual: secondaryOptionObject && secondaryOptionObject.useRecommendedFixes,
+        possible: [true, "true", false, "false"],
+        optional: true
+      }
+    );
+
+    primaryOption = primaryOption || true;
+    const shouldNotLint =
+      !validOptions || CONFIGS_THAT_MEAN_IGNORE_FILE.includes(primaryOption.toString().toLowerCase());
+    if (shouldNotLint) {
+      return;
+    }
+
+    const isAutoFixing = Boolean(context.fix);
+    postcssRoot.walkDecls(decl => {
+      // Iterate CSS declarations
+
+      const valuesToVars = propsToAllowedCssVars[decl.prop];
+      if (!valuesToVars) {
+        return;
+      }
+
+      const parsedValue = valueParser(decl.value);
+      parsedValue.walk(node => {
+        // iterate nodes inside values, e.g. "padding: 16px 20px" will have two value nodes: "16px" and "20px"
+        if (node.type !== "word") {
+          return;
+        }
+
+        const { allowedVars: varReplacementsForValue, recommended } = valuesToVars[node.value] || {};
+
+        if (!varReplacementsForValue || !varReplacementsForValue.length) {
+          return;
+        }
+        const hasSingleReplacement = varReplacementsForValue.length === 1;
+
+        const useRecommendedFixes = secondaryOptionObject && secondaryOptionObject.useRecommendedFixes;
+
+        if (isAutoFixing) {
+          // We are in “fix” mode
+          let replacementVar;
+          if (hasSingleReplacement) {
+            replacementVar = varReplacementsForValue[0];
+          } else if (useRecommendedFixes) {
+            replacementVar = recommended;
+          } else {
+            // we have multiple options, but the user chose not to follow recommendations
+            return;
+          }
+          const replacement = `var(${replacementVar})`;
+          const newValue = decl.value.replace(node.value, replacement);
+          // Apply the fix. It's not pretty, but that's the way to do it
+          if (decl.raws.value) {
+            decl.raws.value.raw = newValue;
+          } else {
+            decl.value = newValue;
+          }
+        } else {
+          // We are in “report only” mode
+          report({
+            ruleName: RULE_NAME,
+            result: postcssResult,
+            message: messages.expected(node.value, varReplacementsForValue), // Build the reported message
+            node: decl, // Specify the reported node
+            word: node.value // Which exact word caused the error? This positions the error properly
+          });
+        }
+      });
+    });
+  };
+});
+
+module.exports.ruleName = RULE_NAME;
+module.exports.messages = messages;

package/stylelint-config/rules/use-defined-css-var-when-available/parse-monday-css.js

@@ -0,0 +1,115 @@
+const postcss = require("postcss");
+const fs = require("fs");
+const path = require("path");
+const { PROPS_TO_ALLOWED_VARS } = require("./props-to-allowed-vars");
+
+function getReferencedPropFromVar(value) {
+  // var(--my-var) => --my-var
+  const VAR_REGEX = /var\(\s*(--[\w-]+)\s*\)/g;
+  return VAR_REGEX.exec(value)[1];
+}
+
+function readCssFromDefaultPath() {
+  const stylesCssPath = path.resolve(__dirname, "../../../dist/index.min.css");
+  return fs.readFileSync(stylesCssPath).toString();
+}
+
+function parseMondayUiCss(css = readCssFromDefaultPath()) {
+  const ast = postcss.parse(css);
+
+  const varsToCanonicalValue = {}; // css vars that are mapped to canonical values. e.g. {"--color-primary": "#131313"}
+  const canonicalValuesToVars = {}; // matching css vars for each canonical value. e.g. {"16px": ["--font-size-h3", "--spacing-medium"]}
+  const referenceTokens = {}; // css vars that are pointing to other css vars. e.g. {"--color-primary": "--color-red"}
+  const referenceTokensToCanonicalValue = {}; // maps between reference token names to canonical values. e.g. if "--font-size-h5: var(--font-size-30)" and "--font-size-30: 16px", then {"--font-size-h5": "16px"}
+
+  ast.walkDecls(/^--/, decl => {
+    if (!decl.parent || decl.parent.selector !== ":root") {
+      return; // we only care about truly global variables
+    }
+    const { prop, value } = decl;
+    const isValueCssProp = value.includes("var(--");
+    if (!isValueCssProp) {
+      // this is a declaration of a new css var
+      varsToCanonicalValue[prop] = value;
+      canonicalValuesToVars[value] = canonicalValuesToVars[value] || [];
+      if (!canonicalValuesToVars[value].includes(prop)) {
+        canonicalValuesToVars[value].push(prop);
+      }
+    } else {
+      referenceTokens[prop] = value;
+    }
+  });
+
+  Object.keys(referenceTokens).forEach(referenceToken => {
+    const tokenValue = referenceTokens[referenceToken];
+    let referencedVar = getReferencedPropFromVar(tokenValue);
+    while (referenceTokens[referencedVar]) {
+      referencedVar = referenceTokens[referencedVar];
+    }
+    const referencedCanonicalValue = varsToCanonicalValue[referencedVar];
+    if (referencedCanonicalValue) {
+      referenceTokensToCanonicalValue[referenceToken] = referencedCanonicalValue;
+    }
+  });
+
+  const allVarsToCanonicalValue = {}; //maps between all vars (reference or not) to the canonical value
+
+  Object.keys(varsToCanonicalValue).forEach(varName => {
+    allVarsToCanonicalValue[varName] = varsToCanonicalValue[varName];
+  });
+  Object.keys(referenceTokensToCanonicalValue).forEach(varName => {
+    allVarsToCanonicalValue[varName] = referenceTokensToCanonicalValue[varName];
+  });
+
+  return { allVarsToCanonicalValue };
+}
+
+/**
+ * @returns {{[cssProp: string]: {[value: string]: {allowedVars: string[], recommended: string | undefined}}}}: a map between a css prop to expected CSS vars replacements per values, and a recommendation if exists.
+ * For example:
+ {
+    padding: {
+      {
+        "8px": { allowedVars: [ "--spacing-small" ] },
+        "16px": { allowedVars: [ "--spacing-medium" ] },
+      }
+    },
+    "font-size":{
+      "14px": { 
+        allowedVars: [ "--font-size-general-label", "--font-size-subtext" ],
+        recommended: "--font-size-general-label"
+      },
+    }
+  }
+ */
+function getPropsToAllowedCssVars() {
+  const { allVarsToCanonicalValue } = parseMondayUiCss();
+  const propsToReplacementConfig = {};
+  Object.keys(PROPS_TO_ALLOWED_VARS).forEach(prop => {
+    const { allowedVars, recommended } = PROPS_TO_ALLOWED_VARS[prop];
+    if (!allowedVars) {
+      return;
+    }
+    propsToReplacementConfig[prop] = {};
+    allowedVars.forEach(varName => {
+      const varCanonicalValue = allVarsToCanonicalValue[varName];
+      if (!varCanonicalValue) {
+        return;
+      }
+      propsToReplacementConfig[prop][varCanonicalValue] = propsToReplacementConfig[prop][varCanonicalValue] || {
+        allowedVars: []
+      };
+      propsToReplacementConfig[prop][varCanonicalValue].allowedVars.push(varName);
+      if (recommended && recommended.includes(varName)) {
+        propsToReplacementConfig[prop][varCanonicalValue].recommended = varName;
+      }
+    });
+  });
+
+  return propsToReplacementConfig;
+}
+
+module.exports = {
+  parseMondayUiCss,
+  getPropsToAllowedCssVars
+};

package/stylelint-config/rules/use-defined-css-var-when-available/props-to-allowed-vars.js

@@ -0,0 +1,161 @@
+const SPACINGS = [
+  "--spacing-xs",
+  "--spacing-small",
+  "--spacing-medium",
+  "--spacing-large",
+  "--spacing-xl",
+  "--spacing-xxl",
+  "--spacing-xxxl"
+];
+
+const BORDER_RADIUSES = ["--border-radius-small", "--border-radius-medium", "--border-radius-big"];
+
+const BORDER_WIDTHS = ["--border-width"];
+
+const BORDER_STYLES = ["--border-style"];
+
+const FONT_SIZES = [
+  // since "--font-size-10" and "--font-size-20" have the same value, we need to pick only one of them as "valid value", to allow autofix
+  // "--font-size-10",
+  "--font-size-20",
+  "--font-size-30",
+  "--font-size-40",
+  "--font-size-50",
+  "--font-size-60",
+  "--font-size-h1",
+  "--font-size-h2",
+  "--font-size-h3",
+  "--font-size-h4",
+  "--font-size-h5",
+  "--font-size-h6",
+  "--font-size-general-label",
+  "--font-size-paragraph",
+  "--font-size-subtext"
+];
+
+const FONT_FAMILIES = ["--font-family", "--title-font-family", "--h1-font-family"];
+
+const FONT_WEIGHTS = ["--font-weight-very-light", "--font-weight-light", "--font-weight-normal", "--font-weight-bold"];
+
+const FONT_LINE_HEIGHTS = [
+  "--font-line-height-10",
+  // since "--font-line-height-20", "--font-line-height-30" and "--font-line-height-40" have the same value, we need to pick only one of them as "valid value", to allow autofix
+  // "--font-line-height-20",
+  // "--font-line-height-30",
+  "--font-line-height-40",
+  "--font-line-height-50",
+  "--font-line-height-60",
+  "--font-line-height-h1",
+  "--font-line-height-h2",
+  "--font-line-height-h3",
+  "--font-line-height-h4",
+  "--font-line-height-h5",
+  "--font-line-height-h6",
+  "--font-line-height-general-label",
+  "--font-line-height-paragraph",
+  "--font-line-height-subtext"
+];
+
+const ANIMATION_TIMING = [
+  "--motion-timing-enter",
+  "--motion-timing-exit",
+  "--motion-timing-transition",
+  "--motion-timing-emphasize",
+  "--expand-animation-timing"
+];
+
+const ANIMATION_DURATION = [
+  "--motion-productive-short",
+  "--motion-productive-medium",
+  "--motion-productive-long",
+  "--motion-expressive-short",
+  "--motion-expressive-long"
+];
+
+const SPACING_PROPS = [
+  "padding",
+  "padding-top",
+  "padding-bottom",
+  "padding-left",
+  "padding-right",
+  "padding-inline",
+  "padding-inline-end",
+  "padding-inline-start",
+  "padding-block",
+  "padding-block-end",
+  "padding-block-start",
+
+  "margin",
+  "margin-top",
+  "margin-bottom",
+  "margin-left",
+  "margin-right",
+  "margin-inline",
+  "margin-inline-end",
+  "margin-inline-start",
+  "margin-block",
+  "margin-block-end",
+  "margin-block-start",
+
+  "inset",
+  "inset-end",
+  "inset-start"
+];
+
+const BORDER_RADIUSES_PROPS = [
+  "border-radius",
+  "border-top-left-radius",
+  "border-top-right-radius",
+  "border-bottom-left-radius",
+  "border-bottom-right-radius",
+  "border-start-start-radius",
+  "border-start-end-radius",
+  "border-end-start-radius",
+  "border-end-end-radius"
+];
+
+const FONT_FAMILIES_PROPS = ["font", "font-family"];
+
+const BORDER_WIDTHS_PROPS = ["border", "border-width"];
+
+const BORDER_STYLES_PROPS = ["border", "border-style"];
+
+const TIMING_FUNCTION_PROPS = ["transition", "transition-timing", "animation", "animation-timing-function"];
+
+const DURATION_FUNCTION_PROPS = ["transition", "transition-duration", "animation", "animation-duration"];
+
+const OPACITY_PROPS = ["opacity"];
+
+function mapPropsToAllowedVars(propNames, allowedVars, recommended = undefined) {
+  allowedVars = Array.isArray(allowedVars) ? allowedVars : [allowedVars];
+  propNames = Array.isArray(propNames) ? propNames : [propNames];
+
+  return propNames.reduce(
+    (result, propName) => ({
+      ...result,
+      [propName]: { allowedVars, recommended }
+    }),
+    {}
+  );
+}
+
+// List the CSS props we want to lint, and map each one to the values we would prefer to use.
+// For example, let's say that the key "border-radius" is mapped to --border-radius-small and --border-radius-medium.
+// This means that if --border-radius-small or --border-radius-medium can be used while linting a rule with the property "border-radius", we will show an error
+
+const PROPS_TO_ALLOWED_VARS = {
+  ...mapPropsToAllowedVars(SPACING_PROPS, SPACINGS),
+  ...mapPropsToAllowedVars(BORDER_RADIUSES_PROPS, BORDER_RADIUSES),
+  ...mapPropsToAllowedVars(BORDER_WIDTHS_PROPS, BORDER_WIDTHS),
+  ...mapPropsToAllowedVars(BORDER_STYLES_PROPS, BORDER_STYLES),
+  ...mapPropsToAllowedVars(FONT_FAMILIES_PROPS, FONT_FAMILIES, ["--title-font-family"]),
+  ...mapPropsToAllowedVars(TIMING_FUNCTION_PROPS, ANIMATION_TIMING, ["--expand-animation-timing"]),
+  ...mapPropsToAllowedVars(DURATION_FUNCTION_PROPS, ANIMATION_DURATION, ["--animation-expressive-short"]),
+  ...mapPropsToAllowedVars(OPACITY_PROPS, "--disabled-component-opacity"),
+  "-webkit-font-smoothing": { allowedVars: ["--font-smoothing-webkit"] },
+  "-moz-osx-font-smoothing": { allowedVars: ["--font-smoothing-moz"] }
+};
+
+module.exports = {
+  PROPS_TO_ALLOWED_VARS
+};