Ignore Less variables in length-zero-no-unit (#4405)

* Ignore less variables (#4200)

* Add comment

* Add isLessVariable util, add tests

lib/rules/length-zero-no-unit/__tests__/index.js

@@ -562,3 +562,51 @@ testRule(rule, {
 		},
 	],
 });
+
+testRule(rule, {
+	ruleName,
+	config: [true],
+	fix: true,
+	syntax: 'less',
+	accept: [
+		{
+			code: '@variable: 0px;',
+			description: 'ignore Less variables',
+		},
+		{
+			code: '@detached-ruleset: { line-height: 0px; };',
+			description: 'ignore Less detached ruleset with line-height',
+		},
+		{
+			code: '@detached-ruleset: { font: normal normal 400 0/0px cursive; };',
+			description: 'ignore Less detached ruleset with font',
+		},
+	],
+
+	reject: [
+		{
+			code: '@detached-ruleset: { font-size: 0px; };',
+			fixed: '@detached-ruleset: { font-size: 0; };',
+
+			message: messages.rejected,
+			line: 1,
+			column: 34,
+		},
+		{
+			code: '@detached-ruleset: { grid-template-columns: 0fr; font-size: 0px; line-height: 0px; };',
+			fixed: '@detached-ruleset: { grid-template-columns: 0fr; font-size: 0; line-height: 0px; };',
+
+			message: messages.rejected,
+			line: 1,
+			column: 62,
+		},
+		{
+			code: '@detached-ruleset: { font: normal normal 400 0px/0px cursive; };',
+			fixed: '@detached-ruleset: { font: normal normal 400 0/0px cursive; };',
+
+			message: messages.rejected,
+			line: 1,
+			column: 47,
+		},
+	],
+});

lib/rules/length-zero-no-unit/index.js

@@ -5,6 +5,7 @@ const beforeBlockString = require('../../utils/beforeBlockString');
 const blurComments = require('../../utils/blurComments');
 const hasBlock = require('../../utils/hasBlock');
 const isCustomProperty = require('../../utils/isCustomProperty');
+const isLessVariable = require('../../utils/isLessVariable');
 const isMathFunction = require('../../utils/isMathFunction');
 const keywordSets = require('../../reference/keywordSets');
 const optionsMatches = require('../../utils/optionsMatches');
@@ -65,6 +66,11 @@ const rule = function(actual, secondary, context) {
 		});
 
 		root.walkAtRules((atRule) => {
+			// Ignore Less variables
+			if (isLessVariable(atRule)) {
+				return;
+			}
+
 			const source = hasBlock(atRule)
 				? beforeBlockString(atRule, { noRawBefore: true })
 				: atRule.toString();

lib/utils/__tests__/isLessVariable.test.js

@@ -0,0 +1,46 @@
+'use strict';
+
+const isLessVariable = require('../isLessVariable');
+const less = require('postcss-less');
+
+describe('isLessVariable', () => {
+	it('is less variable', () => {
+		lessAtRules('@var: 10px;', (atRule) => {
+			expect(isLessVariable(atRule)).toBeTruthy();
+		});
+	});
+
+	it('is less variable with function', () => {
+		lessAtRules('@hover-color: darken(@color, 10%);', (atRule) => {
+			expect(isLessVariable(atRule)).toBeTruthy();
+		});
+	});
+
+	it('@charset is not a less variable', () => {
+		lessAtRules('@charset UTF-8;', (atRule) => {
+			expect(isLessVariable(atRule)).toBeFalsy();
+		});
+	});
+
+	it('@import is not a less variable', () => {
+		lessAtRules('@import url("some-styles.css");', (atRule) => {
+			expect(isLessVariable(atRule)).toBeFalsy();
+		});
+	});
+
+	it('@media is not a less variable', () => {
+		lessAtRules('@media (min-width: 100px) {};', (atRule) => {
+			expect(isLessVariable(atRule)).toBeFalsy();
+		});
+	});
+
+	it('detached ruleset is not a less variable', () => {
+		lessAtRules('@detached-ruleset: { margin: 0 };', (atRule) => {
+			expect(isLessVariable(atRule)).toBeFalsy();
+		});
+	});
+});
+
+function lessAtRules(css, cb) {
+	less.parse(css).walkAtRules(cb);
+}

lib/utils/isLessVariable.js

@@ -0,0 +1,8 @@
+/* @flow */
+'use strict';
+
+const hasBlock = require('./hasBlock');
+
+module.exports = function(atRule /*: Object*/) /*: boolean*/ {
+	return atRule.type === 'atrule' && atRule.variable && !hasBlock(atRule);
+};