Skip to content

Commit 9e687d8

Browse files
committed
Fix non-conforming example markup
Fix #78 CSS variables are inherited but the browser oddly terminates elements when you nest block-level elements inside inline-level elements
1 parent a817fb9 commit 9e687d8

File tree

1 file changed

+20
-20
lines changed

1 file changed

+20
-20
lines changed

README.md

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -271,7 +271,7 @@ Will be transformed to:
271271
.box-foo {
272272
width: 300px;
273273
}
274-
274+
275275
.box-foo .box-bar {
276276
width: 300px;
277277
}
@@ -308,40 +308,40 @@ Continue to the next section to see where some of these might be unsafe to do. T
308308

309309
When you declare a CSS variable inside one selector, but consume it in another, this does make an unsafe assumption about it which can be non-conforming in certain edge cases. Here is an example where these limitations result in non-conforming behavior.
310310

311-
Using the following CSS:
311+
Note the nested markup below. We only know about the DOM's inheritance from your CSS selectors. If you want nest multiple times, you need to be explicit about it in your CSS which isn't necessary with browser that natively support CSS variables. See the innermost `<h1 class="title">`
312+
313+
```html
314+
<div class="component">
315+
Black
316+
317+
<div class="title">
318+
Blue
319+
320+
<div class="decoration">
321+
Green
322+
323+
<div class="title">Blue with this plugin, but green per spec</div>
324+
</div>
325+
</div>
326+
</div>
327+
```
312328

313329
```css
314330
.component {
315331
--text-color: blue;
316332
}
317333

318-
.component .header {
334+
.component .title {
319335
color: var(--text-color);
320336
}
321337

322-
.component .text {
338+
.component .decoration {
323339
--text-color: green;
324340
color: var(--text-color);
325341
}
326342
```
327343

328-
Note the nested markup below. We only know about the DOM's inheritance from your CSS selectors. If you want nest multiple times, you need to be explicit about it in your CSS which isn't necessary with browser that natively support CSS variables. See the innermost `<h1 class="title">`
329-
330-
```html
331-
<div class="component">
332-
Black
333-
334-
<h1 class="title">
335-
Blue
336-
337-
<p class="decoration">
338-
Green
339344

340-
<h1 class="title">Blue with this plugin, but green per spec</h1>
341-
</p>
342-
</h1>
343-
</div>
344-
```
345345
[`postcss-custom-properties`](https://github.com/postcss/postcss-custom-properties) avoids this problem entirely by restricting itself to just the `:root` selector. This is because the developers there would prefer to not support a feature instead of something almost-spec-compliant like what `postcss-css-variables` does.
346346

347347

0 commit comments

Comments
 (0)