add packages/stylelint-plugin & initial rule to prevent raw values

[senadir]

Description

after some initial talking with @jasmussen we had the idea to try stricter rules in the SCSS codebase.
This PR is a proposal toward a cleaner, less error-prone SCSS codebase.
it introduce a stylelint plugin for a basis to create new rules & extend existing rules.
the first rule it adds is declaration-strict-value and it prohibits the use of raw values in color,border-color,background,z-index, so things like this are not valid

.element {
    color: #e3e3e3;
}

.element {
    z-index: 1;
}

.element {
    background: #e3e3e3;
}

however, those are valid:

.element {
    color: theme(primary);
}
.element {
    color: transparent;
}
.element {
    color: currentColor;
}
.element {
    z-index: 0;
}

however, this only PR only add the detecting but doesn't fixes anything yet, there are 111 violation, not all of them are correct, but most of them are, if you want to ignore a violation you can turn off the rule.

/* stylelint-disable scale-unlimited/declaration-strict-value */
.has-pale-pink-background-color {
	background-color: #f78da7;
}
/* stylelint-enable */

what I would really appreciate is some help into fixing all of those issues, it's going to take some time to finish them all so feel free to push to this branch.

How has this been tested?

run npm install to install the new dependencies.

run npm run lint-css to see the new problems.

Screenshots

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[ntwb]

Why not just add the stylelint stylelint-declaration-strict-value plugin to the existing stylelint-config-wordpress shared config?

For the most part it looks like these changes would be good for WP Core also.

[senadir]

my intention was to introduce more custom rules with time (things like accessibility checks, custom checks on complex values or checks that are logical for Gutenberg) that are ready to use plugin didn't provide.

do you think I should refactor this to be used directly inside the top level .stylelintrc.json and add a plugin later.

as for not adding it directly to stylelint-config-wordpress I actually haven't thought of that 😅

what do you suggest?

[youknowriad]

I think it's the right opportunity to move stylelint-config-wordpress to the packages and consolidate under a unique package maintained with the rest of the WordPress packages.

[ntwb]

Probably worth having a discussion in #core-js about this, might be a bit late for this weeks dev chat that is about to occur though.

For what its worth I also plan on moving stylelint-confit-wordpress to this repo and have it become @wordpress/stylelint-config, I’ve just not had the time to do that yet.

We can add a custom config to stylelint-config-wordpress, it already has two configs, the standard/default for CSS, and the additional for SCSS that extends the default CSS.

If needed we can add more rules and plugins such as stylelint-declaration-strict-value to the above SCSS config proving its acceptable for WP Core also, if not, it can be added here to the Gutenberg config.

If new stylelint plugins are to be created we should create a new package for each, eg, @wordpress/stylelint-plugin-abc, @wordpress/stylelint-plugin-xyz, etc so that they can also be used by the wider community

————

After rereading the above I think adding stylelint-declaration-strict-value to the existing stylelint config here in this repo would be best at this stage, then it can be added to stylelint-config-wordpress once WP has accepted that as a new Coding Standard.

P.s. stylelint is always spelled entirely in lowercase

[gziolo]

For what its worth I also plan on moving stylelint-confit-wordpress to this repo and have it become @wordpress/stylelint-config, I’ve just not had the time to do that yet.

Yeah, it would be great to have everything colocated as we already have it for ESLint, Browserslist or Babel 👍

[gziolo]

With #27810 landed – @wordpress/stylelint-config exists in the repository.

[senadir]

so good to close this?

[gziolo]

so good to close this?

I don't know whether it contains any of the changes proposed for enabled rules in this PR. The package itself is now maintained in the monorepo.

[ntwb]

I think my previous comment above would still be somewhat related, we can add the stylelint-declaration-use-variable stylelint plugin to the now included stylelint package if agred upon to the config

This PR could be adapted for that, but maybe a new PR would be a little cleaner and easier, up to you @senadir

[kathrynwp]

Hi @senadir @gziolo - hey there! I'm circling back to this to see if it's still valid and planned, or whether it's best to close it out. Let me know, thank you!

[priethor]

Let's close this issue and reopen it again if necessary. 🙏