Fix custom property sets (#5307)

stylelint · May 20, 2021 · a3a333d · a3a333d
1 parent b74b41c
commit a3a333d
Show file tree

Hide file tree

Showing 9 changed files with 6 additions and 153 deletions.
diff --git a/lib/rules/block-closing-brace-newline-after/__tests__/index.js b/lib/rules/block-closing-brace-newline-after/__tests__/index.js
@@ -114,28 +114,6 @@ testRule({
 			line: 1,
 			column: 6,
 		},
-		{
-			code: ':root {\n --x { color: pink; } ; \n --y { color: red; };\n }',
-			fixed: ':root {\n --x { color: pink; } ;\n --y { color: red; };\n }',
-			message: messages.expectedAfter(),
-			line: 2,
-			column: 24,
-		},
-		{
-			code: ':root {\n --x { color: pink; }; \n --y { color: red; };\n }',
-			fixed: ':root {\n --x { color: pink; };\n --y { color: red; };\n }',
-			message: messages.expectedAfter(),
-			line: 2,
-			column: 23,
-		},
-		{
-			code: '.foo {\n --my-theme: { color: red; }; \n --toolbar-theme: { color: green; };\n }',
-			fixed: '.foo {\n --my-theme: { color: red; };\n --toolbar-theme: { color: green; };\n }',
-			description: 'Make sure trailing semicolon works well for blocks outside :root',
-			message: messages.expectedAfter(),
-			line: 2,
-			column: 30,
-		},
 	],
 });
 

diff --git a/lib/rules/block-closing-brace-space-after/__tests__/index.js b/lib/rules/block-closing-brace-space-after/__tests__/index.js
@@ -35,14 +35,6 @@ testRule({
 		{
 			code: '.a {} /* stylelint-disable-line block-no-empty */',
 		},
-		{
-			code: ':root { --x { color: pink; }; --y { color: red; }; }',
-			description: 'Allow a trailing semicolon after the closing brace of a block',
-		},
-		{
-			code: '.foo { --my-theme: { color: red; }; --toolbar-theme: { color: green; }; }',
-			description: 'Make sure trailing semicolon works well for blocks outside :root',
-		},
 	],
 
 	reject: [
@@ -89,19 +81,6 @@ testRule({
 			line: 1,
 			column: 35,
 		},
-		{
-			code: ':root { --x { color: pink; };--y { color: red; }; }',
-			message: messages.expectedAfter(),
-			line: 1,
-			column: 30,
-		},
-		{
-			code: '.foo { --my-theme: { color: red; };--toolbar-theme: { color: green; }; }',
-			description: 'Make sure trailing semicolon works well for blocks outside :root',
-			message: messages.expectedAfter(),
-			line: 1,
-			column: 36,
-		},
 	],
 });
 

diff --git a/lib/rules/no-descending-specificity/index.js b/lib/rules/no-descending-specificity/index.js
@@ -4,7 +4,6 @@
 
 const _ = require('lodash');
 const findAtRuleContext = require('../../utils/findAtRuleContext');
-const isCustomPropertySet = require('../../utils/isCustomPropertySet');
 const isStandardSyntaxRule = require('../../utils/isStandardSyntaxRule');
 const isStandardSyntaxSelector = require('../../utils/isStandardSyntaxSelector');
 const keywordSets = require('../../reference/keywordSets');
