✨ 8 pt grid

README.md

@@ -106,13 +106,13 @@ _Note: the config is tested against this example, as such the example contains p
 ## Installation
 
 ```bash
-npm install --save-dev stylelint-config-plural stylelint-config-prettier stylelint-config-standard stylelint-config-standard-scss stylelint-high-performance-animation stylelint-images stylelint-order
+npm install --save-dev stylelint-config-plural stylelint-config-prettier stylelint-config-standard stylelint-config-standard-scss stylelint-high-performance-animation stylelint-images stylelint-order stylelint-8-point-grid
 ```
 
 OR
 
 ```bash
-yarn add -D stylelint-config-plural stylelint-config-prettier stylelint-config-standard stylelint-config-standard-scss stylelint-high-performance-animation stylelint-images stylelint-order
+yarn add -D stylelint-config-plural stylelint-config-prettier stylelint-config-standard stylelint-config-standard-scss stylelint-high-performance-animation stylelint-images stylelint-order stylelint-8-point-grid
 ```
 
 ## Usage

__tests__/index.test.js

@@ -41,12 +41,13 @@ describe('css', () => {
 		});
 
 		it('flags warnings', () => {
-			expect(result.results[0].warnings).toHaveLength(6);
+			expect(result.results[0].warnings).toHaveLength(7);
 		});
 
 		it('correct warning text', () => {
 			expect(result.results[0].warnings.map((w) => w.text)).toEqual([
 				'Expected "color" to come before "background-color" (order/properties-order)',
+				'Invalid `width: 10px`. Pixel values should be divisible by 4. (plugin/8-point-grid)',
 				'Expected custom media query name "--FOO" to be kebab-case',
 				'Expected custom property name "--FOO" to be kebab-case',
 				'Expected keyframe name "FOO" to be kebab-case',
@@ -58,6 +59,7 @@ describe('css', () => {
 		it('correct rule flagged', () => {
 			expect(result.results[0].warnings.map((w) => w.rule)).toEqual([
 				'order/properties-order',
+				'plugin/8-point-grid',
 				'custom-media-pattern',
 				'custom-property-pattern',
 				'keyframes-name-pattern',
@@ -71,7 +73,7 @@ describe('css', () => {
 		});
 
 		it('correct line number', () => {
-			expect(result.results[0].warnings[0].line).toBe(17);
+			expect(result.results[0].warnings[0].line).toBe(21);
 		});
 
 		it('correct column number', () => {
@@ -117,12 +119,13 @@ describe('scss', () => {
 		});
 
 		it('flags warnings', () => {
-			expect(result.results[0].warnings).toHaveLength(7);
+			expect(result.results[0].warnings).toHaveLength(8);
 		});
 
 		it('correct warning text', () => {
 			expect(result.results[0].warnings.map((w) => w.text)).toEqual([
 				'Expected "color" to come before "background-color" (order/properties-order)',
+				'Invalid `width: 10px`. Pixel values should be divisible by 4. (plugin/8-point-grid)',
 				'Expected custom media query name "--FOO" to be kebab-case',
 				'Expected custom property name "--FOO" to be kebab-case',
 				'Expected keyframe name "FOO" to be kebab-case',
@@ -135,6 +138,7 @@ describe('scss', () => {
 		it('correct rule flagged', () => {
 			expect(result.results[0].warnings.map((w) => w.rule)).toEqual([
 				'order/properties-order',
+				'plugin/8-point-grid',
 				'custom-media-pattern',
 				'custom-property-pattern',
 				'keyframes-name-pattern',
@@ -149,7 +153,7 @@ describe('scss', () => {
 		});
 
 		it('correct line number', () => {
-			expect(result.results[0].warnings[0].line).toBe(23);
+			expect(result.results[0].warnings[0].line).toBe(27);
 		});
 
 		it('correct column number', () => {

__tests__/invalid.css

@@ -2,6 +2,10 @@ a {
   top: .2em;
 }
 
+.size {
+  width: 10px;
+}
+
 @custom-media --FOO;
 
 :root { --FOO: 1px; }

__tests__/invalid.scss

@@ -2,6 +2,10 @@ a {
   top: .2em;
 }
 
+.size {
+  width: 10px;
+}
+
 @custom-media --FOO;
 
 :root { --FOO: 1px; }

__tests__/valid.css

@@ -20,7 +20,7 @@
 .selector-a,
 .selector-b:not(:first-child) {
   top: calc(100% - 2rem);
-  padding: 10px !important;
+  padding: 8px !important;
 }
 
 .selector-x { width: 10%; }
@@ -49,8 +49,8 @@
   screen and (min-resolution: 2dppx) {
   .selector {
     height: 10rem;
-    margin: 10px;
-    margin-bottom: 5px;
+    margin: 8px;
+    margin-bottom: 4px;
     background-image:
       repeating-linear-gradient(
         -45deg,

index.js

@@ -7,6 +7,7 @@ module.exports = {
 	extends: [
 		'stylelint-config-standard',
 		'stylelint-config-standard-scss',
+		'stylelint-8-point-grid',
 		'stylelint-config-prettier',
 	],
 	plugins: ['stylelint-high-performance-animation', 'stylelint-images', 'stylelint-order'],
@@ -26,6 +27,15 @@ module.exports = {
 		// 'number-max-precision': null,
 		/** properties order */
 		'order/properties-order': propertyOrder,
+		// /** 8 point grid system - 4 point base and 8 point main grid system */
+		'plugin/8-point-grid': {
+			/** base grid point 4 so we can use 4 in certain scenarios and 8 in most. */
+			base: 4,
+			/** special case allow for 1 and 2 points in px and rem, units can be enabled/disabled using other rules */
+			allowlist: ['1px', '2px', '0.0625rem', '0.125rem'],
+			/** custom properties */
+			customProperties: ['size'],
+		},
 		/** now low performance animation properties */
 		'plugin/no-low-performance-animation-properties': true,
 		/** eg: composes - css modules */

package.json

@@ -75,6 +75,7 @@
     ]
   },
   "dependencies": {
+    "stylelint-8-point-grid": "^2.2.0",
     "stylelint-config-prettier": "^9.0.4",
     "stylelint-config-standard": "^29.0.0",
     "stylelint-config-standard-scss": "^6.1.0",
@@ -92,12 +93,15 @@
     "lint-staged": "^13.0.4",
     "np": "^7.6.2",
     "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.21",
     "prettier": "^2.8.0",
     "remark-cli": "^11.0.0",
     "stylelint": "^14.16.1"
   },
   "peerDependencies": {
+    "postcss": ">=8",
     "stylelint": ">=14",
+    "stylelint-8-point-grid": ">=2",
     "stylelint-config-prettier": ">=9",
     "stylelint-config-standard": ">=29",
     "stylelint-config-standard-scss": ">=6",