chore(lint): DLT-2723 pre-commit autofix css logical properties (#1041)

Author: francisrupert

.lintstagedrc.js

@@ -1,8 +1,18 @@
+const path = require('path');
+
+const fixLogicalProperties = path.resolve(__dirname, 'packages/stylelint-plugin-dialtone/bin/fix-logical-properties.js');
+
 module.exports = {
   '*.{js,mjs,cjs}': [
     'eslint --fix',
   ],
   '*.json': [
     'eslint --fix',
   ],
+  '*.{less,css}': [
+    `node ${fixLogicalProperties}`,
+  ],
+  '*.{vue,md,html}': [
+    `node ${fixLogicalProperties}`,
+  ],
 };

apps/dialtone-documentation/docs/.vuepress/baseComponents/BlogPost.vue

@@ -86,7 +86,7 @@ const blogLink = computed(() => {
 <style lang="less">
 .blog-post-content {
   .d-docsite--header-2:first-of-type {
-    margin-top: var(--dt-size-500);
+    margin-block-start: var(--dt-size-500);
   }
 }
 </style>

apps/dialtone-documentation/docs/.vuepress/baseComponents/CodeExampleTabs.vue

@@ -200,11 +200,11 @@ const formatHTML = async (elementHTML) => {
 
 <style scoped lang="less">
 .code-example-tab-group {
-  margin-top: var(--dt-size-500);
+  margin-block-start: var(--dt-size-500);
   position: relative;
 
   .language-html {
-    margin-top: 0;
+    margin-block-start: 0;
     position: relative;
   }
 

apps/dialtone-documentation/docs/.vuepress/baseComponents/ShowcaseCarousel.vue

@@ -160,13 +160,13 @@ onMounted(() => {
 <style scoped>
 .showcase-carousel {
   overflow: hidden;
-  width: 100%;
-  max-width: 100vw;
+  inline-size: 100%;
+  max-inline-size: 100vw;
 }
 
 .showcase-carousel__track {
   will-change: transform;
   transition: none;
-  height: 732px;
+  block-size: 732px;
 }
 </style>

apps/dialtone-documentation/docs/.vuepress/baseComponents/tokens/TokenTable.vue

@@ -195,7 +195,7 @@ export default {
 <style scoped>
 .token-name {
   /* make space for the copy button that appears on mouse enter */
-  min-height: 2.8rem;
+  min-block-size: 2.8rem;
 }
 
 .d-table th {
@@ -204,7 +204,7 @@ export default {
 }
 
 .d-table tr th:first-child {
-  width: 16rem;
+  inline-size: 16rem;
 }
 
 .d-table thead tr {

apps/dialtone-documentation/docs/.vuepress/theme/assets/less/dialtone-docs.less

@@ -298,7 +298,7 @@ html body {
 
     position: fixed;
     z-index: 1;
-    max-width: calc(var(--dt-size-300) * 350);
+    max-inline-size: calc(var(--dt-size-300) * 350);
     border-radius: var(--dt-size-radius-450);
     /* stylelint-disable-next-line meowtec/no-px */
     box-shadow: 0 255.043px 71.487px 0 rgba(0, 0, 0, 0.00), 0 163.131px 65.306px 0 rgba(0, 0, 0, 0.01), 0 91.912px 55.094px 0 rgba(0, 0, 0, 0.03), 0 40.85px 40.85px 0 rgba(0, 0, 0, 0.05), 0 10.212px 22.306px 0 rgba(0, 0, 0, 0.05);
@@ -354,7 +354,7 @@ html body {
   border-block: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
 
   @media (min-width: 980px) {
-    margin-bottom: var(--dt-size-500);
+    margin-block-end: var(--dt-size-500);
     border: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
     border-radius: var(--dt-size-radius-500);
     margin-inline: var(--dt-size-500);

apps/dialtone-documentation/docs/.vuepress/theme/components/PageToc.vue

@@ -78,8 +78,8 @@ function isItemActive (item) {
 
 <style lang="less" scoped>
 .dialtone-toc {
-  width: var(--dt-size-850);
-  height: calc(100vh - var(--dt-size-700));
-  top: var(--dt-size-700);
+  inline-size: var(--dt-size-850);
+  block-size: calc(100vh - var(--dt-size-700));
+  inset-block-start: var(--dt-size-700);
 }
 </style>

apps/dialtone-documentation/docs/.vuepress/theme/components/SidebarItem.vue

@@ -297,6 +297,6 @@ function handleClick (event, listeners, navigate, link) {
 
 <style lang="less" scoped>
 .dt-sidebar-item {
-  width: var(--dt-size-100-percent);
+  inline-size: var(--dt-size-100-percent);
 }
 </style>

apps/dialtone-documentation/docs/components/stack.md

@@ -1702,84 +1702,84 @@ vueCode='
 
     // Inline axis indicators (vertical lines)
     &--inline-start::before {
-      left: var(--axis-offset);
-      width: var(--axis-size);
-      height: 100%;
+      inset-inline-start: var(--axis-offset);
+      inline-size: var(--axis-size);
+      block-size: 100%;
     }
 
     &--inline-center::before {
-      left: 50%;
-      top: 50%;
+      inset-inline-start: 50%;
+      inset-block-start: 50%;
       transform: translate(-50%, -50%);
-      width: var(--axis-size);
-      height: 100%;
+      inline-size: var(--axis-size);
+      block-size: 100%;
     }
 
     &--inline-end::before {
-      right: var(--axis-offset);
-      width: var(--axis-size);
-      height: 100%;
+      inset-inline-end: var(--axis-offset);
+      inline-size: var(--axis-size);
+      block-size: 100%;
     }
 
     &--inline-stretch {
       &::before {
-        left: var(--axis-offset);
-        width: var(--axis-size);
-        height: 100%;
+        inset-inline-start: var(--axis-offset);
+        inline-size: var(--axis-size);
+        block-size: 100%;
       }
 
       &::after {
-        right: var(--axis-offset);
-        width: var(--axis-size);
-        height: 100%;
+        inset-inline-end: var(--axis-offset);
+        inline-size: var(--axis-size);
+        block-size: 100%;
       }
     }
 
     // Block axis indicators (horizontal lines)
     &--block-start::before {
-      top: var(--axis-offset);
-      height: var(--axis-size);
-      width: 100%;
+      inset-block-start: var(--axis-offset);
+      block-size: var(--axis-size);
+      inline-size: 100%;
       background-image: var(--axis-pattern-horizontal);
     }
 
     &--block-center::before {
-      left: 50%;
-      top: 50%;
+      inset-inline-start: 50%;
+      inset-block-start: 50%;
       transform: translate(-50%, -50%);
-      width: 100%;
-      height: var(--axis-size);
+      inline-size: 100%;
+      block-size: var(--axis-size);
       background-image: var(--axis-pattern-horizontal);
     }
 
     &--block-end::before {
-      bottom: var(--axis-offset);
-      height: var(--axis-size);
-      width: 100%;
+      inset-block-end: var(--axis-offset);
+      block-size: var(--axis-size);
+      inline-size: 100%;
       background-image: var(--axis-pattern-horizontal);
     }
 
     &--block-stretch {
       &::before {
-        top: var(--axis-offset);
-        height: var(--axis-size);
-        width: 100%;
+        inset-block-start: var(--axis-offset);
+        block-size: var(--axis-size);
+        inline-size: 100%;
         background-image: var(--axis-pattern-horizontal);
       }
 
       &::after {
-        bottom: var(--axis-offset);
-        height: var(--axis-size);
-        width: 100%;
+        inset-block-end: var(--axis-offset);
+        block-size: var(--axis-size);
+        inline-size: 100%;
         background-image: var(--axis-pattern-horizontal);
       }
     }
 
     // Special case for baseline
     &--baseline::before {
-      bottom: calc(var(--dt-size-500) + var(--dt-size-400));
-      height: var(--axis-size);
-      width: 100%;
+      inset-block-end: calc(var(--dt-size-500) + var(--dt-size-400));
+      block-size: var(--axis-size);
+      inline-size: 100%;
       background-image: var(--axis-pattern-horizontal);
     }
   }

apps/dialtone-documentation/docs/foundations/colors/themes/index.md

@@ -341,10 +341,10 @@ When creating a custom theme, it is important to ensure that the colors used are
 
 <style scoped>
 .color-swatch {
-  width: 24px;
-  height: 24px;
-  border-radius: 4px;
-  border: 1px solid var(--dt-color-black-300);
+  inline-size: var(--dt-size-550);
+  block-size: var(--dt-size-550);
+  border-radius: var(--dt-size-radius-300);
+  border: var(--dt-size-border-100) solid var(--dt-color-border-default);
   flex-shrink: 0;
 }
 </style>