@codelaw/rules-css 0.0.0-stage → 0.1.0

package/rules/css/selector-id-pattern.md

@@ -0,0 +1,45 @@
+---
+id: css/selector-id-pattern
+title: "Id selectors are kebab-case"
+languages: [css]
+fix: manual
+fix_reason: "renaming must update the markup and scripts that use the id"
+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/selector-id-pattern]
+since: 0.1.0
+---
+
+Ids in selectors match a pattern, kebab-case by default.
+
+**Why:** A consistent naming scheme makes names predictable across a codebase.
+
+```codelaw
+native: css/selector-id-pattern
+```
+
+## How to fix
+
+1. Rename the id to match the pattern.
+2. Update the markup and scripts that use it.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+#mainNav {
+  color: red;
+}
+```
+
+#### Do
+
+```css
+#main-nav {
+  color: red;
+}
+```

package/rules/css/selector-no-vendor-prefix.md

@@ -0,0 +1,40 @@
+---
+id: css/selector-no-vendor-prefix
+title: "No vendor-prefixed selectors"
+languages: [css]
+fix: suggest
+fix_reason: "browsers that need the prefix lose the rule"
+stability: preview
+options:
+  ignoreSelectors: { type: "string[]", default: [], description: "selectors to accept; `/regex/` for a pattern" }
+ported_from: [stylelint/selector-no-vendor-prefix]
+since: 0.1.0
+---
+
+Pseudo-classes and pseudo-elements a build tool prefixes, such as `::-moz-placeholder`, are written without the prefix.
+
+**Why:** Prefixing is a build step; hand-written prefixes go stale and duplicate code.
+
+```codelaw
+native: css/selector-no-vendor-prefix
+```
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+input::-moz-placeholder {
+  color: gray;
+}
+```
+
+#### Do
+
+```css
+input::placeholder {
+  color: gray;
+}
+```

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

@@ -0,0 +1,42 @@
+---
+id: css/selector-not-notation
+title: "One `:not()` with a list"
+languages: [css]
+fix: suggest
+fix_reason: "the merged form has a lower specificity, which can change which rule wins"
+stability: preview
+ported_from: [stylelint/selector-not-notation]
+since: 0.1.0
+---
+
+Adjacent `:not()` pseudo-classes are written as one `:not()` with a selector list: `:not(.a, .b)`.
+
+**Why:** Selectors level 4 takes a list in `:not()`; one call reads more simply.
+
+```codelaw
+native: css/selector-not-notation
+```
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+a:not(.active):not(.disabled) {
+  color: gray;
+}
+```
+
+#### Do
+
+```css
+a:not(.active, .disabled) {
+  color: gray;
+}
+```
+
+## Differences from the source
+
+Ported with stylelint-config-standard's setting, `complex`.

package/rules/css/selector-pseudo-class-no-unknown.cases.md

@@ -0,0 +1,53 @@
+# Cases: css/selector-pseudo-class-no-unknown
+
+### case: scrollbar states after a vendor pseudo-element
+
+```css
+::-webkit-scrollbar-thumb:horizontal {
+  color: red;
+}
+```
+
+```expect
+(none)
+```
+
+### case: page pseudo-classes in @page
+
+```css
+@page :first {
+  margin: 1in;
+}
+```
+
+```expect
+(none)
+```
+
+### case: a pseudo-element with one colon
+
+```css
+::selection {
+  color: red;
+}
+
+:selection {
+  color: red;
+}
+```
+
+```expect
+5:1 css/selector-pseudo-class-no-unknown
+```
+
+### case: vendor-prefixed pseudo-classes are skipped
+
+```css
+a:-moz-focusring {
+  color: red;
+}
+```
+
+```expect
+(none)
+```

package/rules/css/selector-pseudo-class-no-unknown.md

@@ -0,0 +1,44 @@
+---
+id: css/selector-pseudo-class-no-unknown
+title: "No unknown pseudo-classes"
+languages: [css]
+fix: manual
+fix_reason: "the intended pseudo-class is the author's call"
+stability: preview
+options:
+  ignorePseudoClasses: { type: "string[]", default: [], description: "pseudo-classes to accept; `/regex/` for a pattern" }
+ported_from: [stylelint/selector-pseudo-class-no-unknown]
+since: 0.1.0
+---
+
+Every pseudo-class is one the specifications define, and pseudo-elements are written with `::`. Vendor-prefixed pseudo-classes are skipped; in `@page`, only page pseudo-classes are allowed.
+
+**Why:** A browser drops a whole rule whose selector has a pseudo-class it does not know.
+
+```codelaw
+native: css/selector-pseudo-class-no-unknown
+```
+
+## How to fix
+
+1. Correct the pseudo-class name.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+a:hovr {
+  color: red;
+}
+```
+
+#### Do
+
+```css
+a:hover {
+  color: red;
+}
+```

