@codelaw/rules-css 0.0.0-stage → 0.1.0

package/rules/css/font-family-no-missing-generic-family-keyword.md

@@ -0,0 +1,44 @@
+---
+id: css/font-family-no-missing-generic-family-keyword
+title: "Font lists end with a generic family"
+languages: [css]
+fix: manual
+fix_reason: "which generic family suits the fonts is a design call"
+stability: preview
+options:
+  ignoreFontFamilies: { type: "string[]", default: [], description: "families that need no generic fallback, such as icon fonts" }
+ported_from: [stylelint/font-family-no-missing-generic-family-keyword]
+since: 0.1.0
+---
+
+A `font-family` list (or the family part of `font`) includes a generic family such as `sans-serif`, `serif` or `monospace`. `@font-face`, values using `var()` and system fonts (`font: caption`) are skipped.
+
+**Why:** When none of the named fonts is available the browser falls back to its default font, which may look nothing like the design.
+
+```codelaw
+native: css/font-family-no-missing-generic-family-keyword
+```
+
+## How to fix
+
+1. Add the generic family closest to the listed fonts at the end of the list.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+a {
+  font-family: Helvetica, Arial;
+}
+```
+
+#### Do
+
+```css
+a {
+  font-family: Helvetica, Arial, sans-serif;
+}
+```

package/rules/css/function-calc-no-unspaced-operator.cases.md

@@ -0,0 +1,33 @@
+# Cases: css/function-calc-no-unspaced-operator
+
+### case: signs, names and exponents
+
+```css
+a {
+  width: calc(1px - -2px);
+  height: calc(var(--a-b) * 2);
+  top: calc(1e-3px + 1px);
+}
+```
+
+```expect
+(none)
+```
+
+### case: a sign after a value reads as a second value
+
+```css
+a {
+  width: calc(100% -10px);
+}
+```
+
+```expect
+2:20 css/function-calc-no-unspaced-operator
+```
+
+```fixed
+a {
+  width: calc(100% - 10px);
+}
+```

package/rules/css/function-calc-no-unspaced-operator.md

@@ -0,0 +1,42 @@
+---
+id: css/function-calc-no-unspaced-operator
+title: "Spaces around `+` and `-` in math functions"
+languages: [css]
+fix: suggest
+fix_reason: "the fix makes an invalid, dropped declaration apply, which changes the page"
+stability: preview
+ported_from: [stylelint/function-calc-no-unspaced-operator]
+since: 0.1.0
+---
+
+Inside `calc()` and the other math functions, `+` and `-` have whitespace on both sides.
+
+**Why:** Without the spaces `-10px` reads as a negative number and `100%-10px` as one token, so the expression is invalid and the declaration is dropped.
+
+```codelaw
+native: css/function-calc-no-unspaced-operator
+```
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+a {
+  width: calc(100%-10px);
+}
+```
+
+#### Do
+
+```css
+a {
+  width: calc(100% - 10px);
+}
+```
+
+## Differences from the source
+
+Whitespace other than a single space around an operator is left to the formatter.

package/rules/css/hue-degree-notation.md

@@ -0,0 +1,41 @@
+---
+id: css/hue-degree-notation
+title: "Hues are angles"
+languages: [css]
+fix: auto
+stability: preview
+ported_from: [stylelint/hue-degree-notation]
+since: 0.1.0
+---
+
+The hue of `hsl()`, `hwb()`, `lch()` and `oklch()` is written as an angle (`120deg`), not a bare number.
+
+**Why:** An explicit unit makes the value's meaning plain.
+
+```codelaw
+native: css/hue-degree-notation
+```
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+a {
+  color: hsl(120 60% 50%);
+}
+```
+
+#### Do
+
+```css
+a {
+  color: hsl(120deg 60% 50%);
+}
+```
+
+## Differences from the source
+
+Ported with stylelint-config-standard's setting, `angle`.

package/rules/css/import-notation.md

@@ -0,0 +1,37 @@
+---
+id: css/import-notation
+title: "`@import` with `url()`"
+languages: [css]
+fix: auto
+stability: preview
+ported_from: [stylelint/import-notation]
+since: 0.1.0
+---
+
+`@import` names its stylesheet with `url()`, not a bare string.
+
+**Why:** One notation for imports is easier to search and read.
+
+```codelaw
+native: css/import-notation
+```
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+@import "theme.css";
+```
+
+#### Do
+
+```css
+@import url("theme.css");
+```
+
+## Differences from the source
+
+Ported with stylelint-config-standard's setting, `url`.

package/rules/css/keyframe-block-no-duplicate-selectors.md

