From 3a28977fe29cb29bd99b80924b0070f339abeb4b Mon Sep 17 00:00:00 2001
From: Jeff <rustyangel@gmail.com>
Date: Sun, 19 Nov 2023 12:07:28 -0700
Subject: [PATCH] Add Masking properties (#349)

---
 .changeset/fuzzy-balloons-act.md | 12 ++++++++++++
 groups.js                        | 22 +++++++++++++++++++++-
 2 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/fuzzy-balloons-act.md

diff --git a/.changeset/fuzzy-balloons-act.md b/.changeset/fuzzy-balloons-act.md
new file mode 100644
index 0000000..bc11370
--- /dev/null
+++ b/.changeset/fuzzy-balloons-act.md
@@ -0,0 +1,12 @@
+---
+'stylelint-config-recess-order': minor
+---
+
+Add Masking properties
+
+-   [`mask-border`](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border) and related longhand properties
+-   [`mask`](https://developer.mozilla.org/en-US/docs/Web/CSS/mask) and related longhand properties
+
+`mask` was previously included within some SVG-specific properties — it’s been moved above those and below border & outline properties.
+
+`mask-border` properties are sorted above `mask` to highlight the fact that `mask` will reset `mask-border` to its initial value ([as per W3C spec](https://drafts.fxtf.org/css-masking/#the-mask)). I’m not familiar with this properties; if this order is problematic in practice, please file an issue!
diff --git a/groups.js b/groups.js
index cc56d5f..0eeb28f 100644
--- a/groups.js
+++ b/groups.js
@@ -351,6 +351,27 @@ const propertyGroups = [
 			'-ms-interpolation-mode',
 		],
 	},
+	{
+		// Masking.
+		properties: [
+			'mask-border',
+			'mask-border-source',
+			'mask-border-slice',
+			'mask-border-width',
+			'mask-border-outset',
+			'mask-border-repeat',
+			'mask-border-mode',
+			'mask',
+			'mask-image',
+			'mask-mode',
+			'mask-repeat',
+			'mask-position',
+			'mask-clip',
+			'mask-origin',
+			'mask-size',
+			'mask-composite',
+		],
+	},
 	{
 		// SVG Presentation Attributes.
 		properties: [
@@ -384,7 +405,6 @@ const propertyGroups = [
 			'marker-start',
 			'marker-mid',
 			'marker-end',
-			'mask',
 			'shape-rendering',
 			'stop-color',
 			'stop-opacity',