Problem/Motivation
Follow-up to #2865971: Use stylelint as opposed to csslint in core. Configure the color-hex-length to be consistent with https://www.drupal.org/docs/develop/standards/css/css-coding-standards
From the CSS Formatting Guidelines:
When hex values are used for colors, use lowercase and, if possible, the shorthand syntax, e.g. #aaa. Colors may be expressed with any valid CSS value, such as hex value, color keyword, rgb() or rgba(). Note that IE8 does not support all color syntaxes and will require a fallback value.
Proposed resolution
Brief instructions on running stylelint - you'll need npm...
All the commands below take place in DRUPAL_ROOT/core
To install stylelint
npm install
This will install Drupal 8's npm dependencies of which stylelint is one.
To run it on all core css files. Apply this issue's patch and do the following command from DRUPAL_ROOT/core
npm run lint:css
Remaining tasks
User interface changes
None
API changes
None
| Comment | File | Size | Author |
|---|---|---|---|
| #45 | 2866801-45.patch | 22.2 KB | harsha012 |
| #36 | 2866801-36.patch | 22.35 KB | bmx269 |
| #31 | 2866801-31.patch | 30.89 KB | harsha012 |
| #28 | 2866801-28.patch | 30.89 KB | harsha012 |
| #25 | 2866801-25.patch | 30.09 KB | harsha012 |
Comments
Comment #2
alexpottComment #3
alexpottComment #4
brightboldComment #5
droplet commentedthis is default config:
https://github.com/stylelint/stylelint-config-standard/blob/master/index...
Comment #7
brightboldComment #8
brightboldRerolled.
@droplet's patch also fixes #2866802: Update stylelint rule color-hex-length to be consistent with Drupal's CSS standards so rather than separating that work into two patches that will have a lot of conflicts, we took the liberty of closing that issue as a duplicate.
Comment #9
brightboldComment #10
brightboldComment #12
brightboldI have no idea what that failure means or how to fix it. Maybe @droplet, who created the patch knows? If someone more knowledgeable could provide guidance that would be appreciated.
Comment #13
droplet commented\core\modules\color\tests\modules\color_test\themes\color_test_theme\color\color.incthis file I bet. Needed change to short hex.
Comment #14
brightbold@droplet — is there an issue for that that we can link here? Or would it be appropriate to include that change in this issue?
Comment #15
droplet commentedFix it this issue. We bring in the bug from here.
Comment #16
akshay kashyap commented@droplet i have added my patch please check it is working fine?
Comment #17
akshay kashyap commentedComment #18
droplet commented@Akshay
Thanks. What did you change? I don't see any changes to color.inc.
Comment #21
joelpittetSome of the new changes to core introduced a few more of these.
Comment #22
arunkumarkI have rerolled the patch as per the comment #21 for the Drupal 8.5.x version.
Comment #24
joelpittetSomething went wrong with the patch, that is way to big @arunkumark, it should be around 25k I presume
Comment #25
harsha012 commentedComment #27
joelpittetLikely needs #13 taken into account.
Comment #28
harsha012 commentedComment #30
joelpittetThe hex colors are converted to short values incorrectly here.
Comment #31
harsha012 commentedfixed as per #30
Comment #34
joelpittetI wonder if we can exclude the color.inc css for this and the test CSS?
Comment #35
joelpittetSplit this into 2, this for length and the second for hex case: #2939940: Update stylelint rules color-hex-case to be consistent with Drupal's CSS standards
Comment #36
bmx269 commentedHere is an updated patch, for only the length issue.
Comment #37
joelpittetFor testbot & the win!
Comment #39
joelpittetOk, so there is a bug on how the color module compares, the values need to be normalized to 6 or 3 for comparison. I went with the longer one because it's easier to test for. There is technically a test for this (because it's failing when we change CSS colors to short).
Comment #40
joelpittetThis may be something I need to split off into an issue that could be backported to 7.x because I'm sure it's the same there.
Comment #41
joelpittetPostponing on #2940088: Shorthand hex colors in CSS files break color module's comparisons
Comment #42
joelpittetThe postponed patch is committed, I'm retesting #36 and hiding my patches.
Comment #44
joelpittetThis needs a reroll.
Comment #45
harsha012 commentedre rolled the patch
Comment #47
joelpittetComment #48
occupant#45 applied cleanly, lint task passed.
Comment #49
occupantComment #50
alexpottCommitted and pushed 845ab36958 to 8.6.x and fdb66ec509 to 8.5.x. Thanks!
The bug was solved in a blocking issue so this is a task. Backported to 8.5.x to keep the CSS files aligned and this is not a change in the values.