Prepare 23.0.0 #198

jeddy3 · 2021-09-18T12:26:08Z

We're making changes to get users up and running quickly with comprehensive linting that doesn't leave gaps, e.g. by encouraging users to extend an appropriate shared-config for their choice of styling language.

This pull request is part of those changes. It turns on a handful of rules that'll help new users write modern CSS that looks like something they'd see in the specifications.

For context, our previous approach was to provide the minimal configurations and suggest users build on top of them, going as far as originally emphasising this config and the recommended one in our docs equally. However, I don't think this is helpful for the majority of new users, even those who intend to use stylelint and a pretty-printer like Prettier together, as there are a number of stylistic rules in stylelint and this plugin that are complementary to Prettier, e.g. the *-empty-line-before ones. Better to extend a standard config and use *-config-prettier to turn off conflicting rules.

Power users who wish to craft their own config on top of the recommended config can still do so. The changes in this pull request are to provide better linting for non-power users writing CSS.

Ref: stylelint/stylelint#5205

jeddy3 · 2021-09-18T12:37:16Z

README.md

 [Google's CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html#CSS_Formatting_Rules), [Airbnb's Styleguide](https://github.com/airbnb/css#css), and [@mdo's Code Guide](https://codeguide.co/#css).

-It favours flexibility over strictness for things like multi-line lists and single-line rulesets, and tries to avoid potentially divisive rules.
-
-Use it as is or as a foundation for your own config.


We can take this second line out as we encourage users (lower down the README) to extend the config with more rules that limit language features, e.g. unit-allowed-list. These are some of the most useful, unique and powerful rules in stylelint. We should encourage users to investigate them. They tend to be specific to teams and projects, so we can't add them to this config.

jeddy3 · 2021-09-18T12:37:44Z

README.md

@@ -100,23 +108,7 @@ npm install stylelint-config-standard --save-dev

 ## Usage

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


We can take out this legacy guidance.

jeddy3 · 2021-09-18T12:39:53Z

README.md


 /**
 * Multi-line comment
 */

+:root {
+  --brand-red: hsl(5deg 10% 40%);


We can add an example of modern custom properties.

jeddy3 · 2021-09-18T12:40:20Z

README.md

-  top: calc(calc(1em * 2) / 3);
+  top: calc(100% - 2rem);


We can remove this odd nested calc.

jeddy3 · 2021-09-18T12:41:47Z

README.md

-    background: color(rgb(0, 0, 0) lightness(50%));
-    font-family: helvetica, "arial black", sans-serif;
+    background: hsl(20deg 25% 33%);


We can remove this old color function.

Incidentally, the upcoming relative color syntax looks great!

jeddy3 · 2021-09-18T12:43:03Z

README.md

- Specify a maximum line length using:
-  - [`max-line-length`](https://github.com/stylelint/stylelint/blob/master/lib/rules/max-line-length/README.md)
-
-### Using the config with SugarSS syntax


We can take this section out as we'll be encouraging users to adopt appropriate shared-configs for their language of choice.

hudochenkov · 2021-09-18T15:19:14Z

index.js

@@ -37,13 +40,16 @@ module.exports = {
 				ignore: ['after-comment', 'inside-single-line-block'],
 			},
 		],
+		'custom-media-pattern': /^([a-z][a-z0-9]*)(-[a-z0-9]+)*$/,


I think all rules with RegExps would be confusing for non-power user. Because if there is a violation we will show this RegExp and use might not be familiar with it at all.

Good point.

We can use the message secondary option to make them simpler, e.g.:

Expected custom media name to be kebab-case

It's one of the reasons we have that option.

We could try that.

Done. Each is slightly adapted from the original message in the rule.

ntwb · 2021-09-20T02:24:42Z

Love this, and whilst I am in broad agreement with everything proposed, I've one question:

https://www.npmjs.com/package/stylelint-config-standard has 1,337,936 weekly downloads, this is pretty significant (and pretty cool), but when this is released it will be a breaking change...

Would it be worth considering that for stylelint v14 these new rule changes are added as warnings, then in the next major release changed to the default error.

I'm thinking this might help facilitate non-blocking uptake of the new release for users, this then gives them time to update their CSS before the following major release?

jeddy3 · 2021-09-25T16:26:50Z

I'd prefer to have new rules as errors to be consistent with previous major releases on this package. However, I understand your point. What we can do is better emphasise in the README how to turn rules off or change their severity to warnings. I'll amend the pull request to do this. We'll then be consistent in our recommendation that users adopt the standard (rather than recommended) config and then turn off any rules they don't need, whether that's by adding a rules property or using a shared config like stylelint-config-prettier.

jeddy3 · 2021-09-27T06:53:50Z

@ntwb In 6db6439, I've expanded the "Extending the config" section of the README to give explicit examples of turning off and lowering the severity of rules. And I've linked to that section from the migration notes in the CHANGELOG.

Tests will pass once #199 is merged and this branch rebased.

This pull request is ready for review.

When stylelint 14 and recommended config 6 are released we should:

Update the deps
Merge
Release

ntwb · 2021-09-28T01:36:15Z

@ntwb In 6db6439 (#198), I've expanded the "Extending the config" section of the README to give explicit examples of turning off and lowering the severity of rules. And I've linked to that section from the migration notes in the CHANGELOG.

Thanks, looks great 💯

Tests will pass once #199 is merged and this branch rebased.

I approved and merged this in and updated the branch here in this PR

jeddy3 commented Sep 18, 2021

View reviewed changes

jeddy3 force-pushed the add-rules branch from 5498e45 to 41c5f86 Compare September 18, 2021 12:39

jeddy3 commented Sep 18, 2021

View reviewed changes

hudochenkov reviewed Sep 18, 2021

View reviewed changes

jeddy3 mentioned this pull request Sep 19, 2021

Release 14.0.0 stylelint/stylelint#5205

Closed

30 tasks

jeddy3 mentioned this pull request Sep 25, 2021

Help us prepare for the next major release of stylelint stylelint-scss/stylelint-scss#541

Closed

jeddy3 force-pushed the add-rules branch from acc343a to 53205a8 Compare September 26, 2021 16:52

jeddy3 changed the title ~~Add rules to help new users get started~~ Prepare 23.0.0 Sep 27, 2021

jeddy3 added 5 commits October 6, 2021 15:26

Add rules to help new users get started

212c84e

Fix pattern regexs

baa4615

Update to latest stylelint and recommended config

a1a6e0d

Prepare changelog

f022102

Fix typo

49a904d

jeddy3 force-pushed the add-rules branch from 2619cf1 to 49a904d Compare October 6, 2021 14:33

jeddy3 added 5 commits October 16, 2021 15:28

Fix media query feature name

19cd51e

Rename fixtures

b6109c4

Use prerelease versions

8f126c6

23.0.0-0

91b1441

Bump Stylelint and config

6b81805

jeddy3 merged commit 8148a70 into master Oct 21, 2021

jeddy3 deleted the add-rules branch October 21, 2021 15:22

sync-by-unito bot mentioned this pull request Nov 1, 2021

build(deps-dev): bump stylelint and stylelint-config-standard numbersprotocol/capture-lite#1031

Closed

sync-by-unito bot mentioned this pull request Dec 1, 2021

build(deps-dev): bump stylelint and stylelint-config-standard numbersprotocol/capture-lite#1078

Closed

jeddy3 mentioned this pull request Dec 10, 2021

Switch to enforcing single quotes #14

Closed

sync-by-unito bot mentioned this pull request Jan 1, 2022

build(deps-dev): bump stylelint and stylelint-config-standard numbersprotocol/capture-lite#1143

Closed

sync-by-unito bot mentioned this pull request Jan 27, 2022

build(deps-dev): bump stylelint and stylelint-config-standard numbersprotocol/capture-lite#1195

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Prepare 23.0.0 #198

Prepare 23.0.0 #198

jeddy3 commented Sep 18, 2021 •

edited

jeddy3 Sep 18, 2021 •

edited

jeddy3 Sep 18, 2021

jeddy3 Sep 18, 2021

jeddy3 Sep 18, 2021

jeddy3 Sep 18, 2021

jeddy3 Sep 18, 2021

hudochenkov Sep 18, 2021

jeddy3 Sep 18, 2021 •

edited

hudochenkov Sep 18, 2021

jeddy3 Sep 18, 2021

ntwb commented Sep 20, 2021

jeddy3 commented Sep 25, 2021

jeddy3 commented Sep 27, 2021 •

edited

ntwb commented Sep 28, 2021

		@@ -100,23 +108,7 @@ npm install stylelint-config-standard --save-dev

		## Usage

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

Prepare 23.0.0 #198

Prepare 23.0.0 #198

Conversation

jeddy3 commented Sep 18, 2021 • edited

jeddy3 Sep 18, 2021 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jeddy3 Sep 18, 2021 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ntwb commented Sep 20, 2021

jeddy3 commented Sep 25, 2021

jeddy3 commented Sep 27, 2021 • edited

ntwb commented Sep 28, 2021

jeddy3 commented Sep 18, 2021 •

edited

jeddy3 Sep 18, 2021 •

edited

jeddy3 Sep 18, 2021 •

edited

jeddy3 commented Sep 27, 2021 •

edited