@@ -0,0 +1,54 @@
+---
+id: css/keyframe-block-no-duplicate-selectors
+title: "No keyframe selector twice in one `@keyframes`"
+languages: [css]
+fix: manual
+fix_reason: "which keyframe was meant can't be known from the code"
+stability: preview
+ported_from: [stylelint/keyframe-block-no-duplicate-selectors]
+since: 0.1.0
+---
+
+A `@keyframes` block names each keyframe selector once.
+
+**Why:** Two blocks for one keyframe merge silently, which is usually a copy-paste slip.
+
+```codelaw
+native: css/keyframe-block-no-duplicate-selectors
+```
+
+## How to fix
+
+1. Merge the two blocks, or change one selector to the keyframe it was meant for.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+
+  0% {
+    opacity: 1;
+  }
+}
+```
+
+#### Do
+
+```css
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+```

package/rules/css/keyframe-declaration-no-important.md

@@ -0,0 +1,50 @@
+---
+id: css/keyframe-declaration-no-important
+title: "No `!important` in keyframes"
+languages: [css]
+fix: suggest
+fix_reason: "removing `!important` makes an ignored declaration apply, which changes the animation"
+stability: preview
+ported_from: [stylelint/keyframe-declaration-no-important]
+since: 0.1.0
+---
+
+No declaration inside a `@keyframes` block is marked `!important`.
+
+**Why:** Browsers ignore a keyframe declaration marked `!important`, so the property is not animated.
+
+```codelaw
+native: css/keyframe-declaration-no-important
+```
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+@keyframes fade {
+  from {
+    opacity: 0 !important;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+```
+
+#### Do
+
+```css
+@keyframes fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+```

package/rules/css/keyframe-selector-notation.md

