@csstools/postcss-cascade-layers
Advanced tools
Comparing version
# Changes to PostCSS Cascade Layers | ||
### 1.0.2 (May 20, 2022) | ||
- Use only simple `:not(#\#)` selectors to adjust specificity. | ||
### 1.0.1 (May 17, 2022) | ||
- Process CSS after most other plugins to ensure correct analysis and transformation of sugary CSS. | ||
- Fix selector order with `:before` and other pseudo elements. | ||
- Process CSS after most other plugins to ensure correct analysis and transformation of sugary CSS. | ||
- Fix selector order with `:before` and other pseudo elements. | ||
@@ -8,0 +12,0 @@ ### 1.0.0 (May 12, 2022) |
{ | ||
"name": "@csstools/postcss-cascade-layers", | ||
"description": "Use cascade layers in CSS", | ||
"version": "1.0.1", | ||
"version": "1.0.2", | ||
"contributors": [ | ||
@@ -6,0 +6,0 @@ { |
@@ -36,2 +36,26 @@ # PostCSS Cascade Layers [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss] | ||
## How it works | ||
[PostCSS Cascade Layers] creates "layers" of specificity. | ||
It applies extra specificity on all your styles based on : | ||
- the most specific selector found | ||
- the order in which layers are defined | ||
for `@layer A, B, C`: | ||
| layer | specificity adjustment | selector | | ||
| ------ | ----------- | --- | | ||
| `A` | 0 | N/A | | ||
| `B` | 3 | `:not(#/#):not(#/#):not(#/#)` | | ||
| `C` | 6 | `:not(#/#):not(#/#):not(#/#):not(#/#):not(#/#):not(#/#)` | | ||
This approach lets more important (later) layers always override less important (earlier) layers.<br> | ||
And layers have enough room internally so that each selector works and overrides as expected. | ||
More layers with more specificity will cause longer `:not(...)` selectors to be generated. | ||
⚠️ For this to work the plugin needs to analyze your entire stylesheet at once.<br> | ||
If you have different assets that are unaware of each other it will not work correctly as the analysis will be incorrect. | ||
## Usage | ||
@@ -38,0 +62,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
37458
2.81%174
16%