stillwind 0.0.0 → 0.1.0-rc.0

package/docs/lints/conflicting-provider-properties.md

@@ -0,0 +1,47 @@
+---
+title: "conflicting-provider-properties"
+description: "Reports a container or anchor property that a ref method and a utility both set."
+---
+
+# conflicting-provider-properties
+
+This rule reports a container or anchor property that a ref method, such as
+`asContainer()`, and another utility both set on the same element. For example,
+`asContainer("size")` sets `container-type: size`, and `@container` sets it to
+`inline-size`. Only one value takes effect, and the code does not show which.
+
+## Reported
+
+```tsx
+const card = style.ref("card");
+style(card, card.asContainer("size"), "@container");
+```
+
+> conflicting-provider-properties: provider use overlaps `container-type` from another source; their order is not guaranteed
+> 
+> Example:2:40
+> 
+> Example:2:13: overlapping property source
+
+## Fixed
+
+```tsx
+const card = style.ref("card");
+style(card, card.asContainer("size"));
+```
+
+## How to fix
+
+- Set the property in one place. With a ref, pass the container type to
+  `asContainer()`, and remove the utility, as in the example.
+- If you want the type from the utility, call `asContainer()` without a type.
+
+## Rule settings
+
+| Preset | Severity |
+| --- | --- |
+| `recommended` | warn |
+| `strict` | deny |
+| `stylistic` | off |
+
+[Configure lint](../configuration.md#lint) to change the severity or options.

package/docs/lints/conflicting-utilities.md

@@ -0,0 +1,55 @@
+---
+title: "conflicting-utilities"
+description: "Reports utilities that set the same CSS property under the same conditions, such as p-2 p-4."
+---
+
+# conflicting-utilities
+
+This rule reports two utilities that set the same CSS property under the same
+conditions. Only one of them takes effect. The order of the generated CSS decides
+which one, not the order in your code, so the code does not show the result.
+
+## Reported
+
+```tsx
+style("p-2 p-4");
+```
+
+> conflicting-utilities: utilities `p-2` and `p-4` overlap `padding`
+> 
+> Example:1:12
+> 
+> Example:1:8: previous utility
+
+## Fixed
+
+```tsx
+style("p-4");
+```
+
+## How to fix
+
+- Keep the utility that you want, and remove the other.
+- If the values belong to different states or widths, add a variant to one of
+  them, such as `p-2 md:p-4`.
+- If one utility overrides a shared style, pass the shared style as a base. See
+  [Override a style](../guides/style.md#override-a-style).
+
+## Options
+
+`allowShorthandOverrides` allows the supported overrides between a shorthand
+utility and a longhand utility. The rule still reports other conflicts.
+
+## Rule settings
+
+| Preset | Severity |
+| --- | --- |
+| `recommended` | warn |
+| `strict` | deny |
+| `stylistic` | off |
+
+| Option | Default |
+| --- | --- |
+| `allowShorthandOverrides` | `false` |
+
+[Configure lint](../configuration.md#lint) to change the severity or options.

package/docs/lints/document-scoped-selector.md

@@ -0,0 +1,45 @@
+---
+title: "document-scoped-selector"
+description: "Reports a selector variant that styles the whole document instead of the element."
+---
+
+# document-scoped-selector
+
+This rule reports a variant that replaces the element with a document-wide
+target, such as `[:root]:`. Stillwind compiles CSS statically, so including this
+declaration in your code affects the document even when the element is not
+rendered.
+
+## Reported
+
+```tsx
+style("[:root]:text-red-500");
+```
+
+> document-scoped-selector: `:root` does not depend on the styled element; declare document-wide CSS in a global stylesheet
+> 
+> Example:1:8
+
+## Fixed
+
+```css
+:root {
+  @apply text-red-500;
+}
+```
+
+## How to fix
+
+- To style the root of the page, write a rule in your stylesheet, as in the
+  example.
+- To style the element itself, remove the variant: `style("text-red-500")`.
+
+## Rule settings
+
+| Preset | Severity |
+| --- | --- |
+| `recommended` | deny |
+| `strict` | deny |
+| `stylistic` | off |
+
+[Configure lint](../configuration.md#lint) to change the severity or options.

package/docs/lints/duplicate-definition.md

@@ -0,0 +1,44 @@
+---
+title: "duplicate-definition"
+description: "Reports a utility or variant definition that replaces an earlier one with the same name."
+---
+
+# duplicate-definition
+
+This rule reports a `@utility` or `@custom-variant` definition that replaces an
+earlier definition with the same name. The definitions do not combine, so the
+earlier one is lost. In the example, `hocus` matches focus only, not hover.
+
+## Reported
+
+```css
+@custom-variant hocus (&:hover);
+@custom-variant hocus (&:focus);
+```
+
+> duplicate-definition: `@custom-variant hocus` is never used because a later definition with the same name replaces it
+> 
+> Example:1:17
+> 
+> Example:2:17: later definition
+
+## Fixed
+
+```css
+@custom-variant hocus (&:hover, &:focus);
+```
+
+## How to fix
+
+- To combine the definitions, write them as one definition, as in the example.
+- If one of the definitions is left over, remove it.
+
+## Rule settings
+
+| Preset | Severity |
+| --- | --- |
+| `recommended` | warn |
+| `strict` | deny |
+| `stylistic` | off |
+
+[Configure lint](../configuration.md#lint) to change the severity or options.

package/docs/lints/duplicate-utility.md

@@ -0,0 +1,44 @@
+---
+title: "duplicate-utility"
+description: "Reports the same utility written twice under the same conditions."
+---
+
+# duplicate-utility
+
+This rule reports a utility that appears twice under the same conditions, such as
+`p-4 p-4`. The second one adds nothing.
+
+## Reported
+
+```tsx
+style("p-4 p-4");
+```
+
+> duplicate-utility: utility `p-4` is repeated under the same conditions
+> 
+> Example:1:12
+> 
+> Example:1:8: previous utility
+
+## Fixed
+
+```tsx
+style("p-4");
+```
+
+## How to fix
+
+Remove one of them. The automatic fix removes the repeated utility.
+
+Two different utilities that set the same property are reported by
+[conflicting-utilities](conflicting-utilities.md) instead.
+
+## Rule settings
+
+| Preset | Severity |
+| --- | --- |
+| `recommended` | warn |
+| `strict` | deny |
+| `stylistic` | off |
+
+[Configure lint](../configuration.md#lint) to change the severity or options.

package/docs/lints/duplicate-view-transition-name.md

@@ -0,0 +1,45 @@
+---
+title: "duplicate-view-transition-name"
+description: "Reports two .for() calls in one style() call."
+---
+
+# duplicate-view-transition-name
+
+This rule reports a `style()` call with more than one `.for()`. An element has one
+`view-transition-name`, so only one of the names takes effect.
+
+## Reported
+
+```tsx
+const transition = style.viewTransition({ old: "duration-150" });
+style(transition.for("a"), transition.for("b"));
+```
+
+> duplicate-view-transition-name: 2 view-transition-name sources in one style() call; only one element value applies, and a runtime name wins
+> 
+> Example:2:1
+
+## Fixed
+
+```tsx
+const transition = style.viewTransition({ old: "duration-150" });
+style(transition.for("a"));
+```
+
+## How to fix
+
+- Keep one `.for()` for the element, as in the example.
+- If the names belong to different elements, give each element its own
+  `style()` call with its own `.for()`.
+- To combine several transitions on one element, pass the others without
+  `.for()`, such as `style(fade, slide.for("a"))`.
+
+## Rule settings
+
+| Preset | Severity |
+| --- | --- |
+| `recommended` | warn |
+| `strict` | deny |
+| `stylistic` | off |
+
+[Configure lint](../configuration.md#lint) to change the severity or options.

package/docs/lints/ignored-definition-condition.md

@@ -0,0 +1,51 @@
+---
+title: "ignored-definition-condition"
+description: "Reports a media rule around a utility definition, which the compiler ignores."
+---
+
+# ignored-definition-condition
+
+This rule reports a `@utility` definition inside a condition such as `@media`.
+The compiler registers utilities when it reads the stylesheet, not in the
+browser, so it ignores the condition. The utility then applies at every width.
+
+## Reported
+
+```css
+@media (width >= 40rem) {
+  @utility brand {
+    color: red;
+  }
+}
+```
+
+> ignored-definition-condition: `@utility` defines at compile time, so the enclosing condition is ignored; put conditions around `@stillwind-slot utilities;` instead
+> 
+> Example:2:3
+
+## Fixed
+
+```css
+@utility brand {
+  @media (width >= 40rem) {
+    color: red;
+  }
+}
+```
+
+## How to fix
+
+- Put the condition inside the body of the utility, as in the example. Then the
+  generated CSS keeps the condition.
+- Or define the utility without a condition, and apply it with a variant, such as
+  `md:brand`.
+
+## Rule settings
+
+| Preset | Severity |
+| --- | --- |
+| `recommended` | deny |
+| `strict` | deny |
+| `stylistic` | off |
+
+[Configure lint](../configuration.md#lint) to change the severity or options.

package/docs/lints/ignored-tailwind-feature.md

@@ -0,0 +1,62 @@
+---
+title: "ignored-tailwind-feature"
+description: "Reports Tailwind CSS features that Stillwind ignores in the stylesheet, such as @config and @source."
+---
+
+# ignored-tailwind-feature
+
+This rule reports a Tailwind CSS feature in your stylesheet that Stillwind
+ignores, such as `@config`, `@source`, or an option on `@import`. The line has
+no effect, because Stillwind reads its settings from `stillwind.config.ts` and
+generates utilities only from `style()` calls.
+
+## Reported
+
+```css
+@config "./tailwind.config.js";
+```
+
+> ignored-tailwind-feature: `@config` has no effect in Stillwind; set the project's `tailwind` field in stillwind.config.ts instead
+> 
+> Example:1:1
+
+## Fixed
+
+```ts title="stillwind.config.ts"
+import { defineConfig } from "stillwind/config";
+
+import tailwindConfig from "./tailwind.config.js";
+
+export default defineConfig({
+  projects: [
+    {
+      css: "./src/stillwind.css",
+      files: ["src/**/*.{ts,tsx}"],
+      tailwind: tailwindConfig,
+    },
+  ],
+});
+```
+
+## How to fix
+
+- Move the configuration to the `tailwind` field of the project in
+  `stillwind.config.ts`, as in the example, and remove `@config`.
+- Move an `important` option on `@import` to the `important` field.
+- Remove `@source`, and move each utility that it listed into a `style()` call.
+- Replace `@reference` with an `@import` in the stylesheet of the project.
+- Replace a v3 path in `theme()`, such as `theme(colors.red.500)`, with a theme
+  variable: `--theme(--color-red-500)`. Without this change, browsers reject the
+  declaration.
+- [Migrating from Tailwind CSS](../guides/migrating-from-tailwind.md#move-configuration)
+  lists every replacement.
+
+## Rule settings
+
+| Preset | Severity |
+| --- | --- |
+| `recommended` | warn |
+| `strict` | deny |
+| `stylistic` | off |
+
+[Configure lint](../configuration.md#lint) to change the severity or options.

package/docs/lints/incompatible-property-value.md

@@ -0,0 +1,60 @@
+---
+title: "incompatible-property-value"
+description: "Reports a utility value that the browser rejects for its CSS property."
+---
+
+# incompatible-property-value
+
+This rule reports a utility whose value the browser rejects for its CSS property.
+The compiler still writes the CSS, but the browser ignores the declaration. For
+example, `w-[1/2]` writes `width: 1/2`, which is not a valid width.
+
+The compiler checks an arbitrary value against the grammar of each CSS property
+that receives it. A value that every receiving property accepts is not reported,
+even when no value type of the utility accepts it, such as `basis-[content]`.
+
+Some utilities pass the value only to custom properties, such as `--tw-blur` for
+`blur-[5%]`, so no property grammar can check it. When no value type of such a
+utility accepts the value, the rule reports that the utility does not accept it.
+
+For a utility that your own stylesheet defines, the rule also checks the other
+declarations that the utility writes, such as a bare value in `fg-5` from
+`@utility fg-* { color: --value(integer); }`. It skips values that contain
+`var()`, values that come from theme tokens, and custom properties.
+[incompatible-theme-value](incompatible-theme-value.md) checks theme
+tokens where you define them. By default, the rule does not check the
+definitions of packages and plugins, because you cannot change them. The
+[`checkLibraries` and `checkPlugins`](../configuration.md#definitions-of-packages-and-plugins)
+fields of `lint` select packages and plugins to check.
+
+## Reported
+
+```tsx
+style("w-[1/2]");
+```
+
+> incompatible-property-value: `width` does not accept `1/2`
+> 
+> Example:1:10
+
+## Fixed
+
+```tsx
+style("w-1/2");
+```
+
+## How to fix
+
+- Use the form of the utility that the theme defines, such as the fraction form
+  `w-1/2`, as in the example.
+- In an arbitrary value, write a valid CSS value, such as `w-[50%]`.
+
+## Rule settings
+
+| Preset | Severity |
+| --- | --- |
+| `recommended` | deny |
+| `strict` | deny |
+| `stylistic` | off |
+
+[Configure lint](../configuration.md#lint) to change the severity or options.

package/docs/lints/incompatible-theme-value.md

@@ -0,0 +1,46 @@
+---
+title: "incompatible-theme-value"
+description: "Reports a theme token with a value of the wrong type for its namespace, such as a length for a color."
+---
+
+# incompatible-theme-value
+
+This rule reports a theme token whose value does not match the type of its
+namespace. For example, tokens in `--color-*` must be colors, so a length makes
+`bg-brand` and the other color utilities write an invalid value.
+
+## Reported
+
+```css
+@theme {
+  --color-brand: 1rem;
+}
+```
+
+> incompatible-theme-value: `1rem` is not a valid value for `--color-brand` because tokens of `--color-*` must be `color`
+> 
+> Example:2:18
+
+## Fixed
+
+```css
+@theme {
+  --spacing-brand: 1rem;
+}
+```
+
+## How to fix
+
+- If the value is right, move the token to the namespace of that type, such as
+  `--spacing-*` for a length, as in the example.
+- If the namespace is right, correct the value, such as a color for `--color-*`.
+
+## Rule settings
+
+| Preset | Severity |
+| --- | --- |
+| `recommended` | deny |
+| `strict` | deny |
+| `stylistic` | off |
+
+[Configure lint](../configuration.md#lint) to change the severity or options.

package/docs/lints/index.md

@@ -0,0 +1,140 @@
+---
+title: "Lint rule reference"
+description: "Find a lint rule by the kind of mistake or policy that it reports."
+---
+
+# Lint rule reference
+
+Lint rules report mistakes and project policies in your styles. The CLI and the
+editor run them. [Checks in the editor and CI](../guides/lint-adoption.md)
+explains where the rules run, and [Configuration](../configuration.md#lint)
+covers presets, severities, and suppression comments.
+
+The **Default** column shows the severity in the `recommended` preset, which a
+project uses when it has no `lint` setting. Each rule page shows its severity in
+every preset.
+
+## Misspelled or invalid utilities
+
+A utility or variant that these rules report produces no CSS.
+
+| Rule                                                 | Reports                                                       | Default |
+| ---------------------------------------------------- | ------------------------------------------------------------- | ------- |
+| [unknown-utility](unknown-utility.md)       | A utility or theme value that your stylesheet does not define | warn    |
+| [invalid-utility](invalid-utility.md)       | A known utility written in a form that it does not accept     | deny    |
+| [unknown-variant](unknown-variant.md)       | A variant that your stylesheet does not define                | warn    |
+| [invalid-variant](invalid-variant.md)       | A known variant with an invalid value, such as `min-[foo]:`   | deny    |
+| [invalid-marker-use](invalid-marker-use.md) | A marker class such as `group` with a variant or `!`          | warn    |
+
+## Invalid arguments to Stillwind APIs
+
+An argument that these rules report adds no CSS, and a condition that they
+report never matches.
+
+| Rule                                                                                 | Reports                                                                     | Default |
+| ------------------------------------------------------------------------------------ | --------------------------------------------------------------------------- | ------- |
+| [invalid-style-input](invalid-style-input.md)                               | A `style()` argument that it cannot compile, such as a number               | deny    |
+| [invalid-rule-group-input](invalid-rule-group-input.md)                     | A `class` field or ref inside a variant key of `style()`                    | deny    |
+| [invalid-style-composition](invalid-style-composition.md)                   | Inline styles or custom properties in a base style, which do not carry over | deny    |
+| [invalid-css-input](invalid-css-input.md)                                   | A `style.css()` argument that is not a static utility                       | deny    |
+| [missing-document-target](missing-document-target.md)                       | A `style.css()` utility without a selector                                  | deny    |
+| [invalid-ref-input](invalid-ref-input.md)                                   | A `style.ref()` label or ref method argument that is not a literal          | deny    |
+| [invalid-cva-config](invalid-cva-config.md)                                 | An unknown or malformed field in a `style.cva()` configuration              | deny    |
+| [invalid-cva-input](invalid-cva-input.md)                                   | `&&` or a ternary inside a `style.cva()` value                              | deny    |
+| [invalid-keyframes-definition](invalid-keyframes-definition.md)             | A frame key that is not a keyframe position, such as `middle`               | deny    |
+| [invalid-keyframes-variant](invalid-keyframes-variant.md)                   | A selector or container variant around a keyframes definition               | deny    |
+| [invalid-keyframes-use](invalid-keyframes-use.md)                           | An animation applied with an argument that is not an options string         | deny    |
+| [invalid-animation-option](invalid-animation-option.md)                     | A utility that is not an animation option, such as `p-4`                    | deny    |
+| [invalid-view-transition-definition](invalid-view-transition-definition.md) | An unknown field in a `style.viewTransition()` definition                   | deny    |
+| [invalid-view-transition-variant](invalid-view-transition-variant.md)       | A state or container variant in a view transition definition                | deny    |
+| [invalid-view-transition-use](invalid-view-transition-use.md)               | Extra or invalid arguments to `.for()`                                      | deny    |
+| [invalid-media-query](invalid-media-query.md)                               | A condition in `style.media()` that is not a media query, such as `hover`   | deny    |
+| [invalid-runtime-condition](invalid-runtime-condition.md)                   | A runtime CSS condition that Stillwind cannot compile                       | deny    |
+| [runtime-condition-requires-css-if](runtime-condition-requires-css-if.md)   | A runtime CSS condition that needs `useCssIf`                               | deny    |
+
+## Arguments and imports
+
+| Rule                                                                   | Reports                                                     | Default |
+| ---------------------------------------------------------------------- | ----------------------------------------------------------- | ------- |
+| [mutating-macro-argument](mutating-macro-argument.md)         | A state update inside a `style()` argument                  | deny    |
+| [suspending-macro-argument](suspending-macro-argument.md)     | `await`, `yield`, or `import()` inside a `style()` argument | deny    |
+| [mismatched-framework-import](mismatched-framework-import.md) | An import from the entrypoint of another framework          | warn    |
+
+## Conflicting or duplicated styles
+
+| Rule                                                                           | Reports                                                                 | Default |
+| ------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | ------- |
+| [conflicting-utilities](conflicting-utilities.md)                     | Utilities that set the same property, such as `p-2 p-4`                 | warn    |
+| [duplicate-utility](duplicate-utility.md)                             | The same utility twice under the same conditions                        | warn    |
+| [conflicting-provider-properties](conflicting-provider-properties.md) | A container or anchor property that a ref method and a utility both set | warn    |
+| [ambiguous-style-base-order](ambiguous-style-base-order.md)           | Two base styles in one call that set the same property                  | warn    |
+| [interfering-imported-style-base](interfering-imported-style-base.md) | An imported base style that sets the same property as another style     | warn    |
+| [unverified-style-base](unverified-style-base.md)                     | A base style whose origin the CLI cannot determine from its type        | warn    |
+
+## Styles that do not apply as written
+
+| Rule                                                                         | Reports                                                                  | Default |
+| ---------------------------------------------------------------------------- | ------------------------------------------------------------------------ | ------- |
+| [missing-ref-attachment](missing-ref-attachment.md)                 | `asContainer()` or `asAnchor()` in a call that does not attach the ref   | warn    |
+| [ineffective-anchor-scope](ineffective-anchor-scope.md)             | An empty or repeated ref list in an anchor scope                         | warn    |
+| [missing-view-transition-name](missing-view-transition-name.md)     | A view transition applied without `.for()`                               | warn    |
+| [duplicate-view-transition-name](duplicate-view-transition-name.md) | Two `.for()` calls in one `style()` call                                 | warn    |
+| [split-view-transition-class](split-view-transition-class.md)       | View transitions split across separate `style()` calls                   | warn    |
+| [document-scoped-selector](document-scoped-selector.md)             | A selector that styles the whole document instead of the element         | deny    |
+| [repeated-nesting-selector](repeated-nesting-selector.md)           | A selector that repeats `&` to relate two elements                       | warn    |
+| [incompatible-property-value](incompatible-property-value.md)       | A value that the browser rejects for the property                        | deny    |
+| [clamped-value](clamped-value.md)                                   | A value outside the range that the browser uses, such as opacity above 1 | warn    |
+| [unsatisfiable-variants](unsatisfiable-variants.md)                 | Variants that can never match together, such as `portrait:landscape:`    | warn    |
+
+## Stylesheet definitions
+
+| Rule                                                                     | Reports                                                          | Default |
+| ------------------------------------------------------------------------ | ---------------------------------------------------------------- | ------- |
+| [invalid-css-import](invalid-css-import.md)                     | A stylesheet import that cannot be resolved                      | deny    |
+| [invalid-css-directive](invalid-css-directive.md)               | A malformed or unsupported Stillwind directive                   | deny    |
+| [invalid-theme-reference](invalid-theme-reference.md)           | A reference to a theme token that is not defined                 | deny    |
+| [incompatible-theme-value](incompatible-theme-value.md)         | A theme value of the wrong type, such as a length for a color    | deny    |
+| [duplicate-definition](duplicate-definition.md)                 | A utility or variant definition that replaces an earlier one     | warn    |
+| [bypassed-undefinition](bypassed-undefinition.md)               | A definition that bypasses an undefinition in another context    | warn    |
+| [ignored-definition-condition](ignored-definition-condition.md) | A media rule around a definition, which the compiler ignores     | deny    |
+| [ignored-tailwind-feature](ignored-tailwind-feature.md)         | Tailwind-only directives such as `@config`, which have no effect | warn    |
+
+## Project policies
+
+These rules enforce choices of your project. No preset enables them.
+
+| Rule                                                                 | Reports                                                       | Default |
+| -------------------------------------------------------------------- | ------------------------------------------------------------- | ------- |
+| [no-arbitrary-colors](no-arbitrary-colors.md)               | Colors written as values, such as `bg-[#123456]`              | off     |
+| [no-arbitrary-spacing](no-arbitrary-spacing.md)             | Spacing written as values, such as `p-[13px]`                 | off     |
+| [no-arbitrary-breakpoints](no-arbitrary-breakpoints.md)     | Viewport widths written as values, such as `min-[713px]:`     | off     |
+| [no-restricted-theme-tokens](no-restricted-theme-tokens.md) | Utilities that use the theme tokens that you list             | off     |
+| [no-restricted-utilities](no-restricted-utilities.md)       | The utilities that you list                                   | off     |
+| [no-restricted-declarations](no-restricted-declarations.md) | Utilities that produce the CSS declarations that you list     | off     |
+| [no-restricted-length-units](no-restricted-length-units.md) | Length units that you forbid for the properties that you list | off     |
+| [no-important](no-important.md)                             | The `!` modifier                                              | off     |
+| [no-class-property](no-class-property.md)                   | The `class` field, which adds classes without generated CSS   | off     |
+
+## Preferred spelling
+
+These rules report code that works but has a clearer form. The `stylistic`
+preset enables the rules that are off by default.
+
+| Rule                                                                             | Reports                                                                  | Default |
+| -------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | ------- |
+| [prefer-canonical-utilities](prefer-canonical-utilities.md)             | A utility with a shorter equivalent, such as `px-[16px]` for `px-4`      | warn    |
+| [redundant-variant](redundant-variant.md)                               | A variant that adds no condition, such as `hover:hover:`                 | warn    |
+| [prefer-explicit-nesting-selector](prefer-explicit-nesting-selector.md) | A custom variant selector without `&`                                    | warn    |
+| [prefer-sorted-utilities](prefer-sorted-utilities.md)                   | Utilities that are not in sorted order                                   | off     |
+| [prefer-typed-relationships](prefer-typed-relationships.md)             | `group-*` and `peer-*` variants that a ref can replace                   | off     |
+| [prefer-direct-styling](prefer-direct-styling.md)                       | A selector that styles another element, such as `[&_button]:`            | off     |
+| [prefer-logical-properties](prefer-logical-properties.md)               | A physical property with a logical form, such as `ml-4`                  | off     |
+| [prefer-typed-variables](prefer-typed-variables.md)                     | A custom property without a type in a utility that accepts several types | off     |
+| [prefer-variant-directive](prefer-variant-directive.md)                 | A media rule in your CSS that a named variant can replace                | off     |
+
+## Suppression comments
+
+| Rule                                                             | Reports                                     | Default |
+| ---------------------------------------------------------------- | ------------------------------------------- | ------- |
+| [invalid-lint-suppression](invalid-lint-suppression.md) | A malformed comment or an unknown rule name | warn    |
+| [unused-lint-suppression](unused-lint-suppression.md)   | A comment that suppresses no finding        | off     |