cloudfour / stylelint-config-cloudfour Goto Github PK

Cloud Four's shareable config

License: MIT License

CSS 7.59% JavaScript 70.09% SCSS 22.32%

stylelint-config-cloudfour's Introduction

stylelint-config-cloudfour

A sharable stylelint config object that enforces Cloud Four's CSS Standards

Note that this config mostly just extends the SUIT config, and any additions or changes from the SUIT standard should be well-documented here to explain the deviation.

Installation

Install stylelint and stylelint-config-cloudfour:

npm install stylelint stylelint-config-cloudfour --save-dev

Usage

If you've installed stylelint-config-cloudfour locally within your project, just set your stylelint config to:

{
  "extends": "stylelint-config-cloudfour"
}

You'll probably also want to add a script to your package.json file to make it easier to run Stylelint with this config:

"scripts": {
  "lint:css": "stylelint '**/*.css'"
}

Using with Prettier

It's common to pair Stylelint with Prettier. If you're going to use both, you'll want to add stylelint-config-prettier, which is a config that disables any Stylelint rules that conflict with Prettier.

npm install stylelint-config-prettier --save-dev

Then add it to your Stylelint config. It'll need to be the last item in the extends array so it can override other configs.

{
  extends: ["stylelint-config-cloudfour", "stylelint-config-prettier"],
}

Then you can update your package.json script to run Prettier as well as Stylelint:

"scripts": {
  "lint:css": "prettier --list-different '**/*.css' && stylelint '**/*.css'"
}

Extending the config

Simply add a "rules" key to your config, then add your overrides and additions there.

For example, to change the at-rule-no-unknown rule to use its ignoreAtRules option, change the indentation to tabs, turn off the number-leading-zero rule,and add the unit-whitelist rule:

{
  "extends": "stylelint-config-cloudfour",
  "rules": {
    "at-rule-no-unknown": [ true, {
      "ignoreAtRules": [
        "extends",
        "ignores"
      ]
    }],
    "indentation": "tab",
    "number-leading-zero": null,
    "unit-whitelist": ["em", "rem", "s"]
  }
}

Documentation

What's the difference between stylelint-config-cloudfour-suit and stylelint-config-cloudfour?

stylelint-config-cloudfour only contains the CSS formatting rules. stylelint-config-cloudfour-suit extends it, and additionally enforces the SUIT naming convention. In most cases, you should use stylelint-config-cloudfour-suit, but if your project doesn't follow the SUIT naming scheme, then you can use stylelint-config-cloudfour directly.

Extends

stylelint-config-suitcss: Configuration rules to ensure your CSS code is compliant with SUIT CSS's code style.
stylelint-config-standard-scss: The standard shareable SCSS config for Stylelint.

Plugins

stylelint-high-performance-animation: Prevent the use of low performance animation and transition properties.

Configured Lints

This is a list of the lints turned on in this configuration (beyond the ones that come from stylelint-config-suitcss & stylelint-config-standard-scss), and what they do.

at-rule-empty-line-before: Require an empty line before at-rules. disabled temporarily, pending #2480
comment-empty-line-before: Require an empty line before comments. overriding SUIT rule to exclude the first nested comment in a block.
max-line-length: Limit line lengths to 80 characters for comments only. overriding SUIT rule to ignore comments that contain URLs.
no-descending-specificity: Disallow selectors of lower specificity from coming after overriding selectors of higher specificity. disabled due to false positives in SCSS contexts.
rule-empty-line-before: Require an empty line before multi-line rules. overriding SUIT rule to exclude the first multi-line rule in a block, and to ignore rules following comments.

Order

order/order: Specifies the order of content within declaration blocks: Variables, @include statements, declarations, block @include statements, nested rules.
order/properties-alphabetical-order: Specify the alphabetical order of properties within declaration blocks.

SCSS

