@codelaw/rules-css 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,46 @@
+---
+id: css/media-feature-name-value-no-unknown
+title: "Media features have valid values"
+languages: [css]
+fix: manual
+fix_reason: "the intended value is the author's call"
+stability: preview
+ported_from: [stylelint/media-feature-name-value-no-unknown]
+since: 0.1.0
+---
+
+A media feature with a fixed set of values (`orientation`, `hover`, `prefers-color-scheme`, …) uses one of them, and a feature with a typed value (`width`, `resolution`, `color`) uses that type.
+
+**Why:** A media query with an invalid value never matches, so the block never applies.
+
+```codelaw
+native: css/media-feature-name-value-no-unknown
+```
+
+## How to fix
+
+1. Use a value the media feature accepts.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+@media (orientation: sideways) {
+  a {
+    color: red;
+  }
+}
+```
+
+#### Do
+
+```css
+@media (orientation: portrait) {
+  a {
+    color: red;
+  }
+}
+```

package/rules/css/media-feature-range-notation.cases.md

@@ -0,0 +1,61 @@
+# Cases: css/media-feature-range-notation
+
+### case: a min- and max- pair becomes two ranges
+
+```css
+@media screen and (min-width: 600px) and (max-width: 899.5px) {
+  a {
+    color: red;
+  }
+}
+```
+
+```expect
+1:19 css/media-feature-range-notation
+1:42 css/media-feature-range-notation
+```
+
+```fixed
+@media screen and (width >= 600px) and (width <= 899.5px) {
+  a {
+    color: red;
+  }
+}
+```
+
+### case: every query of a list, and ratios
+
+```css
+@media (min-aspect-ratio: 16/9), not (max-resolution: 2dppx) {
+  a {
+    color: red;
+  }
+}
+```
+
+```expect
+1:8 css/media-feature-range-notation
+1:38 css/media-feature-range-notation
+```
+
+```fixed
+@media (aspect-ratio >= 16/9), not (resolution <= 2dppx) {
+  a {
+    color: red;
+  }
+}
+```
+
+### case: range syntax and features without a range are left alone
+
+```css
+@media (400px <= width <= 700px) and (hover: hover) and (orientation: landscape) {
+  a {
+    color: red;
+  }
+}
+```
+
+```expect
+(none)
+```

package/rules/css/media-feature-range-notation.md

@@ -0,0 +1,45 @@
+---
+id: css/media-feature-range-notation
+title: "Range syntax for media features"
+languages: [css]
+fix: auto
+stability: preview
+ported_from: [stylelint/media-feature-range-notation]
+since: 0.1.0
+---
+
+Range media features use the comparison syntax, `(width >= 600px)`, not `min-` and `max-` prefixes. The fix rewrites each prefixed feature on its own: `(min-NAME: V)` becomes `(NAME >= V)` and `(max-NAME: V)` becomes `(NAME <= V)`; a `min-` and `max-` pair becomes two ranges, which can be merged by hand into `(V1 <= NAME <= V2)`.
+
+**Why:** Comparisons read like the condition they express, and can state exclusive bounds.
+
+```codelaw
+native: css/media-feature-range-notation
+```
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+@media (min-width: 600px) {
+  a {
+    color: red;
+  }
+}
+```
+
+#### Do
+
+```css
+@media (width >= 600px) {
+  a {
+    color: red;
+  }
+}
+```
+
+## Differences from the source
+
+Ported with stylelint-config-standard's setting, `context`. The fix does not merge a `min-` and `max-` pair into one range.

package/rules/css/media-query-no-invalid.cases.md

@@ -0,0 +1,60 @@
+# Cases: css/media-query-no-invalid
+
+### case: level 4 ranges and nesting
+
+```css
+@media (400px <= width <= 700px) and ((hover) or (pointer: fine)) {
+  a {
+    color: red;
+  }
+}
+```
+
+```expect
+(none)
+```
+
+### case: mixed and/or
+
+```css
+@media (color) and (hover) or (width) {
+  a {
+    color: red;
+  }
+}
+```
+
+```expect
+1:8 css/media-query-no-invalid
+```
+
+### case: a media type with not
+
+```css
+@media not print and (color) {
+  a {
+    color: red;
+  }
+}
+```
+
+```expect
+(none)
+```
+
+### case: not without a space
+
+`not(` is a function token, not the keyword. `codelaw format` writes `not (`, which turns this
+query valid; the finding comes first because lint runs before format (SR-FORMATTER decision 4).
+
+```css
+@media not(min-width: 600px) {
+  a {
+    color: red;
+  }
+}
+```
+
+```expect
+1:8 css/media-query-no-invalid
+```

package/rules/css/media-query-no-invalid.md

