From 23bfcc62c874696f50ebb04b277748ad19b90f2b Mon Sep 17 00:00:00 2001
From: Scott Vandehey <scott@cloudfour.com>
Date: Mon, 5 Feb 2024 15:56:03 -0800
Subject: [PATCH] Allow custom properties outside `:root`

This PR disables `custom-property-no-outside-root` which is being set
by `stylelint-config-suitcss`, because we want to support using custom
properties outside root and we no longer support IE11.

Fixes #318
---
 CHANGELOG.md                   | 1 +
 __tests__/order/invalid.scss   | 1 -
 __tests__/order/order.test.mjs | 4 +++-
 __tests__/order/valid.scss     | 1 -
 index.js                       | 2 ++
 5 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dfffc43..d367277 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 - Updated `stylelint-config-standard-scss` to v13
 - Updated `stylelint` peer dependency to v16
 - Disabled `declaration-block-no-redundant-longhand-properties` (#407)
+- Disabled `suitcss/custom-property-no-outside-root` (#318)
 
 # 9.0.0 - 2023-09-19
 
diff --git a/__tests__/order/invalid.scss b/__tests__/order/invalid.scss
index 04e5d60..0b5f4c1 100644
--- a/__tests__/order/invalid.scss
+++ b/__tests__/order/invalid.scss
@@ -2,7 +2,6 @@ a {
   text-decoration: none;
   color: red;
   $scss-variable: red;
-  // stylelint-disable-next-line suitcss/custom-property-no-outside-root
   --custom-property: red;
   @include block {
     color: red;
diff --git a/__tests__/order/order.test.mjs b/__tests__/order/order.test.mjs
index 51967a8..b05ef56 100644
--- a/__tests__/order/order.test.mjs
+++ b/__tests__/order/order.test.mjs
@@ -60,7 +60,7 @@ describe('stylelint-order', () => {
 		});
 
 		it('flags warnings', () => {
-			assert.equal(result.results[0].warnings.length, 4);
+			assert.equal(result.results[0].warnings.length, 5);
 		});
 
 		it('correct warning text', () => {
@@ -71,6 +71,7 @@ describe('stylelint-order', () => {
 					'Expected blockless @include to come before rule (order/order)',
 					'Expected an empty line before $-variable (scss/dollar-variable-empty-line-before)',
 					'Expected color to come before text-decoration (order/properties-alphabetical-order)',
+					'Expected empty line before custom property (custom-property-empty-line-before)',
 				],
 			);
 		});
@@ -83,6 +84,7 @@ describe('stylelint-order', () => {
 					'order/order',
 					'scss/dollar-variable-empty-line-before',
 					'order/properties-alphabetical-order',
+					'custom-property-empty-line-before',
 				],
 			);
 		});
diff --git a/__tests__/order/valid.scss b/__tests__/order/valid.scss
index db3cbb8..1e96b75 100644
--- a/__tests__/order/valid.scss
+++ b/__tests__/order/valid.scss
@@ -1,7 +1,6 @@
 a {
   $scss-variable: red;
 
-  // stylelint-disable-next-line suitcss/custom-property-no-outside-root
   --custom-property: red;
 
   @include mixin;
diff --git a/index.js b/index.js
index 5ee7f3c..c48c959 100644
--- a/index.js
+++ b/index.js
@@ -17,6 +17,8 @@ module.exports = {
 		'scss/at-mixin-pattern': null,
 		'scss/dollar-variable-pattern': null,
 		'scss/percent-placeholder-pattern': null,
+		// these are being set in stylelint-suitcss, but we don't want them
+		'suitcss/custom-property-no-outside-root': null, // #318
 		// our rules from here on
 		'at-rule-disallowed-list': [
 			['extend', 'import'],