@codelaw/rules-css 0.0.0-stage → 0.1.0

package/rules/css/custom-media-pattern.md

@@ -0,0 +1,41 @@
+---
+id: css/custom-media-pattern
+title: "Custom media names are kebab-case"
+languages: [css]
+fix: manual
+fix_reason: "renaming must update every use of the name"
+stability: preview
+options:
+  pattern: { type: "string", default: "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$", description: "a regular expression names must match (without the leading `--`)" }
+ported_from: [stylelint/custom-media-pattern]
+since: 0.1.0
+---
+
+The name of each `@custom-media` (after `--`) matches a pattern, kebab-case by default.
+
+**Why:** A consistent naming scheme makes names predictable across a codebase.
+
+```codelaw
+native: css/custom-media-pattern
+```
+
+## How to fix
+
+1. Rename the custom media to match the pattern.
+2. Update every query that uses it.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+@custom-media --smallViewport (width <= 30em);
+```
+
+#### Do
+
+```css
+@custom-media --small-viewport (width <= 30em);
+```

package/rules/css/custom-property-no-missing-var-function.cases.md

@@ -0,0 +1,61 @@
+# Cases: css/custom-property-no-missing-var-function
+
+### case: properties that take names
+
+```css
+:root {
+  --fade: 1;
+}
+
+a {
+  transition-property: --fade;
+}
+```
+
+```expect
+(none)
+```
+
+### case: arguments of a custom function
+
+```css
+:root {
+  --base: 1rem;
+}
+
+a {
+  margin: --theme(--base);
+}
+```
+
+```expect
+(none)
+```
+
+### case: a bare name in a var() fallback
+
+```css
+:root {
+  --b: 1px;
+}
+
+a {
+  margin: var(--a, --b);
+}
+```
+
+```expect
+6:20 css/custom-property-no-missing-var-function
+```
+
+### case: an undefined name is not checked
+
+```css
+a {
+  color: --brand;
+}
+```
+
+```expect
+(none)
+```

package/rules/css/custom-property-no-missing-var-function.md

@@ -0,0 +1,46 @@
+---
+id: css/custom-property-no-missing-var-function
+title: "Custom properties are read with `var()`"
+languages: [css]
+fix: suggest
+fix_reason: "wrapping in `var()` makes a dropped declaration apply, which changes the page"
+stability: preview
+ported_from: [stylelint/custom-property-no-missing-var-function]
+since: 0.1.0
+---
+
+A value names a custom property defined in the same sheet only inside `var()`.
+
+**Why:** Without `var()` the value is the identifier `--name`, which is invalid for most properties, so the declaration is dropped.
+
+```codelaw
+native: css/custom-property-no-missing-var-function
+```
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+:root {
+  --brand: red;
+}
+
+a {
+  color: --brand;
+}
+```
+
+#### Do
+
+```css
+:root {
+  --brand: red;
+}
+
+a {
+  color: var(--brand);
+}
+```

package/rules/css/custom-property-pattern.md

@@ -0,0 +1,45 @@
+---
+id: css/custom-property-pattern
+title: "Custom property names are kebab-case"
+languages: [css]
+fix: manual
+fix_reason: "renaming must update every use of the name, also in scripts"
+stability: preview
+options:
+  pattern: { type: "string", default: "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$", description: "a regular expression names must match (without the leading `--`)" }
+ported_from: [stylelint/custom-property-pattern]
+since: 0.1.0
+---
+
+Custom property names (after `--`), in declarations, `var()` and `@property`, match a pattern, kebab-case by default.
+
+**Why:** A consistent naming scheme makes names predictable across a codebase.
+
+```codelaw
+native: css/custom-property-pattern
+```
+
+## How to fix
+
+1. Rename the custom property to match the pattern.
+2. Update every `var()` and script that reads it.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+:root {
+  --brandColor: red;
+}
+```
+
+#### Do
+
+```css
+:root {
+  --brand-color: red;
+}
+```

package/rules/css/declaration-block-no-duplicate-custom-properties.md

@@ -0,0 +1,44 @@
+---
+id: css/declaration-block-no-duplicate-custom-properties
+title: "No custom property declared twice in one block"
+languages: [css]
+fix: manual
+fix_reason: "which value should win can't be known from the code"
+stability: preview
+ported_from: [stylelint/declaration-block-no-duplicate-custom-properties]
+since: 0.1.0
+---
+
+A declaration block declares each custom property once.
+
+**Why:** Only the last declaration counts, so the earlier one is dead code or a mistake.
+
+```codelaw
+native: css/declaration-block-no-duplicate-custom-properties
+```
+
+## How to fix
+
+1. Decide which value the custom property should have.
+2. Remove the other declaration.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+a {
+  --gap: 4px;
+  --gap: 8px;
+}
+```
+
+#### Do
+
+```css
+a {
+  --gap: 8px;
+}
+```

package/rules/css/declaration-block-no-duplicate-properties.cases.md

