package.json: stylelint: Add logical property checker

Auto-fix usage of logical properties.
openSUSE · May 11, 2023 · 9192016 · 9192016
1 parent caed4da
commit 9192016
Show file tree

Hide file tree

Showing 40 changed files with 551 additions and 523 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -1,5 +1,8 @@
 {
   "extends": "stylelint-config-standard-scss",
+  "plugins": [
+    "stylelint-use-logical-spec"
+  ],
   "rules": {
     "indentation": 2,
 
@@ -34,6 +37,7 @@
     "scss/no-global-function-names": null,
     "scss/operator-no-unspaced": null,
     "selector-class-pattern": null,
-    "selector-id-pattern": null
+    "selector-id-pattern": null,
+    "liberty/use-logical-spec": "always"
   }
 }
diff --git a/node_modules b/node_modules
diff --git a/package.json b/package.json
@@ -29,10 +29,10 @@
     "cssnano-preset-lite": "^2.0.1",
     "date-fns": "^2.22.1",
     "esbuild": "0.17.13",
-    "esbuild-wasm": "0.17.13",
     "esbuild-plugin-copy": "^2.1.1",
     "esbuild-plugin-replace": "^1.3.0",
     "esbuild-sass-plugin": "2.6.0",
+    "esbuild-wasm": "0.17.13",
     "eslint": "^8.29.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-config-standard-jsx": "^11.0.0",
@@ -51,10 +51,11 @@
     "qunit-tap": "^1.5.1",
     "sass": "^1.59.3",
     "sizzle": "^2.3.5",
-    "stylelint": "^14.8.5",
+    "stylelint": "^14.16.1",
     "stylelint-config-standard": "^25.0.0",
     "stylelint-config-standard-scss": "^4.0.0",