@@ -0,0 +1,48 @@
+---
+id: css/media-query-no-invalid
+title: "Media queries follow the grammar"
+languages: [css]
+fix: manual
+fix_reason: "the intended query is the author's call"
+stability: preview
+options:
+  ignoreFunctions: { type: "string[]", default: [], description: "functions to accept in queries, such as `theme`" }
+ported_from: [stylelint/media-query-no-invalid]
+since: 0.1.0
+---
+
+Every query in `@media` and `@custom-media` is grammatical under Media Queries level 5: `not` is followed by a space, comparisons are `<`, `<=`, `>`, `>=` or `=`, and `and` and `or` are not mixed without parentheses.
+
+**Why:** A browser treats an invalid query as `not all`, so the block never applies.
+
+```codelaw
+native: css/media-query-no-invalid
+```
+
+## How to fix
+
+1. Rewrite the query; add parentheses to group `and` and `or`, and a space after `not`.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+@media (color) and (hover) or (width >= 600px) {
+  a {
+    color: red;
+  }
+}
+```
+
+#### Do
+
+```css
+@media (color) and ((hover) or (width >= 600px)) {
+  a {
+    color: red;
+  }
+}
+```

package/rules/css/media-type-no-deprecated.md

@@ -0,0 +1,48 @@
+---
+id: css/media-type-no-deprecated
+title: "No deprecated media types"
+languages: [css]
+fix: manual
+fix_reason: "the media features that describe the device are the author's call"
+stability: preview
+options:
+  ignoreMediaTypes: { type: "string[]", default: [], description: "media types to accept" }
+ported_from: [stylelint/media-type-no-deprecated]
+since: 0.1.0
+---
+
+Media queries use no media type the specifications deprecated: `tv`, `handheld`, `projection`, `aural`, `braille`, `embossed`, `speech` and `tty`.
+
+**Why:** Deprecated media types match nothing, so the block never applies.
+
+```codelaw
+native: css/media-type-no-deprecated
+```
+
+## How to fix
+
+1. Replace the media type with `screen`, `print` or `all`, adding media features that describe the device.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+@media tv {
+  a {
+    color: red;
+  }
+}
+```
+
+#### Do
+
+```css
+@media screen {
+  a {
+    color: red;
+  }
+}
+```

package/rules/css/named-grid-areas-no-invalid.md

@@ -0,0 +1,47 @@
+---
+id: css/named-grid-areas-no-invalid
+title: "Named grid areas are rectangles"
+languages: [css]
+fix: manual
+fix_reason: "the intended layout is the author's call"
+stability: preview
+ported_from: [stylelint/named-grid-areas-no-invalid]
+since: 0.1.0
+---
+
+In `grid-template-areas` (and `grid-template`, `grid`), every row string has at least one cell, every row has the same number of cells, and each named area forms one filled-in rectangle.
+
+**Why:** The browser drops an invalid `grid-template-areas` declaration, and the grid loses all its named areas.
+
+```codelaw
+native: css/named-grid-areas-no-invalid
+```
+
+## How to fix
+
+1. Give every row the same number of cells.
+2. Make each name cover a rectangle of cells.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+a {
+  grid-template-areas:
+    "head head"
+    "side main main";
+}
+```
+
+#### Do
+
+```css
+a {
+  grid-template-areas:
+    "head head head"
+    "side main main";
+}
+```

package/rules/css/nesting-selector-no-missing-scoping-root.md

@@ -0,0 +1,44 @@
+---
+id: css/nesting-selector-no-missing-scoping-root
+title: "Nesting selectors have a parent"
+languages: [css]
+fix: manual
+fix_reason: "the intended parent selector is the author's call"
+stability: preview
+ported_from: [stylelint/nesting-selector-no-missing-scoping-root]
+since: 0.1.0
+---
+
+The nesting selector `&` is used only inside a style rule (or under `@scope`), where it stands for the parent selector.
+
+**Why:** At the top level `&` matches the root element, which is almost never what was meant.
+
+```codelaw
+native: css/nesting-selector-no-missing-scoping-root
+```
+
+## How to fix
+
+1. Nest the rule inside the rule `&` should refer to, or replace `&` with that selector.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+& .item {
+  color: red;
+}
+```
+
+#### Do
+
+```css
+.list {
+  & .item {
+    color: red;
+  }
+}
+```

package/rules/css/no-descending-specificity.cases.md

