Skip to content

Commit d0c8eb9

Browse files
josephfuscojosephfusco
committed
fix(starter): scope block styles to fix CSS Modules purity error
Move WordPress block styles and element-level overrides out of ContentWrapper.module.scss into a new _content-wrapper.scss partial, scoped under a plain .content-wrapper class. This avoids :global() with bare element selectors that violate Next.js 16's CSS Modules "pure" mode, and removes the fragile webpack override that was working around it.
1 parent 15c38fa commit d0c8eb9

5 files changed

Lines changed: 133 additions & 132 deletions

File tree

‎examples/next/faustwp-getting-started/components/ContentWrapper/ContentWrapper.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ let cx = className.bind(styles);
55

66
export default function ContentWrapper({ content, children, className }) {
77
return (
8-
<article className={cx(['component', className])}>
8+
<article className={`content-wrapper ${cx(['component', className])}`}>
99
<div dangerouslySetInnerHTML={{ __html: content ?? '' }} />
1010
{children}
1111
</article>

‎examples/next/faustwp-getting-started/components/ContentWrapper/ContentWrapper.module.scss‎

Lines changed: 0 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -3,132 +3,3 @@
33
margin: 0 auto;
44
line-height: 1.6875;
55
}
6-
7-
:global(.component *) {
8-
// Scope WordPress block styles within ContentWrapper.
9-
@import '../../styles/blocks';
10-
11-
* {
12-
max-width: 100%;
13-
}
14-
15-
figure {
16-
margin-left: 0;
17-
margin-right: 0;
18-
}
19-
20-
h1,
21-
h2,
22-
h3,
23-
h4,
24-
h5,
25-
h6 {
26-
margin: 4.8rem 0;
27-
}
28-
29-
strong {
30-
font-weight: 700;
31-
}
32-
33-
a {
34-
color: var(--wpe--link--color);
35-
text-decoration: underline;
36-
37-
&:hover,
38-
&:focus {
39-
color: var(--wpe--link--color);
40-
text-decoration: none;
41-
}
42-
}
43-
44-
li {
45-
font-size: 1.6rem;
46-
}
47-
48-
img {
49-
display: block;
50-
height: auto;
51-
max-width: 100%;
52-
}
53-
54-
.alignleft {
55-
display: inline;
56-
float: left;
57-
margin-right: 1.5em;
58-
}
59-
60-
.alignright {
61-
display: inline;
62-
float: right;
63-
margin-left: 1.5em;
64-
}
65-
66-
.aligncenter {
67-
clear: both;
68-
display: block;
69-
margin-left: auto;
70-
margin-right: auto;
71-
}
72-
73-
code,
74-
pre {
75-
color: var(--color-white);
76-
background: var(--color-black);
77-
}
78-
79-
code {
80-
padding: 0.25rem 0.5rem;
81-
}
82-
83-
pre {
84-
max-width: 100%;
85-
overflow: auto;
86-
padding: 1rem;
87-
}
88-
89-
blockquote {
90-
border-top: 1px solid var(--color-black);
91-
border-bottom: 1px solid var(--color-black);
92-
font-style: italic;
93-
margin-top: 0;
94-
margin-left: 0;
95-
margin-right: 0;
96-
padding: 4rem 1rem 4rem;
97-
text-align: center;
98-
99-
&::before {
100-
content: '”';
101-
display: block;
102-
font-size: 6rem;
103-
line-height: 0;
104-
margin: 2rem 0;
105-
}
106-
107-
> *:last-child {
108-
margin-bottom: 0;
109-
}
110-
}
111-
112-
table {
113-
border-collapse: collapse;
114-
width: 100%;
115-
}
116-
117-
thead th {
118-
border-bottom: 1px solid var(--wpe--color--border);
119-
padding-bottom: 0.5em;
120-
}
121-
122-
th {
123-
padding: 0.4rem 0;
124-
text-align: left;
125-
}
126-
127-
tr {
128-
border-bottom: 1px solid var(--wpe--color--border);
129-
}
130-
131-
td {
132-
padding: 0.4em;
133-
}
134-
}

‎examples/next/faustwp-getting-started/styles/_blocks.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// WordPress block styles.
2-
// Used in `components/ContentWrapper`
2+
// Imported from `styles/_content-wrapper.scss`
33

44
@use 'sass:math';
55

‎examples/next/faustwp-getting-started/styles/_content-wrapper.scss‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
// Scoped WordPress block styles for ContentWrapper.
2+
// Applied via the plain `.content-wrapper` class on <article>.
3+
4+
.content-wrapper {
5+
@import 'blocks';
6+
7+
* {
8+
max-width: 100%;
9+
}
10+
11+
figure {
12+
margin-left: 0;
13+
margin-right: 0;
14+
}
15+
16+
h1,
17+
h2,
18+
h3,
19+
h4,
20+
h5,
21+
h6 {
22+
margin: 4.8rem 0;
23+
}
24+
25+
strong {
26+
font-weight: 700;
27+
}
28+
29+
a {
30+
color: var(--wpe--link--color);
31+
text-decoration: underline;
32+
33+
&:hover,
34+
&:focus {
35+
color: var(--wpe--link--color);
36+
text-decoration: none;
37+
}
38+
}
39+
40+
li {
41+
font-size: 1.6rem;
42+
}
43+
44+
img {
45+
display: block;
46+
height: auto;
47+
max-width: 100%;
48+
}
49+
50+
.alignleft {
51+
display: inline;
52+
float: left;
53+
margin-right: 1.5em;
54+
}
55+
56+
.alignright {
57+
display: inline;
58+
float: right;
59+
margin-left: 1.5em;
60+
}
61+
62+
.aligncenter {
63+
clear: both;
64+
display: block;
65+
margin-left: auto;
66+
margin-right: auto;
67+
}
68+
69+
code,
70+
pre {
71+
color: var(--color-white);
72+
background: var(--color-black);
73+
}
74+
75+
code {
76+
padding: 0.25rem 0.5rem;
77+
}
78+
79+
pre {
80+
max-width: 100%;
81+
overflow: auto;
82+
padding: 1rem;
83+
}
84+
85+
blockquote {
86+
border-top: 1px solid var(--color-black);
87+
border-bottom: 1px solid var(--color-black);
88+
font-style: italic;
89+
margin-top: 0;
90+
margin-left: 0;
91+
margin-right: 0;
92+
padding: 4rem 1rem 4rem;
93+
text-align: center;
94+
95+
&::before {
96+
content: '"';
97+
display: block;
98+
font-size: 6rem;
99+
line-height: 0;
100+
margin: 2rem 0;
101+
}
102+
103+
> *:last-child {
104+
margin-bottom: 0;
105+
}
106+
}
107+
108+
table {
109+
border-collapse: collapse;
110+
width: 100%;
111+
}
112+
113+
thead th {
114+
border-bottom: 1px solid var(--wpe--color--border);
115+
padding-bottom: 0.5em;
116+
}
117+
118+
th {
119+
padding: 0.4rem 0;
120+
text-align: left;
121+
}
122+
123+
tr {
124+
border-bottom: 1px solid var(--wpe--color--border);
125+
}
126+
127+
td {
128+
padding: 0.4em;
129+
}
130+
}

‎examples/next/faustwp-getting-started/styles/global.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,5 @@
55
@import 'breakpoints';
66
@import 'css-variables';
77
@import 'base';
8-
@import 'blocks';
8+
@import 'content-wrapper';
99
@import 'utilities';

0 commit comments

Comments
 (0)