Skip to content

Commit 975a8a5

Browse files
mdomdo
authored
Prefix CSS variables with PostCSS (#41951)
* Add custom property prefixing postcss plugin * Remove $prefix variable, replace with PostCSS plugin to prefix CSS variables
1 parent 498de08 commit 975a8a5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

80 files changed

+1661
-1627
lines changed

‎build/postcss.config.mjs‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
import postcssPrefixCustomProperties from 'postcss-prefix-custom-properties'
2+
import autoprefixer from 'autoprefixer'
3+
14
const mapConfig = {
25
inline: false,
36
annotation: true,
@@ -7,10 +10,12 @@ const mapConfig = {
710
export default context => {
811
return {
912
map: context.file.dirname.includes('examples') ? false : mapConfig,
10-
plugins: {
11-
autoprefixer: {
12-
cascade: false
13-
}
14-
}
13+
plugins: [
14+
postcssPrefixCustomProperties({
15+
prefix: 'bs-',
16+
ignore: [/^--bs-/, /^--bd-/]
17+
}),
18+
autoprefixer({ cascade: false })
19+
]
1520
}
1621
}

‎package-lock.json‎

Lines changed: 15 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -207,5 +207,8 @@
207207
},
208208
"overrides": {
209209
"volar-service-emmet": "0.0.63"
210+
},
211+
"dependencies": {
212+
"postcss-prefix-custom-properties": "^0.1.0"
210213
}
211214
}

‎scss/_accordion.scss‎

Lines changed: 53 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,23 @@
1010
// scss-docs-start accordion-variables
1111
$accordion-padding-y: 1rem !default;
1212
$accordion-padding-x: 1.25rem !default;
13-
$accordion-color: var(--#{$prefix}color-body) !default;
14-
$accordion-bg: var(--#{$prefix}bg-body) !default;
15-
$accordion-border-width: var(--#{$prefix}border-width) !default;
16-
$accordion-border-color: var(--#{$prefix}border-color) !default;
17-
$accordion-border-radius: var(--#{$prefix}border-radius-lg) !default;
13+
$accordion-color: var(--color-body) !default;
14+
$accordion-bg: var(--bg-body) !default;
15+
$accordion-border-width: var(--border-width) !default;
16+
$accordion-border-color: var(--border-color) !default;
17+
$accordion-border-radius: var(--border-radius-lg) !default;
1818
$accordion-inner-border-radius: calc(#{$accordion-border-radius} - #{$accordion-border-width}) !default;
1919

2020
$accordion-body-padding-y: $accordion-padding-y !default;
2121
$accordion-body-padding-x: $accordion-padding-x !default;
2222

2323
$accordion-button-padding-y: $accordion-padding-y !default;
2424
$accordion-button-padding-x: $accordion-padding-x !default;
25-
$accordion-button-color: var(--#{$prefix}fg-2) !default;
26-
$accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
25+
$accordion-button-color: var(--fg-2) !default;
26+
$accordion-button-bg: var(--accordion-bg) !default;
2727
$accordion-transition: $btn-transition, border-radius .15s ease !default;
28-
$accordion-button-active-bg: var(--#{$prefix}bg-2) !default;
29-
$accordion-button-active-color: var(--#{$prefix}fg) !default;
28+
$accordion-button-active-bg: var(--bg-2) !default;
29+
$accordion-button-active-color: var(--fg) !default;
3030

3131
$accordion-icon-width: 1.25rem !default;
3232
$accordion-icon-transition: transform .2s ease-in-out !default;
@@ -37,25 +37,25 @@ $accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w
3737
@layer componenents {
3838
.accordion {
3939
// scss-docs-start accordion-css-vars
40-
--#{$prefix}accordion-color: #{$accordion-color};
41-
--#{$prefix}accordion-bg: #{$accordion-bg};
42-
--#{$prefix}accordion-transition: #{$accordion-transition};
43-
--#{$prefix}accordion-border-color: #{$accordion-border-color};
44-
--#{$prefix}accordion-border-width: #{$accordion-border-width};
45-
--#{$prefix}accordion-border-radius: #{$accordion-border-radius};
46-
--#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
47-
--#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
48-
--#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
49-
--#{$prefix}accordion-btn-color: #{$accordion-button-color};
50-
--#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
51-
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
52-
--#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
53-
--#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
54-
--#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
55-
--#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
56-
--#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
57-
--#{$prefix}accordion-active-color: #{$accordion-button-active-color};
58-
--#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
40+
--accordion-color: #{$accordion-color};
41+
--accordion-bg: #{$accordion-bg};
42+
--accordion-transition: #{$accordion-transition};
43+
--accordion-border-color: #{$accordion-border-color};
44+
--accordion-border-width: #{$accordion-border-width};
45+
--accordion-border-radius: #{$accordion-border-radius};
46+
--accordion-inner-border-radius: #{$accordion-inner-border-radius};
47+
--accordion-btn-padding-x: #{$accordion-button-padding-x};
48+
--accordion-btn-padding-y: #{$accordion-button-padding-y};
49+
--accordion-btn-color: #{$accordion-button-color};
50+
--accordion-btn-bg: #{$accordion-button-bg};
51+
--accordion-btn-icon: #{escape-svg($accordion-button-icon)};
52+
--accordion-btn-icon-width: #{$accordion-icon-width};
53+
--accordion-btn-icon-transform: #{$accordion-icon-transform};
54+
--accordion-btn-icon-transition: #{$accordion-icon-transition};
55+
--accordion-body-padding-x: #{$accordion-body-padding-x};
56+
--accordion-body-padding-y: #{$accordion-body-padding-y};
57+
--accordion-active-color: #{$accordion-button-active-color};
58+
--accordion-active-bg: #{$accordion-button-active-bg};
5959
// scss-docs-end accordion-css-vars
6060
}
6161

@@ -64,37 +64,37 @@ $accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w
6464
display: flex;
6565
align-items: center;
6666
width: 100%;
67-
padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
67+
padding: var(--accordion-btn-padding-y) var(--accordion-btn-padding-x);
6868
font-size: $font-size-base;
69-
color: var(--#{$prefix}accordion-btn-color);
69+
color: var(--accordion-btn-color);
7070
text-align: start; // Reset button style
71-
background-color: var(--#{$prefix}accordion-btn-bg);
71+
background-color: var(--accordion-btn-bg);
7272
border: 0;
7373
@include border-radius(0);
7474
overflow-anchor: none;
75-
@include transition(var(--#{$prefix}accordion-transition));
75+
@include transition(var(--accordion-transition));
7676

7777
&:not(.collapsed) {
78-
color: var(--#{$prefix}accordion-active-color);
79-
background-color: var(--#{$prefix}accordion-active-bg);
80-
box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color);
78+
color: var(--accordion-active-color);
79+
background-color: var(--accordion-active-bg);
80+
box-shadow: inset 0 calc(-1 * var(--accordion-border-width)) 0 var(--accordion-border-color);
8181

8282
&::after {
83-
background-image: var(--#{$prefix}accordion-btn-active-icon);
84-
transform: var(--#{$prefix}accordion-btn-icon-transform);
83+
background-image: var(--accordion-btn-active-icon);
84+
transform: var(--accordion-btn-icon-transform);
8585
}
8686
}
8787

8888
// Accordion icon
8989
&::after {
9090
flex-shrink: 0;
91-
width: var(--#{$prefix}accordion-btn-icon-width);
92-
height: var(--#{$prefix}accordion-btn-icon-width);
91+
width: var(--accordion-btn-icon-width);
92+
height: var(--accordion-btn-icon-width);
9393
margin-inline-start: auto;
9494
content: "";
95-
background-color: var(--#{$prefix}accordion-btn-color);
96-
mask: var(--#{$prefix}accordion-btn-icon) no-repeat center 100%;
97-
@include transition(var(--#{$prefix}accordion-btn-icon-transition));
95+
background-color: var(--accordion-btn-color);
96+
mask: var(--accordion-btn-icon) no-repeat center 100%;
97+
@include transition(var(--accordion-btn-icon-transition));
9898
}
9999

100100
&:hover {
@@ -112,15 +112,15 @@ $accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w
112112
}
113113

114114
.accordion-item {
115-
color: var(--#{$prefix}accordion-color);
116-
background-color: var(--#{$prefix}accordion-bg);
117-
border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
115+
color: var(--accordion-color);
116+
background-color: var(--accordion-bg);
117+
border: var(--accordion-border-width) solid var(--accordion-border-color);
118118

119119
&:first-of-type {
120-
@include border-top-radius(var(--#{$prefix}accordion-border-radius));
120+
@include border-top-radius(var(--accordion-border-radius));
121121

122122
> .accordion-header .accordion-button {
123-
@include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
123+
@include border-top-radius(var(--accordion-inner-border-radius));
124124
}
125125
}
126126

@@ -130,22 +130,22 @@ $accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w
130130

131131
// Only set a border-radius on the last item if the accordion is collapsed
132132
&:last-of-type {
133-
@include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
133+
@include border-bottom-radius(var(--accordion-border-radius));
134134

135135
> .accordion-header .accordion-button {
136136
&.collapsed {
137-
@include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
137+
@include border-bottom-radius(var(--accordion-inner-border-radius));
138138
}
139139
}
140140

141141
> .accordion-collapse {
142-
@include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
142+
@include border-bottom-radius(var(--accordion-border-radius));
143143
}
144144
}
145145
}
146146

147147
.accordion-body {
148-
padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);
148+
padding: var(--accordion-body-padding-y) var(--accordion-body-padding-x);
149149
}
150150

151151

@@ -174,8 +174,8 @@ $accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w
174174
// @if $enable-dark-mode {
175175
// @include color-mode(dark) {
176176
// .accordion-button::after {
177-
// --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
178-
// --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
177+
// --accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
178+
// --accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
179179
// }
180180
// }
181181
// }

‎scss/_alert.scss‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,33 +8,33 @@
88
$alert-padding-y: $spacer !default;
99
$alert-padding-x: $spacer !default;
1010
$alert-margin-bottom: 1rem !default;
11-
$alert-border-radius: var(--#{$prefix}border-radius) !default;
11+
$alert-border-radius: var(--border-radius) !default;
1212
$alert-link-font-weight: $font-weight-bold !default;
13-
$alert-border-width: var(--#{$prefix}border-width) !default;
13+
$alert-border-width: var(--border-width) !default;
1414
$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
1515
// scss-docs-end alert-variables
1616

1717
@layer components {
1818
.alert {
1919
// scss-docs-start alert-css-vars
20-
--#{$prefix}alert-bg: var(--#{$prefix}theme-bg-subtle, transparent);
21-
--#{$prefix}alert-padding-x: #{$alert-padding-x};
22-
--#{$prefix}alert-padding-y: #{$alert-padding-y};
23-
--#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
24-
--#{$prefix}alert-color: var(--#{$prefix}theme-text, inherit);
25-
--#{$prefix}alert-border-color: transparent;
26-
--#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}theme-border, var(--#{$prefix}alert-border-color));
27-
--#{$prefix}alert-border-radius: #{$alert-border-radius};
28-
--#{$prefix}alert-link-color: inherit;
20+
--alert-bg: var(--theme-bg-subtle, transparent);
21+
--alert-padding-x: #{$alert-padding-x};
22+
--alert-padding-y: #{$alert-padding-y};
23+
--alert-margin-bottom: #{$alert-margin-bottom};
24+
--alert-color: var(--theme-text, inherit);
25+
--alert-border-color: transparent;
26+
--alert-border: #{$alert-border-width} solid var(--theme-border, var(--alert-border-color));
27+
--alert-border-radius: #{$alert-border-radius};
28+
--alert-link-color: inherit;
2929
// scss-docs-end alert-css-vars
3030

3131
position: relative;
32-
padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
33-
// margin-bottom: var(--#{$prefix}alert-margin-bottom);
34-
color: var(--#{$prefix}alert-color);
35-
background-color: var(--#{$prefix}alert-bg);
36-
border: var(--#{$prefix}alert-border);
37-
@include border-radius(var(--#{$prefix}alert-border-radius));
32+
padding: var(--alert-padding-y) var(--alert-padding-x);
33+
// margin-bottom: var(--alert-margin-bottom);
34+
color: var(--alert-color);
35+
background-color: var(--alert-bg);
36+
border: var(--alert-border);
37+
@include border-radius(var(--alert-border-radius));
3838
}
3939

4040
// Headings for larger alerts
@@ -46,7 +46,7 @@ $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers widt
4646
// Provide class for links that match alerts
4747
.alert-link {
4848
font-weight: $alert-link-font-weight;
49-
color: var(--#{$prefix}alert-link-color);
49+
color: var(--alert-link-color);
5050
}
5151

5252

0 commit comments

Comments
 (0)