@@ -0,0 +1,61 @@
+# Cases: css/declaration-block-no-duplicate-properties
+
+### case: a fallback with a different syntax is allowed
+
+```css
+a {
+  width: 100px;
+  width: 50vw;
+}
+```
+
+```expect
+(none)
+```
+
+### case: the same syntax twice in a row is reported
+
+```css
+a {
+  font-size: 16px;
+  font-size: 14px;
+}
+```
+
+```expect
+2:3 css/declaration-block-no-duplicate-properties
+```
+
+```fixed
+a {
+  font-size: 14px;
+}
+```
+
+### case: `src` repeats in @font-face
+
+```css
+@font-face {
+  font-family: "Inter";
+  src: url("a.eot");
+  src: url("a.woff2") format("woff2");
+}
+```
+
+```expect
+(none)
+```
+
+### case: an earlier !important wins
+
+```css
+a {
+  color: red !important;
+  background: none;
+  color: blue;
+}
+```
+
+```expect
+4:3 css/declaration-block-no-duplicate-properties
+```

package/rules/css/declaration-block-no-duplicate-properties.md

@@ -0,0 +1,44 @@
+---
+id: css/declaration-block-no-duplicate-properties
+title: "No property declared twice in one block"
+languages: [css]
+fix: suggest
+fix_reason: "the earlier declaration may be a deliberate fallback for browsers that reject the later value"
+stability: preview
+options:
+  ignore: { type: "string[]", default: ["consecutive-duplicates-with-different-syntaxes"], description: "`consecutive-duplicates-with-different-syntaxes` allows fallbacks" }
+  ignoreProperties: { type: "string[]", default: [], description: "properties to skip; `/regex/` for a pattern" }
+ported_from: [stylelint/declaration-block-no-duplicate-properties]
+since: 0.1.0
+---
+
+A declaration block declares each property once. Back-to-back declarations whose values have different syntaxes — a fallback such as `width: 100px; width: 50vw;` — are allowed, and so is `src`.
+
+**Why:** The later declaration overrides the earlier one, so the earlier one is dead code or a mistake.
+
+```codelaw
+native: css/declaration-block-no-duplicate-properties
+```
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+a {
+  color: pink;
+  background: orange;
+  color: orange;
+}
+```
+
+#### Do
+
+```css
+a {
+  background: orange;
+  color: orange;
+}
+```

package/rules/css/declaration-block-no-redundant-longhand-properties.md

@@ -0,0 +1,49 @@
+---
+id: css/declaration-block-no-redundant-longhand-properties
+title: "Shorthands instead of complete sets of longhands"
+languages: [css]
+fix: manual
+fix_reason: "combining longhands into a shorthand value needs the shorthand's grammar"
+stability: preview
+ported_from: [stylelint/declaration-block-no-redundant-longhand-properties]
+since: 0.1.0
+---
+
+A block does not declare every longhand of a shorthand (`margin-top`, `margin-right`, `margin-bottom`, `margin-left`) where the shorthand would do, nor repeat a shorthand's value in one of its longhands.
+
+**Why:** One shorthand is shorter and says plainly that every side is set.
+
+```codelaw
+native: css/declaration-block-no-redundant-longhand-properties
+```
+
+## How to fix
+
+1. Replace the longhands with the shorthand, giving their values in the shorthand's order.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+a {
+  margin-top: 1px;
+  margin-right: 2px;
+  margin-bottom: 3px;
+  margin-left: 4px;
+}
+```
+
+#### Do
+
+```css
+a {
+  margin: 1px 2px 3px 4px;
+}
+```
+
+## Differences from the source
+
+Reported without a fix; stylelint rewrites some sets into the shorthand.

package/rules/css/declaration-block-no-shorthand-property-overrides.md

@@ -0,0 +1,44 @@
+---
+id: css/declaration-block-no-shorthand-property-overrides
+title: "No shorthand after a longhand it resets"
+languages: [css]
+fix: manual
+fix_reason: "which value is meant can't be known from the code"
+stability: preview
+ported_from: [stylelint/declaration-block-no-shorthand-property-overrides]
+since: 0.1.0
+---
+
+A shorthand property does not follow, in the same block, a longhand it covers.
+
+**Why:** The shorthand resets the longhand declared before it, so the longhand never applies.
+
+```codelaw
+native: css/declaration-block-no-shorthand-property-overrides
+```
+
+## How to fix
+
+1. Move the longhand after the shorthand, or fold its value into the shorthand.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+a {
+  padding-left: 10px;
+  padding: 20px;
+}
+```
+
+#### Do
+
+```css
+a {
+  padding: 20px;
+  padding-left: 10px;
+}
+```

package/rules/css/declaration-property-value-keyword-no-deprecated.md

@@ -0,0 +1,40 @@
+---
+id: css/declaration-property-value-keyword-no-deprecated
+title: "No deprecated keywords in property values"
+languages: [css]
+fix: suggest
+fix_reason: "the replacement keyword is the closest modern one, not always identical"
+stability: preview
+options:
+  ignoreKeywords: { type: "string[]", default: [], description: "keywords to accept; `/regex/` for a pattern" }
+ported_from: [stylelint/declaration-property-value-keyword-no-deprecated]
+since: 0.1.0
+---
+
+Values use no keyword the specifications deprecated, such as `overflow: overlay`, `word-break: break-word` or the old system colours (`ThreeDFace`).
+
+**Why:** Deprecated keywords are aliased or dropped by browsers and may stop working.
+
+```codelaw
+native: css/declaration-property-value-keyword-no-deprecated
+```
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+a {
+  overflow: overlay;
+}
+```
+
+#### Do
+
+```css
+a {
+  overflow: auto;
+}
+```