at-rule-disallowed-list: Disallow use of @extend because it's considered an anti-pattern, and @import because it's deprecated
scss/declaration-nested-properties: Disallow SCSS nested property groups, such as font { size: 16px; weight: 700; }.
scss/selector-no-redundant-nesting-selector: Disallow redundant nesting selectors (&).

Performance

plugin/no-low-performance-animation-properties: Prevent the use of low performance animation and transition properties that trigger layout.

Changelog

License

stylelint-config-cloudfour's People

Contributors

Stargazers

Watchers

Forkers

alexrogalskiy

stylelint-config-cloudfour's Issues

Add `include` to at-rule-empty-line-before ignore list

Currently, the config forces an empty line before all @include rules, which looks awkward when you include a SCSS mixin as the first line in a block (which is common). eg:

.rule {
  @include do_the_thing();
  color: red;
}

Add Documentation for adding package.json scripts

See https://github.com/cloudfour/eslint-config for example

source: cloudfour/cloudfour.com-patterns#507 (comment)

Deploy to NPM

This should live on NPM. Once it's released as a proper NPM module, update the readme install instructions to match, and the NPM badge.

Add Travis CI to run tests

Add Travis CI to automatically run tests for pull requests, and add "build passing" badge.

Add stylelint-a11y

Review stylelint-a11y to see if it should be included: https://github.com/YozhikM/stylelint-a11y

Add stylelint-high-performance-animation

Review stylelint-high-performance-animation to see if it should be added: https://github.com/kristerkari/stylelint-high-performance-animation

Add Greenkeeper

Add Greenkeeper to automatically check for updates to NPM dependencies. Add greenkeeper badge.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Update actions/checkout digest to 692973e
Update dependency eslint to v9
Update dependency eslint-config-stylelint to v22
Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/ci.yml

actions/checkout v4@b4ffde65f46336ab88eb53be808477a3936bae11

actions/setup-node v4

npm

package.json

stylelint-config-standard-scss ^13.0.0

stylelint-config-suitcss ^21.0.0

stylelint-high-performance-animation 1.10.0

@stylelint/prettier-config 3.0.0

@stylelint/remark-preset 5.1.1

eslint 8.57.0

eslint-config-stylelint 21.0.0

npm-run-all2 6.2.2

postcss 8.4.41

prettier 3.3.3

remark-cli 12.0.1

stylelint 16.9.0

stylelint ^16.0.0

node >=18.12.0

nvm

.nvmrc

Check this box to trigger a request for Renovate to run again on this repository

Add stylelint-use-logical-spec

See discussion in cloudfour/cloudfour.com-patterns#1576 (comment)

Enforce quote styles in Sass commands

@tylersticka said:

I've also noticed our linting/formatting isn't enforcing quote styles in Sass commands like @use.

It's possible that #130 will fix this.

Add stylelint-order

Add stylelint-order to enforce both alphabetical property order and also to ensure @extend and @include statements are at the top of a block.

See discussion in cloudfour/cloudfour.com-patterns#1077

Add Prettier Integration

This config should include Prettier integration.

ex: https://www.freecodecamp.org/news/integrating-prettier-with-eslint-and-stylelint-99e74fede33f/

source: cloudfour/cloudfour.com-patterns#507 (comment)

Add `stylelint-config-cloudfour-bem`

Create a new repo with a config that extends this one, and adds the BEM plugin to enforce class naming conventions. This should mirror how stylelint-config-standard includes stylelint-config-recommended.

This way, projects that use BEM naming can use that version, and projects that don't still benefit from our standard stylelint config.

Remove `custom-property-no-outside-root`

This rule requires that custom properties only be set on the :root element which severely limits how they can be used.

It requires this in order to make the old PostCSS polyfill for custom properties work. That treats custom properties as immutable variables (like SCSS vars) which limits their power. From the docs:

It currently just aims to provide a future-proof way of using a limited subset (to :root selector) of the features provided by native CSS custom properties.

