Updating docs and warning for @import

plugins/postcss-cascade-layers/.tape.mjs

@@ -40,7 +40,8 @@ postcssTape(plugin)({
 		options: {
 			onRevertLayerKeyword: 'warn',
 			onConditionalRulesChangingLayerOrder: 'warn',
+			onImportLayerRule: 'warn'
 		},
-		warnings: 2,
+		warnings: 3,
 	}
 });

plugins/postcss-cascade-layers/README.md

@@ -5,7 +5,7 @@
 [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url]
 [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
 
-[PostCSS Cascade Layers] lets use `@layer` following the [Cascade Layers Specification].
+[PostCSS Cascade Layers] lets you use `@layer` following the [Cascade Layers Specification]. For more information on layers, checkout [A Complete Guide to CSS Cascade Layers] by Miriam Suzanne.   
 
 ```pcss
 
@@ -114,7 +114,16 @@ postcssCascadeLayers({ onConditionalRulesChangingLayerOrder: 'warn' }) // 'warn'
 }
 ```
 
-<!-- TODO : Add a reference to oddbird for doing all the heavy lifting -->
+### Using `@import` with layers
+The `@import` at-rule can also be used with cascade layers, specifically to create a new layer like so: 
+```
+@import 'theme.css' layer(utilities);
+```
+If your CSS uses `@import` with layers, you will also need the [postcss-import] plugin. This plugin alone will not handle the `@import` at-rule.  
+
+
+### Contributors
+The contributors to this plugin were [Olu Niyi-Awosusi] and [Sana Javed] from [Oddbird] and [Romain Menke].
 
 [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
 [css-url]: https://cssdb.org/#cascade-layers
@@ -127,3 +136,9 @@ postcssCascadeLayers({ onConditionalRulesChangingLayerOrder: 'warn' }) // 'warn'
 [PostCSS Loader]: https://github.com/postcss/postcss-loader
 [PostCSS Cascade Layers]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-cascade-layers
 [Cascade Layers Specification]: https://www.w3.org/TR/css-cascade-5/#layering
+[A Complete Guide to CSS Cascade Layers]: https://css-tricks.com/css-cascade-layers/ 
+[Olu Niyi-Awosusi]: https://github.com/oluoluoxenfree
+[Sana Javed]: https://github.com/sanajaved7
+[Romain Menke]: https://github.com/romainmenke
+[Oddbird]: https://github.com/oddbird 
+[postcss-import]: https://github.com/postcss/postcss-import

plugins/postcss-cascade-layers/package.json

@@ -1,8 +1,8 @@
 {
 	"name": "@csstools/postcss-cascade-layers",
-	"description": "A base plugin",
-	"version": "0.0.0",
-	"author": "Jonathan Neal <jonathantneal@hotmail.com>",
+	"description": "Use layers in CSS",
+	"version": "1.0.0",
+	"author": "Olu Niyi-Awosusi <o.niyiawosusi@gmail.com>, Sana Javed <sanajaved7@gmail.com>, Romain Menke <romainmenke@gmail.com>",
 	"license": "CC0-1.0",
 	"private": true,
 	"engines": {

plugins/postcss-cascade-layers/src/index.ts

@@ -17,6 +17,7 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 	const options = Object.assign({
 		onRevertLayerKeyword: 'warn',
 		onConditionalRulesChangingLayerOrder: 'warn',
+		onImportLayerRule: 'warn',
 	}, opts);
 
 	return {
@@ -32,6 +33,15 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 				});
 			}
 
+			if(options.onImportLayerRule){
+				root.walkAtRules('import', (atRule) => {
+					if(atRule.params.includes('layer')){
+						atRule.warn(result, 'To use @import with layers, the postcss-import plugin is also required. This plugin alone will not support using the @import at-rule.');
+					}
+				},
+				);
+			}
+
 			splitImportantStyles(root);
 
 			const model = new Model();

plugins/postcss-cascade-layers/src/options.ts

@@ -1,4 +1,5 @@
 export type pluginOptions = {
 	onRevertLayerKeyword: 'warn'|false,
 	onConditionalRulesChangingLayerOrder: 'warn'|false,
+	onImportLayerRule: 'warn'|false,
 }

plugins/postcss-cascade-layers/test/warnings.css

@@ -1,3 +1,6 @@
+/* [postcss-cascade-layers]: To use the @import at-rule with layer, the postcss-import plugin is also required. This plugin alone will not support importing layers. */
+@import 'theme.css' layer(utilities);
+
 /* [postcss-cascade-layers]: handling "revert-layer" is unsupported by this plugin and will cause style differences between browser versions. */
 @layer {
 	.foo {

plugins/postcss-cascade-layers/test/warnings.expect.css

@@ -1,3 +1,6 @@
+
+@import 'theme.css' layer(utilities);/* [postcss-cascade-layers]: To use the @import at-rule with layer, the postcss-import plugin is also required. This plugin alone will not support importing layers. */
+
 /* [postcss-cascade-layers]: handling "revert-layer" is unsupported by this plugin and will cause style differences between browser versions. */
 .foo {
 		color: revert-layer;