feat(stylelint-plugin-meteor): auto-fix rem spacing values

.changeset/tiny-parents-press.md

@@ -0,0 +1,5 @@
+---
+"@shopware-ag/stylelint-plugin-meteor": minor
+---
+
+Add autofixer for hard-coded rem spacing

packages/component-library/src/components/feedback-indicator/mt-skeleton-bar/mt-skeleton-bar.vue

@@ -6,14 +6,14 @@
 
 <style scoped>
 .mt-skeleton-bar {
-  height: 2rem;
+  height: var(--scale-size-32);
   width: 100%;
   background-color: var(--color-background-primary-disabled);
   overflow: hidden;
   border-radius: var(--border-radius-xs);
 
   &:not(:last-child) {
-    margin-bottom: 2rem;
+    margin-bottom: var(--scale-size-32);
   }
 }
 

packages/component-library/src/components/feedback-indicator/mt-toast/mt-toast.vue

@@ -159,7 +159,7 @@ function onMouseLeave() {
     flex: 1;
     display: flex;
     justify-content: flex-end;
-    padding-right: 1rem;
+    padding-right: var(--scale-size-16);
 
     .mt-toast-notification {
       display: flex;

packages/component-library/src/components/form/_internal/mt-base-field/mt-base-field.vue

@@ -469,7 +469,7 @@ $mt-field-transition:
   .mt-field__label .is--required::after {
     content: "*";
     color: var(--color-icon-brand-default);
-    margin-left: 0.25rem;
+    margin-left: var(--scale-size-4);
   }
 
   &.is--inherited {

packages/component-library/src/components/form/_internal/mt-field-label/mt-field-label.vue

@@ -66,7 +66,7 @@ const classes = computed(() => [
 <style scoped>
 .mt-field-label {
   display: flex;
-  column-gap: 0.25rem;
+  column-gap: var(--scale-size-4);
   align-items: center;
   color: var(--color-text-primary-default);
   font-family: var(--font-family-body);
@@ -89,7 +89,7 @@ const classes = computed(() => [
 }
 
 .mt-field-label__inheritance-switch {
-  margin-right: 0.25rem;
+  margin-right: var(--scale-size-4);
 
   &:focus-visible {
     outline-offset: 0.25rem;

packages/component-library/src/components/form/mt-button/mt-button.vue

@@ -109,7 +109,7 @@ const isInsideTooltip = useIsInsideTooltip();
   display: grid;
   grid-auto-flow: column;
   align-items: center;
-  column-gap: 0.5rem;
+  column-gap: var(--scale-size-8);
 }
 
 .mt-button__content--hidden {
@@ -318,19 +318,19 @@ const isInsideTooltip = useIsInsideTooltip();
 }
 
 .mt-button--default {
-  padding-inline: 1rem;
+  padding-inline: var(--scale-size-16);
   font-size: var(--font-size-xs);
   min-height: 2.5rem;
 }
 
 .mt-button--default.mt-button-square {
-  width: 2.5rem;
-  height: 2.5rem;
+  width: var(--scale-size-40);
+  height: var(--scale-size-40);
 }
 
 .mt-button--large {
-  padding-left: 1.75rem;
-  padding-right: 1.75rem;
+  padding-left: var(--scale-size-28);
+  padding-right: var(--scale-size-28);
   min-height: 3rem;
   font-size: var(--font-size-2xs);
 }

packages/component-library/src/components/form/mt-datepicker/mt-datepicker.vue

@@ -308,7 +308,7 @@ export default defineComponent({
 
 .dp__input {
   height: var(--scale-size-48);
-  padding-left: 1rem !important;
+  padding-left: var(--scale-size-16) !important;
   border-radius: var(--border-radius-xs);
   font: inherit;
   color: var(--color-text-secondary-default);
@@ -363,7 +363,7 @@ export default defineComponent({
 }
 
 .dp__instance_calendar {
-  padding: 0.5rem !important;
+  padding: var(--scale-size-8) !important;
 }
 
 .dp__menu_inner {

packages/component-library/src/components/form/mt-number-field/mt-number-field.vue

@@ -392,7 +392,7 @@ export default defineComponent({
 
   & button {
     outline-color: var(--color-border-brand-selected);
-    padding-inline: 0.25rem;
+    padding-inline: var(--scale-size-4);
     border-radius: var(--border-radius-button);
     transition: all 0.15s ease-out;
     width: 100%;

packages/component-library/src/components/form/mt-password-field/mt-password-field.vue

@@ -145,15 +145,15 @@ export default defineComponent({
 }
 
 .mt-field--password--untoggable .mt-field__input input {
-  padding-right: 0.5rem;
+  padding-right: var(--scale-size-8);
 }
 
 .mt-field__toggle-password-visibility {
   position: absolute;
-  right: 0.5rem;
+  right: var(--scale-size-8);
   top: 50%;
   transform: translate(0, -50%);
-  padding: 0.5rem;
+  padding: var(--scale-size-8);
   border-radius: var(--border-radius-button);
   outline-color: var(--color-border-brand-selected);
   transition: all 0.15s ease-out;

packages/component-library/src/components/form/mt-text-editor/mt-text-editor.vue

@@ -436,8 +436,8 @@ label {
   /* List styles */
   ul,
   ol {
-    padding: 0 1rem;
-    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    padding: 0 var(--scale-size-16);
+    margin: var(--scale-size-20) var(--scale-size-16) var(--scale-size-20) 0.4rem;
 
     li p {
       margin-top: 0.25em;
@@ -613,7 +613,7 @@ label {
   }
 
   .tableWrapper {
-    margin: 1.5rem 0;
+    margin: var(--scale-size-24) 0;
     overflow-x: auto;
   }
 

packages/component-library/src/components/icons-media/mt-avatar/mt-avatar.vue

@@ -130,8 +130,8 @@ const color = computed(() => {
 <style scoped>
 .mt-avatar {
   display: inline-block;
-  width: 2.5rem;
-  height: 2.5rem;
+  width: var(--scale-size-40);
+  height: var(--scale-size-40);
   border-radius: var(--border-radius-round);
   background-size: cover;
   text-align: center;

packages/component-library/src/components/layout/mt-card/mt-card.vue

@@ -177,7 +177,7 @@ const cardClasses = computed(() => ({
 
 .mt-card {
   max-width: 60rem;
-  margin: 0 auto 2.5rem;
+  margin: 0 auto var(--scale-size-40);
   position: relative;
   background: var(--color-elevation-surface-raised);
   border: 1px solid var(--color-border-primary-default);
@@ -196,7 +196,7 @@ const cardClasses = computed(() => ({
 .mt-card__content {
   display: flow-root;
   flex-basis: 100%;
-  padding: 1.5rem;
+  padding: var(--scale-size-24);
   background-clip: padding-box;
   position: relative;
   color: var(--color-text-primary-default);
@@ -271,7 +271,7 @@ const cardClasses = computed(() => ({
 .mt-card__titles--has-inheritance-toggle {
   display: grid;
   grid-template-columns: min-content 1fr;
-  column-gap: 0.25rem;
+  column-gap: var(--scale-size-4);
   grid-template-areas:
     "inheritance title"
     "subtitle subtitle";
@@ -308,8 +308,8 @@ const cardClasses = computed(() => ({
   display: flex;
   flex-wrap: wrap;
   align-items: stretch;
-  gap: 0.75rem;
-  padding: 1.5rem;
+  gap: var(--scale-size-12);
+  padding: var(--scale-size-24);
   border-bottom: 1px solid var(--color-border-primary-default);
 }
 
@@ -320,8 +320,8 @@ const cardClasses = computed(() => ({
 .mt-card__toolbar {
   display: flex;
   flex-basis: auto;
-  gap: 0.5rem;
-  padding: 1.25rem 1.5rem 1rem 1.5rem;
+  gap: var(--scale-size-8);
+  padding: var(--scale-size-20) var(--scale-size-24) var(--scale-size-16) var(--scale-size-24);
 
   &:empty {
     display: none;
@@ -331,8 +331,8 @@ const cardClasses = computed(() => ({
 .mt-card__avatar {
   overflow: hidden;
   border-radius: var(--border-radius-xs);
-  width: 2.5rem;
-  height: 2.5rem;
+  width: var(--scale-size-40);
+  height: var(--scale-size-40);
 
   & img {
     width: 100%;

packages/component-library/src/components/layout/mt-empty-state/mt-empty-state.vue

@@ -62,25 +62,25 @@ defineEmits(["button-click"]);
 
 .mt-empty-state__icon {
   display: inline-block;
-  padding: 0.75rem;
+  padding: var(--scale-size-12);
   border-radius: var(--border-radius-xs);
   background-color: var(--color-interaction-secondary-dark);
 }
 
 .mt-empty-state__headline {
-  margin-top: 1.5rem;
+  margin-top: var(--scale-size-24);
   margin-bottom: 0;
 }
 
 .mt-empty-state__description {
-  margin-top: 0.5rem;
+  margin-top: var(--scale-size-8);
 }
 
 .mt-empty-state__link {
-  margin-top: 0.5rem;
+  margin-top: var(--scale-size-8);
 }
 
 .mt-empty-state__button {
-  margin-top: 1.5rem;
+  margin-top: var(--scale-size-24);
 }
 </style>

packages/component-library/src/components/overlay/mt-popover/mt-popover.vue

@@ -218,7 +218,7 @@ export default defineComponent({
 }
 
 .mt-popover__content {
-  padding: 1rem;
+  padding: var(--scale-size-16);
   padding-top: var(--scale-size-4);
   padding-bottom: var(--scale-size-4);
   background-color: var(--color-elevation-surface-overlay);

packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.vue

@@ -2172,7 +2172,7 @@ $tableCellPadding: $tableCellPaddingTop $tableCellPaddingRight $tableCellPadding
   // custom table styling
   th,
   td {
-    padding: 0.25rem;
+    padding: var(--scale-size-4);
     text-align: left;
     border: 1px solid #ccc;
   }
@@ -2542,7 +2542,7 @@ $tableCellPadding: $tableCellPaddingTop $tableCellPaddingRight $tableCellPadding
   &__footer-inset {
     display: flex;
     width: calc(100% + var(--mt-card-footer-padding) * 2);
-    padding: 1rem var(--mt-card-footer-padding);
+    padding: var(--scale-size-16) var(--mt-card-footer-padding);
   }
 
   &__footer-right {

packages/component-library/src/components/table-and-list/mt-pagination/mt-pagination.vue

@@ -175,8 +175,8 @@ const lastVisibleItemNumber = computed(() => {
 .mt-pagination__button {
   border-right: 1px solid var(--color-border-primary-default);
   color: var(--color-icon-primary-default);
-  height: 2rem;
-  width: 2.5rem;
+  height: var(--scale-size-32);
+  width: var(--scale-size-40);
   display: grid;
   place-items: center;
   transition: all 0.15s ease-out;

packages/stylelint-plugin-meteor/src/rules/prefer-sizing-token/index.ts

@@ -98,7 +98,9 @@ const ruleFunction: Rule = (primary, secondaryOptions, context) => {
             : messages.hardCodedValue(value);
 
           function fix() {
-            const newValue = Number(value.replace("px", ""));
+            const newValue = isUsingRemValue
+              ? Number(value.replace("rem", "")) * 16
+              : Number(value.replace("px", ""));
 
             const isOutsideOfScale = !SPACING_SCALE.includes(newValue);
             if (isOutsideOfScale) return;
@@ -114,7 +116,10 @@ const ruleFunction: Rule = (primary, secondaryOptions, context) => {
             node: ruleNode,
             result,
             ruleName,
-            fix: usingPixelValue && isLargerThanOnePixel ? fix : undefined,
+            fix:
+              (usingPixelValue && isLargerThanOnePixel) || isUsingRemValue
+                ? fix
+                : undefined,
           });
         }
       });

packages/stylelint-plugin-meteor/src/rules/prefer-sizing-token/prefer-sizing-token.test.ts

@@ -67,7 +67,7 @@ testRule({
       column: 6,
       endLine: 1,
       endColumn: 19,
-      unfixable: true,
+      fixed: ".a { margin: var(--scale-size-16); }",
     },
     {
       code: ".a { padding: 3cap; }",
@@ -533,6 +533,38 @@ testRule({
       ],
       fixed: ".a { padding: var(--scale-size-4) var(--scale-size-8); }",
     },
+    {
+      code: ".a { padding: 1rem 0.5rem; }",
+      warnings: [
+        {
+          message:
+            'Unexpected hard-coded sizing of "1rem" (meteor/prefer-sizing-token)',
+          line: 1,
+          column: 6,
+          endLine: 1,
+          endColumn: 27,
+        },
+        {
+          message:
+            'Unexpected hard-coded sizing of "0.5rem" (meteor/prefer-sizing-token)',
+          line: 1,
+          column: 6,
+          endLine: 1,
+          endColumn: 27,
+        },
+      ],
+      fixed: ".a { padding: var(--scale-size-16) var(--scale-size-8); }",
+    },
+    {
+      code: ".a { margin: 2.125rem; }",
+      message:
+        'Unexpected hard-coded sizing of "2.125rem" (meteor/prefer-sizing-token)',
+      line: 1,
+      column: 6,
+      endLine: 1,
+      endColumn: 23,
+      unfixable: true,
+    },
     {
       code: ".a { margin: $spacing-1; }",
       message: