Fix stylelint issues.

Created on 24 October 2024, 3 months ago

Problem/Motivation

Stylelint issues are occurring in the Stylelint job following the GitLab integration for the environment_indicator module. These need to be addressed to comply with Drupal CSS coding standards.

See: https://git.drupalcode.org/issue/environment_indicator-3481334/-/jobs/31...

css/environment_indicator.css
 11:3   ✖  Expected "z-index" to come before "font-weight"                                                                                                                                                                                order/properties-order
 13:3   ✖  Expected "right" to come before "left"                                                                                                                                                                                         order/properties-order
 15:37  ✖  Unexpected nonstandard direction                                                                                                                                                                                               function-linear-gradient-no-nonstandard-direction
 15:37  ✖  Replace "bottom,·rgba(207,207,207,0.3)·19%,·rgba(250,250,250,0.3)·60%,·rgba(255,255,255,0.3)·80%" with "⏎····bottom,⏎····rgba(207,·207,·207,·0.3)·19%,⏎····rgba(250,·250,·250,·0.3)·60%,⏎····rgba(255,·255,·255,·0.3)·80%⏎··"  prettier/prettier
 18:38  ✖  Replace "·font-size:·0.85em;·" with "⏎··font-size:·0.85em;⏎"                                                                                                                                                                   prettier/prettier
 19:46  ✖  Replace "·content:·"(";·" with "⏎··content:·"(";⏎"                                                                                                                                                                             prettier/prettier
 20:45  ✖  Replace "·content:·")";·" with "⏎··content:·")";⏎"                                                                                                                                                                             prettier/prettier
 22:27  ✖  Expected no more than 1 declaration                                                                                                                                                                                            declaration-block-single-line-max-declarations
 22:28  ✖  Replace "·overflow:·hidden;·margin:·0;·" with "⏎··overflow:·hidden;⏎··margin:·0;⏎"                                                                                                                                             prettier/prettier
 26:3   ✖  Expected "float" to come before "list-style"                                                                                                                                                                                   order/properties-order
 36:3   ✖  Expected "text-shadow" to come before "font-size"                                                                                                                                                                              order/properties-order
 37:3   ✖  Expected "border" to come before "text-shadow"                                                                                                                                                                                 order/properties-order
 41:22  ✖  Replace "DDD" with "ddd"                                                                                                                                                                                                       prettier/prettier
 48:3   ✖  Expected "margin-top" to come before "padding"                                                                                                                                                                                 order/properties-order
 53:3   ✖  Expected "text-align" to come before "font-size"                                                                                                                                                                               order/properties-order
 55:22  ✖  Replace "EDEDE" with "edede"                                                                                                                                                                                                   prettier/prettier
 58:39  ✖  Expected double colon pseudo-element notation                                                                                                                                                                                  selector-pseudo-element-colon-notation
 61:47  ✖  Expected double colon pseudo-element notation                                                                                                                                                                                  selector-pseudo-element-colon-notation
 64:49  ✖  Expected double colon pseudo-element notation                                                                                                                                                                                  selector-pseudo-element-colon-notation
 67:57  ✖  Expected double colon pseudo-element notation                                                                                                                                                                                  selector-pseudo-element-colon-notation
 72:3   ✖  Expected "padding" to come before "text-align"                                                                                                                                                                                 order/properties-order
 92:12  ✖  Replace "·.gin--vertical-toolbar·.toolbar-menu-administration·>·.toolbar-menu·>·.menu-item" with "⏎··.gin--vertical-toolbar⏎··.toolbar-menu-administration⏎··>·.toolbar-menu⏎··>·.menu-item⏎·"                                 prettier/prettier
 93:21  ✖  Replace "var(--gin-toolbar-width-collapsed,·var(--ginToolbarWidthCollapsed))·-·4px" with "⏎····var(--gin-toolbar-width-collapsed,·var(--ginToolbarWidthCollapsed))·-·4px⏎··"                                                   prettier/prettier
 93:60  ✖  Expected "--ginToolbarWidthCollapsed" to match pattern "^[a-z][-_a-z0-9IE]*$"                                                                                                                                                  custom-property-pattern
 96:12  ✖  Replace "·.gin--vertical-toolbar·.toolbar-menu-administration·>·.toolbar-menu·>·.menu-item" with "⏎··.gin--vertical-toolbar⏎··.toolbar-menu-administration⏎··>·.toolbar-menu⏎··>·.menu-item⏎·"                                 prettier/prettier
 97:22  ✖  Replace "var(--gin-toolbar-width-collapsed,·var(--ginToolbarWidthCollapsed))·-·4px" with "⏎····var(--gin-toolbar-width-collapsed,·var(--ginToolbarWidthCollapsed))·-·4px⏎··"                                                   prettier/prettier
 97:61  ✖  Expected "--ginToolbarWidthCollapsed" to match pattern "^[a-z][-_a-z0-9IE]*$"                                                                                                                                                  custom-property-pattern