package/rules/css/selector-pseudo-element-colon-notation.cases.md

@@ -0,0 +1,13 @@
+# Cases: css/selector-pseudo-element-colon-notation
+
+### case: pseudo-classes stay single
+
+```css
+a:hover::before {
+  content: "";
+}
+```
+
+```expect
+(none)
+```

package/rules/css/selector-pseudo-element-colon-notation.md

@@ -0,0 +1,41 @@
+---
+id: css/selector-pseudo-element-colon-notation
+title: "Pseudo-elements with `::`"
+languages: [css]
+fix: auto
+stability: preview
+ported_from: [stylelint/selector-pseudo-element-colon-notation]
+since: 0.1.0
+---
+
+The pseudo-elements `::before`, `::after`, `::first-line` and `::first-letter` are written with two colons.
+
+**Why:** Two colons tell pseudo-elements from pseudo-classes; the one-colon form exists only for CSS 2 compatibility.
+
+```codelaw
+native: css/selector-pseudo-element-colon-notation
+```
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+a:before {
+  content: "";
+}
+```
+
+#### Do
+
+```css
+a::before {
+  content: "";
+}
+```
+
+## Differences from the source
+
+Ported with stylelint-config-standard's setting, `double`.

package/rules/css/selector-pseudo-element-no-unknown.md

@@ -0,0 +1,44 @@
+---
+id: css/selector-pseudo-element-no-unknown
+title: "No unknown pseudo-elements"
+languages: [css]
+fix: manual
+fix_reason: "the intended pseudo-element is the author's call"
+stability: preview
+options:
+  ignorePseudoElements: { type: "string[]", default: [], description: "pseudo-elements to accept; `/regex/` for a pattern" }
+ported_from: [stylelint/selector-pseudo-element-no-unknown]
+since: 0.1.0
+---
+
+Every `::` pseudo-element is one the specifications define. Vendor-prefixed ones are skipped.
+
+**Why:** A browser drops a whole rule whose selector has a pseudo-element it does not know.
+
+```codelaw
+native: css/selector-pseudo-element-no-unknown
+```
+
+## How to fix
+
+1. Correct the pseudo-element name.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+a::befor {
+  content: "";
+}
+```
+
+#### Do
+
+```css
+a::before {
+  content: "";
+}
+```

package/rules/css/selector-type-no-unknown.cases.md

@@ -0,0 +1,41 @@
+# Cases: css/selector-type-no-unknown
+
+### case: custom elements and namespaces
+
+```css
+my-element,
+svg|rect,
+foreignObject {
+  color: red;
+}
+```
+
+```expect
+(none)
+```
+
+### case: keyframe selectors are not type selectors
+
+```css
+@keyframes fade {
+  from {
+    opacity: 0;
+  }
+}
+```
+
+```expect
+(none)
+```
+
+### case: inside :is()
+
+```css
+:is(tabel, div) {
+  color: red;
+}
+```
+
+```expect
+1:5 css/selector-type-no-unknown
+```