-    "stylelint-formatter-pretty": "^3.1.1"
+    "stylelint-formatter-pretty": "^3.1.1",
+    "stylelint-use-logical-spec": "^5.0.0"
   },
   "scripts": {
     "eslint": "eslint --ext .js --ext .jsx pkg/ test/common/",

diff --git a/pkg/apps/application.scss b/pkg/apps/application.scss
@@ -4,17 +4,17 @@
 /* Application list */
 
 .app-list img {
-  width: 32px;
-  height: 32px;
-  max-width: unset;
+  inline-size: 32px;
+  block-size: 32px;
+  max-inline-size: unset;
 }
 
 .app-list .progress-title {
-  margin-right: 10px;
+  margin-inline-end: 10px;
 }
 
 .app-list .pf-c-data-list__item-action button {
-  min-width: 6rem;
+  min-inline-size: 6rem;
 }
 
 .app-list .pf-c-data-list__item-content {
@@ -24,20 +24,20 @@
 
 .progress-bar {
   display: inline-block;
-  width: 20%;
+  inline-size: 20%;
   overflow: hidden;
 }
 
 /* Application */
 
 .application-details img {
-  width: 32px;
-  height: 32px;
+  inline-size: 32px;
+  block-size: 32px;
 }
 
 .application-details .progress-title {
-  float: left;
-  margin-right: 10px;
+  float: inline-start;
+  margin-inline-end: 10px;
 }
 
 .app-screenshot {

diff --git a/pkg/kdump/kdump.scss b/pkg/kdump/kdump.scss
@@ -20,11 +20,11 @@
 @use "page";
 
 #kdump-settings-location {
-  width: 100%;
+  inline-size: 100%;
 }
 
 // error details
 #kdump-settings-dialog .pf-c-code-block__pre {
-  max-height: 200px;
+  max-block-size: 200px;
   overflow-y: auto;
 }
diff --git a/pkg/lib/cockpit-components-dialog.scss b/pkg/lib/cockpit-components-dialog.scss
@@ -1,8 +1,8 @@
 .pf-c-modal-box__body .scroll {
-  max-height: calc(75vh - 10rem);
+  max-block-size: calc(75vh - 10rem);
   overflow: auto;
 }
 
 .dialog-wait-ct-spinner {
-  margin-left: var(--pf-global--spacer--sm);
+  margin-inline-start: var(--pf-global--spacer--sm);
 }
diff --git a/pkg/lib/cockpit-components-inline-notification.css b/pkg/lib/cockpit-components-inline-notification.css
@@ -1,5 +1,5 @@
 .alert-link.more-button {
-  margin-left: var(--pf-global--spacer--sm);
+  margin-inline-start: var(--pf-global--spacer--sm);
 }
 
 .notification-message {

diff --git a/pkg/lib/cockpit-components-install-dialog.css b/pkg/lib/cockpit-components-install-dialog.css
@@ -1,16 +1,18 @@
 .package-list-ct {
-  margin: 1em 0;
+  margin-block: 1em;
+  margin-inline: 0;
   padding: 0;
-  max-width: 110rem;
-  text-align: left;
+  max-inline-size: 110rem;
+  text-align: start;
   box-sizing: border-box;
 }
 
 .package-list-ct li {
-  text-align: left;
+  text-align: start;
   box-sizing: border-box;
-  width: 22rem;
-  padding: 0 1ex;
+  inline-size: 22rem;
+  padding-block: 0;
+  padding-inline: 1ex;
   display: inline-block;
   overflow: hidden;
   white-space: nowrap;
@@ -24,15 +26,15 @@
 @keyframes dialogScaleUpCt {
   0% {
     opacity: 0;
-    max-height: 0;
+    max-block-size: 0;
   }
 
   25% {
     opacity: 0;
   }
 
   50% {
-    max-height: 100vh;
+    max-block-size: 100vh;
   }
 
   100% {

diff --git a/pkg/lib/cockpit-components-listing-panel.scss b/pkg/lib/cockpit-components-listing-panel.scss
@@ -5,11 +5,12 @@
   &-actions {
     order: 2;
     flex-grow: 1;
-    padding: var(--pf-global--spacer--sm) var(--pf-global--spacer--lg) var(--pf-global--spacer--sm) var(--pf-global--spacer--md);
+    padding-block: var(--pf-global--spacer--sm);
+    padding-inline: var(--pf-global--spacer--md) var(--pf-global--spacer--lg);
   }
 
   &-caption {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
 
   &-tabs {
@@ -28,11 +29,12 @@
     --pf-c-table--border-width--base: 0;
 
     // Add some sizing to the body
-    padding: var(--pf-global--spacer--md) var(--pf-global--spacer--lg);
-    width: 100%;
+    padding-block: var(--pf-global--spacer--md);
+    padding-inline: var(--pf-global--spacer--lg);
+    inline-size: 100%;
 
     // Containing hack part 1
-    float: left;
+    float: inline-start;
 
     &::after {
       // Containing hack part 2: Clearfix CSS hack,
@@ -50,7 +52,7 @@
     // Instead, rely on page scrolling.
     // Important for mobile; also useful for desktop.
     overflow-y: visible !important;
-    max-height: unset !important;
+    max-block-size: unset !important;
   }
 }
 
@@ -71,22 +73,21 @@
     transform-origin: top;
     // Overflow will revert when done (but should be hidden during animation)
     overflow: hidden;
-    max-height: 0;
+    max-block-size: 0;
     // Padding should 'tween between 0 and the actual padding (unstated)
-    padding-top: 0;
-    padding-bottom: 0;
+    padding-block: 0;
   }
 
   67% {
     // Max height is tricky in animations, as auto doesn't work
     // 100vh makes sense, but would cause different speeds on different devices
     // Screens are almost all =< 12000px; data is almost always smaller
     // we'll relax it to to 100vh at 100%, just in case.
-    max-height: 1200px;
+    max-block-size: 1200px;
   }
 
   100% {
     // Allow content to extend to the height of the screen (just in case)
-    max-height: 100vh;
+    max-block-size: 100vh;
   }
 }
diff --git a/pkg/lib/cockpit-components-logs-panel.scss b/pkg/lib/cockpit-components-logs-panel.scss
@@ -1,11 +1,11 @@
 .panel-body.empty-message {
-  padding: 0.5rem 1rem;
+  padding-block: 0.5rem;
+  padding-inline: 1rem;
   text-align: center;
 }
 
 .cockpit-log-panel .panel-body {
-  padding-left: 0;
-  padding-right: 0;
+  padding-inline: 0;
 }
 
 .cockpit-log-panel .pf-c-card__header-main > .pf-c-card__title > .pf-c-card__title-text {

diff --git a/pkg/lib/cockpit-components-modifications.css b/pkg/lib/cockpit-components-modifications.css
@@ -1,23 +1,22 @@
 .automation-script-modal pre {
-  max-height: 20em;
-  margin-bottom: 5px;
+  max-block-size: 20em;
+  margin-block-end: 5px;
 }
 
 .automation-script-modal span.fa {
-  margin-right: 5px;
+  margin-inline-end: 5px;
 }
 
 .automation-script-modal i.fa {
-  margin-right: 2px;
-  margin-left: 5px;
+  margin-inline: 5px 2px;
 }
 
 .automation-script-modal textarea {
-  min-height: 15rem;
+  min-block-size: 15rem;
 }
 
 .automation-script-modal .ansible-docs-link > svg {
-  padding-right: var(--pf-global--spacer--xs);
+  padding-inline-end: var(--pf-global--spacer--xs);
 }
 
 .green-icon {

diff --git a/pkg/lib/cockpit-components-shutdown.scss b/pkg/lib/cockpit-components-shutdown.scss
@@ -7,11 +7,11 @@
   row-gap: var(--pf-global--spacer--sm);
 
   .shutdown-time-picker {
-    max-width: 7rem;
+    max-inline-size: 7rem;
   }
 
   .shutdown-select-delay,
   .shutdown-date-picker {
-    max-width: 10rem;
+    max-inline-size: 10rem;
   }
 }
diff --git a/pkg/lib/cockpit-components-table.scss b/pkg/lib/cockpit-components-table.scss
@@ -24,21 +24,22 @@
     // Push buttons to the right by stretching the heading
     flex: auto;
     // Add a bit of minimum margin to the right of the heading
-    margin-right: var(--pf-global--spacer--md);
+    margin-inline-end: var(--pf-global--spacer--md);
     // Set a minimum height of 3rem, so when buttons wrap, there's spacing
-    min-height: var(--pf-global--spacer--2xl);
+    min-block-size: var(--pf-global--spacer--2xl);
     // Make sure textual content is aligned to the center
     display: flex;
     align-items: center;
   }
 
   &-actions {
     > * {
-      margin: var(--pf-global--spacer--xs) 0 var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
+      margin-block: var(--pf-global--spacer--xs);
+      margin-inline: var(--pf-global--spacer--sm) 0;
     }
 
     > :first-child {
-      margin-left: 0;
+      margin-inline-start: 0;
     }
   }
 
@@ -64,7 +65,7 @@
     // unless a width is set. (This affects panels the most, but not only.)
     // As the width is smaller than the contents, and this is a table,
     // the cell will stay at the correct width.
-    width: 1px;
+    inline-size: 1px;
   }
 
   // Properly align actions on the end
@@ -99,7 +100,7 @@
 .pf-c-table tbody tr:first-child.error {
   &, tbody.pf-m-expanded > & {
     background-color: var(--ct-color-list-critical-bg) !important; /* keep red background when expanded */
-    border-top: 1px solid var(--ct-color-list-critical-border);
-    border-bottom: 1px solid var(--ct-color-list-critical-border);
+    border-block-start: 1px solid var(--ct-color-list-critical-border);
+    border-block-end: 1px solid var(--ct-color-list-critical-border);
   }
 }
diff --git a/pkg/lib/console.css b/pkg/lib/console.css
@@ -7,5 +7,5 @@
 
 /* Ensure the console fits to its container (and doesn't attempt to go beyond the limits) */
 .xterm-screen, .xterm-viewport {
-  width: auto !important;
+  inline-size: auto !important;
 }
diff --git a/pkg/lib/context-menu.scss b/pkg/lib/context-menu.scss
@@ -11,7 +11,7 @@
     display: flex;
     gap: var(--pf-global--spacer--sm);
     justify-content: space-between;
-    min-width: 10rem;
+    min-inline-size: 10rem;
   }
 
   &Shortcut {