@typestyles/eslint-plugin 0.2.0

package/dist/index.js

@@ -0,0 +1,670 @@
+import { ESLintUtils } from '@typescript-eslint/utils';
+
+// src/utils/create-rule.ts
+var createRule = ESLintUtils.RuleCreator(
+  (name) => `https://typestyles.dev/docs/eslint#${name}`
+);
+
+// src/rules/no-default-scope-in-package.ts
+function memberPropertyName(node) {
+  if (node.property.type === "Identifier" && !node.computed) return node.property.name;
+  if (node.property.type === "Literal" && typeof node.property.value === "string") {
+    return node.property.value;
+  }
+  return null;
+}
+function isDefaultStylesCall(node) {
+  const { callee } = node;
+  if (callee.type !== "MemberExpression") return false;
+  const method = memberPropertyName(callee);
+  if (method !== "class" && method !== "component") return false;
+  if (callee.object.type === "Identifier") {
+    return callee.object.name === "styles";
+  }
+  return false;
+}
+var noDefaultScopeInPackage = createRule({
+  name: "no-default-scope-in-package",
+  meta: {
+    type: "suggestion",
+    docs: {
+      description: "Require a scoped styles factory (`createTypeStyles`/`createStyles` with `scopeId`) instead of the default `styles` export in publishable packages"
+    },
+    messages: {
+      unscopedInPackage: "Using the default `styles.{{method}}()` in a published package risks class-name collisions. Use `createTypeStyles({ scopeId: pkg.name })` or `createStyles({ scopeId })` instead."
+    },
+    schema: []
+  },
+  defaultOptions: [],
+  create(context) {
+    return {
+      CallExpression(node) {
+        if (!isDefaultStylesCall(node)) return;
+        const method = memberPropertyName(node.callee);
+        context.report({
+          node: node.callee,
+          messageId: "unscopedInPackage",
+          data: { method: method ?? "class" }
+        });
+      }
+    };
+  }
+});
+
+// src/utils/style-calls.ts
+function memberPropertyName2(node) {
+  if (node.property.type === "Identifier" && !node.computed) return node.property.name;
+  if (node.property.type === "Literal" && typeof node.property.value === "string") {
+    return node.property.value;
+  }
+  return null;
+}
+function calleeRootName(node) {
+  if (node.type === "Identifier") return node.name;
+  if (node.type === "MemberExpression") {
+    if (node.object.type === "Identifier") return node.object.name;
+    if (node.object.type === "MemberExpression") {
+      const inner = memberPropertyName2(node.object);
+      const outer = calleeRootName(node.object);
+      if (outer && inner) return `${outer}.${inner}`;
+    }
+  }
+  return null;
+}
+function isMemberCall(callee, objectName, method) {
+  if (callee.type !== "MemberExpression") return false;
+  const methodName = memberPropertyName2(callee);
+  if (methodName !== method) return false;
+  if (callee.object.type === "Identifier") return callee.object.name === objectName;
+  return false;
+}
+function firstStringArg(args) {
+  const first = args[0];
+  if (!first || first.type === "SpreadElement") return null;
+  if (first.type === "Literal" && typeof first.value === "string") return first;
+  return null;
+}
+function getNamespaceCall(node) {
+  const { callee, arguments: args } = node;
+  if (isMemberCall(callee, "styles", "class")) {
+    const nameNode = firstStringArg(args);
+    if (!nameNode) return null;
+    return { kind: "styles.class", key: `.${nameNode.value}-`, nameNode };
+  }
+  if (isMemberCall(callee, "styles", "component")) {
+    const nameNode = firstStringArg(args);
+    if (!nameNode) return null;
+    return { kind: "styles.component", key: `.${nameNode.value}-`, nameNode };
+  }
+  if (isMemberCall(callee, "styles", "hashClass")) {
+    const first = args[0];
+    if (!first || first.type === "SpreadElement") return null;
+    if (first.type === "Literal" && typeof first.value === "string") {
+      return { kind: "styles.hashClass", key: `.${first.value}-`, nameNode: first };
+    }
+    const label = args[1];
+    if (label?.type === "Literal" && typeof label.value === "string") {
+      return { kind: "styles.hashClass", key: `.${label.value}-`, nameNode: label };
+    }
+    return null;
+  }
+  if (isMemberCall(callee, "tokens", "create")) {
+    const nameNode = firstStringArg(args);
+    if (!nameNode) return null;
+    return { kind: "tokens.create", key: `tokens:${nameNode.value}`, nameNode };
+  }
+  if (isMemberCall(callee, "tokens", "createTheme")) {
+    const nameNode = firstStringArg(args);
+    if (!nameNode) return null;
+    return { kind: "tokens.createTheme", key: `theme:${nameNode.value}`, nameNode };
+  }
+  if (callee.type === "Identifier" && callee.name === "createTheme") {
+    const nameNode = firstStringArg(args);
+    if (!nameNode) return null;
+    return { kind: "createTheme", key: `theme:${nameNode.value}`, nameNode };
+  }
+  if (isMemberCall(callee, "keyframes", "create")) {
+    const nameNode = firstStringArg(args);
+    if (!nameNode) return null;
+    return { kind: "keyframes.create", key: `keyframes:${nameNode.value}`, nameNode };
+  }
+  if (isMemberCall(callee, "global", "style")) {
+    const nameNode = firstStringArg(args);
+    if (!nameNode) return null;
+    return { kind: "global.style", key: nameNode.value, nameNode };
+  }
+  if (isMemberCall(callee, "global", "fontFace")) {
+    const nameNode = firstStringArg(args);
+    if (!nameNode) return null;
+    return { kind: "global.fontFace", key: `font-face:${nameNode.value}`, nameNode };
+  }
+  if (callee.type === "MemberExpression") {
+    const method = memberPropertyName2(callee);
+    const root = calleeRootName(callee);
+    if (method === "class" && root) {
+      const nameNode = firstStringArg(args);
+      if (!nameNode) return null;
+      return { kind: "styles.class", key: `.${nameNode.value}-`, nameNode };
+    }
+    if (method === "component" && root) {
+      const nameNode = firstStringArg(args);
+      if (!nameNode) return null;
+      return { kind: "styles.component", key: `.${nameNode.value}-`, nameNode };
+    }
+    if (method === "create" && root?.endsWith("tokens")) {
+      const nameNode = firstStringArg(args);
+      if (!nameNode) return null;
+      return { kind: "tokens.create", key: `tokens:${nameNode.value}`, nameNode };
+    }
+  }
+  return null;
+}
+function getStyleObjectArguments(node) {
+  const { callee, arguments: args } = node;
+  const objects = [];
+  const pushObject = (arg) => {
+    if (!arg || arg.type === "SpreadElement") return;
+    if (arg.type === "ObjectExpression") objects.push(arg);
+    if (arg.type === "ArrowFunctionExpression" && arg.body.type === "ObjectExpression") {
+      objects.push(arg.body);
+    }
+  };
+  if (callee.type === "MemberExpression") {
+    const method = memberPropertyName2(callee);
+    if (method === "class" || method === "component") {
+      pushObject(args[1]);
+      return objects;
+    }
+    if (method === "hashClass") {
+      const first = args[0];
+      if (first && first.type !== "SpreadElement" && first.type === "ObjectExpression") {
+        objects.push(first);
+      }
+      return objects;
+    }
+  }
+  return objects;
+}
+
+// src/rules/no-duplicate-namespace.ts
+var namespaceRegistry = /* @__PURE__ */ new Map();
+var noDuplicateNamespace = createRule({
+  name: "no-duplicate-namespace",
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Disallow reusing the same TypeStyles namespace (`styles.class`, `styles.component`, `tokens.create`, \u2026) across the project"
+    },
+    messages: {
+      duplicateInFile: "Namespace `{{name}}` ({{kind}}) is already registered in this file at line {{line}}.",
+      duplicateAcrossFiles: "Namespace `{{name}}` ({{kind}}) is already registered in `{{otherFile}}` at line {{line}}."
+    },
+    schema: []
+  },
+  defaultOptions: [],
+  create(context) {
+    const fileSeen = /* @__PURE__ */ new Map();
+    const filename = context.filename;
+    return {
+      CallExpression(node) {
+        const call = getNamespaceCall(node);
+        if (!call) return;
+        const displayName = call.kind === "styles.class" || call.kind === "styles.component" ? call.nameNode.value : call.nameNode.value;
+        const line = call.nameNode.loc?.start.line ?? node.loc?.start.line ?? 0;
+        const column = call.nameNode.loc?.start.column ?? node.loc?.start.column ?? 0;
+        const priorInFile = fileSeen.get(call.key);
+        if (priorInFile) {
+          context.report({
+            node: call.nameNode,
+            messageId: "duplicateInFile",
+            data: {
+              name: displayName,
+              kind: call.kind,
+              line: String(priorInFile.line)
+            }
+          });
+          return;
+        }
+        fileSeen.set(call.key, { line, column });
+        const priorGlobal = namespaceRegistry.get(call.key);
+        if (priorGlobal && priorGlobal.filename !== filename) {
+          context.report({
+            node: call.nameNode,
+            messageId: "duplicateAcrossFiles",
+            data: {
+              name: displayName,
+              kind: call.kind,
+              otherFile: priorGlobal.filename,
+              line: String(priorGlobal.line)
+            }
+          });
+          return;
+        }
+        if (!priorGlobal) {
+          namespaceRegistry.set(call.key, { filename, line, column });
+        }
+      }
+    };
+  }
+});
+
+// src/utils/css-properties.ts
+var UNITLESS_PROPERTIES = /* @__PURE__ */ new Set([
+  "animationIterationCount",
+  "aspectRatio",
+  "borderImageOutset",
+  "borderImageSlice",
+  "borderImageWidth",
+  "boxFlex",
+  "boxFlexGroup",
+  "boxOrdinalGroup",
+  "columnCount",
+  "columns",
+  "flex",
+  "flexGrow",
+  "flexPositive",
+  "flexShrink",
+  "flexNegative",
+  "flexOrder",
+  "fontSizeAdjust",
+  "fontWeight",
+  "gridArea",
+  "gridColumn",
+  "gridColumnEnd",
+  "gridColumnSpan",
+  "gridColumnStart",
+  "gridRow",
+  "gridRowEnd",
+  "gridRowSpan",
+  "gridRowStart",
+  "initialLetter",
+  "lineClamp",
+  "lineHeight",
+  "maskBorderOutset",
+  "maskBorderSlice",
+  "maskBorderWidth",
+  "opacity",
+  "order",
+  "orphans",
+  "scale",
+  "tabSize",
+  "widows",
+  "zIndex",
+  "zoom",
+  "fillOpacity",
+  "floodOpacity",
+  "stopOpacity",
+  "strokeDasharray",
+  "strokeDashoffset",
+  "strokeMiterlimit",
+  "strokeOpacity",
+  "strokeWidth"
+]);
+var VENDOR_PREFIX_RE = /^(Webkit|Moz|ms|O)([A-Z])(.*)$/;
+function isUnitlessProperty(prop) {
+  if (UNITLESS_PROPERTIES.has(prop)) return true;
+  const match = VENDOR_PREFIX_RE.exec(prop);
+  if (match) {
+    return UNITLESS_PROPERTIES.has(match[2].toLowerCase() + match[3]);
+  }
+  return false;
+}
+var SHORTHAND_TO_LONGHANDS = {
+  padding: [
+    "paddingTop",
+    "paddingRight",
+    "paddingBottom",
+    "paddingLeft",
+    "paddingInline",
+    "paddingBlock",
+    "paddingInlineStart",
+    "paddingInlineEnd",
+    "paddingBlockStart",
+    "paddingBlockEnd"
+  ],
+  margin: [
+    "marginTop",
+    "marginRight",
+    "marginBottom",
+    "marginLeft",
+    "marginInline",
+    "marginBlock",
+    "marginInlineStart",
+    "marginInlineEnd",
+    "marginBlockStart",
+    "marginBlockEnd"
+  ],
+  border: [
+    "borderWidth",
+    "borderStyle",
+    "borderColor",
+    "borderTop",
+    "borderRight",
+    "borderBottom",
+    "borderLeft",
+    "borderInline",
+    "borderBlock"
+  ],
+  borderWidth: [
+    "borderTopWidth",
+    "borderRightWidth",
+    "borderBottomWidth",
+    "borderLeftWidth",
+    "borderInlineWidth",
+    "borderBlockWidth"
+  ],
+  borderStyle: ["borderTopStyle", "borderRightStyle", "borderBottomStyle", "borderLeftStyle"],
+  borderColor: ["borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor"],
+  borderTop: ["borderTopWidth", "borderTopStyle", "borderTopColor"],
+  borderRight: ["borderRightWidth", "borderRightStyle", "borderRightColor"],
+  borderBottom: ["borderBottomWidth", "borderBottomStyle", "borderBottomColor"],
+  borderLeft: ["borderLeftWidth", "borderLeftStyle", "borderLeftColor"],
+  background: [
+    "backgroundColor",
+    "backgroundImage",
+    "backgroundPosition",
+    "backgroundSize",
+    "backgroundRepeat",
+    "backgroundAttachment",
+    "backgroundOrigin",
+    "backgroundClip"
+  ],
+  font: ["fontStyle", "fontVariant", "fontWeight", "fontSize", "lineHeight", "fontFamily"],
+  flex: ["flexGrow", "flexShrink", "flexBasis"],
+  gap: ["rowGap", "columnGap"],
+  overflow: ["overflowX", "overflowY"],
+  transition: [
+    "transitionProperty",
+    "transitionDuration",
+    "transitionTimingFunction",
+    "transitionDelay"
+  ],
+  animation: [
+    "animationName",
+    "animationDuration",
+    "animationTimingFunction",
+    "animationDelay",
+    "animationIterationCount",
+    "animationDirection",
+    "animationFillMode",
+    "animationPlayState"
+  ],
+  outline: ["outlineWidth", "outlineStyle", "outlineColor"],
+  listStyle: ["listStyleType", "listStylePosition", "listStyleImage"],
+  grid: [
+    "gridTemplateRows",
+    "gridTemplateColumns",
+    "gridTemplateAreas",
+    "gridAutoRows",
+    "gridAutoColumns",
+    "gridAutoFlow"
+  ],
+  gridTemplate: ["gridTemplateRows", "gridTemplateColumns", "gridTemplateAreas"],
+  inset: ["top", "right", "bottom", "left"],
+  insetBlock: ["insetBlockStart", "insetBlockEnd"],
+  insetInline: ["insetInlineStart", "insetInlineEnd"]
+};
+var BARE_NUMBER_STRING_RE = /^-?\d+(\.\d+)?$/;
+function findShorthandLonghandConflicts(propertyNames) {
+  const keys = new Set(propertyNames);
+  const seen = /* @__PURE__ */ new Set();
+  const conflicts = [];
+  for (const key of keys) {
+    const longhands = SHORTHAND_TO_LONGHANDS[key];
+    if (longhands) {
+      for (const longhand of longhands) {
+        if (keys.has(longhand)) {
+          const id = `${key}|${longhand}`;
+          if (!seen.has(id)) {
+            seen.add(id);
+            conflicts.push({ shorthand: key, longhand });
+          }
+        }
+      }
+    }
+  }
+  return conflicts;
+}
+
+// src/utils/style-ast.ts
+var NESTED_SELECTOR_KEY_RE = /^(&|@|\[)/;
+var COMPONENT_STRUCTURAL_KEYS = /* @__PURE__ */ new Set([
+  "base",
+  "variants",
+  "defaultVariants",
+  "compoundVariants",
+  "slots"
+]);
+function getStaticPropertyKey(prop) {
+  if (prop.computed) return null;
+  if (prop.key.type === "Identifier") return prop.key.name;
+  if (prop.key.type === "Literal" && typeof prop.key.value === "string") return prop.key.value;
+  return null;
+}
+function isCssPropertyKey(key) {
+  if (NESTED_SELECTOR_KEY_RE.test(key)) return false;
+  if (COMPONENT_STRUCTURAL_KEYS.has(key)) return false;
+  return /^[a-zA-Z]/.test(key);
+}
+function collectCssPropertyNames(obj) {
+  const names = [];
+  for (const prop of obj.properties) {
+    if (prop.type !== "Property") continue;
+    const key = getStaticPropertyKey(prop);
+    if (key && isCssPropertyKey(key)) names.push(key);
+  }
+  return names;
+}
+function visitStyleObjectLiterals(node, onStyleObject) {
+  onStyleObject(node);
+  for (const prop of node.properties) {
+    if (prop.type !== "Property") continue;
+    const key = getStaticPropertyKey(prop);
+    if (!key) continue;
+    if (NESTED_SELECTOR_KEY_RE.test(key)) {
+      if (prop.value.type === "ObjectExpression") {
+        visitStyleObjectLiterals(prop.value, onStyleObject);
+      }
+      continue;
+    }
+    if (key === "variants" && prop.value.type === "ObjectExpression") {
+      for (const groupProp of prop.value.properties) {
+        if (groupProp.type !== "Property" || groupProp.value.type !== "ObjectExpression") continue;
+        for (const optionProp of groupProp.value.properties) {
+          if (optionProp.type === "Property" && optionProp.value.type === "ObjectExpression") {
+            visitStyleObjectLiterals(optionProp.value, onStyleObject);
+          }
+        }
+      }
+      continue;
+    }
+    if (key === "compoundVariants" && prop.value.type === "ArrayExpression") {
+      for (const element of prop.value.elements) {
+        if (!element || element.type !== "ObjectExpression") continue;
+        for (const cvProp of element.properties) {
+          if (cvProp.type !== "Property") continue;
+          const cvKey = getStaticPropertyKey(cvProp);
+          if (cvKey === "css" && cvProp.value.type === "ObjectExpression") {
+            visitStyleObjectLiterals(cvProp.value, onStyleObject);
+          }
+        }
+      }
+      continue;
+    }
+    if ((COMPONENT_STRUCTURAL_KEYS.has(key) || prop.value.type === "ObjectExpression") && prop.value.type === "ObjectExpression") {
+      visitStyleObjectLiterals(prop.value, onStyleObject);
+    }
+  }
+}
+function getStringLiteralValue(node) {
+  if (node.type === "Literal" && typeof node.value === "string") return node.value;
+  return null;
+}
+function getNumericLiteralValue(node) {
+  if (node.type === "Literal" && typeof node.value === "number") return node.value;
+  return null;
+}
+
+// src/rules/no-invalid-unitless-value.ts
+var noInvalidUnitlessValue = createRule({
+  name: "no-invalid-unitless-value",
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Disallow bare numeric strings on properties that require CSS units (TypeStyles only auto-appends `px` to numbers, not strings)"
+    },
+    messages: {
+      bareNumberString: "`{{property}}` is set to bare number string `{{value}}`, which emits invalid CSS. Use a number (`{{numeric}}`) or a value with units (`{{value}}px`).",
+      suspiciousUnitlessNumber: '`{{property}}` is unitless in CSS \u2014 numeric `{{value}}` is emitted without a unit. Use a ratio (e.g. `1.5`) or an explicit length (`"24px"`).'
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          checkSuspiciousUnitlessNumbers: { type: "boolean" }
+        },
+        additionalProperties: false
+      }
+    ]
+  },
+  defaultOptions: [{ checkSuspiciousUnitlessNumbers: true }],
+  create(context, [options]) {
+    const SUSPICIOUS_UNITLESS_PROPERTIES = /* @__PURE__ */ new Set(["lineHeight"]);
+    function checkStyleObject(obj) {
+      for (const prop of obj.properties) {
+        if (prop.type !== "Property") continue;
+        const key = getStaticPropertyKey(prop);
+        if (!key || !isCssPropertyKey(key)) continue;
+        const stringValue = getStringLiteralValue(prop.value);
+        if (stringValue && BARE_NUMBER_STRING_RE.test(stringValue) && !isUnitlessProperty(key)) {
+          context.report({
+            node: prop.value,
+            messageId: "bareNumberString",
+            data: {
+              property: key,
+              value: stringValue,
+              numeric: stringValue
+            }
+          });
+          continue;
+        }
+        if (options.checkSuspiciousUnitlessNumbers && SUSPICIOUS_UNITLESS_PROPERTIES.has(key)) {
+          const num = getNumericLiteralValue(prop.value);
+          if (num != null && num >= 8 && Number.isInteger(num)) {
+            context.report({
+              node: prop.value,
+              messageId: "suspiciousUnitlessNumber",
+              data: { property: key, value: String(num) }
+            });
+          }
+        }
+      }
+    }
+    return {
+      CallExpression(node) {
+        for (const styleObj of getStyleObjectArguments(node)) {
+          visitStyleObjectLiterals(styleObj, checkStyleObject);
+        }
+      },
+      ObjectExpression(node) {
+        const parent = node.parent;
+        if (parent?.type === "Property" && (parent.key.type === "Identifier" || parent.key.type === "Literal")) {
+          const parentKey = parent.key.type === "Identifier" ? parent.key.name : typeof parent.key.value === "string" ? parent.key.value : null;
+          if (parentKey === "from" || parentKey === "to" || /^\d+%$/.test(parentKey ?? "")) {
+            visitStyleObjectLiterals(node, checkStyleObject);
+          }
+        }
+      }
+    };
+  }
+});
+
+// src/rules/no-shorthand-longhand-conflict.ts
+var noShorthandLonghandConflict = createRule({
+  name: "no-shorthand-longhand-conflict",
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Disallow mixing CSS shorthand and longhand properties in the same TypeStyles style object"
+    },
+    messages: {
+      conflict: "`{{shorthand}}` and `{{longhand}}` must not appear in the same style object \u2014 the longhand is ignored or overridden unpredictably."
+    },
+    schema: []
+  },
+  defaultOptions: [],
+  create(context) {
+    function checkStyleObject(obj) {
+      const propertyNames = collectCssPropertyNames(obj);
+      const conflicts = findShorthandLonghandConflicts(propertyNames);
+      for (const { shorthand, longhand } of conflicts) {
+        context.report({
+          node: obj,
+          messageId: "conflict",
+          data: { shorthand, longhand }
+        });
+      }
+    }
+    return {
+      CallExpression(node) {
+        for (const styleObj of getStyleObjectArguments(node)) {
+          visitStyleObjectLiterals(styleObj, checkStyleObject);
+        }
+      },
+      ObjectExpression(node) {
+        const parent = node.parent;
+        if (parent?.type === "Property" && (parent.key.type === "Identifier" || parent.key.type === "Literal")) {
+          const parentKey = parent.key.type === "Identifier" ? parent.key.name : typeof parent.key.value === "string" ? parent.key.value : null;
+          if (parentKey === "from" || parentKey === "to" || /^\d+%$/.test(parentKey ?? "")) {
+            visitStyleObjectLiterals(node, checkStyleObject);
+          }
+        }
+      }
+    };
+  }
+});
+
+// src/index.ts
+var rules = {
+  "no-default-scope-in-package": noDefaultScopeInPackage,
+  "no-shorthand-longhand-conflict": noShorthandLonghandConflict,
+  "no-invalid-unitless-value": noInvalidUnitlessValue,
+  "no-duplicate-namespace": noDuplicateNamespace
+};
+var plugin = {
+  meta: {
+    name: "@typestyles/eslint-plugin",
+    version: "0.1.0"
+  },
+  rules
+};
+var configs = {
+  recommended: {
+    plugins: {
+      "@typestyles": plugin
+    },
+    rules: {
+      "@typestyles/no-shorthand-longhand-conflict": "error",
+      "@typestyles/no-invalid-unitless-value": "error",
+      "@typestyles/no-duplicate-namespace": "error"
+    }
+  },
+  /** Preset for publishable packages — adds `no-default-scope-in-package`. */
+  package: {
+    plugins: {
+      "@typestyles": plugin
+    },
+    rules: {
+      "@typestyles/no-shorthand-longhand-conflict": "error",
+      "@typestyles/no-invalid-unitless-value": "error",
+      "@typestyles/no-duplicate-namespace": "error",
+      "@typestyles/no-default-scope-in-package": "error"
+    }
+  }
+};
+Object.assign(plugin, { configs });
+var src_default = plugin;
+
+export { configs, src_default as default, noDefaultScopeInPackage, noDuplicateNamespace, noInvalidUnitlessValue, noShorthandLonghandConflict, rules };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map