package/rules/css/selector-type-no-unknown.md

@@ -0,0 +1,45 @@
+---
+id: css/selector-type-no-unknown
+title: "No unknown type selectors"
+languages: [css]
+fix: manual
+fix_reason: "the intended element is the author's call"
+stability: preview
+options:
+  ignore: { type: "string[]", default: ["custom-elements"], description: "`custom-elements` allows hyphenated names; `default-namespace` skips un-namespaced types" }
+  ignoreTypes: { type: "string[]", default: [], description: "type selectors to accept; `/regex/` for a pattern" }
+ported_from: [stylelint/selector-type-no-unknown]
+since: 0.1.0
+---
+
+Every type selector is an HTML, SVG or MathML element. Custom elements (a hyphenated lowercase name) are allowed by default, and namespaced selectors are skipped.
+
+**Why:** A misspelt element name matches nothing.
+
+```codelaw
+native: css/selector-type-no-unknown
+```
+
+## How to fix
+
+1. Correct the element name.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+tabel {
+  border-collapse: collapse;
+}
+```
+
+#### Do
+
+```css
+table {
+  border-collapse: collapse;
+}
+```

package/rules/css/shorthand-property-no-redundant-values.cases.md

@@ -0,0 +1,34 @@
+# Cases: css/shorthand-property-no-redundant-values
+
+### case: four sides that pair up
+
+```css
+a {
+  padding: 1px 2px 1px 2px;
+  border-radius: 4px 4px / 2px 2px;
+}
+```
+
+```expect
+2:12 css/shorthand-property-no-redundant-values
+3:18 css/shorthand-property-no-redundant-values
+```
+
+```fixed
+a {
+  padding: 1px 2px;
+  border-radius: 4px / 2px;
+}
+```
+
+### case: values with var() can expand
+
+```css
+a {
+  margin: var(--x) var(--x);
+}
+```
+
+```expect
+(none)
+```

package/rules/css/shorthand-property-no-redundant-values.md

@@ -0,0 +1,37 @@
+---
+id: css/shorthand-property-no-redundant-values
+title: "No repeated values in shorthands"
+languages: [css]
+fix: auto
+stability: preview
+ported_from: [stylelint/shorthand-property-no-redundant-values]
+since: 0.1.0
+---
+
+Box shorthands such as `margin`, `padding`, `inset`, `gap` and `border-radius` give no value the shorthand would repeat anyway: `margin: 1px`, not `margin: 1px 1px`.
+
+**Why:** The shorter form says the same thing.
+
+```codelaw
+native: css/shorthand-property-no-redundant-values
+```
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+a {
+  margin: 1px 1px;
+}
+```
+
+#### Do
+
+```css
+a {
+  margin: 1px;
+}
+```

package/rules/css/string-no-newline.cases.md

@@ -0,0 +1,27 @@
+# Cases: css/string-no-newline
+
+### case: an escaped line break
+
+```css
+[title="one\
+two"] {
+  color: red;
+}
+```
+
+```expect
+(none)
+```
+
+### case: values are not checked by default
+
+```css
+a {
+  content: "one
+two";
+}
+```
+
+```expect
+(none)
+```

package/rules/css/string-no-newline.md

