Skip to content

no-invalid-at-rule-placement.md

Latest commit

 

History

History
152 lines (112 loc) · 3.73 KB

no-invalid-at-rule-placement.md

File metadata and controls

152 lines (112 loc) · 3.73 KB

no-invalid-at-rule-placement

Disallow invalid placement of at-rules.

Background

At-rules are CSS statements that instruct CSS how to behave. Some at-rules have strict placement requirements that must be followed for the stylesheet to work correctly. For example:

  • The @charset rule must be placed at the very beginning of a stylesheet, before any other rules, comments, or whitespace.
  • The @import rule must be placed at the beginning of a stylesheet, before any other at-rules (except @charset and @layer statements) and style rules.
  • The @namespace rule must be placed after @charset and @import and before any other at-rules and style rules.

If these rules are placed incorrectly, browsers will ignore them, resulting in potential encoding issues, missing imported styles, or incorrect namespace application.

Rule Details

This rule warns when it finds:

  1. A @charset rule that is not the first rule in the stylesheet
  2. An @import rule that appears after any other at-rules or style rules (except @charset and @layer statements)
  3. A @namespace rule that appears before @charset or @import or after any other at-rules or style rules

Examples of incorrect code:

/* eslint css/no-invalid-at-rule-placement: "error" */

/* @charset not at the beginning */
@import "foo.css";
@charset "utf-8";
/* eslint css/no-invalid-at-rule-placement: "error" */

/* @import after style rules */
a {
	color: red;
}
@import "foo.css";
/* eslint css/no-invalid-at-rule-placement: "error" */

/* @import after @layer block */
@layer base {
}
@import "bar.css";
/* eslint css/no-invalid-at-rule-placement: "error" */

/* @namespace after style rules */
a {
	color: red;
}
@namespace svg url("http://www.w3.org/2000/svg");
/* eslint css/no-invalid-at-rule-placement: "error" */

/* @namespace after @media */
@media (min-width: 600px) {
}
@namespace svg url("http://www.w3.org/2000/svg");

Examples of correct code:

/* eslint css/no-invalid-at-rule-placement: "error" */

@charset "utf-8"; /* @charset at the beginning */
@import "foo.css";
/* eslint css/no-invalid-at-rule-placement: "error" */

/* @import before style rules */
@import "foo.css";
a {
	color: red;
}
/* eslint css/no-invalid-at-rule-placement: "error" */

/* @import after @layer statement */
@layer base;
@import "baz.css";
/* eslint css/no-invalid-at-rule-placement: "error" */

/* Multiple @import rules together */
@import "foo.css";
@import "bar.css";
a {
	color: red;
}
/* eslint css/no-invalid-at-rule-placement: "error" */

/* @namespace before style rules */
@namespace svg url("http://www.w3.org/2000/svg");
a {
	color: red;
}
/* eslint css/no-invalid-at-rule-placement: "error" */

/* @namespace before @media */
@namespace svg url("http://www.w3.org/2000/svg");
@media (min-width: 600px) {
}
/* eslint css/no-invalid-at-rule-placement: "error" */

/* @charset, @import, and @namespace in correct order */
@charset "utf-8";
@import "foo.css";
@namespace svg url("http://www.w3.org/2000/svg");
a {
	color: red;
}

When Not to Use It

You can disable this rule if your stylesheets don't use @charset, @import, or @namespace rules, or if you're not concerned about the impact of incorrect placement on encoding, namespace usage, or style loading.

Prior Art

Further Reading