### 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

Command icon 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

ibrahim tameme created an issue. See original summary.

ibrahim tameme’s picture

Issue summary: View changes

ibrahim tameme’s picture

Status: Active » Needs review

ibrahim tameme’s picture

Status: Needs review » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.