Modal: register the drag offset as a non-inherited property

.changeset/modal-drag-property.md

@@ -0,0 +1,5 @@
+---
+"reshaped": patch
+---
+
+Improved the `Modal` swipe-to-close performance on mobile. The drag offset custom property is now registered as non-inherited, so updating it on every frame of the gesture only recalculates the style of the modal root instead of every element of the modal content.

.stylelintrc

@@ -25,6 +25,10 @@
 				"browserslist": ["baseline widely available with downstream"],
 				"allow": {
 					"features": [
+						"at-rules.property",
+						"at-rules.property.syntax",
+						"at-rules.property.initial-value",
+						"at-rules.property.inherits",
 						"selectors.has",
 						"selectors.-webkit-scrollbar",
 						"selectors.not.selector_list",

packages/reshaped/src/components/Modal/Modal.module.css

@@ -1,3 +1,14 @@
+/**
+ * Drag offset is updated on every frame of the swipe gesture.
+ * Registering it as a non-inherited property keeps the style recalculation scoped to the modal root
+ * instead of invalidating every element of the modal content
+ */
+@property --rs-modal-drag {
+	syntax: "<length>";
+	initial-value: 0;
+	inherits: false;
+}
+
 .root {
 	--rs-modal-container-width: 100vw;
 	--rs-modal-container-height: 100vh;

packages/reshaped/src/components/ScrollArea/ScrollArea.module.css

@@ -1,4 +1,3 @@
-/* stylelint-disable plugin/browser-compat -- graceful degradation for Firefox */
 @property --rs-scroll-area-fade-block-start {
 	syntax: "<length>";
 	initial-value: 0;
@@ -22,7 +21,6 @@
 	initial-value: 0;
 	inherits: false;
 }
-/* stylelint-enable plugin/browser-compat */
 
 .root {
 	--rs-scroll-area-thumb-size: var(--rs-unit-x1);

packages/reshaped/src/components/Table/Table.module.css

@@ -1,4 +1,3 @@
-/* stylelint-disable plugin/browser-compat -- graceful degradation for Firefox */
 @property --rs-table-fade-start {
 	syntax: "<length>";
 	initial-value: 0;
@@ -10,7 +9,6 @@
 	initial-value: 0;
 	inherits: false;
 }
-/* stylelint-enable plugin/browser-compat */
 
 .root {
 	--rs-table-fade-size: var(--rs-unit-x8);

packages/reshaped/src/components/Tabs/Tabs.module.css

@@ -1,4 +1,3 @@
-/* stylelint-disable plugin/browser-compat -- graceful degradation for Firefox */
 @property --rs-tabs-mid-l {
 	syntax: "<length>";
 	initial-value: -24px;
@@ -22,7 +21,6 @@
 	initial-value: calc(100% + 24px);
 	inherits: false;
 }
-/* stylelint-enable plugin/browser-compat */
 
 .root {
 	--rs-tabs-gap: var(--rs-unit-x5);

packages/reshaped/src/styles/resolvers/inset/inset.module.css

@@ -1,4 +1,3 @@
-/* stylelint-disable plugin/browser-compat -- graceful degradation, var() fallbacks keep centering working without @property */
 @property --rs-inset-translate-x {
 	syntax: "<length-percentage>";
 	initial-value: 0;
@@ -10,7 +9,6 @@
 	initial-value: 0;
 	inherits: false;
 }
-/* stylelint-enable plugin/browser-compat */
 
 @responsive .root[style*="--rs-inset-inline-"] {
 	@variable --rs-inset-inline 0;