@codelaw/rules-css 0.0.0-stage → 0.1.0

package/rules/css/no-empty-block.cases.md

@@ -0,0 +1,42 @@
+# Cases: css/no-empty-block
+
+### case: a block holding a comment is not empty
+
+```css
+a {
+  /* todo */
+}
+```
+
+```expect
+(none)
+```
+
+### case: a named layer block orders the cascade
+
+```css
+@layer base {}
+```
+
+```expect
+(none)
+```
+
+### case: an empty block nested in a rule
+
+```css
+a {
+  color: red;
+  &:hover {}
+}
+```
+
+```expect
+3:3 css/no-empty-block
+```
+
+```fixed
+a {
+  color: red;
+}
+```

package/rules/css/no-empty-block.md

@@ -0,0 +1,42 @@
+---
+id: css/no-empty-block
+title: "No empty blocks"
+languages: [css]
+fix: auto
+stability: preview
+ported_from: [stylelint/block-no-empty]
+since: 0.1.0
+---
+
+No rule or at-rule has an empty block. A block holding only a comment is not empty, and `@layer name {}` is allowed because it fixes the layer's place in the cascade order.
+
+**Why:** An empty block does nothing; it is usually left over from an edit or a placeholder that was never filled.
+
+```codelaw
+native: css/no-empty-block
+```
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+.unused {}
+a {
+  color: red;
+}
+```
+
+#### Do
+
+```css
+a {
+  color: red;
+}
+```
+
+## Differences from the source
+
+`@layer name {}` is not reported: removing it would change the order of cascade layers.

package/rules/css/no-empty-source.md

@@ -0,0 +1,40 @@
+---
+id: css/no-empty-source
+title: "No empty stylesheets"
+languages: [css]
+fix: manual
+fix_reason: "whether to delete the file or fill it is the author's call"
+stability: preview
+ported_from: [stylelint/no-empty-source]
+since: 0.1.0
+---
+
+A stylesheet (or `<style>` element) holds something besides whitespace.
+
+**Why:** An empty stylesheet is a wasted request or a file left behind.
+
+```codelaw
+native: css/no-empty-source
+```
+
+## How to fix
+
+1. Delete the file and what links it, or add the styles it was meant to hold.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+
+```
+
+#### Do
+
+```css
+a {
+  color: red;
+}
+```

package/rules/css/no-important.md

@@ -0,0 +1,43 @@
+---
+id: css/no-important
+title: "No `!important`"
+languages: [css]
+fix: manual
+fix_reason: "the selector or layer that should win instead is a design call"
+stability: preview
+since: 0.1.0
+---
+
+No declaration is marked `!important`.
+
+**Why:** `!important` overrides the cascade, and the only way to override it is another `!important`, which escalates.
+
+```codelaw
+native: css/no-important
+```
+
+## How to fix
+
+1. Find the rule `!important` was overriding.
+2. Make this rule win by specificity, order or a cascade layer instead.
+3. Remove `!important`.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+a {
+  color: red !important;
+}
+```
+
+#### Do
+
+```css
+a.highlight {
+  color: red;
+}
+```

package/rules/css/no-invalid-double-slash-comments.md

@@ -0,0 +1,44 @@
+---
+id: css/no-invalid-double-slash-comments
+title: "No `//` comments"
+languages: [css]
+fix: manual
+fix_reason: "turning it into a comment changes what applies"
+stability: preview
+ported_from: [stylelint/no-invalid-double-slash-comments]
+since: 0.1.0
+---
+
+The sheet has no `//` comments: CSS has only `/* … */` comments.
+
+**Why:** CSS reads `//` as part of a selector or property, so the rule or declaration after it is dropped.
+
+```codelaw
+native: css/no-invalid-double-slash-comments
+```
+
+## How to fix
+
+1. Wrap the comment in `/* … */`, or delete it.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+a {
+  // color: red;
+  top: 0;
+}
+```
+
+#### Do
+
+```css
+a {
+  /* color: red; */
+  top: 0;
+}
+```

package/rules/css/no-invalid-position-at-import-rule.md

@@ -0,0 +1,48 @@
+---
+id: css/no-invalid-position-at-import-rule
+title: "`@import` comes first"
+languages: [css]
+fix: manual
+fix_reason: "moving the import makes its rules apply, which changes the page"
+stability: preview
+options:
+  ignoreAtRules: { type: "string[]", default: [], description: "at-rules that may come before `@import`" }
+ported_from: [stylelint/no-invalid-position-at-import-rule]
+since: 0.1.0
+---
+
+Every `@import` comes before all other statements except `@charset` and `@layer` statements, and is not nested.
+
+**Why:** Browsers ignore an `@import` that comes later, so the stylesheet is never loaded.
+
+```codelaw
+native: css/no-invalid-position-at-import-rule
+```
+
+## How to fix
+
+1. Move the `@import` to the top of the stylesheet.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+a {
+  color: red;
+}
+
+@import url("theme.css");
+```
+
+#### Do
+
+```css
+@import url("theme.css");
+
+a {
+  color: red;
+}
+```

