@tenphi/eslint-plugin-tasty 1.3.0 → 1.5.0

package/README.md

@@ -178,13 +178,15 @@ for typing shared signatures.
 | `tasty/valid-styles-structure` | error | Invalid styles object structure, and the v2 at-rule key spellings (auto-fixable) |
 | `tasty/no-nested-state-map` | error | Nested state maps (not supported) |
 | `tasty/no-important` | error | `!important` usage (breaks tasty specificity) |
-| `tasty/valid-sub-element` | error | Sub-element values must be style objects |
+| `tasty/valid-sub-element` | error | Sub-element values must be style objects; `$` selectors must not target the root element ([details](docs/rules/valid-sub-element.md)) |
 | `tasty/valid-directional-modifier` | error | Directional modifiers on wrong properties, and more than one value in a group that names directions. Physical properties take `top`/`right`/`bottom`/`left`, logical ones `start`/`end`, and mixing the two is reported in either direction |
 | `tasty/valid-radius-shape` | error | Unknown radius shape keywords |
 | `tasty/valid-preset` | error | Unknown preset names |
 | `tasty/valid-recipe` | error | Unknown recipe names |
 | `tasty/valid-transition` | warn | Unknown transition property names |
 | `tasty/no-nested-selector` | warn | `&`-prefixed nested selectors (use sub-elements) |
+| `tasty/no-state-in-selector` | warn | Pseudo-class and attribute conditions in sub-element `$` selectors; put conditions in property state maps ([details](docs/rules/no-state-in-selector.md)) |
+| `tasty/prefer-element-selector` | warn | Prefer element names such as `Primary > Search` over exact `data-element` attributes in sub-element `$` selectors (safely autofixable; [details](docs/rules/prefer-element-selector.md)) |
 | `tasty/static-no-dynamic-values` | error | Dynamic values in `tastyStatic()` |
 | `tasty/static-valid-selector` | error | Invalid selector in `tastyStatic(selector, ...)` |
 | `tasty/require-default-state` | error | Missing default (`''`) or fallback floor (`_`) key in state mappings (skipped for extending calls) |
@@ -212,6 +214,29 @@ for typing shared signatures.
 | `tasty/no-unknown-state-alias` | warn | Unknown `@name` state aliases |
 | `tasty/no-styles-prop` | warn | Direct `styles` prop usage |
 
+### Structural selectors and state maps
+
+`tasty/valid-sub-element` reports selectors such as
+`Level1: { $: '&:is(h1)', preset: 'h1' }` as errors: `&:is(h1)` selects the
+component root. Use a root `preset` state map to style a root heading, or
+`$: 'h1'` to select descendant headings. Root pseudo-elements such as
+`&::before` remain supported. See the [sub-element rule guide](docs/rules/valid-sub-element.md)
+for both alternatives.
+
+Keep a sub-element's `$` selector focused on the element's identity and position.
+`tasty/no-state-in-selector` warns on conditions such as `img:not([width])`,
+`button[disabled]`, and `>@:hover`. Express those conditions in property state
+maps, using `@own(...)` for the sub-element's own state. Root states stay outside
+`@own(...)`.
+
+Tags, combinators, classes, IDs, exact `[data-element="Name"]` identities, and
+pseudo-elements remain valid structural selectors. `:is()` and `:where()` may
+group structural selectors, but conditions inside them still produce a warning:
+`:where(picture)` is accepted, while `:where(img:not([width]))` is reported.
+The rule does not autofix because moving a condition can change its scope and
+the behavior of other properties. See the [rule guide](docs/rules/no-state-in-selector.md)
+for examples and migration advice.
+
 ### Static values and intentional spreads
 
 The recommended rules flag JavaScript-computed style values, including

package/dist/configs.js