@@ -0,0 +1,45 @@
+---
+id: css/string-no-newline
+title: "No line breaks inside selector strings"
+languages: [css]
+fix: manual
+fix_reason: "whether the line break was meant is the author's call"
+stability: preview
+options:
+  ignore: { type: "string[]", default: ["at-rule-preludes", "declaration-values"], description: "contexts not to check: `at-rule-preludes`, `declaration-values`" }
+ported_from: [stylelint/string-no-newline]
+since: 0.1.0
+---
+
+A string in a selector does not contain an unescaped line break. With the default options, strings in at-rule preludes and declaration values are not checked.
+
+**Why:** A raw line break ends a CSS string early, so the selector is invalid and the rule is dropped.
+
+```codelaw
+native: css/string-no-newline
+```
+
+## How to fix
+
+1. Join the string onto one line, or escape the line break as `\A`.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+[title="one
+two"] {
+  color: red;
+}
+```
+
+#### Do
+
+```css
+[title="one two"] {
+  color: red;
+}
+```

package/rules/css/syntax-string-no-invalid.md

@@ -0,0 +1,46 @@
+---
+id: css/syntax-string-no-invalid
+title: "`@property` syntax strings are valid"
+languages: [css]
+fix: manual
+fix_reason: "the intended type is the author's call"
+stability: preview
+ported_from: [stylelint/syntax-string-no-invalid]
+since: 0.1.0
+---
+
+The `syntax` of a `@property` rule is `"*"` or a `|`-separated list of supported `<type>` names and keywords, each with an optional `+` or `#`.
+
+**Why:** A browser ignores a `@property` rule whose syntax is invalid, so the custom property is not registered.
+
+```codelaw
+native: css/syntax-string-no-invalid
+```
+
+## How to fix
+
+1. Use a supported type name such as `<length>`, `<color>` or `<number>`.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+@property --size {
+  syntax: "<size>";
+  inherits: false;
+  initial-value: 0px;
+}
+```
+
+#### Do
+
+```css
+@property --size {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+```

package/rules/css/value-no-vendor-prefix.md

@@ -0,0 +1,40 @@
+---
+id: css/value-no-vendor-prefix
+title: "No vendor-prefixed values"
+languages: [css]
+fix: suggest
+fix_reason: "browsers that need the prefix lose the value"
+stability: preview
+options:
+  ignoreValues: { type: "string[]", default: ["box", "inline-box"], description: "values to accept, without their prefix; `/regex/` for a pattern" }
+ported_from: [stylelint/value-no-vendor-prefix]
+since: 0.1.0
+---
+
+Values a build tool prefixes, such as `-webkit-flex` or `-moz-calc()`, are written without the prefix. `-webkit-box` and `-webkit-inline-box` are allowed, as line clamping still needs them.
+
+**Why:** Prefixing is a build step; hand-written prefixes go stale and duplicate code.
+
+```codelaw
+native: css/value-no-vendor-prefix
+```
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+a {
+  display: -webkit-flex;
+}
+```
+
+#### Do
+
+```css
+a {
+  display: flex;
+}
+```

package/rules/graph/no-unused-css-classes.md

@@ -0,0 +1,55 @@
+---
+id: graph/no-unused-css-classes
+title: CSS classes must be used somewhere
+languages: [css]
+scope: project
+severity: warn
+fix: suggest
+fix_reason: "A class can be built at run time or used by markup outside the repo, so removing its rule needs a human or agent to accept the diff."
+stability: preview
+ported_from: [purgecss/unused-selector]
+since: 0.1.0
+---
+
+Every class a stylesheet defines appears in the project's HTML, JSX, templates or strings.
+
+**Why:** a rule for a class no markup uses is dead weight every page downloads, and it makes the stylesheet harder to change safely.
+
+```codelaw
+graph:
+  class:
+    defined_in: css
+message: "`.$CLASS` is defined in `$FILE` but nothing in the project uses it"
+fix:
+  - else:
+    do: [remove-rule]
+```
+
+## How to fix
+
+1. Search for the class: a name built at run time (`"btn-" + kind`) counts only through its static prefix.
+2. If markup outside the repo uses it, add the file to `[graph] keep` or list it in the package's `style` or `exports`.
+3. Otherwise delete the rule, or the class from its selector list.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css files
+/* src/styles.css */
+.card { padding: 1rem; }
+.legacy-banner { color: red; }
+<!-- index.html -->
+<div class="card"></div>
+```
+
+#### Do
+
+```css files
+/* src/styles.css */
+.card { padding: 1rem; }
+<!-- index.html -->
+<div class="card"></div>
+```