fix: Add declaration-property-unit-whitelist rule to enforce unitle…

…ss `line-height` values. (#133)
WordPress · May 31, 2020 · be07ad0 · be07ad0
1 parent d8bc909
commit be07ad0
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 27 deletions.
diff --git a/packages/stylelint-config-wordpress/CHANGELOG.md b/packages/stylelint-config-wordpress/CHANGELOG.md
@@ -1,5 +1,6 @@
 # HEAD
 
+-   Added: `declaration-property-unit-whitelist` rule to enforce unitless `line-height` values.
 -   Changed: Relocated repo to https://github.com/WordPress-Coding-Standards
 
 # 10.0.2

diff --git a/packages/stylelint-config-wordpress/__tests__/selectors.js b/packages/stylelint-config-wordpress/__tests__/selectors.js
@@ -46,21 +46,21 @@ describe("flags warnings with invalid selectors css", () => {
     ))
   })
 
-  it("flags two warnings", () => {
+  it("flags warnings", () => {
     return result.then(data => (
-      expect(data.results[0].warnings.length).toBe(2)
+      expect(data.results[0].warnings.length).toBe(3)
     ))
   })
 
   it("correct first warning text", () => {
     return result.then(data => (
-      expect(data.results[0].warnings[0].text).toBe("Selector should use lowercase and separate words with hyphens (selector-id-pattern)")
+      expect(data.results[0].warnings[0].text).toBe("Unexpected unit \"%\" for property \"line-height\" (declaration-property-unit-whitelist)")
     ))
   })
 
   it("correct first warning rule flagged", () => {
     return result.then(data => (
-      expect(data.results[0].warnings[0].rule).toBe("selector-id-pattern")
+      expect(data.results[0].warnings[0].rule).toBe("declaration-property-unit-whitelist")
     ))
   })
 
@@ -72,25 +72,25 @@ describe("flags warnings with invalid selectors css", () => {
 
   it("correct first warning line number", () => {
     return result.then(data => (
-      expect(data.results[0].warnings[0].line).toBe(21)
+      expect(data.results[0].warnings[0].line).toBe(18)
     ))
   })
 
   it("correct first warning column number", () => {
     return result.then(data => (
-      expect(data.results[0].warnings[0].column).toBe(1)
+      expect(data.results[0].warnings[0].column).toBe(15)
     ))
   })
 
   it("correct second warning text", () => {
     return result.then(data => (
-      expect(data.results[0].warnings[1].text).toBe("Expected double quotes (string-quotes)")
+      expect(data.results[0].warnings[1].text).toBe("Selector should use lowercase and separate words with hyphens (selector-id-pattern)")
     ))
   })
 
   it("correct second warning rule flagged", () => {
     return result.then(data => (
-      expect(data.results[0].warnings[1].rule).toBe("string-quotes")
+      expect(data.results[0].warnings[1].rule).toBe("selector-id-pattern")
     ))
   })
 
@@ -102,13 +102,43 @@ describe("flags warnings with invalid selectors css", () => {
 
   it("correct second warning line number", () => {
     return result.then(data => (
-      expect(data.results[0].warnings[1].line).toBe(17)
+      expect(data.results[0].warnings[1].line).toBe(21)
     ))
   })
 
   it("correct second warning column number", () => {
     return result.then(data => (
-      expect(data.results[0].warnings[1].column).toBe(12)
+      expect(data.results[0].warnings[1].column).toBe(1)
+    ))
+  })
+
+  it("correct third warning text", () => {
+    return result.then(data => (
+      expect(data.results[0].warnings[2].text).toBe("Expected double quotes (string-quotes)")
+    ))
+  })
+
+  it("correct third warning rule flagged", () => {
+    return result.then(data => (
+      expect(data.results[0].warnings[2].rule).toBe("string-quotes")
+    ))
+  })
+
+  it("correct third warning severity flagged", () => {
+    return result.then(data => (
+      expect(data.results[0].warnings[2].severity).toBe("error")
+    ))
+  })
+
+  it("correct third warning line number", () => {
+    return result.then(data => (
+      expect(data.results[0].warnings[2].line).toBe(17)
+    ))
+  })
+
+  it("correct third warning column number", () => {
+    return result.then(data => (
+      expect(data.results[0].warnings[2].column).toBe(12)
     ))
   })
 })
diff --git a/packages/stylelint-config-wordpress/__tests__/values-invalid.css b/packages/stylelint-config-wordpress/__tests__/values-invalid.css
@@ -9,4 +9,5 @@
 .class {
 	font-family: Times New Roman, serif; /* Quote font names when required */
 	font-weight: bold; /* Avoid named font weights */
+	line-height: 1.4em;
 }
diff --git a/packages/stylelint-config-wordpress/__tests__/values-valid.css b/packages/stylelint-config-wordpress/__tests__/values-valid.css
@@ -7,6 +7,7 @@
 .class { /* Correct usage of zero values */
 	font-family: Georgia, serif;
 	font-weight: bolder; /* Ignore relative font weights */
+	line-height: 1.4;
 	text-shadow:
 		0 -1px 0 rgba(0, 0, 0, 0.5),
 		0 1px 0 #fff;

diff --git a/packages/stylelint-config-wordpress/__tests__/values.js b/packages/stylelint-config-wordpress/__tests__/values.js
@@ -46,9 +46,9 @@ describe("flags warnings with invalid values css", () => {
     ))
   })
 
-  it("flags eight warnings", () => {
+  it("flags warnings", () => {
     return result.then(data => (
-      expect(data.results[0].warnings.length).toBe(8)
+      expect(data.results[0].warnings.length).toBe(9)
     ))
   })
 
@@ -114,13 +114,13 @@ describe("flags warnings with invalid values css", () => {
 
   it("correct third warning text", () => {
     return result.then(data => (
-      expect(data.results[0].warnings[2].text).toBe("Expected quotes around \"Times New Roman\" (font-family-name-quotes)")
+      expect(data.results[0].warnings[2].text).toBe("Unexpected unit \"em\" for property \"line-height\" (declaration-property-unit-whitelist)")
     ))
   })
 
   it("correct third warning rule flagged", () => {
     return result.then(data => (
-      expect(data.results[0].warnings[2].rule).toBe("font-family-name-quotes")
+      expect(data.results[0].warnings[2].rule).toBe("declaration-property-unit-whitelist")
     ))
   })
 
@@ -132,7 +132,7 @@ describe("flags warnings with invalid values css", () => {
 
   it("correct third warning line number", () => {
     return result.then(data => (
-      expect(data.results[0].warnings[2].line).toBe(10)
+      expect(data.results[0].warnings[2].line).toBe(12)
     ))
   })
 
@@ -144,13 +144,13 @@ describe("flags warnings with invalid values css", () => {
 
   it("correct forth warning text", () => {
     return result.then(data => (
-      expect(data.results[0].warnings[3].text).toBe("Expected numeric font-weight notation (font-weight-notation)")
+      expect(data.results[0].warnings[3].text).toBe("Expected quotes around \"Times New Roman\" (font-family-name-quotes)")
     ))
   })
 
   it("correct forth warning rule flagged", () => {
     return result.then(data => (
-      expect(data.results[0].warnings[3].rule).toBe("font-weight-notation")
+      expect(data.results[0].warnings[3].rule).toBe("font-family-name-quotes")
     ))
   })
 
@@ -162,7 +162,7 @@ describe("flags warnings with invalid values css", () => {
 
   it("correct forth warning line number", () => {
     return result.then(data => (
-      expect(data.results[0].warnings[3].line).toBe(11)
+      expect(data.results[0].warnings[3].line).toBe(10)
     ))
   })
 
@@ -174,13 +174,13 @@ describe("flags warnings with invalid values css", () => {
 
   it("correct fifth warning text", () => {
     return result.then(data => (
-      expect(data.results[0].warnings[4].text).toBe("Unexpected unit (length-zero-no-unit)")
+      expect(data.results[0].warnings[4].text).toBe("Expected numeric font-weight notation (font-weight-notation)")
     ))
   })
 
   it("correct fifth warning rule flagged", () => {
     return result.then(data => (
-      expect(data.results[0].warnings[4].rule).toBe("length-zero-no-unit")
+      expect(data.results[0].warnings[4].rule).toBe("font-weight-notation")
     ))
   })
 
@@ -192,13 +192,13 @@ describe("flags warnings with invalid values css", () => {
 
   it("correct fifth warning line number", () => {
     return result.then(data => (
-      expect(data.results[0].warnings[4].line).toBe(6)
+      expect(data.results[0].warnings[4].line).toBe(11)
     ))
   })
 
   it("correct fifth warning column number", () => {
     return result.then(data => (
-      expect(data.results[0].warnings[4].column).toBe(11)
+      expect(data.results[0].warnings[4].column).toBe(15)
     ))
   })
 
@@ -228,7 +228,7 @@ describe("flags warnings with invalid values css", () => {
 
   it("correct sixth warning column number", () => {
     return result.then(data => (
-      expect(data.results[0].warnings[5].column).toBe(15)
+      expect(data.results[0].warnings[5].column).toBe(11)
     ))
   })
 
@@ -258,19 +258,19 @@ describe("flags warnings with invalid values css", () => {
 
   it("correct seventh warning column number", () => {
     return result.then(data => (
-      expect(data.results[0].warnings[6].column).toBe(24)
+      expect(data.results[0].warnings[6].column).toBe(15)
     ))
   })
 
   it("correct eighth warning text", () => {
     return result.then(data => (
-      expect(data.results[0].warnings[7].text).toBe("Unexpected longhand value '0px 0px 20px 0px' instead of '0px 0px 20px' (shorthand-property-no-redundant-values)")
+      expect(data.results[0].warnings[7].text).toBe("Unexpected unit (length-zero-no-unit)")
     ))
   })
 
   it("correct eighth warning rule flagged", () => {
     return result.then(data => (
-      expect(data.results[0].warnings[7].rule).toBe("shorthand-property-no-redundant-values")
+      expect(data.results[0].warnings[7].rule).toBe("length-zero-no-unit")
     ))
   })
 
@@ -288,7 +288,37 @@ describe("flags warnings with invalid values css", () => {
 
   it("correct eighth warning column number", () => {
     return result.then(data => (
-      expect(data.results[0].warnings[7].column).toBe(2)
+      expect(data.results[0].warnings[7].column).toBe(24)
+    ))
+  })
+
+  it("correct ninth warning text", () => {
+    return result.then(data => (
+      expect(data.results[0].warnings[8].text).toBe("Unexpected longhand value '0px 0px 20px 0px' instead of '0px 0px 20px' (shorthand-property-no-redundant-values)")
+    ))
+  })
+
+  it("correct ninth warning rule flagged", () => {
+    return result.then(data => (
+      expect(data.results[0].warnings[8].rule).toBe("shorthand-property-no-redundant-values")
+    ))
+  })
+
+  it("correct ninth warning severity flagged", () => {
+    return result.then(data => (
+      expect(data.results[0].warnings[8].severity).toBe("error")
+    ))
+  })
+
+  it("correct ninth warning line number", () => {
+    return result.then(data => (
+      expect(data.results[0].warnings[8].line).toBe(6)
+    ))
+  })
+
+  it("correct ninth warning column number", () => {
+    return result.then(data => (
+      expect(data.results[0].warnings[8].column).toBe(2)
     ))
   })
 })
diff --git a/packages/stylelint-config-wordpress/index.js b/packages/stylelint-config-wordpress/index.js
@@ -33,6 +33,9 @@ module.exports = {
     "declaration-colon-newline-after": "always-multi-line",
     "declaration-colon-space-after": "always-single-line",
     "declaration-colon-space-before": "never",
+    "declaration-property-unit-whitelist": {
+      "line-height": [],
+    },
     "font-family-name-quotes": "always-where-recommended",
     "font-weight-notation": [ "numeric", {
       ignore: ["relative"],