@@ -47,11 +46,6 @@ function rule(on, options) {
 		const selectorContextLookup = nodeContextLookup();
 
 		root.walkRules((ruleNode) => {
-			// Ignore custom property set `--foo: {};`
-			if (isCustomPropertySet(ruleNode)) {
-				return;
-			}
-
 			// Ignore nested property `foo: {};`
 			if (!isStandardSyntaxRule(ruleNode)) {
 				return;

diff --git a/lib/rules/no-extra-semicolons/index.js b/lib/rules/no-extra-semicolons/index.js
@@ -2,7 +2,6 @@
 
 'use strict';
 
-const isCustomPropertySet = require('../../utils/isCustomPropertySet');
 const isStandardSyntaxAtRule = require('../../utils/isStandardSyntaxAtRule');
 const isStandardSyntaxRule = require('../../utils/isStandardSyntaxRule');
 const report = require('../../utils/report');
@@ -79,7 +78,7 @@ function rule(actual, options, context) {
 				return;
 			}
 
-			if (node.type === 'rule' && !isCustomPropertySet(node) && !isStandardSyntaxRule(node)) {
+			if (node.type === 'rule' && !isStandardSyntaxRule(node)) {
 				return;
 			}
 
@@ -88,34 +87,8 @@ function rule(actual, options, context) {
 			if (rawBeforeNode && rawBeforeNode.trim().length !== 0) {
 				let allowedSemi = 0;
 
-				const next = node.next();
-
-				// Ignore semicolon before comment if next node is custom properties sets or comment
-				if (
-					node.type === 'comment' &&
-					next &&
-					isCustomPropertySet(next) &&
-					node.parent.index(next) > 0
-				) {
-					allowedSemi = 1;
-				}
-
-				const prev = node.prev();
-
 				let rawBeforeIndexStart = 0;
 
-				// Adding previous node string to custom properties set if previous node is comment
-				if (
-					isCustomPropertySet(node) &&
-					node.parent.index(node) > 0 &&
-					prev &&
-					prev.type === 'comment'
-				) {
-					rawBeforeNode = prev.toString() + rawBeforeNode;
-					allowedSemi = 0;
-					rawBeforeIndexStart = prev.toString().length;
-				}
-
 				const fixSemiIndices = [];
 
 				styleSearch({ source: rawBeforeNode, target: ';' }, (match, count) => {
@@ -146,12 +119,7 @@ function rule(actual, options, context) {
 				 * node.raws.after will be populated with that semicolon.
 				 * Since we ignore Less mixins, exit here
 				 */
-				if (
-					node.last &&
-					node.last.type === 'atrule' &&
-					!isCustomPropertySet(node.last) &&
-					!isStandardSyntaxAtRule(node.last)
-				) {
+				if (node.last && node.last.type === 'atrule' && !isStandardSyntaxAtRule(node.last)) {
 					return;
 				}
 
@@ -185,10 +153,6 @@ function rule(actual, options, context) {
 			if (rawOwnSemicolon) {
 				let allowedSemi = 0;
 
-				if (isCustomPropertySet(node)) {
-					allowedSemi = 1;
-				}
-
 				const fixSemiIndices = [];
 
 				styleSearch({ source: rawOwnSemicolon, target: ';' }, (match, count) => {

diff --git a/lib/rules/property-no-unknown/__tests__/index.js b/lib/rules/property-no-unknown/__tests__/index.js
@@ -37,6 +37,10 @@ testRule({
 			code: '.foo { *width: 100px; }',
 			description: 'ignore CSS hacks',
 		},
+		{
+			code: '.foo { --custom-property-set: { colr: blue; } }',
+			description: 'ignore custom property sets',
+		},
 	],
 
 	reject: [
@@ -64,12 +68,6 @@ testRule({
 			line: 1,
 			column: 8,
 		},
-		{
-			code: '.foo { --custom-property-set: { colr: blue; } }',
-			message: messages.rejected('colr'),
-			line: 1,
-			column: 33,
-		},
 		{
 			code: ':export { my-property: red; }',
 			message: messages.rejected('my-property'),

diff --git a/lib/utils/__tests__/isCustomPropertySet.test.js b/lib/utils/__tests__/isCustomPropertySet.test.js
diff --git a/lib/utils/__tests__/isStandardSyntaxDeclaration.test.js b/lib/utils/__tests__/isStandardSyntaxDeclaration.test.js
@@ -27,24 +27,6 @@ describe('isStandardSyntaxDeclaration', () => {
 		expect(isStandardSyntaxDeclaration(decl('@page { size: A4 }'))).toBe(true);
 	});
 
-	it('custom property set in SASS parser', () => {
-		expect(
-			isStandardSyntaxDeclaration(sassDecl('a\n\t--custom-property-set:\n\t\tcolor: blue')),
-		).toBe(true);
-	});
-
-	it('custom property set in SCSS parser', () => {
-		expect(
-			isStandardSyntaxDeclaration(scssDecl('a { --custom-property-set: { color: blue; } }')),
-		).toBe(true);
-	});
-
-	it('custom property set in LESS parser', () => {
-		expect(
-			isStandardSyntaxDeclaration(lessDecl('a { --custom-property-set: { color: blue; } }')),
-		).toBe(true);
-	});
-
 	it('property with sass variable interpolation (only)', () => {
 		expect(isStandardSyntaxDeclaration(sassDecl('a\n\t#{$var}: 10px'))).toBe(true);
 	});

diff --git a/lib/utils/isCustomPropertySet.js b/lib/utils/isCustomPropertySet.js
diff --git a/lib/utils/isStandardSyntaxRule.js b/lib/utils/isStandardSyntaxRule.js
@@ -1,7 +1,6 @@
 'use strict';
 
 const _ = require('lodash');
-const isCustomPropertySet = require('../utils/isCustomPropertySet');
 const isStandardSyntaxSelector = require('../utils/isStandardSyntaxSelector');
 
 /**
@@ -22,11 +21,6 @@ module.exports = function (rule) {
 		return false;
 	}
 
-	// Custom property set (e.g. --custom-property-set: {})
-	if (isCustomPropertySet(rule)) {
-		return false;
-	}
-
 	// Called Less mixin (e.g. a { .mixin() })
 	// @ts-ignore TODO TYPES support LESS and SASS types somehow
 	if (rule.mixin) {