Fixed: selector-class-* regex to account for numerals, case de… (#247)

Fixed: `selector-class-*` regex to account for numerals, case detection, and ensure kebab-case
WordPress · May 31, 2020 · 1a5238c · 1a5238c
1 parent 9d9feee
commit 1a5238c
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 3 deletions.
diff --git a/packages/stylelint-config-wordpress/CHANGELOG.md b/packages/stylelint-config-wordpress/CHANGELOG.md
@@ -1,5 +1,7 @@
 # HEAD
 
+-   Fixed: `selector-class-pattern` rule regex to account for numerals, case detection, and ensure kebab-case over snake_case.
+-   Fixed: `selector-id-pattern` rule regex to account for numerals, case detection, and ensure kebab-case over snake_case.
 -   Updated: `stylelint-config-recommended-scss` to `4.1.0`.
 -   Updated: `stylelint-find-rules` to `2.2.0`.
 -   Updated: `stylelint-scss` to `3.13.0`.

diff --git a/packages/stylelint-config-wordpress/__tests__/__snapshots__/selectors.test.js.snap b/packages/stylelint-config-wordpress/__tests__/__snapshots__/selectors.test.js.snap
@@ -9,6 +9,34 @@ Array [
     "severity": "error",
     "text": "Unexpected unit \\"%\\" for property \\"line-height\\" (declaration-property-unit-whitelist)",
   },
+  Object {
+    "column": 1,
+    "line": 25,
+    "rule": "selector-class-pattern",
+    "severity": "error",
+    "text": "Selector should use lowercase and separate words with hyphens (selector-class-pattern)",
+  },
+  Object {
+    "column": 1,
+    "line": 1,
+    "rule": "selector-id-pattern",
+    "severity": "error",
+    "text": "Selector should use lowercase and separate words with hyphens (selector-id-pattern)",
+  },
+  Object {
+    "column": 1,
+    "line": 5,
+    "rule": "selector-id-pattern",
+    "severity": "error",
+    "text": "Selector should use lowercase and separate words with hyphens (selector-id-pattern)",
+  },
+  Object {
+    "column": 4,
+    "line": 9,
+    "rule": "selector-id-pattern",
+    "severity": "error",
+    "text": "Selector should use lowercase and separate words with hyphens (selector-id-pattern)",
+  },
   Object {
     "column": 1,
     "line": 21,

diff --git a/packages/stylelint-config-wordpress/__tests__/selectors-valid.css b/packages/stylelint-config-wordpress/__tests__/selectors-valid.css
@@ -9,3 +9,11 @@ input[type="text"] {
 .selector::after {
 	color: #000;
 }
+
+.selector-class {
+	color: #000;
+}
+
+#selector-id {
+	color: #000;
+}
diff --git a/packages/stylelint-config-wordpress/__tests__/selectors.test.js b/packages/stylelint-config-wordpress/__tests__/selectors.test.js
@@ -47,7 +47,7 @@ describe( 'flags warnings with invalid selectors css', () => {
 
 	it( 'flags correct number of warnings', () => {
 		return result.then( ( data ) => (
-			expect( data.results[ 0 ].warnings ).toHaveLength( 4 )
+			expect( data.results[ 0 ].warnings ).toHaveLength( 8 )
 		) );
 	} );
 

diff --git a/packages/stylelint-config-wordpress/__tests__/structure-valid.css b/packages/stylelint-config-wordpress/__tests__/structure-valid.css
@@ -9,3 +9,21 @@
 	background: #fff;
 	color: #000;
 }
+
+h1,
+.heading-size-1 {
+	background: #fff;
+	color: #000;
+}
+
+h2,
+.heading-size-2 {
+	background: #fff;
+	color: #000;
+}
+
+h3,
+.heading-size-3 {
+	background: #fff;
+	color: #000;
+}
diff --git a/packages/stylelint-config-wordpress/index.js b/packages/stylelint-config-wordpress/index.js
@@ -75,13 +75,13 @@ module.exports = {
 		'selector-attribute-operator-space-before': 'never',
 		'selector-attribute-quotes': 'always',
 		'selector-class-pattern': [
-			'^[a-z]+(-[a-z]+)*',
+			'^([a-z][a-z0-9]*)(-[a-z0-9]+)*$',
 			{
 				message: 'Selector should use lowercase and separate words with hyphens (selector-class-pattern)',
 			},
 		],
 		'selector-id-pattern': [
-			'^[a-z]+(-[a-z]+)*',
+			'^([a-z][a-z0-9]*)(-[a-z0-9]+)*$',
 			{
 				message: 'Selector should use lowercase and separate words with hyphens (selector-id-pattern)',
 			},