### Problem/Motivation
The `stylelint` job fails, so the pipeline is red. A clean pipeline is on the
checklist for the security advisory coverage application, so this blocks that.
Running core's Stylelint configuration over the module's three stylesheets
reports **193 problems** (the CI job reports 187; the difference is
`.stylelintignore`, which CI applies and a bare local run does not):
| Rule | Count |
|---|---|
| `order/properties-order` | 141 |
| `prettier/prettier` | 19 |
| `value-keyword-case` | 12 |
| `color-function-notation` | 5 |
| `alpha-value-notation` | 5 |
| `declaration-block-single-line-max-declarations` | 2 |
| `font-family-name-quotes` | 2 |
| `custom-property-empty-line-before` | 1 |
All three stylesheets are affected: `css/builder.css` carries the bulk,
`css/admin-list.css` has 7 and `css/preview-frame.css` has 4.
### Steps to reproduce
cd web/core
node_modules/.bin/stylelint --config .stylelintrc.json \
'../modules/custom/dropup/css/*.css'
### Proposed resolution
`--fix` clears 186 of the 193. The remaining work is small but not automatic:
1. **Five `rgb(r g b / a)` values cannot be autofixed.** Stylelint reports them
as fixable but will not downgrade modern space-separated notation to the
legacy comma form core's config requires. Converting them by hand then
trips the *paired* rule `color-function-alias-notation`, because the config
wants legacy commas **with** the `rgb` alias — `rgb(0, 0, 0, 0.06)`, not
`rgba(...)`. A second `--fix` pass settles it.
2. **`--fix` reformats a rule that a test asserts on.**
`js/builder/__tests__/flash.test.js:48` matches the literal string
`'.dropup-flash { animation: none; }'`, and the reduced-motion rule is
expanded across multiple lines by Prettier. That test fails after the fix
and must be updated in the same change, or the pipeline trades a red
Stylelint job for a red PHPUnit/vitest one.
The fix should be whitespace-insensitive rather than re-encoding the new
layout, so the next `--fix` does not break it again.
### Verification
The change must be checked for more than a green linter. `order/properties-order`
reorders declarations, which can alter the cascade wherever a shorthand and its
own longhand appear in the same rule. Points worth confirming in review:
* `font` is a shorthand that resets `font-size`/`font-weight`; there are 12
rules where both appear, and `font` must stay ahead of its longhands in all
of them.
* `border` / `outline` / `flex` alongside `border-radius`, `outline-offset` or
`flex-direction` are *not* shorthand conflicts — those longhands are not
part of those shorthands.
* Declaration counts per file should be unchanged (51 / 854 / 19), and the only
value changes should be the notation normalisations listed above.
### Remaining tasks
1. Patch: `--fix`, the five colour values, and the `flash.test.js` assertion.
2. Confirm the Stylelint job is green and the JS suite still passes.
### User interface changes
None intended — the change is formatting and notation only. The cascade checks
above are what establish that.
### API changes
None.
### Data model changes
None.
Issue fork dropup-3623204
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
ibrahim tameme commentedComment #4
ibrahim tameme commentedComment #6
ibrahim tameme commented