Fix layer-name-pattern false positives for dot notation (#373)

Co-authored-by: jeddy3 <[email protected]>

Author: jhae-de

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## Unreleased
+
+- Fixed: `layer-name-pattern` false positives for dot notation.
+
 ## 39.0.0
 
 - Removed: `stylelint` less than `16.23.0` from peer dependencies.

README.md

@@ -42,11 +42,12 @@ To see the rules that this config uses, please read the [config itself](./index.
     left: calc(var(--offset) + 50%);
   }
 
-  /* Flush nested single line comment */
-  a::after {
-    display: block;
-    content: "→";
-    background-image: url("x.svg");
+  @layer layer-foo.layer-bar {
+    a::after {
+      display: block;
+      content: "→";
+      background-image: url("x.svg");
+    }
   }
 }
 
@@ -55,6 +56,7 @@ To see the rules that this config uses, please read the [config itself](./index.
     opacity: 0;
   }
 
+  /* Flush nested single line comment */
   to {
     opacity: 1;
   }

__tests__/index.test.mjs

@@ -42,7 +42,7 @@ describe('flags warnings with invalid css', () => {
 	});
 
 	it('flags warnings', () => {
-		assert.equal(result.results[0].warnings.length, 5);
+		assert.equal(result.results[0].warnings.length, 7);
 	});
 
 	it('correct warning text', () => {
@@ -52,6 +52,8 @@ describe('flags warnings with invalid css', () => {
 				'Expected custom media query name "--FOO" to be kebab-case (custom-media-pattern)',
 				'Expected custom property name "--FOO" to be kebab-case (custom-property-pattern)',
 				'Expected keyframe name "FOO" to be kebab-case (keyframes-name-pattern)',
+				'Expected layer name "layer-BAR" to be kebab-case (layer-name-pattern)',
+				'Expected layer name "layer-foo.layer-BAR" to be kebab-case (layer-name-pattern)',
 				'Expected class selector ".FOO" to be kebab-case (selector-class-pattern)',
 				'Expected id selector "#FOO" to be kebab-case (selector-id-pattern)',
 			],
@@ -65,6 +67,8 @@ describe('flags warnings with invalid css', () => {
 				'custom-media-pattern',
 				'custom-property-pattern',
 				'keyframes-name-pattern',
+				'layer-name-pattern',
+				'layer-name-pattern',
 				'selector-class-pattern',
 				'selector-id-pattern',
 			],

__tests__/invalid.css

@@ -15,3 +15,15 @@
 #FOO {
 	/* ... */
 }
+
+@layer layer-foo {
+	/* ... */
+
+	@layer layer-BAR {
+		/* ... */
+	}
+}
+
+@layer layer-foo.layer-BAR {
+	/* ... */
+}

__tests__/valid.css

@@ -29,11 +29,12 @@
 		left: calc(var(--offset) + 50%);
 	}
 
-	/* Flush nested single line comment */
-	a::after {
-		display: block;
-		content: '→';
-		background-image: url('x.svg');
+	@layer layer-foo.layer-bar {
+		a::after {
+			display: block;
+			content: '→';
+			background-image: url('x.svg');
+		}
 	}
 }
 
@@ -42,6 +43,7 @@
 		opacity: 0;
 	}
 
+	/* Flush nested single line comment */
 	to {
 		opacity: 1;
 	}

index.js

@@ -82,7 +82,7 @@ module.exports = {
 			},
 		],
 		'layer-name-pattern': [
-			'^([a-z][a-z0-9]*)(-[a-z0-9]+)*$',
+			'^([a-z][a-z0-9]*)([.-][a-z0-9]+)*$',
 			{
 				message: (name) => `Expected layer name "${name}" to be kebab-case`,
 			},