Stylelint rule to disallow block declarations inside at rules.
Switch branches/tags
Nothing to show
Clone or download
Latest commit 6749f0c Aug 18, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
tests add support for ignore list / fixes #2 Sep 24, 2017
.gitignore first commit May 13, 2017
.travis.yml enable travis May 13, 2017
LICENSE.md add LICENSE May 13, 2017
README.md Fix typo Aug 18, 2018
index.js add support for ignore list / fixes #2 Sep 24, 2017
package.json 0.3.1 Aug 18, 2018

README.md

stylelint-at-rule-no-children

Stylelint rule to disallow block declarations inside at rules.

Build Status

Usage
Configuration
Why?
TL;DR

Usage

Install the package:

npm i stylelint-at-rule-no-children

Add the plugin and rule to your .stylelintrc, like so:

{
  ...
  plugins: [
    ...
    "stylelint-at-rule-no-children",
  ],
  rules: {
    ...
    "adityavm/at-rule-no-children": [{ <options> }],
  }
}

Configuration

The rule accepts an ignore list of strings to allow when checking rules or their parameters. Consider the following:

@include foo() {
  body { color: #ff0000; }
}

@foo() {
  body { color: #ff0000; }
}

Normally, both the above blocks would be rejected. However, setting the following config will allow them both:

{
  "adityavm/stylelint-at-rule-no-children": [{ ignore: ["foo"] }],
}

Note: This is not recommended, as it goes against the ideology behind the plugin. But if you need to define exceptions, now you can.

Why?

Conceptually, this is similar to why we don't declare functions inside conditional blocks in general programming.

CSS is inherently difficult to understand after a certain point. When we introduce branches in the CSS, it becomes more difficult. To top off the complexity, CSS allows defining whole blocks inside a conditional block, which can result in multiple declarations of the same selectors in different parts of the file (especially if more than one developer touches a file).

By disallowing block declarations inside at rules, we force developers to have only one declaration for a selector per file. Any and all conditions are included in that selector. This ensures that a developer searching through a file for a selector can be sure that their first hit is the only declaration they need to consider.

TL;DR

/* good css */

.foo {
  color: red;

  @media screen and (max-width: 480px) {
    color: blue;
  }
}

/* bad css */

.foo {
  color: red;
}

@media screen and (max-width: 480px) {
  .foo {
    color: blue;
  }
}