@@ -0,0 +1,61 @@
+---
+id: css/keyframe-selector-notation
+title: "Percentages for keyframe selectors"
+languages: [css]
+fix: auto
+stability: preview
+ported_from: [stylelint/keyframe-selector-notation]
+since: 0.1.0
+---
+
+Keyframe selectors are percentages (`0%`, `100%`) unless every selector of the `@keyframes` is a keyword (`from`, `to`).
+
+**Why:** Mixing `from` with `50%` makes the timeline harder to read.
+
+```codelaw
+native: css/keyframe-selector-notation
+```
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+@keyframes fade {
+  from {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+```
+
+#### Do
+
+```css
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+```
+
+## Differences from the source
+
+Ported with stylelint-config-standard's setting, `percentage-unless-within-keyword-only-block`.

package/rules/css/keyframes-name-pattern.md

@@ -0,0 +1,49 @@
+---
+id: css/keyframes-name-pattern
+title: "Keyframes names are kebab-case"
+languages: [css]
+fix: manual
+fix_reason: "renaming must update every `animation` that uses the name"
+stability: preview
+options:
+  pattern: { type: "string", default: "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$", description: "a regular expression names must match" }
+ported_from: [stylelint/keyframes-name-pattern]
+since: 0.1.0
+---
+
+The name of each `@keyframes` matches a pattern, kebab-case by default.
+
+**Why:** A consistent naming scheme makes names predictable across a codebase.
+
+```codelaw
+native: css/keyframes-name-pattern
+```
+
+## How to fix
+
+1. Rename the keyframes to match the pattern.
+2. Update every `animation` and `animation-name` that uses it.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+}
+```
+
+#### Do
+
+```css
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+}
+```

package/rules/css/layer-name-pattern.md

@@ -0,0 +1,41 @@
+---
+id: css/layer-name-pattern
+title: "Layer names are kebab-case"
+languages: [css]
+fix: manual
+fix_reason: "renaming must update every use of the layer"
+stability: preview
+options:
+  pattern: { type: "string", default: "^([a-z][a-z0-9]*)([.-][a-z0-9]+)*$", description: "a regular expression names must match" }
+ported_from: [stylelint/layer-name-pattern]
+since: 0.1.0
+---
+
+Cascade layer names, in `@layer` and in `@import … layer()`, match a pattern: kebab-case segments joined by dots, by default.
+
+**Why:** A consistent naming scheme makes names predictable across a codebase.
+
+```codelaw
+native: css/layer-name-pattern
+```
+
+## How to fix
+
+1. Rename the layer to match the pattern.
+2. Update every `@layer` and `@import` that names it.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+@layer baseStyles;
+```
+
+#### Do
+
+```css
+@layer base-styles;
+```

package/rules/css/length-zero-no-unit.cases.md

@@ -0,0 +1,41 @@
+# Cases: css/length-zero-no-unit
+
+### case: where the unit matters
+
+```css
+a {
+  --gap: 0px;
+  line-height: 0px;
+  flex: 1 1 0px;
+  width: calc(0px + 1em);
+  font: 12px/0px serif;
+  grid-template-columns: 0fr;
+}
+```
+
+```expect
+(none)
+```
+
+### case: zero lengths in a media query
+
+```css
+@media (min-width: 0px) {
+  a {
+    margin: 0em;
+  }
+}
+```
+
+```expect
+1:20 css/length-zero-no-unit
+3:13 css/length-zero-no-unit
+```
+
+```fixed
+@media (min-width: 0) {
+  a {
+    margin: 0;
+  }
+}
+```

package/rules/css/length-zero-no-unit.md

@@ -0,0 +1,39 @@
+---
+id: css/length-zero-no-unit
+title: "No units on zero lengths"
+languages: [css]
+fix: auto
+stability: preview
+options:
+  ignore: { type: "string[]", default: ["custom-properties"], description: "`custom-properties` skips custom property values" }
+ported_from: [stylelint/length-zero-no-unit]
+since: 0.1.0
+---
+
+A zero length is written `0`, without a unit. Custom properties, `line-height`, `flex`, the line height in `font`, math functions and `fr` are skipped, as a unit matters there.
+
+**Why:** `0px`, `0em` and `0` are the same length; the unit is noise.
+
+```codelaw
+native: css/length-zero-no-unit
+```
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+a {
+  margin: 0px;
+}
+```
+
+#### Do
+
+```css
+a {
+  margin: 0;
+}
+```

package/rules/css/lightness-notation.md

@@ -0,0 +1,41 @@
+---
+id: css/lightness-notation
+title: "Lightness is a percentage"
+languages: [css]
+fix: auto
+stability: preview
+ported_from: [stylelint/lightness-notation]
+since: 0.1.0
+---
+
+The lightness of `lab()`, `lch()`, `oklab()` and `oklch()` is written as a percentage.
+
+**Why:** The functions use different number scales for lightness (0–1 and 0–100); a percentage reads the same in all of them.
+
+```codelaw
+native: css/lightness-notation
+```
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+a {
+  color: oklch(0.7 0.1 200deg);
+}
+```
+
+#### Do
+
+```css
+a {
+  color: oklch(70% 0.1 200deg);
+}
+```
+
+## Differences from the source
+
+Ported with stylelint-config-standard's setting, `percentage`.

package/rules/css/media-feature-name-no-unknown.md

@@ -0,0 +1,48 @@
+---
+id: css/media-feature-name-no-unknown
+title: "No unknown media features"
+languages: [css]
+fix: manual
+fix_reason: "the intended feature is the author's call"
+stability: preview
+options:
+  ignoreMediaFeatureNames: { type: "string[]", default: [], description: "features to accept; `/regex/` for a pattern" }
+ported_from: [stylelint/media-feature-name-no-unknown]
+since: 0.1.0
+---
+
+Every media feature in `@media` and `@custom-media` is one the Media Queries specifications define. Vendor-prefixed features and custom media (`(--name)`) are skipped.
+
+**Why:** A media feature the browser does not know never matches, so the block never applies.
+
+```codelaw
+native: css/media-feature-name-no-unknown
+```
+
+## How to fix
+
+1. Correct the feature name.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+@media (min-widht: 600px) {
+  a {
+    color: red;
+  }
+}
+```
+
+#### Do
+
+```css
+@media (min-width: 600px) {
+  a {
+    color: red;
+  }
+}
+```

package/rules/css/media-feature-name-no-vendor-prefix.md

@@ -0,0 +1,50 @@
+---
+id: css/media-feature-name-no-vendor-prefix
+title: "No vendor-prefixed media features"
+languages: [css]
+fix: manual
+fix_reason: "the value needs converting to a `dppx` resolution"
+stability: preview
+ported_from: [stylelint/media-feature-name-no-vendor-prefix]
+since: 0.1.0
+---
+
+Media queries use no vendor-prefixed `device-pixel-ratio` feature.
+
+**Why:** The standard `resolution` feature covers it in every current browser.
+
+```codelaw
+native: css/media-feature-name-no-vendor-prefix
+```
+
+## How to fix
+
+1. Replace the feature with `min-resolution`, `max-resolution` or `resolution`, and its value `n` with `ndppx`.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+@media (-webkit-min-device-pixel-ratio: 2) {
+  a {
+    color: red;
+  }
+}
+```
+
+#### Do
+
+```css
+@media (min-resolution: 2dppx) {
+  a {
+    color: red;
+  }
+}
+```
+
+## Differences from the source
+
+Reported without a fix: stylelint only drops the prefix, which leaves a non-standard feature.