package/rules/css/no-invalid-position-declaration.cases.md

@@ -0,0 +1,35 @@
+# Cases: css/no-invalid-position-declaration
+
+### case: nested group rules and descriptor at-rules
+
+```css
+a {
+  @media print {
+    color: black;
+  }
+}
+
+@font-face {
+  font-family: "Inter";
+}
+
+@page {
+  margin: 1in;
+}
+```
+
+```expect
+(none)
+```
+
+### case: directly inside a top-level @media
+
+```css
+@media print {
+  color: black;
+}
+```
+
+```expect
+2:3 css/no-invalid-position-declaration
+```

package/rules/css/no-invalid-position-declaration.md

@@ -0,0 +1,40 @@
+---
+id: css/no-invalid-position-declaration
+title: "Declarations sit inside rules"
+languages: [css]
+fix: manual
+fix_reason: "the selector it was meant for is the author's call"
+stability: preview
+ported_from: [stylelint/no-invalid-position-declaration]
+since: 0.1.0
+---
+
+A declaration sits inside a style rule, in an at-rule nested inside one, or in an at-rule that takes descriptors — never at the top level or directly inside a top-level `@media`.
+
+**Why:** A declaration with no rule around it applies to nothing; the browser drops it.
+
+```codelaw
+native: css/no-invalid-position-declaration
+```
+
+## How to fix
+
+1. Move the declaration into the style rule it belongs to.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+color: red;
+```
+
+#### Do
+
+```css
+a {
+  color: red;
+}
+```

package/rules/css/no-irregular-whitespace.md

@@ -0,0 +1,38 @@
+---
+id: css/no-irregular-whitespace
+title: "No irregular whitespace"
+languages: [css]
+fix: suggest
+fix_reason: "replacing it changes which elements the selector matches"
+stability: preview
+ported_from: [stylelint/no-irregular-whitespace]
+since: 0.1.0
+---
+
+Outside comments and strings, the sheet uses only ordinary whitespace: no no-break spaces, zero-width spaces or other Unicode spaces.
+
+**Why:** An irregular space is part of the name around it, so `.menu .item` is one class name and the selector matches nothing.
+
+```codelaw
+native: css/no-irregular-whitespace
+```
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+.menu .item {
+  color: red;
+}
+```
+
+#### Do
+
+```css
+.menu .item {
+  color: red;
+}
+```

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

@@ -0,0 +1,53 @@
+# Cases: css/no-unknown-property
+
+### case: descriptors inside @font-face are not properties
+
+```css
+@font-face {
+  font-family: "Inter";
+  font-display: swap;
+  unicode-range: U+0000-00FF;
+}
+```
+
+```expect
+(none)
+```
+
+### case: vendor-prefixed and custom properties are skipped
+
+```css
+a {
+  -webkit-tap-highlight-color: transparent;
+  --brand-colr: red;
+}
+```
+
+```expect
+(none)
+```
+
+### case: old IE hacks are skipped
+
+```css
+a {
+  *zoom: 1;
+  _height: 1px;
+}
+```
+
+```expect
+(none)
+```
+
+### case: no close known name, no fix
+
+```css
+a {
+  wibble: 1;
+}
+```
+
+```expect
+2:3 css/no-unknown-property
+```

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