27 problems (27 errors, 0 warnings)
1 source checked
 /builds/issue/environment_indicator-3481334/web/modules/custom/environment_indicator-3481334/css/environment_indicator.css
27 errors found
 order/properties-order: 8
 function-linear-gradient-no-nonstandard-direction: 1
 prettier/prettier: 11
 declaration-block-single-line-max-declarations: 1
 selector-pseudo-element-colon-notation: 4 (maybe fixable)
 custom-property-pattern: 2
You may fix some problems with the "--fix" option.

Steps to reproduce

  1. Clone the environment_indicator module repository.
  2. Set up the GitLab CI/CD environment.
  3. Run the Stylelint job.
  4. Check for linting errors in the job logs.

Proposed resolution

Update the CSS files to comply with Drupal CSS coding standards.

Remaining tasks

  • Fix specific Stylelint errors.
  • Test the Stylelint job after changes.

User interface changes

None.

API changes

None.

Data model changes

None.

📌 Task
Status

Active

Version

4.0

Component

Code

Created by

🇺🇸United States trackleft2 Tucson, AZ 🇺🇸

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @trackleft2
  • 🇺🇸United States trackleft2 Tucson, AZ 🇺🇸
  • 🇮🇳India arunsahijpal

    Working on it!

  • 🇺🇸United States trackleft2 Tucson, AZ 🇺🇸

    OK, but there will probably be merge conflicts with 📌 Fix cspell issues Active that you'll need to account for.

  • Pipeline finished with Success
    3 months ago
    Total: 137s
    #323818
  • Pipeline finished with Success
    3 months ago
    Total: 137s
    #323825
  • Pipeline finished with Success
    3 months ago
    Total: 129s
    #324014
  • Pipeline finished with Success
    3 months ago
    Total: 140s
    #324022
  • Pipeline finished with Success
    3 months ago
    Total: 133s
    #324027
  • Pipeline finished with Success
    3 months ago
    Total: 337s
    #324040
  • Pipeline finished with Success
    3 months ago
    Total: 130s
    #324048
  • Pipeline finished with Success
    3 months ago
    Total: 134s
    #324053
  • 🇮🇳India arunsahijpal

    Hi @trackleft2,
    I've fixed all the Stylelint errors and there is not any merge conflict in the MR, kindly review it.

  • 🇺🇸United States trackleft2 Tucson, AZ 🇺🇸

    @arunsahijpal what about the gitlab part from the issue summary?

    Configure gitlab to not allow merging if stylelint job doesn't pass.

  • Pipeline finished with Failed
    3 months ago
    Total: 220s
    #328620
  • Pipeline finished with Failed
    3 months ago
    #328642
  • Pipeline finished with Failed
    3 months ago
    #328643
  • Pipeline finished with Failed
    3 months ago
    #328651
  • Pipeline finished with Failed
    3 months ago
    #328652
  • Pipeline finished with Failed
    3 months ago
    Total: 136s
    #328653
  • Pipeline finished with Failed
    3 months ago
    Total: 142s
    #328657
  • Pipeline finished with Success
    3 months ago
    Total: 143s
    #328661
  • 🇮🇳India arunsahijpal

    Hi @trackleft2,
    I've configured gitlab-ci.yml file to not allow merging if stylelint job doesn't pass.
    Pls give it a look.

  • 🇺🇸United States trackleft2 Tucson, AZ 🇺🇸

    Thanks, nice work!

  • Pipeline finished with Failed
    about 1 month ago
    Total: 180s
    #371894
  • Pipeline finished with Failed
    about 1 month ago
    Total: 136s
    #371900
  • Pipeline finished with Success
    about 1 month ago
    Total: 147s
    #371910
Production build 0.71.5 2024