@@ -0,0 +1,69 @@
+# Cases: css/no-descending-specificity
+
+### case: different media contexts are not compared
+
+```css
+#nav a {
+  color: red;
+}
+
+@media print {
+  a {
+    color: black;
+  }
+}
+```
+
+```expect
+(none)
+```
+
+### case: pseudo-elements are compared only with themselves
+
+```css
+a::before {
+  content: "";
+}
+
+a {
+  color: red;
+}
+```
+
+```expect
+(none)
+```
+
+### case: pseudo-classes are ignored when comparing
+
+```css
+a:hover {
+  color: red;
+}
+
+a {
+  color: blue;
+}
+```
+
+```expect
+5:1 css/no-descending-specificity
+```
+
+### case: nested selectors are resolved
+
+```css
+#nav {
+  a {
+    color: red;
+  }
+}
+
+a {
+  color: blue;
+}
+```
+
+```expect
+7:1 css/no-descending-specificity
+```

package/rules/css/no-descending-specificity.md

@@ -0,0 +1,57 @@
+---
+id: css/no-descending-specificity
+title: "Less specific selectors come first"
+languages: [css]
+fix: manual
+fix_reason: "reordering rules can change which declarations win"
+stability: preview
+options:
+  ignore: { type: "string[]", default: [], description: "`selectors-within-list` skips rules with a selector list" }
+ported_from: [stylelint/no-descending-specificity]
+since: 0.1.0
+---
+
+A selector does not come after a more specific selector that targets the same element (the same last compound selector, pseudo-classes aside), within the same at-rule.
+
+**Why:** The earlier, more specific rule wins whatever the order, so reading the sheet top to bottom misleads.
+
+```codelaw
+native: css/no-descending-specificity
+```
+
+## How to fix
+
+1. Move the less specific rule above the more specific one.
+2. Check that the page still renders the same.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+#nav a {
+  color: red;
+}
+
+a {
+  color: blue;
+}
+```
+
+#### Do
+
+```css
+a {
+  color: blue;
+}
+
+#nav a {
+  color: red;
+}
+```
+
+## Differences from the source
+
+A nested selector's `&` is resolved against each parent selector separately; stylelint uses the highest specificity among them, as `:is()` would.

package/rules/css/no-duplicate-at-import-rules.md

@@ -0,0 +1,35 @@
+---
+id: css/no-duplicate-at-import-rules
+title: "No stylesheet imported twice"
+languages: [css]
+fix: suggest
+fix_reason: "removing the later import moves its rules earlier in the cascade"
+stability: preview
+ported_from: [stylelint/no-duplicate-at-import-rules]
+since: 0.1.0
+---
+
+Each stylesheet is imported once with the same media conditions.
+
+**Why:** The second import loads the same rules again, which costs a request and can reorder the cascade.
+
+```codelaw
+native: css/no-duplicate-at-import-rules
+```
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+@import url("base.css");
+@import url("base.css");
+```
+
+#### Do
+
+```css
+@import url("base.css");
+```

package/rules/css/no-duplicate-selector.cases.md

@@ -0,0 +1,67 @@
+# Cases: css/no-duplicate-selector
+
+### case: different at-rule contexts
+
+```css
+a {
+  color: red;
+}
+
+@media print {
+  a {
+    color: black;
+  }
+}
+```
+
+```expect
+(none)
+```
+
+### case: the same list in another order
+
+```css
+a, b {
+  color: red;
+}
+
+b, a {
+  margin: 0;
+}
+```
+
+```expect
+5:1 css/no-duplicate-selector
+```
+
+### case: one selector twice in a list
+
+```css
+a, b, a {
+  color: red;
+}
+```
+
+```expect
+1:7 css/no-duplicate-selector
+```
+
+### case: keyframe selectors are not style rules
+
+```css
+@keyframes a {
+  0% {
+    top: 0;
+  }
+}
+
+@keyframes b {
+  0% {
+    top: 1px;
+  }
+}
+```
+
+```expect
+(none)
+```

package/rules/css/no-duplicate-selector.md

@@ -0,0 +1,48 @@
+---
+id: css/no-duplicate-selector
+title: "No selector declared twice"
+languages: [css]
+fix: manual
+fix_reason: "merging the rules depends on cascade order"
+stability: preview
+ported_from: [stylelint/no-duplicate-selectors]
+since: 0.1.0
+---
+
+Two rules in the same at-rule context do not have the same selector list (order and whitespace aside, nesting resolved), and one selector list does not name a selector twice.
+
+**Why:** Split declarations for one selector are hard to follow and often contradict each other.
+
+```codelaw
+native: css/no-duplicate-selector
+```
+
+## How to fix
+
+1. Merge the declarations of both rules into the first.
+2. Check that rules between them did not depend on the order.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+.card {
+  color: red;
+}
+
+.card {
+  margin: 0;
+}
+```
+
+#### Do
+
+```css
+.card {
+  color: red;
+  margin: 0;
+}
+```