Skip to content

Commit b7963e4

Browse files
Kgupta62Kgupta62
committed
Common CSS: avoid false-positive border-style on custom properties
The attribute selectors [style*="border-width"] and [style*="border-color"] match any inline style containing those substrings — including CSS custom properties like --my-border-width or --fir-list-border-color. This forces border-style: solid on elements that have no actual border set. Replace each [style*="prop"] with a group of three selectors: [style^="prop"] — prop is the first declaration [style*=";prop"] — prop follows a semicolon (no space) [style*="; prop"] — prop follows a semicolon and space Custom property names always start with --, so they can never appear right after a semicolon or at the start of the style string without the -- prefix. Real border declarations can. Fixes WordPress#70211.
1 parent 9408691 commit b7963e4

1 file changed

Lines changed: 64 additions & 11 deletions

File tree

‎packages/block-library/src/common.scss‎

Lines changed: 64 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -125,38 +125,91 @@
125125
html :where(.has-border-color) {
126126
border-style: solid;
127127
}
128-
html :where([style*="border-color"]) {
128+
// Use ^= and *=; selectors so custom properties like --my-border-color
129+
// don't accidentally match. Only real declarations at the start of
130+
// the style string or after a semicolon should trigger these rules.
131+
html
132+
:where(
133+
[style^="border-color"],
134+
[style*=";border-color"],
135+
[style*="; border-color"]
136+
) {
129137
border-style: solid;
130138
}
131-
html :where([style*="border-top-color"]) {
139+
html
140+
:where(
141+
[style^="border-top-color"],
142+
[style*=";border-top-color"],
143+
[style*="; border-top-color"]
144+
) {
132145
border-top-style: solid;
133146
}
134-
html :where([style*="border-right-color"]) {
147+
html
148+
:where(
149+
[style^="border-right-color"],
150+
[style*=";border-right-color"],
151+
[style*="; border-right-color"]
152+
) {
135153
/*rtl:ignore*/
136154
border-right-style: solid;
137155
}
138-
html :where([style*="border-bottom-color"]) {
156+
html
157+
:where(
158+
[style^="border-bottom-color"],
159+
[style*=";border-bottom-color"],
160+
[style*="; border-bottom-color"]
161+
) {
139162
border-bottom-style: solid;
140163
}
141-
html :where([style*="border-left-color"]) {
164+
html
165+
:where(
166+
[style^="border-left-color"],
167+
[style*=";border-left-color"],
168+
[style*="; border-left-color"]
169+
) {
142170
/*rtl:ignore*/
143171
border-left-style: solid;
144172
}
145173

146-
html :where([style*="border-width"]) {
174+
html
175+
:where(
176+
[style^="border-width"],
177+
[style*=";border-width"],
178+
[style*="; border-width"]
179+
) {
147180
border-style: solid;
148181
}
149-
html :where([style*="border-top-width"]) {
182+
html
183+
:where(
184+
[style^="border-top-width"],
185+
[style*=";border-top-width"],
186+
[style*="; border-top-width"]
187+
) {
150188
border-top-style: solid;
151189
}
152-
html :where([style*="border-right-width"]) {
190+
html
191+
:where(
192+
[style^="border-right-width"],
193+
[style*=";border-right-width"],
194+
[style*="; border-right-width"]
195+
) {
153196
/*rtl:ignore*/
154197
border-right-style: solid;
155198
}
156-
html :where([style*="border-bottom-width"]) {
199+
html
200+
:where(
201+
[style^="border-bottom-width"],
202+
[style*=";border-bottom-width"],
203+
[style*="; border-bottom-width"]
204+
) {
157205
border-bottom-style: solid;
158206
}
159-
html :where([style*="border-left-width"]) {
207+
html
208+
:where(
209+
[style^="border-left-width"],
210+
[style*=";border-left-width"],
211+
[style*="; border-left-width"]
212+
) {
160213
/*rtl:ignore*/
161214
border-left-style: solid;
162215
}
@@ -187,7 +240,7 @@ html :where(.is-position-sticky) {
187240
// To support sticky positioning, reset the admin bar offset to 0px on mobile devices,
188241
// within the scope of the position classname. This is required because the admin bar
189242
// is not fixed to the top on mobile devices, but is fixed on viewports larger than 600px.
190-
@media screen and (max-width: 600px) {
243+
@media screen and ( max-width: 600px ) {
191244
html :where(.is-position-sticky) {
192245
/* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
193246
--wp-admin--admin-bar--position-offset: 0px;

0 commit comments

Comments
 (0)