@ctrl-ui/react 0.9.12 → 0.9.14

package/lint/eslint-plugin.mjs

@@ -1,6 +1,18 @@
-import { componentStyleClass, componentStyleMessage, controlUiImportPattern, rawTypeClass, rawTypeMessage } from "./class-policy.mjs";
+import {
+  componentPartClass,
+  componentPartMessage,
+  componentStyleClass,
+  componentStyleKey,
+  componentStyleMessage,
+  componentStylePropMessage,
+  controlUiImportPattern,
+  rawTypeClass,
+  rawTypeMessage,
+} from "./class-policy.mjs";
 
 const componentStyle = new RegExp(componentStyleClass);
+const componentPart = new RegExp(componentPartClass);
+const componentStyleProperty = new RegExp(`^(?:${componentStyleKey})$`);
 const rawType = new RegExp(rawTypeClass);
 
 function stringsIn(node) {
@@ -20,19 +32,30 @@ function referencedNames(node) {
   return Object.entries(node).flatMap(([key, child]) => (key === "parent" ? [] : referencedNames(child)));
 }
 
+function propertyKeysIn(node) {
+  if (Array.isArray(node)) return node.flatMap(propertyKeysIn);
+  if (!node || typeof node !== "object") return [];
+  const key = node.type === "Property" && !node.computed ? [node.key.name ?? node.key.value] : [];
+  return [...key, ...Object.entries(node).flatMap(([name, child]) => (name === "parent" ? [] : propertyKeysIn(child)))];
+}
+
 const classLiteralTypes = new Set(["Literal", "TemplateLiteral", "ObjectExpression"]);
+const styleLiteralTypes = new Set(["ObjectExpression"]);
 
-function classLiteral(init) {
+function literalOf(init, types) {
   const value = init?.type === "TSAsExpression" || init?.type === "TSSatisfiesExpression" ? init.expression : init;
-  return classLiteralTypes.has(value?.type) ? value : undefined;
+  return types.has(value?.type) ? value : undefined;
 }
 
-function isClassName(attribute) {
-  return attribute.name.name === "className" && Boolean(attribute.value);
+function insideRenderProp(node) {
+  for (let parent = node.parent; parent; parent = parent.parent) {
+    if (parent.type === "JSXAttribute" && parent.name.name === "render") return true;
+  }
+  return false;
 }
 
 function classNameMatches(attribute, pattern) {
-  return isClassName(attribute) && stringsIn(attribute.value).some((text) => pattern.test(text));
+  return attribute.name.name === "className" && Boolean(attribute.value) && stringsIn(attribute.value).some((text) => pattern.test(text));
 }
 
 function elementRootName(name) {
@@ -59,50 +82,75 @@ function controlUiLocalNames(program, controlUiImport) {
   return names;
 }
 
-const noComponentStyleClasses = {
-  meta: {
-    type: "problem",
-    docs: { description: "Keep className on Control UI components to layout; the component owns its look." },
-    messages: { componentStyle: componentStyleMessage },
-    schema: [
-      {
-        type: "object",
-        properties: { importSources: { type: "array", items: { type: "string" } } },
-        additionalProperties: false,
-      },
-    ],
-  },
-  create(context) {
-    const controlUiImport = new RegExp(`^${controlUiImportPattern(context.options[0]?.importSources)}`);
-    let controlUiNames = new Set();
-    const isControlUi = (element) => element !== undefined && controlUiNames.has(elementRootName(element.name));
-    const constantClasses = new Map();
-    const componentClassNames = [];
-    return {
-      Program(program) {
-        controlUiNames = controlUiLocalNames(program, controlUiImport);
-      },
-      VariableDeclarator(declarator) {
-        const literal = classLiteral(declarator.init);
-        if (declarator.parent.kind !== "const" || declarator.id.type !== "Identifier" || !literal) return;
-        constantClasses.set(declarator.id.name, [...(constantClasses.get(declarator.id.name) ?? []), ...stringsIn(literal)]);
-      },
-      JSXAttribute(attribute) {
-        if (!isClassName(attribute)) return;
-        const element = attribute.parent;
-        if (isControlUi(element) || isControlUi(renderPropOwner(element.parent))) componentClassNames.push(attribute);
-      },
-      "Program:exit"() {
-        for (const attribute of componentClassNames) {
-          const constants = referencedNames(attribute.value).flatMap((name) => constantClasses.get(name) ?? []);
-          if ([...stringsIn(attribute.value), ...constants].some((text) => componentStyle.test(text))) {
-            context.report({ node: attribute, messageId: "componentStyle" });
+function componentAttributeRule({ attribute, description, message, literalTypes, valuesIn, pattern, part }) {
+  return {
+    meta: {
+      type: "problem",
+      docs: { description },
+      messages: { component: message, ...(part && { part: part.message }) },
+      schema: [
+        {
+          type: "object",
+          properties: { importSources: { type: "array", items: { type: "string" } } },
+          additionalProperties: false,
+        },
+      ],
+    },
+    create(context) {
+      const controlUiImport = new RegExp(`^${controlUiImportPattern(context.options[0]?.importSources)}`);
+      let controlUiNames = new Set();
+      const isControlUi = (element) => element !== undefined && controlUiNames.has(elementRootName(element.name));
+      const constants = new Map();
+      const checks = [];
+      return {
+        Program(program) {
+          controlUiNames = controlUiLocalNames(program, controlUiImport);
+        },
+        VariableDeclarator(declarator) {
+          const literal = literalOf(declarator.init, literalTypes);
+          if (declarator.parent.kind !== "const" || declarator.id.type !== "Identifier" || !literal) return;
+          constants.set(declarator.id.name, [...(constants.get(declarator.id.name) ?? []), ...valuesIn(literal)]);
+        },
+        JSXAttribute(node) {
+          if (node.name.name !== attribute || !node.value) return;
+          const element = node.parent;
+          if (isControlUi(element) || isControlUi(renderPropOwner(element.parent))) {
+            checks.push({ node, messageId: "component", pattern });
+          } else if (part && !insideRenderProp(node)) {
+            checks.push({ node, messageId: "part", pattern: part.pattern });
           }
-        }
-      },
-    };
-  },
-};
+        },
+        "Program:exit"() {
+          for (const check of checks) {
+            const referenced = referencedNames(check.node.value).flatMap((name) => constants.get(name) ?? []);
+            if ([...valuesIn(check.node.value), ...referenced].some((value) => check.pattern.test(value))) {
+              context.report({ node: check.node, messageId: check.messageId });
+            }
+          }
+        },
+      };
+    },
+  };
+}
+
+const noComponentStyleClasses = componentAttributeRule({
+  attribute: "className",
+  description: "Keep className on Control UI components to layout, and off their parts; the component owns its look.",
+  message: componentStyleMessage,
+  literalTypes: classLiteralTypes,
+  valuesIn: stringsIn,
+  pattern: componentStyle,
+  part: { message: componentPartMessage, pattern: componentPart },
+});
+
+const noComponentStyleProps = componentAttributeRule({
+  attribute: "style",
+  description: "Keep style on Control UI components to --cui-* knobs and layout; the component owns its look.",
+  message: componentStylePropMessage,
+  literalTypes: styleLiteralTypes,
+  valuesIn: propertyKeysIn,
+  pattern: componentStyleProperty,
+});
 
 const noRawTypeClasses = {
   meta: {
@@ -124,6 +172,7 @@ const plugin = {
   meta: { name: "control-ui" },
   rules: {
     "no-component-style-classes": noComponentStyleClasses,
+    "no-component-style-props": noComponentStyleProps,
     "no-raw-type-classes": noRawTypeClasses,
   },
 };

package/lint/grit-rules.mjs

@@ -1,30 +1,66 @@
-import { componentStyleClass, componentStyleMessage, controlUiImportPattern, rawTypeClass, rawTypeMessage } from "./class-policy.mjs";
+import {
+  componentPartClass,
+  componentPartCssMessage,
+  componentPartMessage,
+  componentPartSelector,
+  componentStyleClass,
+  componentStyleKey,
+  componentStyleMessage,
+  componentStylePropMessage,
+  controlUiImportPattern,
+  paintProperty,
+  rawTypeClass,
+  rawTypeMessage,
+} from "./class-policy.mjs";
 
 function gritRegex(pattern) {
   return `r"(?s).*(?:${pattern.replaceAll('"', '\\"')}).*"`;
 }
 
+function gritExactRegex(pattern) {
+  return `r"${pattern.replaceAll('"', '\\"')}"`;
+}
+
 function gritString(text) {
   return JSON.stringify(text);
 }
 
-const stringTexts = `or { JsxString(), JsStringLiteralExpression(), JsTemplateChunkElement(), JsLiteralMemberName() as $memberName where { $memberName <: r"(?s)[\\"'].*" } }`;
+const stringTexts = (name) =>
+  `or { JsxString(), JsStringLiteralExpression(), JsTemplateChunkElement(), JsLiteralMemberName() as $${name}Member where { $${name}Member <: r"(?s)[\\"'].*" } }`;
 const classLiterals = "or { JsStringLiteralExpression(), JsTemplateExpression(), JsObjectExpression() }";
 const renderedTag = "or { JsxTagExpression(tag=$tag), JsParenthesizedExpression(expression=JsxTagExpression(tag=$tag)) }";
+const componentName = `r"([A-Z]\\w*)(?:\\.[\\w.]+)?"`;
 
-const styled = gritRegex(componentStyleClass);
-const styledClassName = `$attr <: or {
-    contains ${stringTexts} as $text where { $text <: ${styled} },
-    contains JsReferenceIdentifier() as $reference where {
-      $reference <: r"(.+)"($referenced),
-      $module <: contains JsVariableDeclaration(declarators=$declarators) as $declaration where {
-        $declaration <: r"(?s)const\\s.*",
-        $declarators <: some JsVariableDeclarator(id=$referenced, initializer=JsInitializerClause(expression=$value)),
-        $value <: or { ${classLiterals}, TsAsExpression(expression=${classLiterals}), TsSatisfiesExpression(expression=${classLiterals}) },
-        $value <: contains ${stringTexts} as $constText where { $constText <: ${styled} }
+function constantMatches(reference, literals, offends) {
+  return `contains JsReferenceIdentifier() as $${reference} where {
+      $${reference} <: r"(.+)"($${reference}Name),
+      $module <: contains JsVariableDeclaration(declarators=$${reference}Declarators) as $${reference}Declaration where {
+        $${reference}Declaration <: r"(?s)const\\s.*",
+        $${reference}Declarators <: some JsVariableDeclarator(id=$${reference}Name, initializer=JsInitializerClause(expression=$${reference}Value)),
+        $${reference}Value <: or { ${literals}, TsAsExpression(expression=${literals}), TsSatisfiesExpression(expression=${literals}) },
+        $${reference}Value <: ${offends}
       }
-    }
+    }`;
+}
+
+function classNameMatches(attribute, pattern) {
+  const offending = (prefix) => `contains ${stringTexts(prefix)} as $${prefix}Text where { $${prefix}Text <: ${gritRegex(pattern)} }`;
+  const name = attribute.slice(1);
+  return `${attribute} <: or {
+    ${offending(name)},
+    ${constantMatches(`${name}Constant`, classLiterals, offending(`${name}Constant`))}
   }`;
+}
+
+function styleMatches(attribute) {
+  const offending = (prefix) =>
+    `contains or { JsPropertyObjectMember(name=$${prefix}Key), JsShorthandPropertyObjectMember(name=$${prefix}Key) } where { $${prefix}Key <: ${gritExactRegex(componentStyleKey)} }`;
+  const name = attribute.slice(1);
+  return `${attribute} <: or {
+    ${offending(name)},
+    ${constantMatches(`${name}Constant`, "JsObjectExpression()", offending(`${name}Constant`))}
+  }`;
+}
 
 function importedFromControlUi(component, importSources, suffix = "") {
   return `$module <: contains JsImport() as $import${suffix} where {
@@ -33,47 +69,100 @@ function importedFromControlUi(component, importSources, suffix = "") {
   }`;
 }
 
+function componentAttributePattern({ attribute, offends, message, importSources }) {
+  return `or {
+    or {
+      JsxSelfClosingElement(name=$name, attributes=$attributes),
+      JsxOpeningElement(name=$name, attributes=$attributes)
+    } where {
+      $attributes <: some JsxAttribute(name=\`${attribute}\`) as $attr
+    },
+    JsxAttribute(name=\`render\`, initializer=JsxAttributeInitializerClause(value=JsxExpressionAttributeValue(expression=$rendered))) as $render where {
+      $rendered <: or {
+        JsxTagExpression(tag=$tag),
+        JsArrowFunctionExpression(body=or {
+          ${renderedTag},
+          JsFunctionBody(statements=some JsReturnStatement(argument=${renderedTag}))
+        })
+      },
+      $tag <: or {
+        JsxSelfClosingElement(name=$renderedName, attributes=$renderedAttributes),
+        JsxElement(opening_element=JsxOpeningElement(name=$renderedName, attributes=$renderedAttributes))
+      },
+      $renderedAttributes <: some JsxAttribute(name=\`${attribute}\`) as $attr,
+      $render <: within or { JsxSelfClosingElement(name=$name), JsxOpeningElement(name=$name) },
+      $render <: within JsModule() as $module,
+      $renderedName <: r"([^.]+).*"($renderedComponent),
+      not ${importedFromControlUi("$renderedComponent", importSources, "Rendered")}
+    }
+  } where {
+    $name <: ${componentName}($component),
+    $attr <: within JsModule() as $module,
+    ${offends("$attr")},
+    ${importedFromControlUi("$component", importSources)},
+    register_diagnostic(span=$attr, message=${gritString(message)}, severity="error")
+  }`;
+}
+
+function partClassPattern(importSources) {
+  return `or {
+    JsxSelfClosingElement(name=$plainName, attributes=$plainAttributes),
+    JsxOpeningElement(name=$plainName, attributes=$plainAttributes)
+  } where {
+    $plainAttributes <: some JsxAttribute(name=\`className\`) as $plainAttr,
+    not $plainAttr <: within JsxAttribute(name=\`render\`),
+    $plainAttr <: within JsModule() as $module,
+    ${classNameMatches("$plainAttr", componentPartClass)},
+    not and {
+      $plainName <: ${componentName}($plainComponent),
+      ${importedFromControlUi("$plainComponent", importSources, "Plain")}
+    },
+    register_diagnostic(span=$plainAttr, message=${gritString(componentPartMessage)}, severity="error")
+  }`;
+}
+
+const partSubject = gritExactRegex(componentPartSelector);
+const enclosingRule = (selectors) => `or { CssQualifiedRule(prelude=${selectors}), CssNestedQualifiedRule(prelude=${selectors}) }`;
+
 export function gritRules(importSources = []) {
   return {
     "no-component-style-classes.grit": `language js(typescript, jsx)
 
 or {
+  ${componentAttributePattern({
+    attribute: "className",
+    offends: (attribute) => classNameMatches(attribute, componentStyleClass),
+    message: componentStyleMessage,
+    importSources,
+  })},
+  ${partClassPattern(importSources)}
+}
+`,
+    "no-component-style-props.grit": `language js(typescript, jsx)
+
+${componentAttributePattern({ attribute: "style", offends: styleMatches, message: componentStylePropMessage, importSources })}
+`,
+    "no-component-part-css.grit": `language css
+
+or {
+  CssGenericProperty(name=$property) as $paint where { $property <: ${gritExactRegex(`(?i)${paintProperty}`)} },
+  CssAtRule() as $paint where { $paint <: r"(?s)@apply\\s.*", $paint <: ${gritRegex(componentStyleClass)} }
+} where {
+  $paint <: within ${enclosingRule("$selectors")} as $rule,
   or {
-    JsxSelfClosingElement(name=$name, attributes=$attributes),
-    JsxOpeningElement(name=$name, attributes=$attributes)
-  } where {
-    $attributes <: some JsxAttribute(name=\`className\`) as $attr
+    $selectors <: some ${partSubject},
+    and {
+      $selectors <: some r"\\s*&[^\\s>+~]*\\s*",
+      $rule <: within ${enclosingRule("$outer")} where { $outer <: some ${partSubject} }
+    }
   },
-  JsxAttribute(name=\`render\`, initializer=JsxAttributeInitializerClause(value=JsxExpressionAttributeValue(expression=$rendered))) as $render where {
-    $rendered <: or {
-      JsxTagExpression(tag=$tag),
-      JsArrowFunctionExpression(body=or {
-        ${renderedTag},
-        JsFunctionBody(statements=some JsReturnStatement(argument=${renderedTag}))
-      })
-    },
-    $tag <: or {
-      JsxSelfClosingElement(name=$renderedName, attributes=$renderedAttributes),
-      JsxElement(opening_element=JsxOpeningElement(name=$renderedName, attributes=$renderedAttributes))
-    },
-    $renderedAttributes <: some JsxAttribute(name=\`className\`) as $attr,
-    $render <: within or { JsxSelfClosingElement(name=$name), JsxOpeningElement(name=$name) },
-    $render <: within JsModule() as $module,
-    $renderedName <: r"([^.]+).*"($renderedComponent),
-    not ${importedFromControlUi("$renderedComponent", importSources, "Rendered")}
-  }
-} where {
-  $name <: r"([A-Z]\\w*)(?:\\.[\\w.]+)?"($component),
-  $attr <: within JsModule() as $module,
-  ${styledClassName},
-  ${importedFromControlUi("$component", importSources)},
-  register_diagnostic(span=$attr, message=${gritString(componentStyleMessage)}, severity="error")
+  register_diagnostic(span=$paint, message=${gritString(componentPartCssMessage)}, severity="error")
 }
 `,
     "no-raw-type-classes.grit": `language js(typescript, jsx)
 
 JsxAttribute(name=\`className\`) as $attr where {
-  $attr <: contains ${stringTexts} as $text where { $text <: ${gritRegex(rawTypeClass)} },
+  $attr <: contains ${stringTexts("attr")} as $text where { $text <: ${gritRegex(rawTypeClass)} },
   register_diagnostic(span=$attr, message=${gritString(rawTypeMessage)}, severity="error")
 }
 `,

package/lint/no-component-part-css.grit

@@ -0,0 +1,16 @@
+language css
+
+or {
+  CssGenericProperty(name=$property) as $paint where { $property <: r"(?i)(?:padding|background|color|font|line-height|letter-spacing|border|outline|box-shadow|text-shadow|text-decoration|text-underline|text-transform|opacity|filter|backdrop-filter|fill|stroke|caret-color|accent-color|mask|-webkit-mask|-webkit-font-smoothing|-moz-osx-font-smoothing)(?:-[\w-]*)?" },
+  CssAtRule() as $paint where { $paint <: r"(?s)@apply\s.*", $paint <: r"(?s).*(?:[^\s\"'\x60]!(?:[\s\"'\x60]|$)|(?:^|[\s\"'\x60])![\w\[-]|(?:^|[^\w-])(?:p[xytrblse]?-|bg-[\w\[]|text-(?:(?:[\s\"'\x60]|$)|[^lcrjsewnbp\s\"'\x60]|l(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^f\s\"'\x60]|f(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:[^\s\"'\x60]))))|c(?:(?:[\s\"'\x60]|$)|[^el\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^n\s\"'\x60]|n(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:[^\s\"'\x60])))))|l(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:[^\s\"'\x60]))))|r(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^g\s\"'\x60]|g(?:(?:[\s\"'\x60]|$)|[^h\s\"'\x60]|h(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:[^\s\"'\x60])))))|j(?:(?:[\s\"'\x60]|$)|[^u\s\"'\x60]|u(?:(?:[\s\"'\x60]|$)|[^s\s\"'\x60]|s(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^f\s\"'\x60]|f(?:(?:[\s\"'\x60]|$)|[^y\s\"'\x60]|y(?:[^\s\"'\x60])))))))|s(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:[^\s\"'\x60])))))|e(?:(?:[\s\"'\x60]|$)|[^nl\s\"'\x60]|n(?:(?:[\s\"'\x60]|$)|[^d\s\"'\x60]|d(?:[^\s\"'\x60]))|l(?:(?:[\s\"'\x60]|$)|[^l\s\"'\x60]|l(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:(?:[\s\"'\x60]|$)|[^s\s\"'\x60]|s(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^s\s\"'\x60]|s(?:[^\s\"'\x60]))))))))|w(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:[^\s\"'\x60]))))|n(?:(?:[\s\"'\x60]|$)|[^o\s\"'\x60]|o(?:(?:[\s\"'\x60]|$)|[^w\s\"'\x60]|w(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:[^\s\"'\x60]))))))|b(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^l\s\"'\x60]|l(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^n\s\"'\x60]|n(?:(?:[\s\"'\x60]|$)|[^c\s\"'\x60]|c(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:[^\s\"'\x60])))))))|p(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^y\s\"'\x60]|y(?:[^\s\"'\x60])))))))|font-|leading-|tracking-|border|divide-|rounded|shadow|inset-shadow|drop-shadow|ring\b|ring-|inset-ring|outline|opacity-|backdrop-|fill-|stroke-|caret-|accent-|scheme-|mask-|decoration-|underline|no-underline|overline|line-through|italic|not-italic|uppercase|lowercase|capitalize|normal-case|antialiased|subpixel-antialiased|ordinal|slashed-zero|(?:normal|lining|oldstyle|proportional|tabular)-nums|(?:diagonal|stacked)-fractions|blur(?:-|(?:[\s\"'\x60]|$))|brightness-|contrast-[\d\[]|grayscale|hue-rotate-|invert|saturate-|sepia|(?:hover|focus|focus-visible|focus-within|active|disabled|enabled|open|checked|indeterminate|visited|target|invalid|valid|user-invalid|user-valid|required|optional|read-only|autofill|placeholder-shown|in-range|out-of-range|inert|starting|dark|placeholder|selection|marker|file|first-letter|first-line|backdrop|details-content|aria-[^:\s]*|data-[^:\s]*|group-[^:\s]*|peer-[^:\s]*|has-[^:\s]*|\*|\[&[^\s]*?\]):)|(?:^|[^\w-])\[(?:padding|background|color|font|line-height|letter-spacing|border|outline|box-shadow|text-shadow|text-decoration|text-underline|text-transform|opacity|filter|backdrop-filter|fill|stroke|caret-color|accent-color|mask|-webkit-mask|-webkit-font-smoothing|-moz-osx-font-smoothing)(?:-[\w-]*)?:).*" }
+} where {
+  $paint <: within or { CssQualifiedRule(prelude=$selectors), CssNestedQualifiedRule(prelude=$selectors) } as $rule,
+  or {
+    $selectors <: some r"(?s).*\[data-(?:control|slot)\b[^\s>+~]*\s*",
+    and {
+      $selectors <: some r"\s*&[^\s>+~]*\s*",
+      $rule <: within or { CssQualifiedRule(prelude=$outer), CssNestedQualifiedRule(prelude=$outer) } where { $outer <: some r"(?s).*\[data-(?:control|slot)\b[^\s>+~]*\s*" }
+    }
+  },
+  register_diagnostic(span=$paint, message="Stylesheet paints a Control UI part: color, type, padding, borders, radius, shadows and opacity belong to the component recipe. Set the part's --cui-* knobs here instead, or use the component's props.", severity="error")
+}

package/lint/no-component-style-classes.grit

@@ -2,50 +2,80 @@ language js(typescript, jsx)
 
 or {
   or {
-    JsxSelfClosingElement(name=$name, attributes=$attributes),
-    JsxOpeningElement(name=$name, attributes=$attributes)
-  } where {
-    $attributes <: some JsxAttribute(name=`className`) as $attr
-  },
-  JsxAttribute(name=`render`, initializer=JsxAttributeInitializerClause(value=JsxExpressionAttributeValue(expression=$rendered))) as $render where {
-    $rendered <: or {
-      JsxTagExpression(tag=$tag),
-      JsArrowFunctionExpression(body=or {
-        or { JsxTagExpression(tag=$tag), JsParenthesizedExpression(expression=JsxTagExpression(tag=$tag)) },
-        JsFunctionBody(statements=some JsReturnStatement(argument=or { JsxTagExpression(tag=$tag), JsParenthesizedExpression(expression=JsxTagExpression(tag=$tag)) }))
-      })
+    or {
+      JsxSelfClosingElement(name=$name, attributes=$attributes),
+      JsxOpeningElement(name=$name, attributes=$attributes)
+    } where {
+      $attributes <: some JsxAttribute(name=`className`) as $attr
     },
-    $tag <: or {
-      JsxSelfClosingElement(name=$renderedName, attributes=$renderedAttributes),
-      JsxElement(opening_element=JsxOpeningElement(name=$renderedName, attributes=$renderedAttributes))
-    },
-    $renderedAttributes <: some JsxAttribute(name=`className`) as $attr,
-    $render <: within or { JsxSelfClosingElement(name=$name), JsxOpeningElement(name=$name) },
-    $render <: within JsModule() as $module,
-    $renderedName <: r"([^.]+).*"($renderedComponent),
-    not $module <: contains JsImport() as $importRendered where {
+    JsxAttribute(name=`render`, initializer=JsxAttributeInitializerClause(value=JsxExpressionAttributeValue(expression=$rendered))) as $render where {
+      $rendered <: or {
+        JsxTagExpression(tag=$tag),
+        JsArrowFunctionExpression(body=or {
+          or { JsxTagExpression(tag=$tag), JsParenthesizedExpression(expression=JsxTagExpression(tag=$tag)) },
+          JsFunctionBody(statements=some JsReturnStatement(argument=or { JsxTagExpression(tag=$tag), JsParenthesizedExpression(expression=JsxTagExpression(tag=$tag)) }))
+        })
+      },
+      $tag <: or {
+        JsxSelfClosingElement(name=$renderedName, attributes=$renderedAttributes),
+        JsxElement(opening_element=JsxOpeningElement(name=$renderedName, attributes=$renderedAttributes))
+      },
+      $renderedAttributes <: some JsxAttribute(name=`className`) as $attr,
+      $render <: within or { JsxSelfClosingElement(name=$name), JsxOpeningElement(name=$name) },
+      $render <: within JsModule() as $module,
+      $renderedName <: r"([^.]+).*"($renderedComponent),
+      not $module <: contains JsImport() as $importRendered where {
     $importRendered <: r"(?s).*(?:from\s+['\"](?:(?:@ctrl-ui/react|[^'\"]*components/control-ui)/)).*",
     $importRendered <: contains JsIdentifierBinding() as $bindingRendered where { $bindingRendered <: $renderedComponent }
   }
-  }
-} where {
-  $name <: r"([A-Z]\w*)(?:\.[\w.]+)?"($component),
-  $attr <: within JsModule() as $module,
-  $attr <: or {
-    contains or { JsxString(), JsStringLiteralExpression(), JsTemplateChunkElement(), JsLiteralMemberName() as $memberName where { $memberName <: r"(?s)[\"'].*" } } as $text where { $text <: r"(?s).*(?:[^\s\"'\x60]!(?:[\s\"'\x60]|$)|(?:^|[\s\"'\x60])![\w\[-]|(?:^|[^\w-])(?:p[xytrblse]?-|bg-[\w\[]|text-(?:(?:[\s\"'\x60]|$)|[^lcrjsewnbp\s\"'\x60]|l(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^f\s\"'\x60]|f(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:[^\s\"'\x60]))))|c(?:(?:[\s\"'\x60]|$)|[^el\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^n\s\"'\x60]|n(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:[^\s\"'\x60])))))|l(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:[^\s\"'\x60]))))|r(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^g\s\"'\x60]|g(?:(?:[\s\"'\x60]|$)|[^h\s\"'\x60]|h(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:[^\s\"'\x60])))))|j(?:(?:[\s\"'\x60]|$)|[^u\s\"'\x60]|u(?:(?:[\s\"'\x60]|$)|[^s\s\"'\x60]|s(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^f\s\"'\x60]|f(?:(?:[\s\"'\x60]|$)|[^y\s\"'\x60]|y(?:[^\s\"'\x60])))))))|s(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:[^\s\"'\x60])))))|e(?:(?:[\s\"'\x60]|$)|[^nl\s\"'\x60]|n(?:(?:[\s\"'\x60]|$)|[^d\s\"'\x60]|d(?:[^\s\"'\x60]))|l(?:(?:[\s\"'\x60]|$)|[^l\s\"'\x60]|l(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:(?:[\s\"'\x60]|$)|[^s\s\"'\x60]|s(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^s\s\"'\x60]|s(?:[^\s\"'\x60]))))))))|w(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:[^\s\"'\x60]))))|n(?:(?:[\s\"'\x60]|$)|[^o\s\"'\x60]|o(?:(?:[\s\"'\x60]|$)|[^w\s\"'\x60]|w(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:[^\s\"'\x60]))))))|b(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^l\s\"'\x60]|l(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^n\s\"'\x60]|n(?:(?:[\s\"'\x60]|$)|[^c\s\"'\x60]|c(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:[^\s\"'\x60])))))))|p(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^y\s\"'\x60]|y(?:[^\s\"'\x60])))))))|font-|leading-|tracking-|border|divide-|rounded|shadow|inset-shadow|drop-shadow|ring\b|ring-|inset-ring|outline|opacity-|backdrop-|fill-|stroke-|caret-|accent-|scheme-|mask-|decoration-|underline|no-underline|overline|line-through|italic|not-italic|uppercase|lowercase|capitalize|normal-case|antialiased|subpixel-antialiased|ordinal|slashed-zero|(?:normal|lining|oldstyle|proportional|tabular)-nums|(?:diagonal|stacked)-fractions|(?:hover|focus|focus-visible|focus-within|active|disabled|enabled|open|checked|indeterminate|visited|target|invalid|valid|user-invalid|user-valid|required|optional|read-only|autofill|placeholder-shown|in-range|out-of-range|inert|starting|dark|placeholder|selection|marker|file|first-letter|first-line|backdrop|details-content|aria-[^:\s]*|data-[^:\s]*|group-[^:\s]*|peer-[^:\s]*|has-[^:\s]*|\*|\[&[^\s]*?\]):)).*" },
-    contains JsReferenceIdentifier() as $reference where {
-      $reference <: r"(.+)"($referenced),
-      $module <: contains JsVariableDeclaration(declarators=$declarators) as $declaration where {
-        $declaration <: r"(?s)const\s.*",
-        $declarators <: some JsVariableDeclarator(id=$referenced, initializer=JsInitializerClause(expression=$value)),
-        $value <: or { or { JsStringLiteralExpression(), JsTemplateExpression(), JsObjectExpression() }, TsAsExpression(expression=or { JsStringLiteralExpression(), JsTemplateExpression(), JsObjectExpression() }), TsSatisfiesExpression(expression=or { JsStringLiteralExpression(), JsTemplateExpression(), JsObjectExpression() }) },
-        $value <: contains or { JsxString(), JsStringLiteralExpression(), JsTemplateChunkElement(), JsLiteralMemberName() as $memberName where { $memberName <: r"(?s)[\"'].*" } } as $constText where { $constText <: r"(?s).*(?:[^\s\"'\x60]!(?:[\s\"'\x60]|$)|(?:^|[\s\"'\x60])![\w\[-]|(?:^|[^\w-])(?:p[xytrblse]?-|bg-[\w\[]|text-(?:(?:[\s\"'\x60]|$)|[^lcrjsewnbp\s\"'\x60]|l(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^f\s\"'\x60]|f(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:[^\s\"'\x60]))))|c(?:(?:[\s\"'\x60]|$)|[^el\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^n\s\"'\x60]|n(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:[^\s\"'\x60])))))|l(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:[^\s\"'\x60]))))|r(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^g\s\"'\x60]|g(?:(?:[\s\"'\x60]|$)|[^h\s\"'\x60]|h(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:[^\s\"'\x60])))))|j(?:(?:[\s\"'\x60]|$)|[^u\s\"'\x60]|u(?:(?:[\s\"'\x60]|$)|[^s\s\"'\x60]|s(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^f\s\"'\x60]|f(?:(?:[\s\"'\x60]|$)|[^y\s\"'\x60]|y(?:[^\s\"'\x60])))))))|s(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:[^\s\"'\x60])))))|e(?:(?:[\s\"'\x60]|$)|[^nl\s\"'\x60]|n(?:(?:[\s\"'\x60]|$)|[^d\s\"'\x60]|d(?:[^\s\"'\x60]))|l(?:(?:[\s\"'\x60]|$)|[^l\s\"'\x60]|l(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:(?:[\s\"'\x60]|$)|[^s\s\"'\x60]|s(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^s\s\"'\x60]|s(?:[^\s\"'\x60]))))))))|w(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:[^\s\"'\x60]))))|n(?:(?:[\s\"'\x60]|$)|[^o\s\"'\x60]|o(?:(?:[\s\"'\x60]|$)|[^w\s\"'\x60]|w(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:[^\s\"'\x60]))))))|b(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^l\s\"'\x60]|l(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^n\s\"'\x60]|n(?:(?:[\s\"'\x60]|$)|[^c\s\"'\x60]|c(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:[^\s\"'\x60])))))))|p(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^y\s\"'\x60]|y(?:[^\s\"'\x60])))))))|font-|leading-|tracking-|border|divide-|rounded|shadow|inset-shadow|drop-shadow|ring\b|ring-|inset-ring|outline|opacity-|backdrop-|fill-|stroke-|caret-|accent-|scheme-|mask-|decoration-|underline|no-underline|overline|line-through|italic|not-italic|uppercase|lowercase|capitalize|normal-case|antialiased|subpixel-antialiased|ordinal|slashed-zero|(?:normal|lining|oldstyle|proportional|tabular)-nums|(?:diagonal|stacked)-fractions|(?:hover|focus|focus-visible|focus-within|active|disabled|enabled|open|checked|indeterminate|visited|target|invalid|valid|user-invalid|user-valid|required|optional|read-only|autofill|placeholder-shown|in-range|out-of-range|inert|starting|dark|placeholder|selection|marker|file|first-letter|first-line|backdrop|details-content|aria-[^:\s]*|data-[^:\s]*|group-[^:\s]*|peer-[^:\s]*|has-[^:\s]*|\*|\[&[^\s]*?\]):)).*" }
+    }
+  } where {
+    $name <: r"([A-Z]\w*)(?:\.[\w.]+)?"($component),
+    $attr <: within JsModule() as $module,
+    $attr <: or {
+    contains or { JsxString(), JsStringLiteralExpression(), JsTemplateChunkElement(), JsLiteralMemberName() as $attrMember where { $attrMember <: r"(?s)[\"'].*" } } as $attrText where { $attrText <: r"(?s).*(?:[^\s\"'\x60]!(?:[\s\"'\x60]|$)|(?:^|[\s\"'\x60])![\w\[-]|(?:^|[^\w-])(?:p[xytrblse]?-|bg-[\w\[]|text-(?:(?:[\s\"'\x60]|$)|[^lcrjsewnbp\s\"'\x60]|l(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^f\s\"'\x60]|f(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:[^\s\"'\x60]))))|c(?:(?:[\s\"'\x60]|$)|[^el\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^n\s\"'\x60]|n(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:[^\s\"'\x60])))))|l(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:[^\s\"'\x60]))))|r(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^g\s\"'\x60]|g(?:(?:[\s\"'\x60]|$)|[^h\s\"'\x60]|h(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:[^\s\"'\x60])))))|j(?:(?:[\s\"'\x60]|$)|[^u\s\"'\x60]|u(?:(?:[\s\"'\x60]|$)|[^s\s\"'\x60]|s(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^f\s\"'\x60]|f(?:(?:[\s\"'\x60]|$)|[^y\s\"'\x60]|y(?:[^\s\"'\x60])))))))|s(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:[^\s\"'\x60])))))|e(?:(?:[\s\"'\x60]|$)|[^nl\s\"'\x60]|n(?:(?:[\s\"'\x60]|$)|[^d\s\"'\x60]|d(?:[^\s\"'\x60]))|l(?:(?:[\s\"'\x60]|$)|[^l\s\"'\x60]|l(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:(?:[\s\"'\x60]|$)|[^s\s\"'\x60]|s(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^s\s\"'\x60]|s(?:[^\s\"'\x60]))))))))|w(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:[^\s\"'\x60]))))|n(?:(?:[\s\"'\x60]|$)|[^o\s\"'\x60]|o(?:(?:[\s\"'\x60]|$)|[^w\s\"'\x60]|w(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:[^\s\"'\x60]))))))|b(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^l\s\"'\x60]|l(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^n\s\"'\x60]|n(?:(?:[\s\"'\x60]|$)|[^c\s\"'\x60]|c(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:[^\s\"'\x60])))))))|p(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^y\s\"'\x60]|y(?:[^\s\"'\x60])))))))|font-|leading-|tracking-|border|divide-|rounded|shadow|inset-shadow|drop-shadow|ring\b|ring-|inset-ring|outline|opacity-|backdrop-|fill-|stroke-|caret-|accent-|scheme-|mask-|decoration-|underline|no-underline|overline|line-through|italic|not-italic|uppercase|lowercase|capitalize|normal-case|antialiased|subpixel-antialiased|ordinal|slashed-zero|(?:normal|lining|oldstyle|proportional|tabular)-nums|(?:diagonal|stacked)-fractions|blur(?:-|(?:[\s\"'\x60]|$))|brightness-|contrast-[\d\[]|grayscale|hue-rotate-|invert|saturate-|sepia|(?:hover|focus|focus-visible|focus-within|active|disabled|enabled|open|checked|indeterminate|visited|target|invalid|valid|user-invalid|user-valid|required|optional|read-only|autofill|placeholder-shown|in-range|out-of-range|inert|starting|dark|placeholder|selection|marker|file|first-letter|first-line|backdrop|details-content|aria-[^:\s]*|data-[^:\s]*|group-[^:\s]*|peer-[^:\s]*|has-[^:\s]*|\*|\[&[^\s]*?\]):)|(?:^|[^\w-])\[(?:padding|background|color|font|line-height|letter-spacing|border|outline|box-shadow|text-shadow|text-decoration|text-underline|text-transform|opacity|filter|backdrop-filter|fill|stroke|caret-color|accent-color|mask|-webkit-mask|-webkit-font-smoothing|-moz-osx-font-smoothing)(?:-[\w-]*)?:).*" },
+    contains JsReferenceIdentifier() as $attrConstant where {
+      $attrConstant <: r"(.+)"($attrConstantName),
+      $module <: contains JsVariableDeclaration(declarators=$attrConstantDeclarators) as $attrConstantDeclaration where {
+        $attrConstantDeclaration <: r"(?s)const\s.*",
+        $attrConstantDeclarators <: some JsVariableDeclarator(id=$attrConstantName, initializer=JsInitializerClause(expression=$attrConstantValue)),
+        $attrConstantValue <: or { or { JsStringLiteralExpression(), JsTemplateExpression(), JsObjectExpression() }, TsAsExpression(expression=or { JsStringLiteralExpression(), JsTemplateExpression(), JsObjectExpression() }), TsSatisfiesExpression(expression=or { JsStringLiteralExpression(), JsTemplateExpression(), JsObjectExpression() }) },
+        $attrConstantValue <: contains or { JsxString(), JsStringLiteralExpression(), JsTemplateChunkElement(), JsLiteralMemberName() as $attrConstantMember where { $attrConstantMember <: r"(?s)[\"'].*" } } as $attrConstantText where { $attrConstantText <: r"(?s).*(?:[^\s\"'\x60]!(?:[\s\"'\x60]|$)|(?:^|[\s\"'\x60])![\w\[-]|(?:^|[^\w-])(?:p[xytrblse]?-|bg-[\w\[]|text-(?:(?:[\s\"'\x60]|$)|[^lcrjsewnbp\s\"'\x60]|l(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^f\s\"'\x60]|f(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:[^\s\"'\x60]))))|c(?:(?:[\s\"'\x60]|$)|[^el\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^n\s\"'\x60]|n(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:[^\s\"'\x60])))))|l(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:[^\s\"'\x60]))))|r(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^g\s\"'\x60]|g(?:(?:[\s\"'\x60]|$)|[^h\s\"'\x60]|h(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:[^\s\"'\x60])))))|j(?:(?:[\s\"'\x60]|$)|[^u\s\"'\x60]|u(?:(?:[\s\"'\x60]|$)|[^s\s\"'\x60]|s(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^f\s\"'\x60]|f(?:(?:[\s\"'\x60]|$)|[^y\s\"'\x60]|y(?:[^\s\"'\x60])))))))|s(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:[^\s\"'\x60])))))|e(?:(?:[\s\"'\x60]|$)|[^nl\s\"'\x60]|n(?:(?:[\s\"'\x60]|$)|[^d\s\"'\x60]|d(?:[^\s\"'\x60]))|l(?:(?:[\s\"'\x60]|$)|[^l\s\"'\x60]|l(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:(?:[\s\"'\x60]|$)|[^s\s\"'\x60]|s(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^s\s\"'\x60]|s(?:[^\s\"'\x60]))))))))|w(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:[^\s\"'\x60]))))|n(?:(?:[\s\"'\x60]|$)|[^o\s\"'\x60]|o(?:(?:[\s\"'\x60]|$)|[^w\s\"'\x60]|w(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:[^\s\"'\x60]))))))|b(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^l\s\"'\x60]|l(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^n\s\"'\x60]|n(?:(?:[\s\"'\x60]|$)|[^c\s\"'\x60]|c(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:[^\s\"'\x60])))))))|p(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^y\s\"'\x60]|y(?:[^\s\"'\x60])))))))|font-|leading-|tracking-|border|divide-|rounded|shadow|inset-shadow|drop-shadow|ring\b|ring-|inset-ring|outline|opacity-|backdrop-|fill-|stroke-|caret-|accent-|scheme-|mask-|decoration-|underline|no-underline|overline|line-through|italic|not-italic|uppercase|lowercase|capitalize|normal-case|antialiased|subpixel-antialiased|ordinal|slashed-zero|(?:normal|lining|oldstyle|proportional|tabular)-nums|(?:diagonal|stacked)-fractions|blur(?:-|(?:[\s\"'\x60]|$))|brightness-|contrast-[\d\[]|grayscale|hue-rotate-|invert|saturate-|sepia|(?:hover|focus|focus-visible|focus-within|active|disabled|enabled|open|checked|indeterminate|visited|target|invalid|valid|user-invalid|user-valid|required|optional|read-only|autofill|placeholder-shown|in-range|out-of-range|inert|starting|dark|placeholder|selection|marker|file|first-letter|first-line|backdrop|details-content|aria-[^:\s]*|data-[^:\s]*|group-[^:\s]*|peer-[^:\s]*|has-[^:\s]*|\*|\[&[^\s]*?\]):)|(?:^|[^\w-])\[(?:padding|background|color|font|line-height|letter-spacing|border|outline|box-shadow|text-shadow|text-decoration|text-underline|text-transform|opacity|filter|backdrop-filter|fill|stroke|caret-color|accent-color|mask|-webkit-mask|-webkit-font-smoothing|-moz-osx-font-smoothing)(?:-[\w-]*)?:).*" }
       }
     }
   },
-  $module <: contains JsImport() as $import where {
+    $module <: contains JsImport() as $import where {
     $import <: r"(?s).*(?:from\s+['\"](?:(?:@ctrl-ui/react|[^'\"]*components/control-ui)/)).*",
     $import <: contains JsIdentifierBinding() as $binding where { $binding <: $component }
   },
-  register_diagnostic(span=$attr, message="Control UI component styled through className: color, type, padding, borders, radius, shadows, state styles and !important belong to the component. Use its props or a --cui-* knob; keep className for layout (flex, gap, width, margin, placement).", severity="error")
+    register_diagnostic(span=$attr, message="Control UI component styled through className: color, type, padding, borders, radius, shadows, state styles and !important belong to the component. Use its props or a --cui-* knob; keep className for layout (flex, gap, width, margin, placement).", severity="error")
+  },
+  or {
+    JsxSelfClosingElement(name=$plainName, attributes=$plainAttributes),
+    JsxOpeningElement(name=$plainName, attributes=$plainAttributes)
+  } where {
+    $plainAttributes <: some JsxAttribute(name=`className`) as $plainAttr,
+    not $plainAttr <: within JsxAttribute(name=`render`),
+    $plainAttr <: within JsModule() as $module,
+    $plainAttr <: or {
+    contains or { JsxString(), JsStringLiteralExpression(), JsTemplateChunkElement(), JsLiteralMemberName() as $plainAttrMember where { $plainAttrMember <: r"(?s)[\"'].*" } } as $plainAttrText where { $plainAttrText <: r"(?s).*(?:\[&[^\s\"'\x60]*?data-(?:control|slot)\b|(?:^|[\s\"'\x60:])\*{1,2}:data-\[(?:control|slot)\b).*" },
+    contains JsReferenceIdentifier() as $plainAttrConstant where {
+      $plainAttrConstant <: r"(.+)"($plainAttrConstantName),
+      $module <: contains JsVariableDeclaration(declarators=$plainAttrConstantDeclarators) as $plainAttrConstantDeclaration where {
+        $plainAttrConstantDeclaration <: r"(?s)const\s.*",
+        $plainAttrConstantDeclarators <: some JsVariableDeclarator(id=$plainAttrConstantName, initializer=JsInitializerClause(expression=$plainAttrConstantValue)),
+        $plainAttrConstantValue <: or { or { JsStringLiteralExpression(), JsTemplateExpression(), JsObjectExpression() }, TsAsExpression(expression=or { JsStringLiteralExpression(), JsTemplateExpression(), JsObjectExpression() }), TsSatisfiesExpression(expression=or { JsStringLiteralExpression(), JsTemplateExpression(), JsObjectExpression() }) },
+        $plainAttrConstantValue <: contains or { JsxString(), JsStringLiteralExpression(), JsTemplateChunkElement(), JsLiteralMemberName() as $plainAttrConstantMember where { $plainAttrConstantMember <: r"(?s)[\"'].*" } } as $plainAttrConstantText where { $plainAttrConstantText <: r"(?s).*(?:\[&[^\s\"'\x60]*?data-(?:control|slot)\b|(?:^|[\s\"'\x60:])\*{1,2}:data-\[(?:control|slot)\b).*" }
+      }
+    }
+  },
+    not and {
+      $plainName <: r"([A-Z]\w*)(?:\.[\w.]+)?"($plainComponent),
+      $module <: contains JsImport() as $importPlain where {
+    $importPlain <: r"(?s).*(?:from\s+['\"](?:(?:@ctrl-ui/react|[^'\"]*components/control-ui)/)).*",
+    $importPlain <: contains JsIdentifierBinding() as $bindingPlain where { $bindingPlain <: $plainComponent }
+  }
+    },
+    register_diagnostic(span=$plainAttr, message="className styles a Control UI component's parts from outside through a data-slot or data-control selector. The component owns its parts: use its props, compose its parts, or set a --cui-* knob on it.", severity="error")
+  }
 }

package/lint/no-component-style-props.grit

@@ -0,0 +1,51 @@
+language js(typescript, jsx)
+
+or {
+    or {
+      JsxSelfClosingElement(name=$name, attributes=$attributes),
+      JsxOpeningElement(name=$name, attributes=$attributes)
+    } where {
+      $attributes <: some JsxAttribute(name=`style`) as $attr
+    },
+    JsxAttribute(name=`render`, initializer=JsxAttributeInitializerClause(value=JsxExpressionAttributeValue(expression=$rendered))) as $render where {
+      $rendered <: or {
+        JsxTagExpression(tag=$tag),
+        JsArrowFunctionExpression(body=or {
+          or { JsxTagExpression(tag=$tag), JsParenthesizedExpression(expression=JsxTagExpression(tag=$tag)) },
+          JsFunctionBody(statements=some JsReturnStatement(argument=or { JsxTagExpression(tag=$tag), JsParenthesizedExpression(expression=JsxTagExpression(tag=$tag)) }))
+        })
+      },
+      $tag <: or {
+        JsxSelfClosingElement(name=$renderedName, attributes=$renderedAttributes),
+        JsxElement(opening_element=JsxOpeningElement(name=$renderedName, attributes=$renderedAttributes))
+      },
+      $renderedAttributes <: some JsxAttribute(name=`style`) as $attr,
+      $render <: within or { JsxSelfClosingElement(name=$name), JsxOpeningElement(name=$name) },
+      $render <: within JsModule() as $module,
+      $renderedName <: r"([^.]+).*"($renderedComponent),
+      not $module <: contains JsImport() as $importRendered where {
+    $importRendered <: r"(?s).*(?:from\s+['\"](?:(?:@ctrl-ui/react|[^'\"]*components/control-ui)/)).*",
+    $importRendered <: contains JsIdentifierBinding() as $bindingRendered where { $bindingRendered <: $renderedComponent }
+  }
+    }
+  } where {
+    $name <: r"([A-Z]\w*)(?:\.[\w.]+)?"($component),
+    $attr <: within JsModule() as $module,
+    $attr <: or {
+    contains or { JsPropertyObjectMember(name=$attrKey), JsShorthandPropertyObjectMember(name=$attrKey) } where { $attrKey <: r"[\"']?(?:(?:padding|background|color|font|lineHeight|letterSpacing|border|outline|boxShadow|textShadow|textDecoration|textUnderline|textTransform|opacity|filter|backdropFilter|fill|stroke|caretColor|accentColor|mask|WebkitMask|WebkitFontSmoothing|MozOsxFontSmoothing)(?:[A-Z]\w*)?|(?:padding|background|color|font|line-height|letter-spacing|border|outline|box-shadow|text-shadow|text-decoration|text-underline|text-transform|opacity|filter|backdrop-filter|fill|stroke|caret-color|accent-color|mask|-webkit-mask|-webkit-font-smoothing|-moz-osx-font-smoothing)(?:-[\w-]*)?)[\"']?" },
+    contains JsReferenceIdentifier() as $attrConstant where {
+      $attrConstant <: r"(.+)"($attrConstantName),
+      $module <: contains JsVariableDeclaration(declarators=$attrConstantDeclarators) as $attrConstantDeclaration where {
+        $attrConstantDeclaration <: r"(?s)const\s.*",
+        $attrConstantDeclarators <: some JsVariableDeclarator(id=$attrConstantName, initializer=JsInitializerClause(expression=$attrConstantValue)),
+        $attrConstantValue <: or { JsObjectExpression(), TsAsExpression(expression=JsObjectExpression()), TsSatisfiesExpression(expression=JsObjectExpression()) },
+        $attrConstantValue <: contains or { JsPropertyObjectMember(name=$attrConstantKey), JsShorthandPropertyObjectMember(name=$attrConstantKey) } where { $attrConstantKey <: r"[\"']?(?:(?:padding|background|color|font|lineHeight|letterSpacing|border|outline|boxShadow|textShadow|textDecoration|textUnderline|textTransform|opacity|filter|backdropFilter|fill|stroke|caretColor|accentColor|mask|WebkitMask|WebkitFontSmoothing|MozOsxFontSmoothing)(?:[A-Z]\w*)?|(?:padding|background|color|font|line-height|letter-spacing|border|outline|box-shadow|text-shadow|text-decoration|text-underline|text-transform|opacity|filter|backdrop-filter|fill|stroke|caret-color|accent-color|mask|-webkit-mask|-webkit-font-smoothing|-moz-osx-font-smoothing)(?:-[\w-]*)?)[\"']?" }
+      }
+    }
+  },
+    $module <: contains JsImport() as $import where {
+    $import <: r"(?s).*(?:from\s+['\"](?:(?:@ctrl-ui/react|[^'\"]*components/control-ui)/)).*",
+    $import <: contains JsIdentifierBinding() as $binding where { $binding <: $component }
+  },
+    register_diagnostic(span=$attr, message="Control UI component painted through style: color, type, padding, borders, radius, shadows and opacity belong to the component. Set a --cui-* knob in style or use its props; keep other style keys for layout.", severity="error")
+  }