We should be able to use the full set of features provided by CSS custom properties. The polyfill behavior was for IE11 (which didn't support custom props.) On most new projects we no longer support IE11 so we should ditch this rule.

https://github.com/suitcss/stylelint-suitcss/blob/master/rules/custom-property-no-outside-root/README.md

Add stylelint-scss

Add stylelint-scss to enforce best practices in Sass code.

See discussion in cloudfour/cloudfour.com-patterns#1077

Improve the release process to better handle OTP

We should upgrade from npmpub (which doesn't handle npm's 2FA to np, which does.

See the Stylelint team's discussion of this issue.

Add `camelCaseSvgKeywords`

currentColor was brought into CSS from SVG, and that's why it kept the unusual capitalization. The CSS level 4 spec formally changed it to currentcolor and Stylelint recently updated their rules to enforce that.

See discussion here: stylelint/stylelint#5863

After reviewing that change, we've decided to use the camelCaseSvgKeywords option to preserve interoperability between the CSS and SVG specs: https://stylelint.io/user-guide/rules/list/value-keyword-case/#camelcasesvgkeywords-true--false-default-false

Disable `no-descending-specificity`

This rule is usually but not always right. Case in point, it gets confused in SCSS contexts:

254:3 ✖ Expected selector .wp-block-pullquote p to come before selector .wp-block-quote.is-large p no-descending-specificity
254:3 ✖ Expected selector .wp-block-pullquote p to come before selector .wp-block-quote.is-style-large p no-descending-specificity
274:3 ✖ Expected selector .wp-block-quote.is-style-large p to come before selector .wp-block-pullquote.is-style-solid-color blockquote p no-descending-specificity
274:3 ✖ Expected selector .wp-block-quote.is-large p to come before selector .wp-block-pullquote.is-style-solid-color blockquote p no-descending-specificity

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Location: package.json
Error type: The renovate configuration file contains some invalid settings
Message: Invalid configuration option: author, Invalid configuration option: bugs, Invalid configuration option: eslintConfig, Invalid configuration option: eslintIgnore, Invalid configuration option: homepage, Invalid configuration option: jest, Invalid configuration option: keywords, Invalid configuration option: license, Invalid configuration option: main, Invalid configuration option: name, Invalid configuration option: packageRules[0].stylelint-config-suitcss, Invalid configuration option: packageRules[1].eslint, Invalid configuration option: packageRules[1].eslint-config-stylelint, Invalid configuration option: packageRules[1].jest, Invalid configuration option: packageRules[1].jest-preset-stylelint, Invalid configuration option: packageRules[1].npm-run-all, Invalid configuration option: packageRules[1].npmpub, Invalid configuration option: packageRules[1].remark-cli, Invalid configuration option: packageRules[1].remark-preset-lint-consistent, Invalid configuration option: packageRules[1].remark-preset-lint-recommended, Invalid configuration option: packageRules[1].stylelint, Invalid configuration option: packageRules[2].stylelint, Invalid configuration option: remarkConfig, Invalid configuration option: renovate, Invalid configuration option: scripts, Invalid configuration option: version

Disallow @extend

We should disallow @extend since it's often considered an anti-pattern these days

Allow no empty line between comment and rule

Currently the config always forces an empty line before multi-line rules, which means you can't add comments directly above a rule, which prevents both docblock-style comments and also helpful one-line comments, eg:

//
// Complicated Rule Documentation
// This rule is very complicated and deserves a bunch of explanation
// Like multiple lines worth
// Seriously
//
.rule {
  color: red;
}

// IE11 bugfix to prevent layout from collapsing on small screens
.rule {
  display: none;
}

Ignore `transition` and `animation` from `declaration-block-no-redundant-longhand-properties` rule

It is especially helpful when adding CSS transitions or keyframe animations to use longhand properties.

We should be able to ignore transition and animation and I think that would be enough: https://stylelint.io/user-guide/rules/declaration-block-no-redundant-longhand-properties/#optional-secondary-options

Add package-lock.json

It is currently missing package-lock.json