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

Comments

alexpott created an issue. See original summary.

alexpott’s picture

Issue summary: View changes
brightbold’s picture

Issue summary: View changes
droplet’s picture

Version: 8.3.x-dev » 8.4.x-dev
Status: Active » Needs review
Issue tags: +stylelint
StatusFileSize
new25.86 KB

Status: Needs review » Needs work

The last submitted patch, 5: 2866801-4.patch, failed testing.

brightbold’s picture

Assigned: Unassigned » brightbold
brightbold’s picture

Assigned: brightbold » Unassigned
StatusFileSize
new26.12 KB

Rerolled.

@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.

brightbold’s picture

Title: Update stylelint rule color-hex-case to be consistent with Drupal's CSS standards » Update stylelint rules color-hex-case and color-hex-length to be consistent with Drupal's CSS standards
brightbold’s picture

Status: Needs work » Needs review

Status: Needs review » Needs work

The last submitted patch, 8: stylelint-color-hex-case-2866801-8.patch, failed testing. View results

brightbold’s picture

I 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.

droplet’s picture

\core\modules\color\tests\modules\color_test\themes\color_test_theme\color\color.inc

this file I bet. Needed change to short hex.

brightbold’s picture

@droplet — is there an issue for that that we can link here? Or would it be appropriate to include that change in this issue?

droplet’s picture

Fix it this issue. We bring in the bug from here.

akshay kashyap’s picture

StatusFileSize
new22.41 KB

@droplet i have added my patch please check it is working fine?

akshay kashyap’s picture

Status: Needs work » Needs review
droplet’s picture

@Akshay

Thanks. What did you change? I don't see any changes to color.inc.

Status: Needs review » Needs work

The last submitted patch, 16: stylelint-color-hex-case-2866801-15.patch, failed testing. View results

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.0-alpha1 will be released the week of July 31, 2017, which means new developments and disruptive changes should now be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

joelpittet’s picture

Issue tags: +Needs reroll

Some of the new changes to core introduced a few more of these.

misc/dialog/off-canvas.base.css
 34:15  ✖  Expected "#cccccc" to be "#ccc"   color-hex-length

modules/layout_builder/css/layout-builder.css
 25:54  ✖  Expected "#ffffff" to be "#fff"   color-hex-length
 26:21  ✖  Expected "#cccccc" to be "#ccc"   color-hex-length

themes/stable/css/core/dialog/off-canvas.base.css
 34:15  ✖  Expected "#cccccc" to be "#ccc"   color-hex-length
arunkumark’s picture

Status: Needs work » Needs review
StatusFileSize
new428.78 KB

I have rerolled the patch as per the comment #21 for the Drupal 8.5.x version.

Status: Needs review » Needs work

The last submitted patch, 22: stylelint-color-hex-case-2866801-22.patch, failed testing. View results

joelpittet’s picture

Something went wrong with the patch, that is way to big @arunkumark, it should be around 25k I presume

harsha012’s picture

Status: Needs work » Needs review
StatusFileSize
new30.09 KB

Status: Needs review » Needs work

The last submitted patch, 25: 2866801-25.patch, failed testing. View results

joelpittet’s picture

Issue tags: -Needs reroll

Likely needs #13 taken into account.

harsha012’s picture

Status: Needs work » Needs review
StatusFileSize
new30.89 KB

Status: Needs review » Needs work

The last submitted patch, 28: 2866801-28.patch, failed testing. View results

joelpittet’s picture

+++ b/core/modules/color/tests/modules/color_test/themes/color_test_theme/color/color.inc
@@ -14,15 +14,15 @@
-        'bg' => '#ff0000',
-        'text' => '#0000ff',
+        'bg' => '#ff0',
+        'text' => '#0ff',

The hex colors are converted to short values incorrectly here.

harsha012’s picture

Status: Needs work » Needs review
StatusFileSize
new30.89 KB

fixed as per #30

Status: Needs review » Needs work

The last submitted patch, 31: 2866801-31.patch, failed testing. View results

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.0-alpha1 will be released the week of January 17, 2018, which means new developments and disruptive changes should now be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

joelpittet’s picture

I wonder if we can exclude the color.inc css for this and the test CSS?

joelpittet’s picture

Title: Update stylelint rules color-hex-case and color-hex-length to be consistent with Drupal's CSS standards » Update stylelint rules color-hex-length to be consistent with Drupal's CSS standards
Issue summary: View changes

Split 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

bmx269’s picture

StatusFileSize
new22.35 KB

Here is an updated patch, for only the length issue.

joelpittet’s picture

Status: Needs work » Needs review

For testbot & the win!

Status: Needs review » Needs work

The last submitted patch, 36: 2866801-36.patch, failed testing. View results

joelpittet’s picture

Category: Task » Bug report
Status: Needs work » Needs review
StatusFileSize
new1.59 KB
new23.94 KB

Ok, 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).

joelpittet’s picture

This 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.

joelpittet’s picture

joelpittet’s picture

Status: Postponed » Needs review

The postponed patch is committed, I'm retesting #36 and hiding my patches.

The last submitted patch, 36: 2866801-36.patch, failed testing. View results

joelpittet’s picture

Status: Needs review » Needs work
Issue tags: +Needs reroll

This needs a reroll.

harsha012’s picture

Status: Needs work » Needs review
StatusFileSize
new22.2 KB

re rolled the patch

Status: Needs review » Needs work

The last submitted patch, 45: 2866801-45.patch, failed testing. View results

joelpittet’s picture

Status: Needs work » Needs review
occupant’s picture

#45 applied cleanly, lint task passed.

> Drupal@ lint:css /mypath/drupal/core
> stylelint "**/*.css" || exit 0
occupant’s picture

Status: Needs review » Reviewed & tested by the community
alexpott’s picture

Category: Bug report » Task
Status: Reviewed & tested by the community » Fixed
Issue tags: -Needs reroll

Committed 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.

  • alexpott committed 845ab36 on 8.6.x
    Issue #2866801 by harsha012, joelpittet, BrightBold, droplet, Akshay...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.