Fix issue with shorthand percentage values

docs/rules/shorthand-values.md

@@ -10,6 +10,11 @@ Rule `shorthand-values` will enforce that values in their shorthand form are as
 
 When `allowed-shorthands` is left at default, the following is enforced:
 
+```yml
+# .sass-lint.yml
+shorthand-values: 1
+```
+
 ```scss
 margin: 1px 1px 1px 1px;
 
@@ -31,6 +36,15 @@ margin: 1px 2px 3px;
 
 When `allowed-shorthands` is `[1]`, the following is enforced:
 
+```yml
+# .sass-lint.yml
+shorthand-values:
+  - 1
+  -
+    allowed-shorthands:
+      - 1
+```
+
 ```scss
 margin: 1px 1px 1px 1px;
 
@@ -46,6 +60,16 @@ margin: 1px 2px 1px 2px;
 
 When `allowed-shorthands` is `[1, 2]`, the following is enforced:
 
+```yml
+# .sass-lint.yml
+shorthand-values:
+  - 1
+  -
+    allowed-shorthands:
+      - 1
+      - 2
+```
+
 ```scss
 margin: 1px 1px 1px 1px;
 

lib/rules/shorthand-values.js

@@ -83,6 +83,12 @@ module.exports = {
                 });
               }
 
+              else if (val.is('percentage')) {
+                val.forEach(function (el) {
+                  fullVal += el.content + '%';
+                });
+              }
+
               else if (val.is('operator') || val.is('ident') || val.is('number') || val.is('unaryOperator')) {
                 fullVal += val.content;
               }

tests/rules/shorthand-values.js

@@ -12,7 +12,7 @@ describe('shorthand values - scss', function () {
     lint.test(file, {
       'shorthand-values': 1
     }, function (data) {
-      lint.assert.equal(49, data.warningCount);
+      lint.assert.equal(54, data.warningCount);
       done();
     });
   });
@@ -28,7 +28,7 @@ describe('shorthand values - scss', function () {
         }
       ]
     }, function (data) {
-      lint.assert.equal(21, data.warningCount);
+      lint.assert.equal(23, data.warningCount);
       done();
     });
   });
@@ -44,7 +44,7 @@ describe('shorthand values - scss', function () {
         }
       ]
     }, function (data) {
-      lint.assert.equal(23, data.warningCount);
+      lint.assert.equal(26, data.warningCount);
       done();
     });
   });
@@ -60,7 +60,7 @@ describe('shorthand values - scss', function () {
         }
       ]
     }, function (data) {
-      lint.assert.equal(29, data.warningCount);
+      lint.assert.equal(32, data.warningCount);
       done();
     });
   });
@@ -92,7 +92,7 @@ describe('shorthand values - scss', function () {
         }
       ]
     }, function (data) {
-      lint.assert.equal(36, data.warningCount);
+      lint.assert.equal(40, data.warningCount);
       done();
     });
   });
@@ -109,7 +109,7 @@ describe('shorthand values - scss', function () {
         }
       ]
     }, function (data) {
-      lint.assert.equal(42, data.warningCount);
+      lint.assert.equal(46, data.warningCount);
       done();
     });
   });
@@ -126,7 +126,7 @@ describe('shorthand values - scss', function () {
         }
       ]
     }, function (data) {
-      lint.assert.equal(36, data.warningCount);
+      lint.assert.equal(40, data.warningCount);
       done();
     });
   });
@@ -144,7 +144,7 @@ describe('shorthand values - scss', function () {
         }
       ]
     }, function (data) {
-      lint.assert.equal(49, data.warningCount);
+      lint.assert.equal(54, data.warningCount);
       done();
     });
   });
@@ -161,7 +161,7 @@ describe('shorthand values - sass', function () {
     lint.test(file, {
       'shorthand-values': 1
     }, function (data) {
-      lint.assert.equal(49, data.warningCount);
+      lint.assert.equal(54, data.warningCount);
       done();
     });
   });
@@ -177,7 +177,7 @@ describe('shorthand values - sass', function () {
         }
       ]
     }, function (data) {
-      lint.assert.equal(21, data.warningCount);
+      lint.assert.equal(23, data.warningCount);
       done();
     });
   });
@@ -193,7 +193,7 @@ describe('shorthand values - sass', function () {
         }
       ]
     }, function (data) {
-      lint.assert.equal(23, data.warningCount);
+      lint.assert.equal(26, data.warningCount);
       done();
     });
   });
@@ -209,7 +209,7 @@ describe('shorthand values - sass', function () {
         }
       ]
     }, function (data) {
-      lint.assert.equal(29, data.warningCount);
+      lint.assert.equal(32, data.warningCount);
       done();
     });
   });
@@ -241,7 +241,7 @@ describe('shorthand values - sass', function () {
         }
       ]
     }, function (data) {
-      lint.assert.equal(36, data.warningCount);
+      lint.assert.equal(40, data.warningCount);
       done();
     });
   });
@@ -258,7 +258,7 @@ describe('shorthand values - sass', function () {
         }
       ]
     }, function (data) {
-      lint.assert.equal(42, data.warningCount);
+      lint.assert.equal(46, data.warningCount);
       done();
     });
   });
@@ -275,7 +275,7 @@ describe('shorthand values - sass', function () {
         }
       ]
     }, function (data) {
-      lint.assert.equal(36, data.warningCount);
+      lint.assert.equal(40, data.warningCount);
       done();
     });
   });
@@ -293,7 +293,7 @@ describe('shorthand values - sass', function () {
         }
       ]
     }, function (data) {
-      lint.assert.equal(49, data.warningCount);
+      lint.assert.equal(54, data.warningCount);
       done();
     });
   });

tests/sass/shorthand-values.sass

@@ -170,3 +170,36 @@
 
 .value-four-diff-four-negative-mixed
   margin: -1px 1px -1rem -1rem
+
+.value-percentage
+  margin: 1%
+
+.value-two-percentage
+  margin: 1% 1%
+
+.value-two-diff-percentage
+  margin: 1% -1%
+
+.value-three-diff-one-percentage
+  margin: 1% 2% 1%
+
+.value-three-diff-two-percentage
+  margin: 1% 2% -1%
+
+.value-four-percentage
+  margin: 1% 1% 1% 1%
+
+.value-four-diff-one-percentage
+  margin: 1% 1% 1% -1%
+
+.value-four-diff-two-percentage
+  margin: 1% -1% 1% -1%
+
+.value-four-diff-three-percentage
+  margin: 1% -1% -1% -1%
+
+.value-four-diff-four-percentage
+  margin: 1% -2% -3% 4%
+
+.value-four-diff-four-percentage-mixed
+  margin: -1% -1% -1rem -1rem

tests/sass/shorthand-values.scss

@@ -199,3 +199,47 @@
 .value-four-diff-four-negative-mixed {
   margin: -1px 1px -1rem -1rem;
 }
+
+.value-percentage {
+  margin: 1%;
+}
+
+.value-two-percentage {
+  margin: 1% 1%;
+}
+
+.value-two-diff-percentage {
+  margin: 1% -1%;
+}
+
+.value-three-diff-one-percentage {
+  margin: 1% 2% 1%;
+}
+
+.value-three-diff-two-percentage {
+  margin: 1% 2% -1%;
+}
+
+.value-four-percentage {
+  margin: 1% 1% 1% 1%;
+}
+
+.value-four-diff-one-percentage {
+  margin: 1% 1% 1% -1%;
+}
+
+.value-four-diff-two-percentage {
+  margin: 1% -1% 1% -1%;
+}
+
+.value-four-diff-three-percentage {
+  margin: 1% -1% -1% -1%;
+}
+
+.value-four-diff-four-percentage {
+  margin: 1% -2% -3% 4%;
+}
+
+.value-four-diff-four-percentage-mixed {
+  margin: -1% -1% -1rem -1rem;
+}