@carto/meridian-ds 5.1.4-alpha.f9cdbcf.347 → 5.2.0

package/dist/eslint-rules/index.js

@@ -175,11 +175,13 @@ const STYLE_STRING = (pattern) => `Literal[value=${pattern}]:not(JSXAttribute[na
 const NON_ZERO = "Literal[raw=/^[0-9.]+$/][raw!=/^0+(\\.0+)?$/]";
 const exactly = (...alternatives) => `/^(${alternatives.join("|")})$/`;
 const SPACING = "[mp][trblxy]?|(margin|padding)(Top|Right|Bottom|Left|X|Y|Inline|Block)?|gap|rowGap|columnGap";
-const OFFSET = "top|right|bottom|left|inset";
 const SPACING_KEY = exactly(SPACING);
-const OFFSET_KEY = exactly(OFFSET);
-const SPACING_OR_OFFSET_KEY = exactly(SPACING, OFFSET);
-const MERIDIAN_COMPONENT = exactly(...MERIDIAN_COMPONENTS);
+const MERIDIAN_IMPORT = /^@carto\/meridian-ds(\/|$)/;
+const CSS_WIDE = "inherit|initial|unset|revert|revert-layer";
+const PALETTE_VALUE = `/^(${CSS_WIDE}|currentColor|transparent|divider|[a-z]+\\.[A-Za-z0-9]+(\\.[A-Za-z0-9]+)?)$/`;
+const ICON = "/(Icon|Outlined|Rounded|Sharp|TwoTone)$/";
+const VISUAL_KEY = "/^(background|border|border(Top|Right|Bottom|Left)?(Color|Width|Style)?|borderRadius|boxShadow|opacity|outline|textTransform|textDecoration|fill|stroke)$/";
+const COLOR_KEY = "/^(color|bgcolor|backgroundColor)$/";
 const SX = ":matches(JSXAttribute[name.name='sx'], Property[key.name='sx'])";
 const STYLED_OR_STYLE = ":matches(CallExpression[callee.callee.name='styled'], CallExpression[callee.object.name='styled'], CallExpression[callee.callee.object.name='styled'], JSXAttribute[name.name='style'])";
 const SPACING_CALL = "CallExpression[callee.property.name='spacing']";
@@ -194,110 +196,138 @@ const WRAPPERS = [
   "TemplateLiteral > ConditionalExpression > "
 ];
 const under = (parent, nodes) => nodes.flatMap((node) => WRAPPERS.map((w) => `${parent} > ${w}${node}`));
-const meridianDesignRules = {
-  "spacing-step": {
-    selector: anyOf(
-      ...under(`${SX} Property[key.name=${SPACING_KEY}]`, [
-        ...signed(OFF_SCALE),
-        `ArrayExpression > ${OFF_SCALE}`,
-        `ObjectExpression > Property > ${OFF_SCALE}`
-      ]),
-      ...under(
-        `Property[key.name=${SPACING_OR_OFFSET_KEY}]`,
-        signed(OFF_SCALE).map((n) => `${SPACING_CALL} > ${n}`)
-      )
-    ),
-    message: `Spacing off the Meridian scale: margin, padding, gap and offsets use ${SPACING_STEPS.join(", ")}.`
-  },
-  "px-spacing": {
-    selector: anyOf(
-      ...under(`Property[key.name=${SPACING_OR_OFFSET_KEY}]`, [
-        PX_STRING,
-        `ArrayExpression > ${PX_STRING}`,
-        `ObjectExpression > Property > ${PX_STRING}`
-      ]),
-      ...under(
-        `${STYLED_OR_STYLE} Property[key.name=${SPACING_OR_OFFSET_KEY}]`,
-        signed(NON_ZERO)
+const esqueryRegex = (re) => `/${re.source.replace(/\\?\//g, "\\x2F")}/`;
+function createMeridianDesignRules({
+  importSource = MERIDIAN_IMPORT
+} = {}) {
+  const source = esqueryRegex(importSource);
+  const forImported = (names, selector) => anyOf(
+    ...names.map(
+      (name) => `Program:has(ImportDeclaration[source.value=${source}] > :matches(ImportSpecifier, ImportDefaultSpecifier)[local.name='${name}']) ${selector(name)}`
+    )
+  );
+  const sxOf = (name) => `JSXOpeningElement[name.name='${name}'] > JSXAttribute[name.name='sx']`;
+  return {
+    "spacing-step": {
+      selector: anyOf(
+        ...under(`${SX} Property[key.name=${SPACING_KEY}]`, [
+          ...signed(OFF_SCALE),
+          `ArrayExpression > ${OFF_SCALE}`,
+          `ObjectExpression > Property > ${OFF_SCALE}`
+        ]),
+        ...under(
+          `Property[key.name=${SPACING_KEY}]`,
+          signed(OFF_SCALE).map((n) => `${SPACING_CALL} > ${n}`)
+        )
       ),
-      ...under(`${SX} Property[key.name=${OFFSET_KEY}]`, signed(NON_ZERO))
-    ),
-    message: "Raw px spacing: use the theme scale — `sx` spacing numbers (`px: 2`) or `theme.spacing(n)`. Numbers in `styled()`/`style` and `sx` offsets are px."
-  },
-  "filled-icon": {
-    selector: anyOf(
-      "ImportDeclaration[source.value=/^@mui.icons-material.(?!.*(Outlined|Rounded|Sharp|TwoTone)$)/]",
-      "ImportDeclaration[source.value='@mui/icons-material'][importKind!='type'] > ImportSpecifier[importKind!='type'][imported.name!=/(Outlined|Rounded|Sharp|TwoTone)$/]"
-    ),
-    message: "Filled MUI icon: import the Outlined variant."
-  },
-  "alpha-white-black": {
-    selector: "CallExpression[callee.name='alpha'] > MemberExpression[property.name=/^(white|black)$/][object.property.name='common']",
-    message: "`alpha()` on white/black: use the palette opacity shades `white[N]` / `black[N]`."
-  },
-  "hex-color": {
-    selector: STYLE_STRING(
-      "/(^|[\\s(,])#([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\\b/"
-    ),
-    message: "Hardcoded hex color: use a palette token."
-  },
-  "rgb-color": {
-    selector: STYLE_STRING("/(^|[^a-z])rgba?\\(/"),
-    message: "Hardcoded rgb()/rgba() color: use a palette token."
-  },
-  "typography-style": {
-    selector: anyOf(
-      ...under(
-        `:matches(${SX}, ${STYLED_OR_STYLE}) Property[key.name=/^(fontSize|fontWeight|lineHeight|fontFamily)$/]`,
-        ["Literal"]
-      )
-    ),
-    message: "Hardcoded typography: use `<Typography variant>` (and `weight`), `sx={{ typography: 'body2' }}` or `...theme.typography.body2`."
-  },
-  "external-link": {
-    selector: "JSXOpeningElement[name.name='a'] > JSXAttribute[name.name='target'] > Literal[value='_blank']",
-    message: 'Raw `<a target="_blank">`: use Meridian `Link` with `external`.'
-  },
-  "system-props": {
-    selector: "JSXOpeningElement[name.name=/^(Box|Stack|Grid|Grid2|Container)$/] > JSXAttribute[name.name=/^(m|p)[trblxy]?$/]",
-    message: "MUI system props are deprecated: move spacing into `sx`, e.g. `<Box sx={{ px: 2 }}>`."
-  },
-  "data-name": {
-    selector: `JSXOpeningElement[name.name=${MERIDIAN_COMPONENT}] > JSXAttribute[name.name='data-name']`,
-    message: "`data-name` on a Meridian component overrides its own marker: set it on a wrapper, or drop it."
-  },
-  "literal-a11y-text": {
-    selector: anyOf(
-      ...["", "JSXExpressionContainer > "].map(
-        (wrapper) => `JSXAttribute[name.name=/^(aria-label|placeholder)$/] > ${wrapper}Literal[value=/[A-Za-z]/]`
-      )
-    ),
-    message: "Hardcoded `aria-label` / `placeholder`: translate it with the i18n layer, and keep test ids out of it."
-  },
-  "raw-shadow-radius": {
-    selector: anyOf(
-      "Property[key.name='boxShadow'] > Literal[value=/\\d/]",
-      "Property[key.name='borderRadius'] > Literal[value=/^\\d+(\\.\\d+)?px$/]"
-    ),
-    message: "Hardcoded shadow or radius: use `theme.shadows[n]` / `theme.shape.borderRadius`."
-  },
-  "styled-meridian": {
-    selector: `CallExpression[callee.name='styled'] > Identifier[name=${MERIDIAN_COMPONENT}]`,
-    message: "`styled()` of a Meridian component restyles it locally: use its props/variants, or raise the gap upstream in Meridian."
-  },
-  "visual-sx": {
-    selector: `JSXOpeningElement[name.name=${MERIDIAN_COMPONENT}] > JSXAttribute[name.name='sx'] Property[key.name=/^(color|bgcolor|background|backgroundColor|border|border(Top|Right|Bottom|Left)?(Color|Width|Style)?|borderRadius|boxShadow|opacity|outline|textTransform|textDecoration|fill|stroke)$/]`,
-    message: "Visual `sx` on a Meridian component overrides its design: keep `sx` to layout (spacing, size, position) and use its props/variants for the look."
-  },
-  "disabled-without-reason": {
-    selector: "JSXOpeningElement[name.name=/^(Button|IconButton|SplitButton)$/]:has(> JSXAttribute[name.name='disabled']:not([value.expression.value=false])):not(:has(> JSXAttribute[name.name=/^(tooltip|aria-describedby)$/]))",
-    message: "Disabled without a reason: pass `tooltip` (or `aria-describedby`) saying why it can’t be used."
-  },
-  "disabled-cursor": {
-    selector: "Property[key.name='cursor'] > Literal[value='not-allowed']",
-    message: "Don't tweak the cursor for disabled states: the component already styles them."
-  }
-};
+      message: `Spacing off the Meridian scale: margin, padding and gap use ${SPACING_STEPS.join(", ")}.`
+    },
+    "px-spacing": {
+      selector: anyOf(
+        ...under(`Property[key.name=${SPACING_KEY}]`, [
+          PX_STRING,
+          `ArrayExpression > ${PX_STRING}`,
+          `ObjectExpression > Property > ${PX_STRING}`
+        ]),
+        ...under(
+          `${STYLED_OR_STYLE} Property[key.name=${SPACING_KEY}]`,
+          signed(NON_ZERO)
+        )
+      ),
+      message: "Raw px spacing: use the theme scale — `sx` spacing numbers (`px: 2`) or `theme.spacing(n)`. Numbers in `styled()`/`style` are px."
+    },
+    "filled-icon": {
+      selector: anyOf(
+        "ImportDeclaration[source.value=/^@mui.icons-material.(?!.*(Outlined|Rounded|Sharp|TwoTone)$)/]",
+        "ImportDeclaration[source.value='@mui/icons-material'][importKind!='type'] > ImportSpecifier[importKind!='type'][imported.name!=/(Outlined|Rounded|Sharp|TwoTone)$/]"
+      ),
+      message: "Filled MUI icon: import the Outlined variant."
+    },
+    "alpha-white-black": {
+      selector: "CallExpression[callee.name='alpha'] > MemberExpression[property.name=/^(white|black)$/][object.property.name='common']",
+      message: "`alpha()` on white/black: use the palette opacity shades `white[N]` / `black[N]`."
+    },
+    "hex-color": {
+      selector: STYLE_STRING(
+        "/(^|[\\s(,])#([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\\b/"
+      ),
+      message: "Hardcoded hex color: use a palette token."
+    },
+    "rgb-color": {
+      selector: STYLE_STRING("/(^|[^a-z])rgba?\\(/"),
+      message: "Hardcoded rgb()/rgba() color: use a palette token."
+    },
+    "typography-style": {
+      selector: anyOf(
+        ...under(
+          `:matches(${SX}, ${STYLED_OR_STYLE}) Property[key.name=/^(fontWeight|fontFamily)$/]`,
+          [`Literal[value!=/^(${CSS_WIDE})$/]`]
+        ),
+        ...under(
+          `:matches(${SX}, ${STYLED_OR_STYLE}) Property[key.name='lineHeight']`,
+          [`Literal[value!=/^(${CSS_WIDE}|0|1|normal)$/]`]
+        ),
+        ...under(
+          `:matches(${SX}, ${STYLED_OR_STYLE}) Property[key.name='fontSize']:not(JSXOpeningElement[name.name=${ICON}] > JSXAttribute[name.name='sx'] Property)`,
+          [`Literal[value!=/^(${CSS_WIDE})$/]`]
+        )
+      ),
+      message: "Hardcoded typography: use `<Typography variant>` (and `weight`), `sx={{ typography: 'body2' }}` or `...theme.typography.body2`."
+    },
+    "external-link": {
+      selector: "JSXOpeningElement[name.name='a'] > JSXAttribute[name.name='target'] > Literal[value='_blank']",
+      message: 'Raw `<a target="_blank">`: use Meridian `Link` with `external`.'
+    },
+    "data-name": {
+      selector: forImported(
+        MERIDIAN_COMPONENTS,
+        (name) => `JSXOpeningElement[name.name='${name}'] > JSXAttribute[name.name='data-name']`
+      ),
+      message: "`data-name` on a Meridian component overrides its own marker: set it on a wrapper, or drop it."
+    },
+    "literal-a11y-text": {
+      selector: anyOf(
+        ...["", "JSXExpressionContainer > "].map(
+          (wrapper) => `JSXAttribute[name.name=/^(aria-label|placeholder)$/] > ${wrapper}Literal[value=/[A-Za-z]/]`
+        )
+      ),
+      message: "Hardcoded `aria-label` / `placeholder`: translate it with the i18n layer, and keep test ids out of it."
+    },
+    "raw-shadow-radius": {
+      selector: anyOf(
+        "Property[key.name='boxShadow'] > Literal[value=/\\d/]",
+        "Property[key.name='borderRadius'] > Literal[value=/^\\d+(\\.\\d+)?px$/]"
+      ),
+      message: "Hardcoded shadow or radius: use `theme.shadows[n]` / `theme.shape.borderRadius`."
+    },
+    "styled-meridian": {
+      selector: forImported(
+        MERIDIAN_COMPONENTS,
+        (name) => `CallExpression[callee.name='styled'] > Identifier[name='${name}']`
+      ),
+      message: "`styled()` of a Meridian component restyles it locally: use its props/variants, or raise the gap upstream in Meridian."
+    },
+    "visual-sx": {
+      selector: forImported(
+        MERIDIAN_COMPONENTS,
+        (name) => `${sxOf(name)} :matches(Property[key.name=${VISUAL_KEY}], Property[key.name=${COLOR_KEY}] Literal[value!=${PALETTE_VALUE}])`
+      ),
+      message: "Visual `sx` on a Meridian component overrides its design: keep `sx` to layout (spacing, size, position) and use its props/variants for the look."
+    },
+    "disabled-without-reason": {
+      selector: forImported(
+        ["Button", "IconButton", "SplitButton"],
+        (name) => `JSXOpeningElement[name.name='${name}']:has(> JSXAttribute[name.name='disabled']:not([value.expression.value=false])):not(:has(> JSXAttribute[name.name=/^(tooltip|aria-describedby)$/]))`
+      ),
+      message: "Disabled without a reason: pass `tooltip` (or `aria-describedby`) saying why it can’t be used."
+    },
+    "disabled-cursor": {
+      selector: "Property[key.name='cursor'] > Literal[value='not-allowed']",
+      message: "Don't tweak the cursor for disabled states: the component already styles them."
+    }
+  };
+}
+const meridianDesignRules = createMeridianDesignRules();
 const PROPS_TYPES = new Set(MERIDIAN_PROPS_TYPES);
 const replacedBy = (names) => names.flatMap((n) => PROPS_TYPES.has(n) ? [n, `${n}Props`] : [n]);
 const USE_MERIDIAN = "Import from @carto/meridian-ds/components instead.";
@@ -332,6 +362,7 @@ const meridianRestrictedImports = {
   }))
 };
 export {
+  createMeridianDesignRules,
   meridianDesignRules,
   meridianRestrictedImports
 };