fix!: Disallow directional style rules (#1245)

Co-authored-by: Vincent Smedinga <[email protected]>
Amsterdam · Jun 3, 2024 · 8ab6f81 · 8ab6f81
1 parent fef3fb1
commit 8ab6f81
Show file tree

Hide file tree

Showing 27 changed files with 91 additions and 74 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -1,6 +1,6 @@
 {
   "extends": ["stylelint-config-standard-scss"],
-  "plugins": ["stylelint-order"],
+  "plugins": ["stylelint-order", "stylelint-use-logical"],
   "rules": {
     "alpha-value-notation": ["percentage"],
     "at-rule-empty-line-before": null,
@@ -9,6 +9,7 @@
     "color-function-notation": ["modern"],
     "color-no-invalid-hex": true,
     "comment-no-empty": true,
+    "csstools/use-logical": true,
     "custom-property-pattern": "^_?(ams|nl|utrecht)-[a-z0-9-]+$",
     "declaration-block-no-duplicate-properties": true,
     "declaration-block-no-redundant-longhand-properties": null,
@@ -50,16 +51,18 @@
     "order/properties-alphabetical-order": true,
     "property-disallowed-list": [
       [
+        "contain-intrinsic-height",
+        "contain-intrinsic-width",
         "margin",
-        "margin-bottom",
-        "margin-left",
-        "margin-right",
-        "margin-top",
         "padding",
-        "padding-bottom",
-        "padding-left",
-        "padding-right",
-        "padding-top"
+        "scroll-margin-bottom",
+        "scroll-margin-left",
+        "scroll-margin-right",
+        "scroll-margin-top",
+        "scroll-padding-bottom",
+        "scroll-padding-left",
+        "scroll-padding-right",
+        "scroll-padding-top"
       ]
     ],
     "property-no-unknown": true,

diff --git a/package.json b/package.json
@@ -51,6 +51,7 @@
     "stylelint": "16.5.0",
     "stylelint-config-standard-scss": "13.1.0",
     "stylelint-order": "6.0.4",
+    "stylelint-use-logical": "2.1.2",
     "typescript": "5.4.5",
     "wait-on": "7.2.0"
   },

diff --git a/packages/css/src/common/hide-input.scss b/packages/css/src/common/hide-input.scss
@@ -5,7 +5,7 @@
 
 @mixin hide-input {
   appearance: none;
+  inline-size: 0; // Make sure the input doesn’t take up space on iOS
   margin-block: 0;
   margin-inline: 0;
-  width: 0; // Make sure the input doesn’t take up space on iOS
 }
diff --git a/packages/css/src/components/accordion/accordion.scss b/packages/css/src/components/accordion/accordion.scss
@@ -29,10 +29,10 @@
   font-size: var(--ams-accordion-button-font-size);
   font-weight: var(--ams-accordion-button-font-weight);
   gap: var(--ams-accordion-button-gap);
+  inline-size: 100%;
   line-height: var(--ams-accordion-button-line-height);
   padding-block: var(--ams-accordion-button-padding-block);
   padding-inline: var(--ams-accordion-button-padding-inline);
-  width: 100%;
 
   &:focus {
     outline-offset: var(--ams-accordion-button-focus-outline-offset);

diff --git a/packages/css/src/components/avatar/avatar.scss b/packages/css/src/components/avatar/avatar.scss
@@ -9,23 +9,23 @@
   display: inline-flex;
   font-family: var(--ams-avatar-font-family);
   font-size: var(--ams-avatar-font-size);
+  inline-size: calc(var(--ams-avatar-line-height) * var(--ams-avatar-font-size));
   line-height: var(--ams-avatar-line-height);
   padding-block: var(--ams-avatar-padding-block);
   padding-inline: var(--ams-avatar-padding-inline);
   place-content: center;
-  width: calc(var(--ams-avatar-line-height) * var(--ams-avatar-font-size));
 
   svg {
     fill: currentColor;
   }
 }
 
 .ams-avatar--has-image {
+  inline-size: calc(var(--ams-avatar-line-height) * var(--ams-avatar-font-size) + 2 * var(--ams-avatar-padding-inline));
   overflow: hidden;
   padding-block: 0;
   padding-inline: 0;
   vertical-align: middle; /* Remove ‘phantom’ white space when image doesn’t load */
-  width: calc(var(--ams-avatar-line-height) * var(--ams-avatar-font-size) + 2 * var(--ams-avatar-padding-inline));
 }
 
 .ams-avatar--blue {

diff --git a/packages/css/src/components/breadcrumb/breadcrumb.scss b/packages/css/src/components/breadcrumb/breadcrumb.scss
@@ -33,11 +33,11 @@
 .ams-breadcrumb__item:not(:last-child)::after {
   background-image: var(--ams-breadcrumb-separator-background-image);
   background-repeat: no-repeat;
+  block-size: 1ex;
   content: "";
   display: inline-block;
-  height: 1ex;
+  inline-size: 1ex;
   margin-inline: 0.5rem;
-  width: 1ex;
 }
 
 .ams-breadcrumb__link {

diff --git a/packages/css/src/components/checkbox/checkbox.scss b/packages/css/src/components/checkbox/checkbox.scss
@@ -14,22 +14,22 @@
 
 .ams-checkbox__checkmark {
   align-items: center;
+  block-size: calc(var(--ams-checkbox-font-size) * var(--ams-checkbox-line-height));
   display: flex;
   flex-shrink: 0;
-  height: calc(var(--ams-checkbox-font-size) * var(--ams-checkbox-line-height));
-  width: 1.5rem;
+  inline-size: 1.5rem;
 
   &::after {
     background-position: center;
     background-repeat: no-repeat;
     background-size: 1rem;
+    block-size: 1.5rem;
     border-color: var(--ams-checkbox-checkmark-border-color);
     border-style: solid;
     border-width: var(--ams-checkbox-checkmark-border-width);
     box-sizing: border-box;
     content: "";
-    height: 1.5rem;
-    width: 100%;
+    inline-size: 100%;
   }
 }
 

diff --git a/packages/css/src/components/date-input/date-input.scss b/packages/css/src/components/date-input/date-input.scss
@@ -23,13 +23,13 @@
   font-weight: var(--ams-date-input-font-weight);
   line-height: var(--ams-date-input-line-height);
 
-  // Set min height for iOS, otherwise an empty box is a lot smaller than a filled one.
-  min-height: calc(
+  // Set min block size for iOS, otherwise an empty box is a lot smaller than a filled one.
+  min-block-size: calc(
     (var(--ams-date-input-font-size) * var(--ams-date-input-line-height)) + 2 * var(--ams-date-input-padding-block)
   );
 
-  // Set min width for iOS, so the width is closer to the filled in width.
-  min-width: calc(8ch + (2 * var(--ams-date-input-padding-inline)));
+  // Set min inline size for iOS, so the size is closer to the filled in size.
+  min-inline-size: calc(8ch + (2 * var(--ams-date-input-padding-inline)));
   outline-offset: var(--ams-date-input-outline-offset);
   padding-block: var(--ams-date-input-padding-block);
   padding-inline: var(--ams-date-input-padding-inline);

diff --git a/packages/css/src/components/field-set/field-set.scss b/packages/css/src/components/field-set/field-set.scss
@@ -25,9 +25,9 @@
 }
 
 @mixin reset-legend {
-  float: left; // [1]
+  float: inline-start; // [1]
+  inline-size: 100%; // [1]
   padding-inline: 0;
-  width: 100%; // [1]
 }
 
 // [1] This combination allows the fieldset border to go around the legend, instead of through it.

diff --git a/packages/css/src/components/header/header.scss b/packages/css/src/components/header/header.scss
@@ -51,16 +51,16 @@
   flex: 1 1 100%;
 
   @media screen and (min-width: $ams-breakpoint-wide) {
-    min-width: 0;
+    min-inline-size: 0;
     order: 2;
 
     .ams-header__title-heading {
       display: block;
+      inline-size: 100%;
       line-height: 1;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      width: 100%;
     }
   }
 }

diff --git a/packages/css/src/components/icon/icon.scss b/packages/css/src/components/icon/icon.scss
@@ -18,37 +18,37 @@
 }
 
 .ams-icon--size-3 {
-  height: calc(var(--ams-icon-size-3-font-size) * var(--ams-icon-size-3-line-height));
+  block-size: calc(var(--ams-icon-size-3-font-size) * var(--ams-icon-size-3-line-height));
 }
 
 .ams-icon--size-3 svg {
-  height: var(--ams-icon-size-3-font-size);
-  width: var(--ams-icon-size-3-font-size);
+  block-size: var(--ams-icon-size-3-font-size);
+  inline-size: var(--ams-icon-size-3-font-size);
 }
 
 .ams-icon--size-4 {
-  height: calc(var(--ams-icon-size-4-font-size) * var(--ams-icon-size-4-line-height));
+  block-size: calc(var(--ams-icon-size-4-font-size) * var(--ams-icon-size-4-line-height));
 }
 
 .ams-icon--size-4 svg {
-  height: var(--ams-icon-size-4-font-size);
-  width: var(--ams-icon-size-4-font-size);
+  block-size: var(--ams-icon-size-4-font-size);
+  inline-size: var(--ams-icon-size-4-font-size);
 }
 
 .ams-icon--size-5 {
-  height: calc(var(--ams-icon-size-5-font-size) * var(--ams-icon-size-5-line-height));
+  block-size: calc(var(--ams-icon-size-5-font-size) * var(--ams-icon-size-5-line-height));
 }
 
 .ams-icon--size-5 svg {
-  height: var(--ams-icon-size-5-font-size);
-  width: var(--ams-icon-size-5-font-size);
+  block-size: var(--ams-icon-size-5-font-size);
+  inline-size: var(--ams-icon-size-5-font-size);
 }
 
 .ams-icon--size-6 {
-  height: calc(var(--ams-icon-size-6-font-size) * var(--ams-icon-size-6-line-height));
+  block-size: calc(var(--ams-icon-size-6-font-size) * var(--ams-icon-size-6-line-height));
 }
 
 .ams-icon--size-6 svg {
-  height: var(--ams-icon-size-6-font-size);
-  width: var(--ams-icon-size-6-font-size);
+  block-size: var(--ams-icon-size-6-font-size);
+  inline-size: var(--ams-icon-size-6-font-size);
 }
diff --git a/packages/css/src/components/image/image.scss b/packages/css/src/components/image/image.scss
@@ -4,17 +4,17 @@
  */
 
 .ams-image {
+  block-size: auto; /* [1] */
   font-style: italic; /* [3] */
-  height: auto; /* [1] */
-  max-width: 100%; /* [1] */
+  max-inline-size: 100%; /* [1] */
   vertical-align: middle; /* [2] */
 
   &--cover {
     object-fit: cover;
   }
 }
 
-// [1] Allow for fluid image sizing while maintaining aspect ratio governed by width/height attributes
+// [1] Allow for fluid image sizing while maintaining aspect ratio governed by inline/block size attributes
 // [2] Remove ‘phantom’ white space
 // [3] Italicise alt text to visually offset it from surrounding copy
 // Source: https://x.com/csswizardry/status/1717841334462005661
diff --git a/packages/css/src/components/logo/logo.scss b/packages/css/src/components/logo/logo.scss
@@ -4,8 +4,8 @@
  */
 
 .ams-logo {
+  block-size: var(--ams-logo-block-size);
   display: block;
-  height: var(--ams-logo-height);
 }
 
 .ams-logo__emblem {

diff --git a/packages/css/src/components/pagination/pagination.scss b/packages/css/src/components/pagination/pagination.scss
@@ -56,8 +56,8 @@
 
   // Override for icon size
   span.ams-icon svg {
-    height: 1rem;
-    width: 1rem;
+    block-size: 1rem;
+    inline-size: 1rem;
   }
 
   @include text-rendering;

diff --git a/packages/css/src/components/radio/radio.scss b/packages/css/src/components/radio/radio.scss
@@ -14,23 +14,23 @@
 
 .ams-radio__circle {
   align-items: center;
+  block-size: calc(var(--ams-radio-font-size) * var(--ams-radio-line-height));
   display: flex;
   flex-shrink: 0;
-  height: calc(var(--ams-radio-font-size) * var(--ams-radio-line-height));
-  width: 1.5rem;
+  inline-size: 1.5rem;
 
   &::after {
     background-position: center;
     background-repeat: no-repeat;
     background-size: 1rem;
+    block-size: 1.5rem;
     border-color: var(--ams-radio-circle-border-color);
     border-radius: 100%;
     border-style: solid;
     border-width: var(--ams-radio-circle-border-width);
     box-sizing: border-box;
     content: "";
-    height: 1.5rem;
-    width: 100%;
+    inline-size: 100%;
   }
 }
 

diff --git a/packages/css/src/components/screen/screen.scss b/packages/css/src/components/screen/screen.scss
@@ -15,13 +15,13 @@
 }
 
 .ams-screen--full-height {
-  min-height: 100vh;
+  min-block-size: 100vh;
 }
 
 .ams-screen--wide {
-  max-width: var(--ams-screen-wide-max-width);
+  max-inline-size: var(--ams-screen-wide-max-inline-size);
 }
 
 .ams-screen--x-wide {
-  max-width: var(--ams-screen-x-wide-max-width);
+  max-inline-size: var(--ams-screen-x-wide-max-inline-size);
 }
diff --git a/packages/css/src/components/switch/switch.scss b/packages/css/src/components/switch/switch.scss
@@ -19,28 +19,28 @@
   --ams-switch-track-padding: 0.0625rem;
 
   background-color: var(--ams-switch-background-color);
-  border-radius: calc(var(--ams-switch-thumb-width) * 2);
+  border-radius: calc(var(--ams-switch-thumb-inline-size) * 2);
   cursor: pointer;
   display: inline-block;
+  inline-size: var(--ams-switch-inline-size);
   outline-offset: var(--ams-switch-outline-offset);
   padding-block: var(--ams-switch-track-padding);
   padding-inline: var(--ams-switch-track-padding);
   transition: background-color 0.2s ease-in-out;
-  width: var(--ams-switch-width);
 
   @include reset;
 }
 
 .ams-switch__label::before {
   background-color: var(--ams-switch-thumb-background-color);
+  block-size: var(--ams-switch-thumb-block-size);
   border-radius: 50%;
   content: "";
   display: block;
-  height: var(--ams-switch-thumb-height);
+  inline-size: var(--ams-switch-thumb-inline-size);
   transition-duration: 0.1s;
   transition-property: box-shadow, transform;
   transition-timing-function: ease-in-out;
-  width: var(--ams-switch-thumb-width);
 }
 
 .ams-switch__input:checked + .ams-switch__label {
@@ -54,7 +54,7 @@
 
 .ams-switch__input:checked + .ams-switch__label::before {
   transform: translate(
-    calc(var(--ams-switch-width) - var(--ams-switch-thumb-width) - 2 * var(--ams-switch-track-padding))
+    calc(var(--ams-switch-inline-size) - var(--ams-switch-thumb-inline-size) - 2 * var(--ams-switch-track-padding))
   );
 }
 

diff --git a/packages/css/src/components/table/table.scss b/packages/css/src/components/table/table.scss
@@ -24,7 +24,7 @@
 
 .ams-table__cell,
 .ams-table__header-cell {
-  border-bottom: var(--ams-table-cell-border-bottom);
+  border-block-end: var(--ams-table-cell-border-block-end);
   padding-block: var(--ams-table-cell-padding-block);
   padding-inline: var(--ams-table-cell-padding-inline);
   text-align: start;

diff --git a/packages/css/src/components/tabs/tabs.scss b/packages/css/src/components/tabs/tabs.scss
@@ -12,7 +12,7 @@
 
 .ams-tabs__list {
   background-color: var(--ams-tabs-list-background-color);
-  border-bottom: var(--ams-tabs-list-border-bottom);
+  border-block-end: var(--ams-tabs-list-border-block-end);
   display: flex;
   overflow-x: auto;
 }