@tenphi/eslint-plugin-tasty

ESLint plugin for validating tasty(), tastyStatic(), useStyles(), useGlobalStyles(), and related APIs from @tenphi/tasty.

Catch typos, invalid syntax, and enforce best practices in your tasty style objects at lint time.

Targets @tenphi/tasty v3. v1 of this plugin validates the v3 style DSL: kebab-case at-rule keys (@property, @font-face, @counter-style, @function), $$name(...) CSS-function calls, and one value per directional group. The v2 at-rule spellings are reported with an auto-fix, so eslint --fix handles most of the upgrade. For tasty v2, pin @tenphi/eslint-plugin-tasty@^0.11.

Installation

pnpm add -D @tenphi/eslint-plugin-tasty

Usage

ESLint Flat Config (ESLint 9+)

// eslint.config.js
import tasty from '@tenphi/eslint-plugin-tasty';

export default [
  tasty.configs.recommended,
  // your other configs...
];

For stricter checks:

import tasty from '@tenphi/eslint-plugin-tasty';

export default [
  tasty.configs.strict,
];

Manual Rule Configuration

import tasty from '@tenphi/eslint-plugin-tasty';

export default [
  {
    plugins: { tasty },
    rules: {
      'tasty/known-property': 'warn',
      'tasty/valid-value': 'error',
      'tasty/valid-color-token': 'error',
      // ...
    },
  },
];

Project Configuration

Create a tasty.config.ts (or .js, .json) at your project root to configure validation:

// tasty.config.ts
export default {
  tokens: ['#primary', '#danger', '#surface', '$spacing', '$gap'],
  units: ['cols'],
  functions: ['double', 'okhsl'],
  states: ['@mobile', '@tablet', '@dark'],
  presets: ['h1', 'h2', 'h3', 't1', 't2', 't3'],
  recipes: ['card', 'elevated', 'reset'],
  styles: ['glaze'],
  importSources: ['@my-org/design-system'],
};

Every list defaults to "don't check": omit tokens and token existence is not validated, set tokens: false to disable the check even though a parent config sets it. importSources matters when you re-export tasty() from your own module — the plugin only recognizes tasty({ styles }) when the call comes from a tracked import, so a local barrel needs listing here.

functions was called funcs before v1. The old spelling is still read as a deprecated alias.

Rules

Recommended

Rule	Severity	Description
tasty/known-property	warn	Unknown style property names (checked against the full MDN/W3C CSS property set)
tasty/valid-value	error	Malformed style values (unbalanced parens, !important)
tasty/valid-color-token	error	Invalid color token syntax or unknown tokens
tasty/valid-custom-unit	error	Unknown custom units
tasty/valid-boolean-property	error	true on properties that don't support it
tasty/valid-state-key	error	Invalid state key syntax in style mappings (including misuse of the _ fallback floor)
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-directional-modifier	error	Directional modifiers on wrong properties, and more than one value in a group that names directions
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/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)
tasty/no-own-at-root	warn	@own() used at root level where it is redundant
tasty/valid-default-state-order	warn	Misplaced default ('') or redundant '' when only _ is present
tasty/prefer-shorthand-property	warn	Use Tasty shorthand instead of native CSS properties (backgroundColor → fill, etc.)
tasty/no-raw-color-values	warn	Raw hex/rgb/okhsl/okhst/oklch/named colors instead of #color tokens
tasty/consistent-token-usage	warn	Raw px values when custom units or tokens exist
tasty/prefer-auto-calc	warn	calc(...) instead of Tasty auto-calc (...)
tasty/prefer-custom-property-syntax	warn	var(--prop) / $x-color / transparent / currentColor instead of $prop / #color / #clear / #current
tasty/prefer-hide	warn	display: 'none' instead of hide: true
tasty/prefer-directional-shorthand	warn	4-value margin/padding/inset/radius/fade/border with placeholder positions instead of directional form
tasty/prefer-longhand-property	error	Lossy flex shorthand instead of flexGrow / flexShrink / flexBasis

Strict (includes all recommended rules)

Rule	Severity	Description
tasty/valid-custom-property	warn	Unknown $name custom properties
tasty/valid-state-definition	warn	Invalid state definition values in configure() or tasty.config
tasty/no-unknown-state-alias	warn	Unknown @name state aliases
tasty/no-styles-prop	warn	Direct styles prop usage
tasty/no-runtime-styles-mutation	warn	Dynamic values in style objects

License

MIT