github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-04-24 19:34:30 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

DEV: Introduce postcss minmax transform (#31885)

Browse Source 
This will auto-transform media query range syntax like `width < 100px`
into the more-widely-supported min/max-width syntax
This commit is contained in:
David Taylor 2025-03-18 19:28:52 +00:00 committed by GitHub
parent a46d2ef40c
commit 9e7384298b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
37 changed files with 104 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/javascripts/theme-transpiler/package.json
View File

@ -25,6 +25,7 @@
"polyfill-crypto.getrandomvalues": "^1.0.0",
"postcss": "^8.5.3",
"postcss-js": "^4.0.1",
"postcss-media-minmax": "^5.0.0",
"source-map-js": "^1.2.1",
"terser": "^5.39.0"
},

2
app/assets/javascripts/theme-transpiler/postcss.js
View File

@ -2,6 +2,7 @@ import "core-js/actual/url";
import postcssLightDark from "@csstools/postcss-light-dark-function";
import autoprefixer from "autoprefixer";
import postcss from "postcss";
import minmax from "postcss-media-minmax";
import { browsers } from "../discourse/config/targets";
import postcssVariablePrefixer from "./postcss-variable-prefixer";
@ -9,6 +10,7 @@ const postCssProcessor = postcss([
autoprefixer({
overrideBrowserslist: browsers,
}),
minmax(),
postcssLightDark,
postcssVariablePrefixer(),
]);

22
app/assets/stylesheets/admin/admin_base.scss
View File