package/rules/css/declaration-property-value-no-unknown.cases.md

@@ -0,0 +1,16 @@
+# Cases: css/declaration-property-value-no-unknown
+
+### case: CSS-wide keywords, prefixes and variables
+
+```css
+a {
+  position: inherit;
+  position: -webkit-sticky;
+  position: var(--pos);
+  float: inline-start;
+}
+```
+
+```expect
+(none)
+```

package/rules/css/declaration-property-value-no-unknown.md

@@ -0,0 +1,46 @@
+---
+id: css/declaration-property-value-no-unknown
+title: "Keyword-valued properties use a known keyword"
+languages: [css]
+fix: manual
+fix_reason: "the intended value is the author's call"
+stability: preview
+ported_from: [stylelint/declaration-property-value-no-unknown]
+since: 0.1.0
+---
+
+A property whose value is one keyword from a fixed set — `position`, `display`-like `float` and `clear`, `visibility`, `box-sizing`, `overflow`, border styles and others — is given one of those keywords or a CSS-wide keyword.
+
+**Why:** The browser drops a declaration whose value it does not recognise.
+
+```codelaw
+native: css/declaration-property-value-no-unknown
+```
+
+## How to fix
+
+1. Replace the value with one the property accepts.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+a {
+  position: centre;
+}
+```
+
+#### Do
+
+```css
+a {
+  position: relative;
+}
+```
+
+## Differences from the source
+
+Checks single-keyword values of about forty keyword-valued properties, from a table written for this pack; stylelint validates every value against the full CSSTree grammar, whose data derives from MDN data (CC0), which codelaw does not ship.

package/rules/css/font-family-no-duplicate-names.cases.md

@@ -0,0 +1,31 @@
+# Cases: css/font-family-no-duplicate-names
+
+### case: a quoted keyword differs from the keyword
+
+```css
+a {
+  font-family: "serif", serif;
+}
+```
+
+```expect
+(none)
+```
+
+### case: duplicates in the font shorthand
+
+```css
+a {
+  font: 12px/1.5 Arial, Arial, sans-serif;
+}
+```
+
+```expect
+2:25 css/font-family-no-duplicate-names
+```
+
+```fixed
+a {
+  font: 12px/1.5 Arial, sans-serif;
+}
+```

package/rules/css/font-family-no-duplicate-names.md

@@ -0,0 +1,37 @@
+---
+id: css/font-family-no-duplicate-names
+title: "No font family listed twice"
+languages: [css]
+fix: auto
+stability: preview
+ported_from: [stylelint/font-family-no-duplicate-names]
+since: 0.1.0
+---
+
+A `font-family` list (or the family part of `font`) names each family once. A quoted `"serif"` is a family name, not the `serif` keyword, so the two are different.
+
+**Why:** The second mention can never be used, and usually hides a typo.
+
+```codelaw
+native: css/font-family-no-duplicate-names
+```
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+a {
+  font-family: Arial, Helvetica, Arial, sans-serif;
+}
+```
+
+#### Do
+
+```css
+a {
+  font-family: Arial, Helvetica, sans-serif;
+}
+```

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

@@ -0,0 +1,62 @@
+# Cases: css/font-family-no-missing-generic-family-keyword
+
+### case: system fonts in the font shorthand
+
+```css
+a {
+  font: caption;
+}
+```
+
+```expect
+(none)
+```
+
+### case: values with var()
+
+```css
+a {
+  font-family: var(--font), Arial;
+}
+```
+
+```expect
+(none)
+```
+
+### case: @font-face names a family
+
+```css
+@font-face {
+  font-family: "Inter";
+  src: url("inter.woff2");
+}
+```
+
+```expect
+(none)
+```
+
+### case: the family part of font
+
+```css
+a {
+  font: bold 12px/1.5 Helvetica, Arial;
+}
+```
+
+```expect
+2:34 css/font-family-no-missing-generic-family-keyword
+```
+
+### case: a quoted keyword is a family name
+
+```css
+a {
+  font-family: "sans-serif";
+}
+```
+
+```expect
+2:16 css/font-family-no-missing-generic-family-keyword
+```