@csstools/postcss-cascade-layers - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

CHANGELOG.md

		# 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)

package.json

		{
		"name": "@csstools/postcss-cascade-layers",
		"description": "Use cascade layers in CSS",
		"version": "1.0.1",
		"version": "1.0.2",
		"contributors": [
		@@ -6,0 +6,0 @@ {

README.md

		@@ -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 @@

dist/index.cjs

Sorry, the diff of this file is not supported yet

dist/index.mjs

Sorry, the diff of this file is not supported yet

New alerts