@@ -0,0 +1,45 @@
+---
+id: css/no-unknown-property
+title: "No unknown properties"
+languages: [css]
+fix: suggest
+fix_reason: "the closest known name is a guess at what was meant"
+stability: preview
+options:
+  ignoreProperties: { type: "string[]", default: [], description: "properties to accept; `/regex/` for a pattern" }
+  checkPrefixed: { type: "boolean", default: false, description: "also check vendor-prefixed properties" }
+ported_from: [stylelint/property-no-unknown]
+since: 0.1.0
+---
+
+Every property is a known CSS property. Custom properties, vendor-prefixed properties and descriptors inside at-rules such as `@font-face` are skipped.
+
+**Why:** The browser drops a declaration whose property it does not know, so a typo silently loses the style.
+
+```codelaw
+native: css/no-unknown-property
+```
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+a {
+  colr: red;
+}
+```
+
+#### Do
+
+```css
+a {
+  color: red;
+}
+```
+
+## Differences from the source
+
+The property table is `known-css-properties` plus the names stylelint keeps from before it moved to CSSTree, not CSSTree's MDN-derived data. A fix is offered when a known property is one or two edits away.

package/rules/css/number-max-precision.md

@@ -0,0 +1,41 @@
+---
+id: css/number-max-precision
+title: "At most four decimal places"
+languages: [css]
+fix: suggest
+fix_reason: "rounding changes the value slightly"
+stability: preview
+options:
+  precision: { type: "integer", default: 4, description: "the most decimal places allowed" }
+  ignoreUnits: { type: "string[]", default: [], description: "units whose numbers are not checked" }
+ported_from: [stylelint/number-max-precision]
+since: 0.1.0
+---
+
+Numbers have at most four decimal places.
+
+**Why:** Extra precision is noise no screen can render.
+
+```codelaw
+native: css/number-max-precision
+```
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+a {
+  line-height: 1.333333;
+}
+```
+
+#### Do
+
+```css
+a {
+  line-height: 1.3333;
+}
+```

package/rules/css/property-no-deprecated.md

@@ -0,0 +1,40 @@
+---
+id: css/property-no-deprecated
+title: "No deprecated properties"
+languages: [css]
+fix: suggest
+fix_reason: "older browsers may support only the deprecated name"
+stability: preview
+options:
+  ignoreProperties: { type: "string[]", default: [], description: "properties to accept; `/regex/` for a pattern" }
+ported_from: [stylelint/property-no-deprecated]
+since: 0.1.0
+---
+
+The sheet uses no property the specifications deprecated, such as `word-wrap`, `grid-gap`, `page-break-*` or `clip`.
+
+**Why:** Deprecated properties are kept only as aliases or not at all, and may stop working.
+
+```codelaw
+native: css/property-no-deprecated
+```
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+a {
+  word-wrap: break-word;
+}
+```
+
+#### Do
+
+```css
+a {
+  overflow-wrap: break-word;
+}
+```

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

@@ -0,0 +1,40 @@
+---
+id: css/property-no-vendor-prefix
+title: "No vendor-prefixed properties"
+languages: [css]
+fix: suggest
+fix_reason: "browsers that need the prefix lose the declaration"
+stability: preview
+options:
+  ignoreProperties: { type: "string[]", default: [], description: "properties to accept; `/regex/` for a pattern" }
+ported_from: [stylelint/property-no-vendor-prefix]
+since: 0.1.0
+---
+
+Properties a build tool prefixes, such as `-webkit-transform`, are written without the prefix.
+
+**Why:** Prefixing is a build step; hand-written prefixes go stale and duplicate code.
+
+```codelaw
+native: css/property-no-vendor-prefix
+```
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+a {
+  -webkit-transform: scale(2);
+}
+```
+
+#### Do
+
+```css
+a {
+  transform: scale(2);
+}
+```

package/rules/css/selector-anb-no-unmatchable.md

@@ -0,0 +1,42 @@
+---
+id: css/selector-anb-no-unmatchable
+title: "No An+B selector that matches nothing"
+languages: [css]
+fix: manual
+fix_reason: "the intended position is the author's call"
+stability: preview
+ported_from: [stylelint/selector-anb-no-unmatchable]
+since: 0.1.0
+---
+
+`:nth-child()`, `:nth-of-type()` and their `last` forms are not given an argument that is always zero, such as `0`, `0n` or `0n+0`.
+
+**Why:** Positions start at 1, so these selectors never match.
+
+```codelaw
+native: css/selector-anb-no-unmatchable
+```
+
+## How to fix
+
+1. Use the position that was meant; the first element is `1`.
+
+## Examples
+
+### CSS
+
+#### Don't
+
+```css
+li:nth-child(0) {
+  color: red;
+}
+```
+
+#### Do
+
+```css
+li:nth-child(1) {
+  color: red;
+}
+```

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

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