Stable theme's off-canvas reset css causes incorrect box-sizing

I've had a go at creating a patch for this. Since I'm not sure how to fix postcss processing so that the box-sizing: border-box line following all: initial; is preserved, I've just moved it to a separate rule targeting all off-canvas html elements. I also removed a superflous text-shadow: none; that also followed the all: initial;. The post css processing converts all: initial; into a whole list of individual properties (for browsers that do not support the css 'all' property) and so text-shadow: none; gets set anyway in the generated css.

Second attempt at a patch. In the first attempt, the additional rule for setting box-sizing: border-box did not have enough specificity.

I'm not sure of the exact issue here. It seems our processor is taking our box-sizing: border-box and generating

box-sizing: content-box;
box-sizing: border-box;
...
all: initial

The first content-box should not be generated because we then immediately place border-box after it. But the final all: initial seems very dangerous, as I presume it's overriding everything above it.

Adding 2 issues that seem to be related.

I think we can fix this by editing /core/.stylelintrc.json and moving all to the top of the "order/properties-order" listing. That would mean that "all" comes first to reset what it needs to reset, but then any overrides we need to this, will come after it.

I'm honestly not sure if this would be a breaking change and not allowed in Stable in D9 or if this is actually a feature that we need to have in future in our stylelint for D10.

I'll create an MR for this at least, so we can test it.

Since stable has been removed from core should this be in the Stable 9 component?

@quietone this issue is about stable in d9.5, so I think it can remain here for now. Once 9.5 is no longer supported, I think we can mark this closed: won't fix as it will not be an issue in a contrib theme.

Since technically D9.5 is still supported don't see an issue with merging here. But a follow up with have to be opened for the contrib version.

This looks good to me and makes sense, all should always come first.

I wonder if we need the same stylelint change in D10+ too?

Tagging for FEFM review.

Looks like this MR needs to be rebased onto 9.5.x, as the merge is currently blocked according to the MR in GitLab. (Clicking the Rebase button didn't work for me.)

I was able to rebase the MR, so I undid the issue tags and status changes. To be able to rebase the MR, I had to click the "Get push access" under the issue summary.

I'm uploading a file-based patch to use for my team's project, which can safely be ignored.

FEFM here. I agree that having the all: initial; after many lines of styles was a poor implementation that needs fixing. I'm also concerned that making such a change is potentially disruptive in a way that breaks the "fence" promised by Stable themes.

There are sites/themes that may experience regressions if this (clearly not-ideal) CSS changes. Among other things, there may be styles that While it's true the issue fixed here could be classified as a bugfix, there may be themes based on Stable that now expect the content-box sizing.

I would immediately sign off on a version of this that changed the /core CSS but not the Stable theme CSS. To change Stable I think there would need to be a deeper risk/benefit assessment. Perhaps the core change can happen here, and the potentially longer discussion of updating Stable can be done in a followup.

I'm going to close this issue since it belongs to Drupal 9.5 which is no longer supported and our `/core/.stylelint.json` file for D10/D11 does not include the `all` property. in the "order/properties-order" definition.

===
Thanks to Code Enigma for sponsoring my time to work on this.