commit 36927330c863a15db9577cb1fc2bab309a2a266f parent c3a92eab38bf6bb7584c433c7560d3e1d30e4a81 Author: Maxx Crawford <mcrawford@mozilla.com> Date: Tue, 16 Dec 2025 03:13:29 +0000 Bug 2001446 - Add stylelint rule to enforce logical properties r=frontend-codestyle-reviewers,nbarrett,home-newtab-reviewers Differential Revision: https://phabricator.services.mozilla.com/D273499 Diffstat:
7 files changed, 37 insertions(+), 29 deletions(-)
diff --git a/.stylelintrc.js b/.stylelintrc.js @@ -384,6 +384,14 @@ module.exports = { "Avoid literal values. Use variables (e.g. var(--font-size-small)) or inherit/unset/etc.", }, ], + "csstools/use-logical": [ + "always", + { + // Bug 2003301: Do not enforce logical properties for any height/width properties + except: [/^(min-|max-)?width/i, /^(min-|max-)?height/i], + severity: "error", + }, + ], }, }, { diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/_CardSections.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/_CardSections.scss @@ -94,7 +94,7 @@ .ds-image.img { width: 100%; height: 100%; - padding-top: 0; + padding-block-start: 0; min-width: 100%; } @@ -290,7 +290,7 @@ } .sections-card-footer { - margin-top: auto; + margin-block-start: auto; } } } @@ -391,7 +391,7 @@ } .sections-card-footer { - margin-top: auto; + margin-block-start: auto; } } diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss @@ -583,8 +583,8 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 100%); @include newtab-card-style; .img-wrapper .ds-image img { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + border-end-start-radius: 0; + border-end-end-radius: 0; } &:hover .img-wrapper .ds-image img { @@ -611,7 +611,7 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 100%); .card-stp-button-position-wrapper { z-index: 10; - bottom: 0; + inset-block-end: 0; position: absolute; } diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/PromoCard/_PromoCard.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/PromoCard/_PromoCard.scss @@ -35,7 +35,7 @@ .promo-card-dismiss-button { position: absolute; - top: var(--space-small); + inset-block-start: var(--space-small); inset-inline-end: var(--space-small); margin: 0; } diff --git a/browser/extensions/newtab/content-src/components/TopSites/_TopSites.scss b/browser/extensions/newtab/content-src/components/TopSites/_TopSites.scss @@ -549,7 +549,7 @@ $calculated-max-width-twice-widest: $break-point-widest + 2 * $card-width; &:not(:placeholder-shown) { direction: ltr; - text-align: right; + text-align: end; } } } diff --git a/browser/extensions/newtab/content-src/components/Widgets/Lists/_Lists.scss b/browser/extensions/newtab/content-src/components/Widgets/Lists/_Lists.scss @@ -23,8 +23,8 @@ .confetti-canvas { position: absolute; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; width: 100%; height: 100%; pointer-events: none; diff --git a/browser/extensions/newtab/css/activity-stream.css b/browser/extensions/newtab/css/activity-stream.css @@ -1165,7 +1165,7 @@ main section { } .topsite-form .form-wrapper .url input:dir(rtl):not(:placeholder-shown) { direction: ltr; - text-align: right; + text-align: end; } .topsite-form .form-wrapper .enable-custom-image-input { display: inline-block; @@ -4503,8 +4503,8 @@ dialog:dir(rtl)::after { } .lists .confetti-canvas { position: absolute; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; width: 100%; height: 100%; pointer-events: none; @@ -5439,7 +5439,7 @@ dialog:dir(rtl)::after { .ds-section-grid.ds-card-grid .col-1-small .img-wrapper .ds-image.img { width: 100%; height: 100%; - padding-top: 0; + padding-block-start: 0; min-width: 100%; } .ds-section-grid.ds-card-grid .col-1-small .img-wrapper .ds-image.img img { @@ -5578,7 +5578,7 @@ dialog:dir(rtl)::after { -webkit-line-clamp: 3; } .ds-section-grid.ds-card-grid .col-1-medium .meta .sections-card-footer { - margin-top: auto; + margin-block-start: auto; } .ds-section-grid.ds-card-grid .col-1-large { grid-row: span 2; @@ -5657,7 +5657,7 @@ dialog:dir(rtl)::after { font-size: var(--font-size-root); } .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .meta .sections-card-footer { - margin-top: auto; + margin-block-start: auto; } .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .card-stp-button-hover-background { background: transparent; @@ -5799,7 +5799,7 @@ dialog:dir(rtl)::after { .ds-section-grid.ds-card-grid .col-2-small .img-wrapper .ds-image.img { width: 100%; height: 100%; - padding-top: 0; + padding-block-start: 0; min-width: 100%; } .ds-section-grid.ds-card-grid .col-2-small .img-wrapper .ds-image.img img { @@ -5938,7 +5938,7 @@ dialog:dir(rtl)::after { -webkit-line-clamp: 3; } .ds-section-grid.ds-card-grid .col-2-medium .meta .sections-card-footer { - margin-top: auto; + margin-block-start: auto; } .ds-section-grid.ds-card-grid .col-2-large { grid-row: span 2; @@ -6017,7 +6017,7 @@ dialog:dir(rtl)::after { font-size: var(--font-size-root); } .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .meta .sections-card-footer { - margin-top: auto; + margin-block-start: auto; } .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .card-stp-button-hover-background { background: transparent; @@ -6168,7 +6168,7 @@ dialog:dir(rtl)::after { .ds-section-grid.ds-card-grid .col-3-small .img-wrapper .ds-image.img { width: 100%; height: 100%; - padding-top: 0; + padding-block-start: 0; min-width: 100%; } .ds-section-grid.ds-card-grid .col-3-small .img-wrapper .ds-image.img img { @@ -6307,7 +6307,7 @@ dialog:dir(rtl)::after { -webkit-line-clamp: 3; } .ds-section-grid.ds-card-grid .col-3-medium .meta .sections-card-footer { - margin-top: auto; + margin-block-start: auto; } .ds-section-grid.ds-card-grid .col-3-large { grid-row: span 2; @@ -6386,7 +6386,7 @@ dialog:dir(rtl)::after { font-size: var(--font-size-root); } .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .meta .sections-card-footer { - margin-top: auto; + margin-block-start: auto; } .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .card-stp-button-hover-background { background: transparent; @@ -6536,7 +6536,7 @@ dialog:dir(rtl)::after { .ds-section-grid.ds-card-grid .col-4-small .img-wrapper .ds-image.img { width: 100%; height: 100%; - padding-top: 0; + padding-block-start: 0; min-width: 100%; } .ds-section-grid.ds-card-grid .col-4-small .img-wrapper .ds-image.img img { @@ -6675,7 +6675,7 @@ dialog:dir(rtl)::after { -webkit-line-clamp: 3; } .ds-section-grid.ds-card-grid .col-4-medium .meta .sections-card-footer { - margin-top: auto; + margin-block-start: auto; } .ds-section-grid.ds-card-grid .col-4-large { grid-row: span 2; @@ -6754,7 +6754,7 @@ dialog:dir(rtl)::after { font-size: var(--font-size-root); } .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .meta .sections-card-footer { - margin-top: auto; + margin-block-start: auto; } .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .card-stp-button-hover-background { background: transparent; @@ -7624,8 +7624,8 @@ dialog:dir(rtl)::after { } .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .img-wrapper .ds-image img, .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .img-wrapper .ds-image img { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + border-end-start-radius: 0; + border-end-end-radius: 0; } .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards:hover .img-wrapper .ds-image img, .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards:hover .img-wrapper .ds-image img { @@ -7651,7 +7651,7 @@ dialog:dir(rtl)::after { .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .card-stp-button-position-wrapper, .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .card-stp-button-position-wrapper { z-index: 10; - bottom: 0; + inset-block-end: 0; position: absolute; } .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .card-stp-button-position-wrapper .context-menu-position-container, @@ -8781,7 +8781,7 @@ dialog:dir(rtl)::after { } .promo-card-wrapper .promo-card-dismiss-button { position: absolute; - top: var(--space-small); + inset-block-start: var(--space-small); inset-inline-end: var(--space-small); margin: 0; }