@ -91,7 +91,7 @@ $mobile-breakpoint: 700px;
position: relative;
.nav-stacked {
@media screen and (max-width: 700px) {
@media screen and (width <= 700px) {
margin: 0;
}
}
@ -109,7 +109,7 @@ $mobile-breakpoint: 700px;
&.admin-site-settings-category {
overflow: hidden;
@media (max-width: 500px) {
@media (width <= 500px) {
background-color: var(--primary-very-low);
}
}
@ -144,7 +144,7 @@ $mobile-breakpoint: 700px;
display: none;
}
@media screen and (max-width: 970px) and (min-width: 768px) {
@media screen and (width <= 970px) and (width >= 768px) {
td,
th {
padding: 6px 4px;
@ -174,7 +174,7 @@ $mobile-breakpoint: 700px;
.admin-contents table.grid {
// Table switches to grid for narrow screens
@media screen and (max-width: 767px) {
@media screen and (width <= 767px) {
thead {
display: none;
}
@ -241,7 +241,7 @@ $mobile-breakpoint: 700px;
}
}
@media screen and (min-width: 550px) {
@media screen and (width >= 550px) {
tr {
grid-template-columns: repeat(6, 1fr);
}
@ -593,7 +593,7 @@ $mobile-breakpoint: 700px;
input[type="text"] {
min-width: 15em;
@media screen and (max-width: 500px) {
@media screen and (width <= 500px) {
box-sizing: border-box;
width: 100%;
}
@ -615,7 +615,7 @@ $mobile-breakpoint: 700px;
.search-logs-filter {
margin-left: auto;
@media screen and (max-width: 700px) {
@media screen and (width <= 700px) {
flex: 1 1 100%;
margin-left: 0;
}
@ -793,7 +793,7 @@ $mobile-breakpoint: 700px;
// Hide the search checkbox for very small screens
// Todo: find somewhere to display it - probably requires switching its order in the html
@media (max-width: 550px) {
@media (width <= 550px) {
display: none;
}
}
@ -839,7 +839,7 @@ $mobile-breakpoint: 700px;
width: 250px;
}
@media (max-width: 500px) {
@media (width <= 500px) {
width: 50%;
}
@ -876,7 +876,7 @@ $mobile-breakpoint: 700px;
transform: translateX(250px);
}
@media (max-width: 500px) {
@media (width <= 500px) {
transition: transform 0.3s ease;
transform: translateX(50%);
}
@ -947,7 +947,7 @@ section.details {
}
}
@media all and (min-width: 320px) and (max-width: 500px) {
@media all and (width >= 320px) and (width <= 500px) {
.full-width {
margin: 0;
}

4
app/assets/stylesheets/admin/admin_filter.scss
View File

@ -7,7 +7,7 @@
.admin-filter__input-container {
min-width: 50%;
@media screen and (max-width: 500px) {
@media screen and (width <= 500px) {
width: 100%;
}
@ -15,7 +15,7 @@
min-width: 15em;
margin: 0;
@media screen and (max-width: 500px) {
@media screen and (width <= 500px) {
box-sizing: border-box;
width: 100%;
}

2
app/assets/stylesheets/admin/admin_report.scss
View File

@ -216,7 +216,7 @@
border-bottom: 1px solid var(--primary-low);
padding-bottom: 0.5em;
@media screen and (max-width: 400px) {
@media screen and (width <= 400px) {
flex-wrap: wrap;
}

2
app/assets/stylesheets/admin/admin_report_counters.scss
View File

@ -24,7 +24,7 @@
}
}
@media screen and (max-width: 400px) {
@media screen and (width <= 400px) {
&.title .d-icon {
display: none;
}

12
app/assets/stylesheets/admin/customize.scss
View File

@ -206,11 +206,11 @@
justify-content: space-between;
width: 79.7%;
@media screen and (max-width: 700px) {
@media screen and (width <= 700px) {
width: 100%;
}
@media screen and (min-width: 700px) and (max-width: 768px) {
@media screen and (width >= 700px) and (width <= 768px) {
width: 73%;
}
@ -398,11 +398,11 @@
border-left: 1px solid var(--primary-low);
width: 100%;
@media screen and (max-height: 1000px) {
@media screen and (height <= 1000px) {
max-height: 50vh;
}
@media screen and (max-height: 800px) {
@media screen and (height <= 800px) {
max-height: 40vh;
}
@ -960,7 +960,7 @@
}
}
@media screen and (max-width: 880px) {
@media screen and (width <= 880px) {
table.grid {
thead {
display: none;
@ -984,7 +984,7 @@
}
}
@media screen and (max-width: 580px) {
@media screen and (width <= 580px) {
table.grid {
tr td.editing-input {
grid-column-start: 1;

6
app/assets/stylesheets/admin/dashboard.scss
View File

@ -120,7 +120,7 @@
border-bottom: 1px solid var(--primary-low);
padding-bottom: 0.5em;
@media screen and (max-width: 400px) {
@media screen and (width <= 400px) {
flex-wrap: wrap;
}
@ -242,7 +242,7 @@
}
}
@media screen and (max-width: 400px) {
@media screen and (width <= 400px) {
flex-wrap: wrap;
.storage-stats,
@ -598,7 +598,7 @@
.update-header {
flex: 1 1 100%;
@media screen and (max-width: 650px) {
@media screen and (width <= 650px) {
margin: 0;
}

14
app/assets/stylesheets/admin/staff_logs.scss
View File

@ -10,7 +10,7 @@
width: 100%;
word-wrap: break-word;
@media screen and (min-width: 550px) and (max-width: 767px) {
@media screen and (width >= 550px) and (width <= 767px) {
table.staff-logs tr {
display: grid;
grid-template-rows: auto auto;
@ -171,11 +171,11 @@
width: 140px;
}
@media screen and (min-width: 900px) {
@media screen and (width >= 900px) {
margin-left: auto;
}
@media screen and (max-width: 899px) {
@media screen and (width <= 899px) {
margin-top: 1em;
}
}
@ -196,13 +196,13 @@ table.screened-ip-addresses {
}
}
@media screen and (min-width: 550px) {
@media screen and (width >= 550px) {
table.screened-ip-addresses tr {
grid-template-columns: repeat(5, 1fr) auto;
}
}
@media screen and (max-width: 549px) {
@media screen and (width <= 549px) {
table.screened-ip-addresses tr {
td.actions {
grid-row: 3;
@ -387,7 +387,7 @@ table.search-logs-list {
width: 60%;
word-wrap: break-word;
@media screen and (max-width: 767px) {
@media screen and (width <= 767px) {
width: 100%;
}
}
@ -397,7 +397,7 @@ table.search-logs-list {
text-align: center;
}
@media screen and (min-width: 550px) {
@media screen and (width >= 550px) {
tr {
td.term {
grid-column-start: span 3;

2
app/assets/stylesheets/common/base/activation.scss
View File

@ -25,7 +25,7 @@
background: var(--secondary);
margin: 10vh auto 1em auto;
@media screen and (max-height: 700px) {
@media screen and (height <= 700px) {
margin: 1em auto 1em auto;
}
}

4
app/assets/stylesheets/common/base/compose.scss
View File

@ -32,7 +32,7 @@ html.composer-open {
background-color: var(--secondary);
box-shadow: var(--shadow-composer);
@media screen and (max-width: 1200px) {
@media screen and (width <= 1200px) {
min-width: 0;
}
@ -177,7 +177,7 @@ html.composer-open {
@include ellipsis;
@media screen and (max-width: 500px) {
@media screen and (width <= 500px) {
display: none;
}
}

2
app/assets/stylesheets/common/base/crawler_layout.scss
View File

@ -144,7 +144,7 @@ body > noscript {
width: 20%;
}
@media (max-width: 850px) {
@media (width <= 850px) {
table-layout: auto;
margin: 0;

6
app/assets/stylesheets/common/base/magnific-popup.scss
View File

@ -530,8 +530,8 @@ button {
}
@if $include-mobile-layout-for-image {
@media all and (max-width: 800px) and (orientation: landscape),
screen and (max-height: 300px) {
@media all and (width <= 800px) and (orientation: landscape),
screen and (height <= 300px) {
/**
* Remove all paddings around the image on small screen
*/
@ -597,7 +597,7 @@ button {
}
// Scale navigation arrows and reduce padding from sides
@media all and (max-width: 900px) {
@media all and (width <= 900px) {
.mfp-arrow {
transform: scale(0.75);
}

4
app/assets/stylesheets/common/base/menu-panel.scss
View File

@ -268,7 +268,7 @@
border-radius: 0;
padding: 0.857em;
@media screen and (max-height: 400px) {
@media screen and (height <= 400px) {
// helps with 400% zoom level
font-size: var(--font-down-1);
padding: 0.5em 0.875em;
@ -285,7 +285,7 @@
top: 6px;
font-size: var(--font-down-3);
@media screen and (max-height: 400px) {
@media screen and (height <= 400px) {
// helps with 400% zoom level
right: 0;
top: 0;

2
app/assets/stylesheets/common/base/modal.scss
View File

@ -406,7 +406,7 @@
padding: 10px 4px 4px 4px;
}
@media screen and (max-width: 760px) {
@media screen and (width <= 760px) {
.incoming-email-html-part {
width: calc(100% - 10px);
}

6
app/assets/stylesheets/common/base/not-found.scss
View File

@ -25,7 +25,7 @@
.page-not-found-topics {
display: flex;
@media screen and (max-width: 600px) {
@media screen and (width <= 600px) {
flex-wrap: wrap;
}
}
@ -38,7 +38,7 @@
margin-bottom: 40px;
padding-right: 20px;
@media screen and (max-width: 600px) {
@media screen and (width <= 600px) {
width: 100%;
}
@ -53,7 +53,7 @@
align-items: baseline;
margin-bottom: 15px;
@media screen and (max-width: 600px) {
@media screen and (width <= 600px) {
&:nth-of-type(n + 6) {
display: none;
}

2
app/assets/stylesheets/common/base/onebox.scss
View File

@ -157,7 +157,7 @@ aside.onebox {
float: left;
margin-right: 1em;
@media all and (max-width: 600px) {
@media all and (width <= 600px) {
max-width: 35%;
}

4
app/assets/stylesheets/common/base/topic-post.scss
View File

@ -754,7 +754,7 @@ aside.quote {
display: flex;
flex-wrap: wrap;
@media screen and (max-width: 420px) {
@media screen and (width <= 420px) {
flex-direction: column;
align-items: flex-start;
@ -1410,7 +1410,7 @@ span.mention {
}
}
@media all and (max-width: 767px) {
@media all and (width <= 767px) {
.reply-to-tab {
span {
display: none;

6
app/assets/stylesheets/common/base/topic.scss
View File

@ -29,7 +29,7 @@
}
// timeline
@media screen and (min-width: 925px) {
@media screen and (width >= 925px) {
// at 925px viewport width and above the timeline is visible (see topic-navigation.js)
.topic-navigation {
grid-area: timeline;
@ -72,7 +72,7 @@
}
// progress bar
@media screen and (max-width: 924px) {
@media screen and (width <= 924px) {
grid-template-areas: "posts";
grid-template-columns: auto;
@ -173,7 +173,7 @@
display: flex;
flex-wrap: wrap;
@media screen and (min-width: 925px) {
@media screen and (width >= 925px) {
width: 90%; // topic title isn't full-width on wide screens
}

6
app/assets/stylesheets/common/base/user-badges.scss
View File

@ -44,7 +44,7 @@
}
}
@media all and (max-width: 750px) {
@media all and (width <= 750px) {
.show-badge .user-badge-with-posts .badge-user a.post-link {
width: auto;
}
@ -232,7 +232,7 @@
margin-bottom: 0.25em;
font-size: var(--font-up-1);
@media screen and (min-width: 900px) {
@media screen and (width >= 900px) {
font-size: var(--font-up-2);
}
}
@ -243,7 +243,7 @@
width: 100%;
align-self: flex-start;
@media screen and (min-width: 767px) {
@media screen and (width >= 767px) {
max-width: calc(var(--d-max-width) / 2);
}

2
app/assets/stylesheets/common/base/user.scss
View File

@ -551,7 +551,7 @@
}
}
@media all and (max-width: 600px) {
@media all and (width <= 600px) {
float: none;
width: 100%;
}

4
app/assets/stylesheets/common/components/topic-map.scss
View File

@ -48,7 +48,7 @@ body:not(.archetype-private_message) {
&.--op,
&.--bottom {
@media screen and (max-width: 500px) {
@media screen and (width <= 500px) {
padding-left: 0;
}
}
@ -251,7 +251,7 @@ body:not(.archetype-private_message) {
color: var(--primary-medium);
}
@media screen and (max-width: 475px) {
@media screen and (width <= 475px) {
display: none;
}
}

2
app/assets/stylesheets/common/login/invite-signup.scss
View File

@ -82,7 +82,7 @@
background: var(--secondary);
margin: 0 auto;
@media screen and (max-width: 700px) {
@media screen and (width <= 700px) {
margin: 1em auto 1em auto;
padding: 1rem;
}

2
app/assets/stylesheets/common/modal/login-modal.scss
View File

@ -166,7 +166,7 @@
}
.desktop-view & {
@media screen and (max-width: 767px) {
@media screen and (width <= 767px) {
// important to maintain narrow desktop widths
// for auth modals in Discourse Hub on iPad
.d-modal__header {

2
app/assets/stylesheets/common/modal/modal-overrides.scss
View File

@ -339,7 +339,7 @@
}
}
@media screen and (max-width: 768px) {
@media screen and (width <= 768px) {
.d-modal {
&__container {
width: 100%;

6
app/assets/stylesheets/common/topic-timeline.scss
View File

@ -21,7 +21,7 @@
transition: max-height 0.4s ease-out;
}
@media screen and (max-height: 425px) {
@media screen and (height <= 425px) {
max-height: 75vh;
}
@ -56,7 +56,7 @@
transition: max-height 0.3s ease-in;
}
@media screen and (max-height: 425px) {
@media screen and (height <= 425px) {
padding-top: 10px;
}
@ -89,7 +89,7 @@
@include line-clamp(8);
@media screen and (max-height: 425px) {
@media screen and (height <= 425px) {
@include line-clamp(5);
}
}

6
app/assets/stylesheets/desktop/category-list.scss
View File

@ -171,15 +171,15 @@
}
div.column.categories {
@media all and (max-width: 600px) {
@media all and (width <= 600px) {
margin-right: 0;
}
@media all and (min-width: 600px) {
@media all and (width >= 600px) {
margin-right: 1em;
}
@media all and (min-width: 700px) {
@media all and (width >= 700px) {
margin-right: 2em;
}
}

2
app/assets/stylesheets/desktop/login-signup-page.scss
View File

@ -47,7 +47,7 @@
height: 100%;
}
@media screen and (max-width: 767px) {
@media screen and (width <= 767px) {
// important to maintain narrow desktop widths
// for auth modals in Discourse Hub on iPad
.has-alt-auth {

2
app/assets/stylesheets/desktop/topic-post.scss
View File

@ -696,7 +696,7 @@ span.highlighted {
/* Tablet (portrait) ----------- */
@media all and (max-width: 790px) {
@media all and (width <= 790px) {
.topic-avatar {
width: 45px;
}

2
app/assets/stylesheets/mobile/components/user-card.scss
View File

@ -108,7 +108,7 @@
max-height: 40vh;
overflow-y: auto;
@media screen and (max-height: 550px) {
@media screen and (height <= 550px) {
max-height: 12vh;
}

2
app/assets/stylesheets/mobile/modal.scss
View File

@ -84,7 +84,7 @@ html:not(.keyboard-visible.mobile-view) {
font-size: var(--font-up-4);
}
@media only screen and (max-device-width: 568px) {
@media only screen and (device-width <= 568px) {
.flag-modal-body .flag-message {
height: 3em;
}

2
app/assets/stylesheets/mobile/topic-post.scss
View File

@ -127,7 +127,7 @@ nav.post-controls button.reply .d-icon {
bottom: -50px;
left: 135px;
@media screen and (max-width: 374px) {
@media screen and (width <= 374px) {
left: 50px;
}
}

26
app/assets/stylesheets/wizard.scss
View File

@ -58,7 +58,7 @@ body.wizard {
height: 50px;
}
@media screen and (max-height: 900px) {
@media screen and (height <= 900px) {
.desktop-view & {
display: none;
}
@ -185,7 +185,7 @@ body.wizard {
&__field.text-governing-law,
&__field.text-city-for-disputes {
@media only screen and (max-width: 568px) {
@media only screen and (width <= 568px) {
display: none;
}
}
@ -200,7 +200,7 @@ body.wizard {
display: flex;
flex: 1 0 50%;
@media only screen and (max-width: 568px) {
@media only screen and (width <= 568px) {
width: 100%;
}
}
@ -210,7 +210,7 @@ body.wizard {
box-sizing: border-box;
margin-right: 1em;
@media only screen and (max-width: 925px) {
@media only screen and (width <= 925px) {
width: 100%;
margin-left: auto;
margin-right: auto;
@ -223,7 +223,7 @@ body.wizard {
border-radius: 0.5em;
margin-top: -1em;
@media only screen and (max-width: 925px) {
@media only screen and (width <= 925px) {
display: none;
}
}
@ -348,7 +348,7 @@ body.wizard {
&__step-text {
display: inline;
@media only screen and (max-width: 568px) {
@media only screen and (width <= 568px) {
display: none;
}
}
@ -558,7 +558,7 @@ body.wizard {
margin: 0;
}
@media only screen and (max-width: 568px) {
@media only screen and (width <= 568px) {
font-size: var(--font-0);
}
}
@ -568,7 +568,7 @@ body.wizard {
font-size: var(--font-up-1);
margin: 0.25em 0 0.5em 3.5em;
@media only screen and (max-width: 568px) {
@media only screen and (width <= 568px) {
margin-left: 2em;
}
}
@ -630,7 +630,7 @@ body.wizard {
vertical-align: middle;
transition: background 0.25s;
@media only screen and (max-width: 568px) {
@media only screen and (width <= 568px) {
height: 20px;
width: 35px;
}
@ -649,7 +649,7 @@ body.wizard {
top: 4px;
left: 9px;
@media only screen and (max-width: 568px) {
@media only screen and (width <= 568px) {
top: 3px;
left: 5px;
font-size: var(--font-down-3);
@ -665,7 +665,7 @@ body.wizard {
left: 4px;
transition: left 0.25s;
@media only screen and (max-width: 568px) {
@media only screen and (width <= 568px) {
height: 12px;
width: 12px;
}
@ -685,7 +685,7 @@ body.wizard {
&__checkbox:checked + .wizard-container__checkbox-slider::before {
left: 26px;
@media only screen and (max-width: 568px) {
@media only screen and (width <= 568px) {
left: 20px;
}
}
@ -766,7 +766,7 @@ body.wizard {
display: flex;
gap: 1em;
@media screen and (max-width: 750px) {
@media screen and (width <= 750px) {
flex-direction: column-reverse;
}
}

2
lib/stylesheet/manager.rb
View File

@ -8,7 +8,7 @@ end
class Stylesheet::Manager
# Bump this number to invalidate all stylesheet caches (e.g. if you change something inside the compiler)
BASE_COMPILER_VERSION = 3
BASE_COMPILER_VERSION = 4
# Add any dependencies here which should automatically cause a global cache invalidation.
BASE_CACHE_KEY = "#{BASE_COMPILER_VERSION}::#{DiscourseFonts::VERSION}"

2
plugins/discourse-presence/assets/stylesheets/presence.scss
View File

@ -75,7 +75,7 @@
// When topic progress is visible in the posts grid area and is sticky,
// adjust positioning so presence is on the same line
@media screen and (max-width: 924px) {
@media screen and (width <= 924px) {
body:has(.topic-navigation.with-topic-progress)
.topic-above-footer-buttons-outlet.presence {
margin-top: -3.2em;

13
pnpm-lock.yaml generated
View File

@ -1066,6 +1066,9 @@ importers:
postcss-js:
specifier: ^4.0.1
version: 4.0.1(postcss@8.5.3)
postcss-media-minmax:
specifier: ^5.0.0
version: 5.0.0(postcss@8.5.3)
source-map-js:
specifier: ^1.2.1
version: 1.2.1
@ -7023,6 +7026,12 @@ packages:
peerDependencies:
postcss: ^8.4.21
postcss-media-minmax@5.0.0:
resolution: {integrity: sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==}
engines: {node: '>=10.0.0'}
peerDependencies:
postcss: ^8.1.0
postcss-media-query-parser@0.2.3:
resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==}
@ -16247,6 +16256,10 @@ snapshots:
camelcase-css: 2.0.1
postcss: 8.5.3
postcss-media-minmax@5.0.0(postcss@8.5.3):
dependencies:
postcss: 8.5.3
postcss-media-query-parser@0.2.3: {}
postcss-modules-extract-imports@3.1.0(postcss@8.5.3):

3
stylelint.config.mjs
View File

@ -1,3 +1,6 @@
export default {
extends: ["@discourse/lint-configs/stylelint"],
rules: {
"media-feature-range-notation": "context",
},
};