@@ -13,6 +13,8 @@ const recommended = {
 	"tasty/valid-directional-modifier": "error",
 	"tasty/valid-radius-shape": "error",
 	"tasty/no-nested-selector": "error",
+	"tasty/no-state-in-selector": "warn",
+	"tasty/prefer-element-selector": "warn",
 	"tasty/static-no-dynamic-values": "error",
 	"tasty/static-valid-selector": "error",
 	"tasty/valid-preset": "error",

package/dist/configs.js.map

@@ -1 +1 @@
-{"version":3,"file":"configs.js","names":[],"sources":["../src/configs.ts"],"sourcesContent":["import type { TSESLint } from '@typescript-eslint/utils';\n\nexport const recommended: TSESLint.SharedConfig.RulesRecord = {\n  'tasty/known-property': 'warn',\n  'tasty/valid-value': 'error',\n  'tasty/valid-color-token': 'error',\n  'tasty/valid-custom-unit': 'error',\n  'tasty/valid-boolean-property': 'error',\n  'tasty/valid-state-key': 'error',\n  'tasty/valid-styles-structure': 'error',\n  'tasty/no-nested-state-map': 'error',\n  'tasty/no-important': 'error',\n  'tasty/valid-sub-element': 'error',\n  'tasty/valid-directional-modifier': 'error',\n  'tasty/valid-radius-shape': 'error',\n  'tasty/no-nested-selector': 'error',\n  'tasty/static-no-dynamic-values': 'error',\n  'tasty/static-valid-selector': 'error',\n  'tasty/valid-preset': 'error',\n  'tasty/valid-recipe': 'error',\n  'tasty/valid-transition': 'warn',\n  'tasty/require-default-state': 'error',\n  'tasty/no-own-at-root': 'warn',\n  'tasty/valid-default-state-order': 'warn',\n  'tasty/prefer-shorthand-property': 'warn',\n  'tasty/no-raw-color-values': 'warn',\n  'tasty/no-raw-transition-duration': 'warn',\n  'tasty/no-runtime-styles-mutation': 'warn',\n  'tasty/no-style-spread': 'warn',\n  'tasty/consistent-token-usage': 'warn',\n  'tasty/prefer-auto-calc': 'warn',\n  'tasty/prefer-state-negation': 'warn',\n  'tasty/prefer-custom-property-syntax': 'warn',\n  'tasty/prefer-hide': 'warn',\n  'tasty/prefer-directional-shorthand': 'warn',\n  'tasty/prefer-longhand-property': 'error',\n};\n\nexport const strict: TSESLint.SharedConfig.RulesRecord = {\n  ...recommended,\n  'tasty/valid-custom-property': 'warn',\n  'tasty/no-unknown-state-alias': 'warn',\n  'tasty/no-styles-prop': 'warn',\n  'tasty/valid-state-definition': 'warn',\n};\n"],"mappings":";AAEA,MAAa,cAAiD;CAC5D,wBAAwB;CACxB,qBAAqB;CACrB,2BAA2B;CAC3B,2BAA2B;CAC3B,gCAAgC;CAChC,yBAAyB;CACzB,gCAAgC;CAChC,6BAA6B;CAC7B,sBAAsB;CACtB,2BAA2B;CAC3B,oCAAoC;CACpC,4BAA4B;CAC5B,4BAA4B;CAC5B,kCAAkC;CAClC,+BAA+B;CAC/B,sBAAsB;CACtB,sBAAsB;CACtB,0BAA0B;CAC1B,+BAA+B;CAC/B,wBAAwB;CACxB,mCAAmC;CACnC,mCAAmC;CACnC,6BAA6B;CAC7B,oCAAoC;CACpC,oCAAoC;CACpC,yBAAyB;CACzB,gCAAgC;CAChC,0BAA0B;CAC1B,+BAA+B;CAC/B,uCAAuC;CACvC,qBAAqB;CACrB,sCAAsC;CACtC,kCAAkC;CACnC;AAED,MAAa,SAA4C;CACvD,GAAG;CACH,+BAA+B;CAC/B,gCAAgC;CAChC,wBAAwB;CACxB,gCAAgC;CACjC"}
+{"version":3,"file":"configs.js","names":[],"sources":["../src/configs.ts"],"sourcesContent":["import type { TSESLint } from '@typescript-eslint/utils';\n\nexport const recommended: TSESLint.SharedConfig.RulesRecord = {\n  'tasty/known-property': 'warn',\n  'tasty/valid-value': 'error',\n  'tasty/valid-color-token': 'error',\n  'tasty/valid-custom-unit': 'error',\n  'tasty/valid-boolean-property': 'error',\n  'tasty/valid-state-key': 'error',\n  'tasty/valid-styles-structure': 'error',\n  'tasty/no-nested-state-map': 'error',\n  'tasty/no-important': 'error',\n  'tasty/valid-sub-element': 'error',\n  'tasty/valid-directional-modifier': 'error',\n  'tasty/valid-radius-shape': 'error',\n  'tasty/no-nested-selector': 'error',\n  'tasty/no-state-in-selector': 'warn',\n  'tasty/prefer-element-selector': 'warn',\n  'tasty/static-no-dynamic-values': 'error',\n  'tasty/static-valid-selector': 'error',\n  'tasty/valid-preset': 'error',\n  'tasty/valid-recipe': 'error',\n  'tasty/valid-transition': 'warn',\n  'tasty/require-default-state': 'error',\n  'tasty/no-own-at-root': 'warn',\n  'tasty/valid-default-state-order': 'warn',\n  'tasty/prefer-shorthand-property': 'warn',\n  'tasty/no-raw-color-values': 'warn',\n  'tasty/no-raw-transition-duration': 'warn',\n  'tasty/no-runtime-styles-mutation': 'warn',\n  'tasty/no-style-spread': 'warn',\n  'tasty/consistent-token-usage': 'warn',\n  'tasty/prefer-auto-calc': 'warn',\n  'tasty/prefer-state-negation': 'warn',\n  'tasty/prefer-custom-property-syntax': 'warn',\n  'tasty/prefer-hide': 'warn',\n  'tasty/prefer-directional-shorthand': 'warn',\n  'tasty/prefer-longhand-property': 'error',\n};\n\nexport const strict: TSESLint.SharedConfig.RulesRecord = {\n  ...recommended,\n  'tasty/valid-custom-property': 'warn',\n  'tasty/no-unknown-state-alias': 'warn',\n  'tasty/no-styles-prop': 'warn',\n  'tasty/valid-state-definition': 'warn',\n};\n"],"mappings":";AAEA,MAAa,cAAiD;CAC5D,wBAAwB;CACxB,qBAAqB;CACrB,2BAA2B;CAC3B,2BAA2B;CAC3B,gCAAgC;CAChC,yBAAyB;CACzB,gCAAgC;CAChC,6BAA6B;CAC7B,sBAAsB;CACtB,2BAA2B;CAC3B,oCAAoC;CACpC,4BAA4B;CAC5B,4BAA4B;CAC5B,8BAA8B;CAC9B,iCAAiC;CACjC,kCAAkC;CAClC,+BAA+B;CAC/B,sBAAsB;CACtB,sBAAsB;CACtB,0BAA0B;CAC1B,+BAA+B;CAC/B,wBAAwB;CACxB,mCAAmC;CACnC,mCAAmC;CACnC,6BAA6B;CAC7B,oCAAoC;CACpC,oCAAoC;CACpC,yBAAyB;CACzB,gCAAgC;CAChC,0BAA0B;CAC1B,+BAA+B;CAC/B,uCAAuC;CACvC,qBAAqB;CACrB,sCAAsC;CACtC,kCAAkC;CACnC;AAED,MAAa,SAA4C;CACvD,GAAG;CACH,+BAA+B;CAC/B,gCAAgC;CAChC,wBAAwB;CACxB,gCAAgC;CACjC"}

package/dist/index.js

@@ -5,6 +5,8 @@ import valid_custom_unit_default from "./rules/valid-custom-unit.js";
 import valid_state_key_default from "./rules/valid-state-key.js";
 import valid_styles_structure_default from "./rules/valid-styles-structure.js";
 import no_nested_selector_default from "./rules/no-nested-selector.js";
+import no_state_in_selector_default from "./rules/no-state-in-selector.js";
+import prefer_element_selector_default from "./rules/prefer-element-selector.js";
 import valid_custom_property_default from "./rules/valid-custom-property.js";
 import valid_preset_default from "./rules/valid-preset.js";
 import valid_recipe_default from "./rules/valid-recipe.js";
@@ -48,6 +50,8 @@ const ruleMap = {
 	"valid-state-key": valid_state_key_default,
 	"valid-styles-structure": valid_styles_structure_default,
 	"no-nested-selector": no_nested_selector_default,
+	"no-state-in-selector": no_state_in_selector_default,
+	"prefer-element-selector": prefer_element_selector_default,
 	"valid-custom-property": valid_custom_property_default,
 	"valid-preset": valid_preset_default,
 	"valid-recipe": valid_recipe_default,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["rules.knownProperty","rules.validValue","rules.validColorToken","rules.validCustomUnit","rules.validStateKey","rules.validStylesStructure","rules.noNestedSelector","rules.validCustomProperty","rules.validPreset","rules.validRecipe","rules.validBooleanProperty","rules.validDirectionalModifier","rules.validRadiusShape","rules.noImportant","rules.validSubElement","rules.noNestedStateMap","rules.staticNoDynamicValues","rules.staticValidSelector","rules.preferShorthandProperty","rules.validTransition","rules.requireDefaultState","rules.noUnknownStateAlias","rules.noRawColorValues","rules.noRawTransitionDuration","rules.noRawMotionDuration","rules.noStylesProp","rules.consistentTokenUsage","rules.noRuntimeStylesMutation","rules.noStyleSpread","rules.validStateDefinition","rules.noOwnAtRoot","rules.validDefaultStateOrder","rules.preferAutoCalc","rules.preferStateNegation","rules.preferCustomPropertySyntax","rules.preferHide","rules.preferDirectionalShorthand","rules.preferLonghandProperty"],"sources":["../src/index.ts"],"sourcesContent":["import { createRequire } from 'node:module';\nimport type { TSESLint } from '@typescript-eslint/utils';\nimport * as rules from './rules/index.js';\nimport { recommended, strict } from './configs.js';\n\nconst ruleMap: Record<string, TSESLint.RuleModule<string, unknown[]>> = {\n  'known-property': rules.knownProperty,\n  'valid-value': rules.validValue,\n  'valid-color-token': rules.validColorToken,\n  'valid-custom-unit': rules.validCustomUnit,\n  'valid-state-key': rules.validStateKey,\n  'valid-styles-structure': rules.validStylesStructure,\n  'no-nested-selector': rules.noNestedSelector,\n  'valid-custom-property': rules.validCustomProperty,\n  'valid-preset': rules.validPreset,\n  'valid-recipe': rules.validRecipe,\n  'valid-boolean-property': rules.validBooleanProperty,\n  'valid-directional-modifier': rules.validDirectionalModifier,\n  'valid-radius-shape': rules.validRadiusShape,\n  'no-important': rules.noImportant,\n  'valid-sub-element': rules.validSubElement,\n  'no-nested-state-map': rules.noNestedStateMap,\n  'static-no-dynamic-values': rules.staticNoDynamicValues,\n  'static-valid-selector': rules.staticValidSelector,\n  'prefer-shorthand-property': rules.preferShorthandProperty,\n  'valid-transition': rules.validTransition,\n  'require-default-state': rules.requireDefaultState,\n  'no-unknown-state-alias': rules.noUnknownStateAlias,\n  'no-raw-color-values': rules.noRawColorValues,\n  'no-raw-transition-duration': rules.noRawTransitionDuration,\n  'no-raw-motion-duration': rules.noRawMotionDuration,\n  'no-styles-prop': rules.noStylesProp,\n  'consistent-token-usage': rules.consistentTokenUsage,\n  'no-runtime-styles-mutation': rules.noRuntimeStylesMutation,\n  'no-style-spread': rules.noStyleSpread,\n  'valid-state-definition': rules.validStateDefinition,\n  'no-own-at-root': rules.noOwnAtRoot,\n  'valid-default-state-order': rules.validDefaultStateOrder,\n  'prefer-auto-calc': rules.preferAutoCalc,\n  'prefer-state-negation': rules.preferStateNegation,\n  'prefer-custom-property-syntax': rules.preferCustomPropertySyntax,\n  'prefer-hide': rules.preferHide,\n  'prefer-directional-shorthand': rules.preferDirectionalShorthand,\n  'prefer-longhand-property': rules.preferLonghandProperty,\n};\n\n// Read from package.json so `meta.version` cannot drift from the released\n// version, as the previous hardcoded literal had. `../package.json` resolves to\n// the package root from both `src/` and the unbundled `dist/`.\nconst { version } = createRequire(import.meta.url)('../package.json') as {\n  version: string;\n};\n\nconst plugin = {\n  meta: {\n    name: '@tenphi/eslint-plugin-tasty',\n    version,\n  },\n  rules: ruleMap,\n  configs: {\n    recommended: {\n      plugins: {\n        get tasty() {\n          return plugin;\n        },\n      },\n      rules: recommended,\n    },\n    strict: {\n      plugins: {\n        get tasty() {\n          return plugin;\n        },\n      },\n      rules: strict,\n    },\n  },\n} satisfies TSESLint.FlatConfig.Plugin & {\n  configs: Record<string, TSESLint.FlatConfig.Config>;\n};\n\nexport default plugin;\n\nexport { recommended, strict } from './configs.js';\nexport type {\n  TastyValidationConfig,\n  ResolvedConfig,\n  StyleFunctionConfig,\n} from './types.js';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAM,UAAkE;CACtE,kBAAkBA;CAClB,eAAeC;CACf,qBAAqBC;CACrB,qBAAqBC;CACrB,mBAAmBC;CACnB,0BAA0BC;CAC1B,sBAAsBC;CACtB,yBAAyBC;CACzB,gBAAgBC;CAChB,gBAAgBC;CAChB,0BAA0BC;CAC1B,8BAA8BC;CAC9B,sBAAsBC;CACtB,gBAAgBC;CAChB,qBAAqBC;CACrB,uBAAuBC;CACvB,4BAA4BC;CAC5B,yBAAyBC;CACzB,6BAA6BC;CAC7B,oBAAoBC;CACpB,yBAAyBC;CACzB,0BAA0BC;CAC1B,uBAAuBC;CACvB,8BAA8BC;CAC9B,0BAA0BC;CAC1B,kBAAkBC;CAClB,0BAA0BC;CAC1B,8BAA8BC;CAC9B,mBAAmBC;CACnB,0BAA0BC;CAC1B,kBAAkBC;CAClB,6BAA6BC;CAC7B,oBAAoBC;CACpB,yBAAyBC;CACzB,iCAAiCC;CACjC,eAAeC;CACf,gCAAgCC;CAChC,4BAA4BC;CAC7B;AAKD,MAAM,EAAE,YAAY,cAAc,OAAO,KAAK,IAAI,CAAC,kBAAkB;AAIrE,MAAM,SAAS;CACb,MAAM;EACJ,MAAM;EACN;EACD;CACD,OAAO;CACP,SAAS;EACP,aAAa;GACX,SAAS,EACP,IAAI,QAAQ;AACV,WAAO;MAEV;GACD,OAAO;GACR;EACD,QAAQ;GACN,SAAS,EACP,IAAI,QAAQ;AACV,WAAO;MAEV;GACD,OAAO;GACR;EACF;CACF"}
+{"version":3,"file":"index.js","names":["rules.knownProperty","rules.validValue","rules.validColorToken","rules.validCustomUnit","rules.validStateKey","rules.validStylesStructure","rules.noNestedSelector","rules.noStateInSelector","rules.preferElementSelector","rules.validCustomProperty","rules.validPreset","rules.validRecipe","rules.validBooleanProperty","rules.validDirectionalModifier","rules.validRadiusShape","rules.noImportant","rules.validSubElement","rules.noNestedStateMap","rules.staticNoDynamicValues","rules.staticValidSelector","rules.preferShorthandProperty","rules.validTransition","rules.requireDefaultState","rules.noUnknownStateAlias","rules.noRawColorValues","rules.noRawTransitionDuration","rules.noRawMotionDuration","rules.noStylesProp","rules.consistentTokenUsage","rules.noRuntimeStylesMutation","rules.noStyleSpread","rules.validStateDefinition","rules.noOwnAtRoot","rules.validDefaultStateOrder","rules.preferAutoCalc","rules.preferStateNegation","rules.preferCustomPropertySyntax","rules.preferHide","rules.preferDirectionalShorthand","rules.preferLonghandProperty"],"sources":["../src/index.ts"],"sourcesContent":["import { createRequire } from 'node:module';\nimport type { TSESLint } from '@typescript-eslint/utils';\nimport * as rules from './rules/index.js';\nimport { recommended, strict } from './configs.js';\n\nconst ruleMap: Record<string, TSESLint.RuleModule<string, unknown[]>> = {\n  'known-property': rules.knownProperty,\n  'valid-value': rules.validValue,\n  'valid-color-token': rules.validColorToken,\n  'valid-custom-unit': rules.validCustomUnit,\n  'valid-state-key': rules.validStateKey,\n  'valid-styles-structure': rules.validStylesStructure,\n  'no-nested-selector': rules.noNestedSelector,\n  'no-state-in-selector': rules.noStateInSelector,\n  'prefer-element-selector': rules.preferElementSelector,\n  'valid-custom-property': rules.validCustomProperty,\n  'valid-preset': rules.validPreset,\n  'valid-recipe': rules.validRecipe,\n  'valid-boolean-property': rules.validBooleanProperty,\n  'valid-directional-modifier': rules.validDirectionalModifier,\n  'valid-radius-shape': rules.validRadiusShape,\n  'no-important': rules.noImportant,\n  'valid-sub-element': rules.validSubElement,\n  'no-nested-state-map': rules.noNestedStateMap,\n  'static-no-dynamic-values': rules.staticNoDynamicValues,\n  'static-valid-selector': rules.staticValidSelector,\n  'prefer-shorthand-property': rules.preferShorthandProperty,\n  'valid-transition': rules.validTransition,\n  'require-default-state': rules.requireDefaultState,\n  'no-unknown-state-alias': rules.noUnknownStateAlias,\n  'no-raw-color-values': rules.noRawColorValues,\n  'no-raw-transition-duration': rules.noRawTransitionDuration,\n  'no-raw-motion-duration': rules.noRawMotionDuration,\n  'no-styles-prop': rules.noStylesProp,\n  'consistent-token-usage': rules.consistentTokenUsage,\n  'no-runtime-styles-mutation': rules.noRuntimeStylesMutation,\n  'no-style-spread': rules.noStyleSpread,\n  'valid-state-definition': rules.validStateDefinition,\n  'no-own-at-root': rules.noOwnAtRoot,\n  'valid-default-state-order': rules.validDefaultStateOrder,\n  'prefer-auto-calc': rules.preferAutoCalc,\n  'prefer-state-negation': rules.preferStateNegation,\n  'prefer-custom-property-syntax': rules.preferCustomPropertySyntax,\n  'prefer-hide': rules.preferHide,\n  'prefer-directional-shorthand': rules.preferDirectionalShorthand,\n  'prefer-longhand-property': rules.preferLonghandProperty,\n};\n\n// Read from package.json so `meta.version` cannot drift from the released\n// version, as the previous hardcoded literal had. `../package.json` resolves to\n// the package root from both `src/` and the unbundled `dist/`.\nconst { version } = createRequire(import.meta.url)('../package.json') as {\n  version: string;\n};\n\nconst plugin = {\n  meta: {\n    name: '@tenphi/eslint-plugin-tasty',\n    version,\n  },\n  rules: ruleMap,\n  configs: {\n    recommended: {\n      plugins: {\n        get tasty() {\n          return plugin;\n        },\n      },\n      rules: recommended,\n    },\n    strict: {\n      plugins: {\n        get tasty() {\n          return plugin;\n        },\n      },\n      rules: strict,\n    },\n  },\n} satisfies TSESLint.FlatConfig.Plugin & {\n  configs: Record<string, TSESLint.FlatConfig.Config>;\n};\n\nexport default plugin;\n\nexport { recommended, strict } from './configs.js';\nexport type {\n  TastyValidationConfig,\n  ResolvedConfig,\n  StyleFunctionConfig,\n} from './types.js';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAM,UAAkE;CACtE,kBAAkBA;CAClB,eAAeC;CACf,qBAAqBC;CACrB,qBAAqBC;CACrB,mBAAmBC;CACnB,0BAA0BC;CAC1B,sBAAsBC;CACtB,wBAAwBC;CACxB,2BAA2BC;CAC3B,yBAAyBC;CACzB,gBAAgBC;CAChB,gBAAgBC;CAChB,0BAA0BC;CAC1B,8BAA8BC;CAC9B,sBAAsBC;CACtB,gBAAgBC;CAChB,qBAAqBC;CACrB,uBAAuBC;CACvB,4BAA4BC;CAC5B,yBAAyBC;CACzB,6BAA6BC;CAC7B,oBAAoBC;CACpB,yBAAyBC;CACzB,0BAA0BC;CAC1B,uBAAuBC;CACvB,8BAA8BC;CAC9B,0BAA0BC;CAC1B,kBAAkBC;CAClB,0BAA0BC;CAC1B,8BAA8BC;CAC9B,mBAAmBC;CACnB,0BAA0BC;CAC1B,kBAAkBC;CAClB,6BAA6BC;CAC7B,oBAAoBC;CACpB,yBAAyBC;CACzB,iCAAiCC;CACjC,eAAeC;CACf,gCAAgCC;CAChC,4BAA4BC;CAC7B;AAKD,MAAM,EAAE,YAAY,cAAc,OAAO,KAAK,IAAI,CAAC,kBAAkB;AAIrE,MAAM,SAAS;CACb,MAAM;EACJ,MAAM;EACN;EACD;CACD,OAAO;CACP,SAAS;EACP,aAAa;GACX,SAAS,EACP,IAAI,QAAQ;AACV,WAAO;MAEV;GACD,OAAO;GACR;EACD,QAAQ;GACN,SAAS,EACP,IAAI,QAAQ;AACV,WAAO;MAEV;GACD,OAAO;GACR;EACF;CACF"}

package/dist/rules/no-state-in-selector.js

@@ -0,0 +1,85 @@
+import { createRule } from "../create-rule.js";
+import { getKeyName, getStringValue, unwrapExpression } from "../utils.js";
+import { TastyContext, styleObjectListeners } from "../context.js";
+import selectorParser from "postcss-selector-parser";
+
+//#region src/rules/no-state-in-selector.ts
+const STRUCTURAL_PSEUDOS = new Set([":is", ":where"]);
+const LEGACY_PSEUDO_ELEMENTS = new Set([
+	":before",
+	":after",
+	":first-line",
+	":first-letter"
+]);
+function firstStateCondition(selector) {
+	let root;
+	try {
+		root = selectorParser().astSync(selector);
+	} catch {
+		return null;
+	}
+	let condition = null;
+	root.walk((node) => {
+		if (node.type === "attribute") {
+			if (node.attribute === "data-element" && !node.namespace && node.operator === "=" && node.value) return;
+		} else if (node.type === "pseudo") {
+			let name = node.value.toLowerCase();
+			if (name.includes("\\")) {
+				const colons = name.startsWith("::") ? "::" : ":";
+				const identifier = selectorParser().astSync(name.slice(colons.length)).first?.first;
+				if (identifier?.type === "tag") name = colons + identifier.value.toLowerCase();
+			}
+			if (name.startsWith("::") || LEGACY_PSEUDO_ELEMENTS.has(name) || STRUCTURAL_PSEUDOS.has(name)) return;
+		} else return;
+		condition = node.toString().trim();
+		return false;
+	});
+	return condition;
+}
+var no_state_in_selector_default = createRule({
+	name: "no-state-in-selector",
+	meta: {
+		type: "suggestion",
+		docs: { description: "Keep sub-element selectors structural and express conditions in property state maps" },
+		messages: { stateInSelector: "Move state condition '{{condition}}' out of the sub-element '$' selector and into property state maps. Use @own(...) for the sub-element's own state." },
+		schema: []
+	},
+	defaultOptions: [],
+	create(context) {
+		const ctx = new TastyContext(context);
+		const visited = /* @__PURE__ */ new WeakSet();
+		function handleStyleObject(node) {
+			if (visited.has(node) || !ctx.isStyleObject(node)) return;
+			visited.add(node);
+			const isSubElement = ctx.isInsideSubElement(node);
+			for (const prop of node.properties) {
+				if (prop.type !== "Property") continue;
+				const key = prop.computed ? getStringValue(unwrapExpression(prop.key)) : getKeyName(prop.key);
+				if (!prop.computed && key && ctx.isSubElementKey(key)) {
+					const child = unwrapExpression(prop.value);
+					if (child.type === "ObjectExpression") handleStyleObject(child);
+				}
+				if (!isSubElement || key !== "$") continue;
+				const selector = getStringValue(unwrapExpression(prop.value));
+				if (selector === null) continue;
+				const condition = firstStateCondition(selector);
+				if (condition === null) continue;
+				context.report({
+					node: prop.value,
+					messageId: "stateInSelector",
+					data: { condition }
+				});
+			}
+		}
+		return {
+			ImportDeclaration(node) {
+				ctx.trackImport(node);
+			},
+			...styleObjectListeners(handleStyleObject)
+		};
+	}
+});
+
+//#endregion
+export { no_state_in_selector_default as default };
+//# sourceMappingURL=no-state-in-selector.js.map

package/dist/rules/no-state-in-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"no-state-in-selector.js","names":[],"sources":["../../src/rules/no-state-in-selector.ts"],"sourcesContent":["import type { TSESTree } from '@typescript-eslint/utils';\nimport selectorParser from 'postcss-selector-parser';\nimport { createRule } from '../create-rule.js';\nimport { TastyContext, styleObjectListeners } from '../context.js';\nimport { getKeyName, getStringValue, unwrapExpression } from '../utils.js';\n\nconst STRUCTURAL_PSEUDOS = new Set([':is', ':where']);\nconst LEGACY_PSEUDO_ELEMENTS = new Set([\n  ':before',\n  ':after',\n  ':first-line',\n  ':first-letter',\n]);\n\nfunction firstStateCondition(selector: string): string | null {\n  let root: selectorParser.Root;\n  try {\n    root = selectorParser().astSync(selector);\n  } catch {\n    // This recommendation is not a CSS syntax validator. Incomplete selectors\n    // must not crash lint or produce a misleading state-map recommendation.\n    return null;\n  }\n\n  let condition: string | null = null;\n  root.walk((node) => {\n    if (node.type === 'attribute') {\n      // An exact data-element identity is structural, like Tasty's uppercase\n      // element names. Other attributes express conditions on that element.\n      if (\n        node.attribute === 'data-element' &&\n        !node.namespace &&\n        node.operator === '=' &&\n        node.value\n      ) {\n        return;\n      }\n    } else if (node.type === 'pseudo') {\n      let name = node.value.toLowerCase();\n      if (name.includes('\\\\')) {\n        // The parser decodes tag identifiers but preserves pseudo spelling.\n        const colons = name.startsWith('::') ? '::' : ':';\n        const identifier = selectorParser().astSync(name.slice(colons.length))\n          .first?.first;\n        if (identifier?.type === 'tag') {\n          name = colons + identifier.value.toLowerCase();\n        }\n      }\n      if (\n        name.startsWith('::') ||\n        LEGACY_PSEUDO_ELEMENTS.has(name) ||\n        STRUCTURAL_PSEUDOS.has(name)\n      ) {\n        // Continue walking: :where(img:hover) and ::slotted(img[width])\n        // still contain conditions, although the outer wrapper is structural.\n        return;\n      }\n    } else {\n      return;\n    }\n\n    condition = node.toString().trim();\n    return false;\n  });\n  return condition;\n}\n\nexport default createRule<[], 'stateInSelector'>({\n  name: 'no-state-in-selector',\n  meta: {\n    type: 'suggestion',\n    docs: {\n      description:\n        'Keep sub-element selectors structural and express conditions in property state maps',\n    },\n    messages: {\n      stateInSelector:\n        \"Move state condition '{{condition}}' out of the sub-element '$' selector and into property state maps. Use @own(...) for the sub-element's own state.\",\n    },\n    schema: [],\n  },\n  defaultOptions: [],\n  create(context) {\n    const ctx = new TastyContext(context);\n    const visited = new WeakSet<TSESTree.ObjectExpression>();\n\n    function handleStyleObject(node: TSESTree.ObjectExpression) {\n      if (visited.has(node) || !ctx.isStyleObject(node)) return;\n      visited.add(node);\n      const isSubElement = ctx.isInsideSubElement(node);\n\n      for (const prop of node.properties) {\n        if (prop.type !== 'Property') continue;\n        const key = prop.computed\n          ? getStringValue(unwrapExpression(prop.key))\n          : getKeyName(prop.key);\n        // Some listeners match only the shared/JSX root. Follow its owned\n        // sub-elements explicitly, without entering state maps or metadata.\n        if (!prop.computed && key && ctx.isSubElementKey(key)) {\n          const child = unwrapExpression(prop.value);\n          if (child.type === 'ObjectExpression') handleStyleObject(child);\n        }\n        if (!isSubElement || key !== '$') continue;\n\n        const selector = getStringValue(unwrapExpression(prop.value));\n        if (selector === null) continue;\n        const condition = firstStateCondition(selector);\n        if (condition === null) continue;\n\n        context.report({\n          node: prop.value,\n          messageId: 'stateInSelector',\n          data: { condition },\n        });\n      }\n    }\n\n    return {\n      ImportDeclaration(node) {\n        ctx.trackImport(node);\n      },\n      ...styleObjectListeners(handleStyleObject),\n    };\n  },\n});\n"],"mappings":";;;;;;AAMA,MAAM,qBAAqB,IAAI,IAAI,CAAC,OAAO,SAAS,CAAC;AACrD,MAAM,yBAAyB,IAAI,IAAI;CACrC;CACA;CACA;CACA;CACD,CAAC;AAEF,SAAS,oBAAoB,UAAiC;CAC5D,IAAI;AACJ,KAAI;AACF,SAAO,gBAAgB,CAAC,QAAQ,SAAS;SACnC;AAGN,SAAO;;CAGT,IAAI,YAA2B;AAC/B,MAAK,MAAM,SAAS;AAClB,MAAI,KAAK,SAAS,aAGhB;OACE,KAAK,cAAc,kBACnB,CAAC,KAAK,aACN,KAAK,aAAa,OAClB,KAAK,MAEL;aAEO,KAAK,SAAS,UAAU;GACjC,IAAI,OAAO,KAAK,MAAM,aAAa;AACnC,OAAI,KAAK,SAAS,KAAK,EAAE;IAEvB,MAAM,SAAS,KAAK,WAAW,KAAK,GAAG,OAAO;IAC9C,MAAM,aAAa,gBAAgB,CAAC,QAAQ,KAAK,MAAM,OAAO,OAAO,CAAC,CACnE,OAAO;AACV,QAAI,YAAY,SAAS,MACvB,QAAO,SAAS,WAAW,MAAM,aAAa;;AAGlD,OACE,KAAK,WAAW,KAAK,IACrB,uBAAuB,IAAI,KAAK,IAChC,mBAAmB,IAAI,KAAK,CAI5B;QAGF;AAGF,cAAY,KAAK,UAAU,CAAC,MAAM;AAClC,SAAO;GACP;AACF,QAAO;;AAGT,mCAAe,WAAkC;CAC/C,MAAM;CACN,MAAM;EACJ,MAAM;EACN,MAAM,EACJ,aACE,uFACH;EACD,UAAU,EACR,iBACE,yJACH;EACD,QAAQ,EAAE;EACX;CACD,gBAAgB,EAAE;CAClB,OAAO,SAAS;EACd,MAAM,MAAM,IAAI,aAAa,QAAQ;EACrC,MAAM,0BAAU,IAAI,SAAoC;EAExD,SAAS,kBAAkB,MAAiC;AAC1D,OAAI,QAAQ,IAAI,KAAK,IAAI,CAAC,IAAI,cAAc,KAAK,CAAE;AACnD,WAAQ,IAAI,KAAK;GACjB,MAAM,eAAe,IAAI,mBAAmB,KAAK;AAEjD,QAAK,MAAM,QAAQ,KAAK,YAAY;AAClC,QAAI,KAAK,SAAS,WAAY;IAC9B,MAAM,MAAM,KAAK,WACb,eAAe,iBAAiB,KAAK,IAAI,CAAC,GAC1C,WAAW,KAAK,IAAI;AAGxB,QAAI,CAAC,KAAK,YAAY,OAAO,IAAI,gBAAgB,IAAI,EAAE;KACrD,MAAM,QAAQ,iBAAiB,KAAK,MAAM;AAC1C,SAAI,MAAM,SAAS,mBAAoB,mBAAkB,MAAM;;AAEjE,QAAI,CAAC,gBAAgB,QAAQ,IAAK;IAElC,MAAM,WAAW,eAAe,iBAAiB,KAAK,MAAM,CAAC;AAC7D,QAAI,aAAa,KAAM;IACvB,MAAM,YAAY,oBAAoB,SAAS;AAC/C,QAAI,cAAc,KAAM;AAExB,YAAQ,OAAO;KACb,MAAM,KAAK;KACX,WAAW;KACX,MAAM,EAAE,WAAW;KACpB,CAAC;;;AAIN,SAAO;GACL,kBAAkB,MAAM;AACtB,QAAI,YAAY,KAAK;;GAEvB,GAAG,qBAAqB,kBAAkB;GAC3C;;CAEJ,CAAC"}

package/dist/rules/prefer-element-selector.js

@@ -0,0 +1,101 @@
+import { createRule } from "../create-rule.js";
+import { getKeyName, getStringValue, unwrapExpression } from "../utils.js";
+import { TastyContext, styleObjectListeners } from "../context.js";
+import { replaceInStringValue } from "../fix-utils.js";
+import selectorParser from "postcss-selector-parser";
+
+//#region src/rules/prefer-element-selector.ts
+function elementEdits(selector, owner) {
+	if (selector.includes("\\") || selector.includes("/*")) return [];
+	try {
+		const root = selectorParser().astSync(selector);
+		const edits = [];
+		for (const branch of root.nodes) {
+			if (branch.nodes.some((node, index) => {
+				switch (node.type) {
+					case "nesting": return index !== 0;
+					case "tag": return !/^[A-Za-z][a-zA-Z0-9-]*$/.test(node.value);
+					case "combinator": return !/^(?:\s+|[>+~])$/.test(node.value);
+					case "attribute": return node.toString().includes(",");
+					case "class":
+					case "universal": return false;
+					default: return true;
+				}
+			})) continue;
+			for (const [index, node] of branch.nodes.entries()) {
+				if (node.type !== "attribute") continue;
+				const previous = branch.nodes[index - 1];
+				if (previous && previous.type !== "nesting" && !(previous.type === "combinator" && /^[>+~]$/.test(previous.value))) continue;
+				const match = selector.slice(node.sourceIndex).match(/^\[\s*data-element\s*=\s*(?:"([A-Z][a-zA-Z0-9]*)"|'([A-Z][a-zA-Z0-9]*)'|([A-Z][a-zA-Z0-9]*))\s*\]/);
+				if (!match) continue;
+				if (/^[a-zA-Z0-9]/.test(selector.slice(node.sourceIndex + match[0].length))) continue;
+				const name = match[1] ?? match[2] ?? match[3];
+				if (index === branch.nodes.length - 1 && name !== owner) continue;
+				edits.push({
+					start: node.sourceIndex,
+					end: node.sourceIndex + match[0].length,
+					replacement: name
+				});
+			}
+		}
+		return edits;
+	} catch {
+		return [];
+	}
+}
+var prefer_element_selector_default = createRule({
+	name: "prefer-element-selector",
+	meta: {
+		type: "suggestion",
+		docs: { description: "Prefer Tasty element names over exact data-element selectors" },
+		fixable: "code",
+		messages: { preferElementSelector: "Use Tasty element names instead of explicit data-element attributes in this sub-element '$' selector." },
+		schema: []
+	},
+	defaultOptions: [],
+	create(context) {
+		const ctx = new TastyContext(context);
+		const visited = /* @__PURE__ */ new WeakSet();
+		function checkAffix(owner, node) {
+			for (const prop of node.properties) {
+				if (prop.type !== "Property") continue;
+				if ((prop.computed ? getStringValue(unwrapExpression(prop.key)) : getKeyName(prop.key)) !== "$") continue;
+				const value = unwrapExpression(prop.value);
+				const selector = getStringValue(value);
+				if (selector === null) continue;
+				const edits = elementEdits(selector, owner);
+				if (!edits.length) continue;
+				context.report({
+					node: prop.value,
+					messageId: "preferElementSelector",
+					fix: (fixer) => replaceInStringValue(fixer, value, edits, context.sourceCode)
+				});
+			}
+		}
+		function checkStyleObject(node) {
+			if (visited.has(node)) return;
+			visited.add(node);
+			for (const prop of node.properties) {
+				if (prop.type !== "Property") continue;
+				const key = prop.computed ? getStringValue(unwrapExpression(prop.key)) : getKeyName(prop.key);
+				if (key === null || !ctx.isSubElementKey(key)) continue;
+				const value = unwrapExpression(prop.value);
+				if (value.type !== "ObjectExpression") continue;
+				checkAffix(key, value);
+				checkStyleObject(value);
+			}
+		}
+		return {
+			ImportDeclaration(node) {
+				ctx.trackImport(node);
+			},
+			...styleObjectListeners((node) => {
+				if (ctx.isStyleObject(node)) checkStyleObject(node);
+			})
+		};
+	}
+});
+
+//#endregion
+export { prefer_element_selector_default as default };
+//# sourceMappingURL=prefer-element-selector.js.map

package/dist/rules/prefer-element-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prefer-element-selector.js","names":[],"sources":["../../src/rules/prefer-element-selector.ts"],"sourcesContent":["import type { TSESTree } from '@typescript-eslint/utils';\nimport selectorParser from 'postcss-selector-parser';\nimport { createRule } from '../create-rule.js';\nimport { TastyContext, styleObjectListeners } from '../context.js';\nimport { replaceInStringValue, type StringEdit } from '../fix-utils.js';\nimport { getKeyName, getStringValue, unwrapExpression } from '../utils.js';\n\nfunction elementEdits(selector: string, owner: string): StringEdit[] {\n  // Tasty's affix tokenizer does not implement the full CSS grammar. Keep\n  // escapes, comments and functional pseudo arguments out of this rewrite.\n  if (selector.includes('\\\\') || selector.includes('/*')) return [];\n  try {\n    const root = selectorParser().astSync(selector);\n    const edits: StringEdit[] = [];\n    for (const branch of root.nodes) {\n      if (\n        branch.nodes.some((node, index) => {\n          switch (node.type) {\n            case 'nesting':\n              return index !== 0;\n            case 'tag':\n              return !/^[A-Za-z][a-zA-Z0-9-]*$/.test(node.value);\n            case 'combinator':\n              return !/^(?:\\s+|[>+~])$/.test(node.value);\n            case 'attribute':\n              return node.toString().includes(',');\n            case 'class':\n            case 'universal':\n              return false;\n            default:\n              return true;\n          }\n        })\n      )\n        continue;\n\n      for (const [index, node] of branch.nodes.entries()) {\n        if (node.type !== 'attribute') continue;\n        const previous = branch.nodes[index - 1];\n        // Uppercase names insert a separator. Attributes within a compound\n        // (including whitespace that Tasty ignores) must remain attributes.\n        if (\n          previous &&\n          previous.type !== 'nesting' &&\n          !(previous.type === 'combinator' && /^[>+~]$/.test(previous.value))\n        )\n          continue;\n\n        // Match the raw spelling too: CSS flags, namespaces, escapes and\n        // unsupported element names do not have equivalent Tasty shorthand.\n        const match = selector\n          .slice(node.sourceIndex)\n          .match(\n            /^\\[\\s*data-element\\s*=\\s*(?:\"([A-Z][a-zA-Z0-9]*)\"|'([A-Z][a-zA-Z0-9]*)'|([A-Z][a-zA-Z0-9]*))\\s*\\]/,\n          );\n        if (!match) continue;\n        // Without authored whitespace, the replacement could merge with a\n        // following tag/element name: [data-element=\"Primary\"]Search.\n        if (\n          /^[a-zA-Z0-9]/.test(\n            selector.slice(node.sourceIndex + match[0].length),\n          )\n        )\n          continue;\n        const name = match[1] ?? match[2] ?? match[3];\n        // A different trailing name would append the owner's descendant.\n        // Keep that final attribute, while still shortening safe ancestors.\n        if (index === branch.nodes.length - 1 && name !== owner) continue;\n        edits.push({\n          start: node.sourceIndex,\n          end: node.sourceIndex + match[0].length,\n          replacement: name,\n        });\n      }\n    }\n    return edits;\n  } catch {\n    return [];\n  }\n}\n\nexport default createRule<[], 'preferElementSelector'>({\n  name: 'prefer-element-selector',\n  meta: {\n    type: 'suggestion',\n    docs: {\n      description:\n        'Prefer Tasty element names over exact data-element selectors',\n    },\n    fixable: 'code',\n    messages: {\n      preferElementSelector:\n        \"Use Tasty element names instead of explicit data-element attributes in this sub-element '$' selector.\",\n    },\n    schema: [],\n  },\n  defaultOptions: [],\n  create(context) {\n    const ctx = new TastyContext(context);\n    const visited = new WeakSet<TSESTree.ObjectExpression>();\n\n    function checkAffix(owner: string, node: TSESTree.ObjectExpression) {\n      for (const prop of node.properties) {\n        if (prop.type !== 'Property') continue;\n        const key = prop.computed\n          ? getStringValue(unwrapExpression(prop.key))\n          : getKeyName(prop.key);\n        if (key !== '$') continue;\n        const value = unwrapExpression(prop.value);\n        const selector = getStringValue(value);\n        if (selector === null) continue;\n        const edits = elementEdits(selector, owner);\n        if (!edits.length) continue;\n        context.report({\n          node: prop.value,\n          messageId: 'preferElementSelector',\n          fix: (fixer) =>\n            replaceInStringValue(fixer, value, edits, context.sourceCode),\n        });\n      }\n    }\n\n    function checkStyleObject(node: TSESTree.ObjectExpression) {\n      if (visited.has(node)) return;\n      visited.add(node);\n      for (const prop of node.properties) {\n        if (prop.type !== 'Property') continue;\n        const key = prop.computed\n          ? getStringValue(unwrapExpression(prop.key))\n          : getKeyName(prop.key);\n        if (key === null || !ctx.isSubElementKey(key)) continue;\n        const value = unwrapExpression(prop.value);\n        if (value.type !== 'ObjectExpression') continue;\n        checkAffix(key, value);\n        checkStyleObject(value);\n      }\n    }\n\n    return {\n      ImportDeclaration(node) {\n        ctx.trackImport(node);\n      },\n      ...styleObjectListeners((node) => {\n        if (ctx.isStyleObject(node)) checkStyleObject(node);\n      }),\n    };\n  },\n});\n"],"mappings":"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"}

package/dist/rules/valid-sub-element.js

@@ -1,27 +1,100 @@
 import { createRule } from "../create-rule.js";
-import { getKeyName, unwrapExpression } from "../utils.js";
+import { getKeyName, getStringValue, unwrapExpression } from "../utils.js";
 import { TastyContext, styleObjectListeners } from "../context.js";
+import selectorParser from "postcss-selector-parser";
 
 //#region src/rules/valid-sub-element.ts
+const LEGACY_PSEUDO_ELEMENTS = new Set([
+	":before",
+	":after",
+	":first-line",
+	":first-letter"
+]);
+function hasDescendantTarget(nodes) {
+	let lastCharacter = "";
+	for (const node of nodes.slice(1)) {
+		if (node.type === "combinator") {
+			if (node.value.trim()) return true;
+			continue;
+		}
+		if (node.type === "tag" || node.type === "universal") {
+			if (lastCharacter) return true;
+		} else if (node.type === "class" || node.type === "attribute") {
+			if (lastCharacter && !/[\]@a-zA-Z0-9-]/.test(lastCharacter)) return true;
+		}
+		lastCharacter = node.toString().trim().slice(-1);
+	}
+	return false;
+}
+function firstRootSelector(selector, key) {
+	try {
+		const root = selectorParser().astSync(selector);
+		for (const branch of root.nodes) {
+			const nodes = branch.nodes.filter((node) => node.type !== "comment");
+			if (nodes[0]?.type !== "nesting" || nodes.length < 2) continue;
+			if (nodes.some((node) => node.type === "tag" && node.value.startsWith("@"))) continue;
+			const trailingElement = branch.toString().trim().slice(1).trim().match(/(?:^|[\s>+~\]:])([A-Z][a-zA-Z0-9]*)$/);
+			if (trailingElement && trailingElement[1] !== key) continue;
+			if (hasDescendantTarget(nodes)) continue;
+			if (!nodes.some((node) => {
+				if (node.type !== "pseudo") return false;
+				let name = node.value.toLowerCase();
+				if (name.startsWith("::")) return true;
+				if (name.includes("\\")) {
+					const identifier = selectorParser().astSync(name.slice(1)).first?.first;
+					if (identifier?.type === "tag") name = ":" + identifier.value.toLowerCase();
+				}
+				return LEGACY_PSEUDO_ELEMENTS.has(name);
+			})) return branch.toString().trim();
+		}
+	} catch {}
+	return null;
+}
 var valid_sub_element_default = createRule({
 	name: "valid-sub-element",
 	meta: {
 		type: "problem",
-		docs: { description: "Validate sub-element key format in style objects" },
-		messages: { subElementNotObject: "Sub-element '{{name}}' value must be a style object, not a {{type}}." },
+		docs: { description: "Validate sub-element values and prevent root-targeting affixes" },
+		messages: {
+			subElementNotObject: "Sub-element '{{name}}' value must be a style object, not a {{type}}.",
+			subElementTargetsRoot: "Sub-element '{{name}}' selector '{{selector}}' styles the containing element instead of a sub-element. Use property state maps in that containing scope, or a descendant '$' selector such as 'h1'. Pseudo-elements such as '&::before' are allowed."
+		},
 		schema: []
 	},
 	defaultOptions: [],
 	create(context) {
 		const ctx = new TastyContext(context);
-		function handleStyleObject(node) {
-			if (!ctx.isStyleObject(node)) return;
+		const visited = /* @__PURE__ */ new WeakSet();
+		function checkAffix(name, node) {
 			for (const prop of node.properties) {
-				if (prop.type !== "Property" || prop.computed) continue;
-				const key = getKeyName(prop.key);
+				if (prop.type !== "Property") continue;
+				if ((prop.computed ? getStringValue(unwrapExpression(prop.key)) : getKeyName(prop.key)) !== "$") continue;
+				const selector = getStringValue(unwrapExpression(prop.value));
+				if (selector === null) continue;
+				const rootSelector = firstRootSelector(selector, name);
+				if (rootSelector === null) continue;
+				context.report({
+					node: prop.value,
+					messageId: "subElementTargetsRoot",
+					data: {
+						name,
+						selector: rootSelector
+					}
+				});
+			}
+		}
+		function checkStyleObject(node) {
+			if (visited.has(node)) return;
+			visited.add(node);
+			for (const prop of node.properties) {
+				if (prop.type !== "Property") continue;
+				const key = prop.computed ? getStringValue(unwrapExpression(prop.key)) : getKeyName(prop.key);
 				if (key === null || !/^[A-Z]/.test(key)) continue;
 				const value = unwrapExpression(prop.value);
-				if (value.type !== "ObjectExpression") {
+				if (value.type === "ObjectExpression") {
+					checkAffix(key, value);
+					checkStyleObject(value);
+				} else {
 					if (value.type === "Literal" && value.value === false) continue;
 					const valueType = value.type === "Literal" ? typeof value.value : value.type;
 					context.report({
@@ -35,6 +108,9 @@ var valid_sub_element_default = createRule({
 				}
 			}
 		}
+		function handleStyleObject(node) {
+			if (ctx.isStyleObject(node)) checkStyleObject(node);
+		}
 		return {
 			ImportDeclaration(node) {
 				ctx.trackImport(node);

package/dist/rules/valid-sub-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"valid-sub-element.js","names":[],"sources":["../../src/rules/valid-sub-element.ts"],"sourcesContent":["import type { TSESTree } from '@typescript-eslint/utils';\nimport { createRule } from '../create-rule.js';\nimport { TastyContext, styleObjectListeners } from '../context.js';\nimport { getKeyName, unwrapExpression } from '../utils.js';\n\ntype MessageIds = 'subElementNotObject';\n\nexport default createRule<[], MessageIds>({\n  name: 'valid-sub-element',\n  meta: {\n    type: 'problem',\n    docs: {\n      description: 'Validate sub-element key format in style objects',\n    },\n    messages: {\n      subElementNotObject:\n        \"Sub-element '{{name}}' value must be a style object, not a {{type}}.\",\n    },\n    schema: [],\n  },\n  defaultOptions: [],\n  create(context) {\n    const ctx = new TastyContext(context);\n\n    function handleStyleObject(node: TSESTree.ObjectExpression) {\n      if (!ctx.isStyleObject(node)) return;\n\n      for (const prop of node.properties) {\n        if (prop.type !== 'Property' || prop.computed) continue;\n\n        const key = getKeyName(prop.key);\n        if (key === null || !/^[A-Z]/.test(key)) continue;\n\n        const value = unwrapExpression(prop.value);\n        if (value.type !== 'ObjectExpression') {\n          if (value.type === 'Literal' && value.value === false) {\n            continue;\n          }\n\n          const valueType =\n            value.type === 'Literal' ? typeof value.value : value.type;\n\n          context.report({\n            node: prop.value,\n            messageId: 'subElementNotObject',\n            data: { name: key, type: valueType },\n          });\n        }\n      }\n    }\n\n    return {\n      ImportDeclaration(node) {\n        ctx.trackImport(node);\n      },\n      ...styleObjectListeners(handleStyleObject),\n    };\n  },\n});\n"],"mappings":";;;;;AAOA,gCAAe,WAA2B;CACxC,MAAM;CACN,MAAM;EACJ,MAAM;EACN,MAAM,EACJ,aAAa,oDACd;EACD,UAAU,EACR,qBACE,wEACH;EACD,QAAQ,EAAE;EACX;CACD,gBAAgB,EAAE;CAClB,OAAO,SAAS;EACd,MAAM,MAAM,IAAI,aAAa,QAAQ;EAErC,SAAS,kBAAkB,MAAiC;AAC1D,OAAI,CAAC,IAAI,cAAc,KAAK,CAAE;AAE9B,QAAK,MAAM,QAAQ,KAAK,YAAY;AAClC,QAAI,KAAK,SAAS,cAAc,KAAK,SAAU;IAE/C,MAAM,MAAM,WAAW,KAAK,IAAI;AAChC,QAAI,QAAQ,QAAQ,CAAC,SAAS,KAAK,IAAI,CAAE;IAEzC,MAAM,QAAQ,iBAAiB,KAAK,MAAM;AAC1C,QAAI,MAAM,SAAS,oBAAoB;AACrC,SAAI,MAAM,SAAS,aAAa,MAAM,UAAU,MAC9C;KAGF,MAAM,YACJ,MAAM,SAAS,YAAY,OAAO,MAAM,QAAQ,MAAM;AAExD,aAAQ,OAAO;MACb,MAAM,KAAK;MACX,WAAW;MACX,MAAM;OAAE,MAAM;OAAK,MAAM;OAAW;MACrC,CAAC;;;;AAKR,SAAO;GACL,kBAAkB,MAAM;AACtB,QAAI,YAAY,KAAK;;GAEvB,GAAG,qBAAqB,kBAAkB;GAC3C;;CAEJ,CAAC"}
+{"version":3,"file":"valid-sub-element.js","names":[],"sources":["../../src/rules/valid-sub-element.ts"],"sourcesContent":["import type { TSESTree } from '@typescript-eslint/utils';\nimport selectorParser from 'postcss-selector-parser';\nimport { createRule } from '../create-rule.js';\nimport { TastyContext, styleObjectListeners } from '../context.js';\nimport { getKeyName, getStringValue, unwrapExpression } from '../utils.js';\n\ntype MessageIds = 'subElementNotObject' | 'subElementTargetsRoot';\n\nconst LEGACY_PSEUDO_ELEMENTS = new Set([\n  ':before',\n  ':after',\n  ':first-line',\n  ':first-letter',\n]);\n\nfunction hasDescendantTarget(nodes: selectorParser.Node[]): boolean {\n  let lastCharacter = '';\n  for (const node of nodes.slice(1)) {\n    if (node.type === 'combinator') {\n      if (node.value.trim()) return true;\n      // The affix renderer skips authored whitespace. Tags insert their own\n      // separator; pseudos attach directly, and classes/attributes attach\n      // after a tag, class, attribute or placeholder.\n      continue;\n    }\n    if (node.type === 'tag' || node.type === 'universal') {\n      if (lastCharacter) return true;\n    } else if (node.type === 'class' || node.type === 'attribute') {\n      if (lastCharacter && !/[\\]@a-zA-Z0-9-]/.test(lastCharacter)) return true;\n    }\n    lastCharacter = node.toString().trim().slice(-1);\n  }\n  return false;\n}\n\nfunction firstRootSelector(selector: string, key: string): string | null {\n  try {\n    const root = selectorParser().astSync(selector);\n    for (const branch of root.nodes) {\n      const nodes = branch.nodes.filter((node) => node.type !== 'comment');\n      if (nodes[0]?.type !== 'nesting' || nodes.length < 2) continue;\n      // An explicit placeholder creates a descendant selector even with an\n      // ampersand prefix. A different trailing uppercase name injects the key\n      // as its descendant; the sub-element's own name does not.\n      if (\n        nodes.some((node) => node.type === 'tag' && node.value.startsWith('@'))\n      )\n        continue;\n      const trailingElement = branch\n        .toString()\n        .trim()\n        .slice(1)\n        .trim()\n        .match(/(?:^|[\\s>+~\\]:])([A-Z][a-zA-Z0-9]*)$/);\n      if (trailingElement && trailingElement[1] !== key) continue;\n      // Follow Tasty's affix normalization, rather than CSS whitespace alone.\n      // Nested :is() arguments do not change the outer selector's target.\n      if (hasDescendantTarget(nodes)) continue;\n      const hasPseudoElement = nodes.some((node) => {\n        if (node.type !== 'pseudo') return false;\n        let name = node.value.toLowerCase();\n        if (name.startsWith('::')) return true;\n        if (name.includes('\\\\')) {\n          const identifier = selectorParser().astSync(name.slice(1)).first\n            ?.first;\n          if (identifier?.type === 'tag')\n            name = ':' + identifier.value.toLowerCase();\n        }\n        return LEGACY_PSEUDO_ELEMENTS.has(name);\n      });\n      if (!hasPseudoElement) return branch.toString().trim();\n    }\n  } catch {\n    // Invalid/incomplete selector text belongs to syntax validation.\n  }\n  return null;\n}\n\nexport default createRule<[], MessageIds>({\n  name: 'valid-sub-element',\n  meta: {\n    type: 'problem',\n    docs: {\n      description:\n        'Validate sub-element values and prevent root-targeting affixes',\n    },\n    messages: {\n      subElementNotObject:\n        \"Sub-element '{{name}}' value must be a style object, not a {{type}}.\",\n      subElementTargetsRoot:\n        \"Sub-element '{{name}}' selector '{{selector}}' styles the containing element instead of a sub-element. Use property state maps in that containing scope, or a descendant '$' selector such as 'h1'. Pseudo-elements such as '&::before' are allowed.\",\n    },\n    schema: [],\n  },\n  defaultOptions: [],\n  create(context) {\n    const ctx = new TastyContext(context);\n    const visited = new WeakSet<TSESTree.ObjectExpression>();\n\n    function checkAffix(name: string, node: TSESTree.ObjectExpression) {\n      for (const prop of node.properties) {\n        if (prop.type !== 'Property') continue;\n        const key = prop.computed\n          ? getStringValue(unwrapExpression(prop.key))\n          : getKeyName(prop.key);\n        if (key !== '$') continue;\n        const selector = getStringValue(unwrapExpression(prop.value));\n        if (selector === null) continue;\n        const rootSelector = firstRootSelector(selector, name);\n        if (rootSelector === null) continue;\n        context.report({\n          node: prop.value,\n          messageId: 'subElementTargetsRoot',\n          data: { name, selector: rootSelector },\n        });\n      }\n    }\n\n    // Recurse only through owned sub-elements. Some shared/JSX listeners match\n    // just the root, and descriptor objects and state maps are not styles.\n    function checkStyleObject(node: TSESTree.ObjectExpression) {\n      if (visited.has(node)) return;\n      visited.add(node);\n\n      for (const prop of node.properties) {\n        if (prop.type !== 'Property') continue;\n\n        const key = prop.computed\n          ? getStringValue(unwrapExpression(prop.key))\n          : getKeyName(prop.key);\n        if (key === null || !/^[A-Z]/.test(key)) continue;\n\n        const value = unwrapExpression(prop.value);\n        if (value.type === 'ObjectExpression') {\n          checkAffix(key, value);\n          checkStyleObject(value);\n        } else {\n          if (value.type === 'Literal' && value.value === false) {\n            continue;\n          }\n\n          const valueType =\n            value.type === 'Literal' ? typeof value.value : value.type;\n\n          context.report({\n            node: prop.value,\n            messageId: 'subElementNotObject',\n            data: { name: key, type: valueType },\n          });\n        }\n      }\n    }\n\n    function handleStyleObject(node: TSESTree.ObjectExpression) {\n      if (ctx.isStyleObject(node)) checkStyleObject(node);\n    }\n\n    return {\n      ImportDeclaration(node) {\n        ctx.trackImport(node);\n      },\n      ...styleObjectListeners(handleStyleObject),\n    };\n  },\n});\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenphi/eslint-plugin-tasty",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "ESLint plugin for validating tasty() and tastyStatic() style objects",
   "type": "module",
   "exports": {
@@ -44,7 +44,8 @@
   },
   "dependencies": {
     "@typescript-eslint/utils": "^8.56.0",
-    "jiti": "^2.6.1"
+    "jiti": "^2.6.1",
+    "postcss-selector-parser": "^7.1.6"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.2",