Merge branch 'bundlesize-compare' into bundlesize-compare-client-synt…

…ax-highlight

.github/workflows/pr-bundlesize-compare.yml

@@ -0,0 +1,99 @@
+on:
+  # this action will error unless run in a pr context
+  pull_request:
+
+jobs:
+  # Build current and upload stats.json
+  build-head:
+    name: "Build head"
+    permissions:
+      contents: read
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{github.event.pull_request.head.ref}}
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Cache @vscode/ripgrep bin
+        uses: actions/cache@v4
+        with:
+          key: vscode-ripgrep-bin-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('yarn.lock') }}
+          path: node_modules/@vscode/ripgrep/bin/
+
+      - name: Install all yarn packages
+        run: yarn --frozen-lockfile
+        env:
+          # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build
+        run: yarn build:client
+        env:
+          ANALYZE_BUNDLE: true
+
+      - name: Upload stats.json
+        uses: actions/upload-artifact@v4
+        with:
+          name: head-stats
+          path: ./client/build/stats.json
+
+  # Build base for comparison and upload stats.json
+  build-base:
+    name: "Build base"
+    permissions:
+      contents: read
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.base_ref }}
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Cache @vscode/ripgrep bin
+        uses: actions/cache@v4
+        with:
+          key: vscode-ripgrep-bin-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('yarn.lock') }}
+          path: node_modules/@vscode/ripgrep/bin/
+
+      - name: Install all yarn packages
+        run: yarn --frozen-lockfile
+        env:
+          # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build
+        run: yarn build:client
+        env:
+          ANALYZE_BUNDLE: true
+
+      - name: Upload stats.json
+        uses: actions/upload-artifact@v4
+        with:
+          name: base-stats
+          path: ./client/build/stats.json
+
+  # run the action against the stats.json files
+  compare:
+    name: "Compare base & head bundle sizes"
+    runs-on: ubuntu-latest
+    needs: [build-base, build-head]
+    permissions:
+      pull-requests: write
+    steps:
+      - uses: actions/download-artifact@v4
+      - uses: github/[email protected]
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          current-stats-json-path: ./head-stats/stats.json
+          base-stats-json-path: ./base-stats/stats.json

.stylelintrc.json

@@ -22,6 +22,7 @@
       [
         "custom-properties",
         "dollar-variables",
+        "declarations",
         {
           "type": "at-rule",
           "name": "extend"
@@ -31,7 +32,6 @@
           "name": "include",
           "hasBlock": false
         },
-        "declarations",
         {
           "type": "at-rule",
           "name": "include",

client/config/webpack.config.js

@@ -11,6 +11,7 @@ import CssMinimizerPlugin from "css-minimizer-webpack-plugin";
 import { WebpackManifestPlugin } from "webpack-manifest-plugin";
 import ESLintPlugin from "eslint-webpack-plugin";
 import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
+import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
 
 import paths from "./paths.js";
 import getClientEnvironment from "./env.js";
@@ -497,6 +498,12 @@ function config(webpackEnv) {
       new ESLintPlugin({
         extensions: ["js", "mjs", "jsx", "ts", "tsx"],
       }),
+      isEnvProduction &&
+        process.env.ANALYZE_BUNDLE &&
+        new BundleAnalyzerPlugin({
+          analyzerMode: "disabled",
+          generateStatsFile: true,
+        }),
     ].filter(Boolean),
     // Turn off performance processing because we utilize
     // our own hints via the FileSizeReporter

client/src/advertising/with_us/index.scss

@@ -25,10 +25,10 @@ main.advertise-with-us {
     }
 
     h1 {
-      @include mify;
       font-size: 3rem;
       margin-top: 8rem;
       text-align: center;
+      @include mify;
 
       &::before {
         background-color: var(--mdn-color-ads);

client/src/community/index.scss

@@ -25,10 +25,10 @@ main.contribute {
     }
 
     h1 {
-      @include mify;
       font-size: 3rem;
       margin-top: 8rem;
       text-align: center;
+      @include mify;
     }
 
     .quote {

client/src/curriculum/landing.scss

@@ -311,15 +311,17 @@
 
       > #stairway1-container {
         --fs: clamp(1rem, calc(3 * calc(100vw / 100)), 1.75rem);
-        @media (min-width: $screen-lg) {
-          --fs: clamp(1rem, calc(2 * calc(100vw / 100)), 1.75rem);
-        }
+
         grid-area: a;
         margin: 0;
         position: relative;
         transform: translateX(2vw);
         width: 100%;
 
+        @media (min-width: $screen-lg) {
+          --fs: clamp(1rem, calc(2 * calc(100vw / 100)), 1.75rem);
+        }
+
         #stairway1 {
           font-size: var(--fs);
           left: 32%;
@@ -341,13 +343,15 @@
 
       > #stairway2-container {
         --fs: clamp(0.75rem, calc(1.25 * calc(100vw / 100)), 1rem);
-        @media (min-width: $screen-md) {
-          --fs: clamp(0.75rem, calc(100vw / 100), 0.825rem);
-        }
+
         grid-area: b;
         position: relative;
         transform: translateX(-5vw);
 
+        @media (min-width: $screen-md) {
+          --fs: clamp(0.75rem, calc(100vw / 100), 0.825rem);
+        }
+
         #stairway2 {
           font-size: var(--fs);
           height: 100%;

client/src/document/index.scss

@@ -859,16 +859,16 @@ kbd {
   --offset: var(--sticky-header-with-actions-height);
   --max-height: calc(100vh - var(--offset));
 
-  @media (min-width: $screen-md) and (min-height: $screen-height-place-limit) {
-    display: flex;
-    flex-direction: column;
-  }
-
   max-height: var(--max-height);
   position: sticky;
   top: var(--offset);
   z-index: var(--z-index-sidebar-mobile);
 
+  @media (min-width: $screen-md) and (min-height: $screen-height-place-limit) {
+    display: flex;
+    flex-direction: column;
+  }
+
   @media (min-width: $screen-md) {
     z-index: auto;
 

client/src/document/organisms/sidebar/index.scss

@@ -254,6 +254,7 @@
   }
   @media (min-width: $screen-md) {
     display: flex;
+    position: relative;
   }
   @media (min-width: $screen-lg), (min-height: $screen-height-place-limit) {
     display: block;

client/src/homepage/featured-articles/index.scss

@@ -65,14 +65,14 @@
     }
 
     p {
+      font: var(--type-smaller-font-size);
+      line-height: var(--base-line-height);
+      margin: 0;
       @include line-clamp(
         3,
         var(--base-line-height),
         var(--background-primary)
       );
-      font: var(--type-smaller-font-size);
-      line-height: var(--base-line-height);
-      margin: 0;
 
       @media (min-width: $screen-md) {
         min-height: calc(3em * var(--base-line-height));

client/src/plus/ai-help/index.tsx

@@ -979,7 +979,9 @@ export function AIHelpInner() {
                 ))}
               </section>
             )}
-            {hash === "#debug" && <pre>{JSON.stringify(datas, null, 2)}</pre>}
+            {hash === "#debug" && (
+              <pre>{JSON.stringify({ datas, messages, quota }, null, 2)}</pre>
+            )}
           </section>
         )}
       </Container>

client/src/plus/ai-help/use-ai.ts

@@ -240,6 +240,7 @@ function messageReducer(state: MessageTreeState, messageAction: MessageAction) {
             ...newState.currentNode.request,
             messageId,
             parentId,
+            chatId,
           },
         });
         newState.nodes[messageId] = newState.currentNode;

client/src/plus/collections/index.scss

@@ -75,14 +75,14 @@
     }
 
     p {
+      margin: 0;
+      overflow-wrap: anywhere;
+      white-space: pre-wrap;
       @include line-clamp(
         4,
         var(--font-content-line-height),
         var(--background-primary)
       );
-      margin: 0;
-      overflow-wrap: anywhere;
-      white-space: pre-wrap;
     }
 
     footer {

client/src/ui/atoms/loading/index.scss

@@ -1,11 +1,11 @@
 @use "~@mdn/minimalist/sass/mixins/animation" as *;
 
 .generic-loading {
-  @include slow-pulse();
   align-items: center;
   /* add short delay so the animation starts from white instead of dark gray */
   animation-delay: 1s;
   display: flex;
   justify-content: center;
   width: 100%;
+  @include slow-pulse();
 }

client/src/ui/base/_mdn.scss

@@ -9,8 +9,8 @@
 }
 
 @mixin mify {
-  @include uify;
   margin-left: 0.5rem;
+  @include uify;
 
   &::before {
     background-color: var(--text-link);

client/src/ui/base/_themes.scss

@@ -306,14 +306,14 @@
   --curriculum-scrim-bg: url("../../assets/curriculum-scrim-bg.svg#light");
   --curriculum-landing-arrow: url("../../assets/curriculum-landing-arrow.svg#light");
 
+  color-scheme: light;
+
   @media (min-width: $screen-md) {
     --curriculum-landing-started-beginner: url("../../assets/icons/curriculum-landing-started-beginner.svg#light");
     --curriculum-landing-started-advanced: url("../../assets/icons/curriculum-landing-started-advanced.svg#light");
     --curriculum-landing-started-employment: url("../../assets/icons/curriculum-landing-started-employment.svg#light");
     --curriculum-landing-started-educator: url("../../assets/icons/curriculum-landing-started-educator.svg#light");
   }
-
-  color-scheme: light;
 }
 
 @mixin dark-theme {
@@ -621,14 +621,14 @@
   --curriculum-scrim-bg: url("../../assets/curriculum-scrim-bg.svg#dark");
   --curriculum-landing-arrow: url("../../assets/curriculum-landing-arrow.svg#dark");
 
+  color-scheme: dark;
+
   @media (min-width: $screen-md) {
     --curriculum-landing-started-beginner: url("../../assets/icons/curriculum-landing-started-beginner.svg#dark");
     --curriculum-landing-started-advanced: url("../../assets/icons/curriculum-landing-started-advanced.svg#dark");
     --curriculum-landing-started-employment: url("../../assets/icons/curriculum-landing-started-employment.svg#dark");
     --curriculum-landing-started-educator: url("../../assets/icons/curriculum-landing-started-educator.svg#dark");
   }
-
-  color-scheme: dark;
 }
 
 body,

client/src/ui/organisms/placement/index.scss

@@ -20,11 +20,6 @@ section.place {
     --place-new-side-background: var(--place-new-side-background-light);
     --place-new-side-color: var(--place-new-side-color-light);
 
-    @media (prefers-color-scheme: dark) {
-      --place-new-side-background: var(--place-new-side-background-dark);
-      --place-new-side-color: var(--place-new-side-color-dark);
-    }
-
     --border-radius: 0.5rem;
     border: 1px solid var(--border-primary);
     border-radius: var(--border-radius);
@@ -35,6 +30,11 @@ section.place {
     position: relative;
     width: 11rem;
 
+    @media (prefers-color-scheme: dark) {
+      --place-new-side-background: var(--place-new-side-background-dark);
+      --place-new-side-color: var(--place-new-side-color-dark);
+    }
+
     .pong-note {
       background-color: var(--place-new-side-color);
       border: 1px solid var(--place-new-side-background);
@@ -311,18 +311,17 @@ section.place.hp-main {
   --place-top-cta-background: var(--place-top-cta-background-light);
   --place-top-cta-color: var(--place-top-cta-color-light);
 
+  background-color: var(--place-top-background);
+  border-bottom: 1px solid var(--border-primary);
+  height: var(--top-banner-height);
+
   @media (prefers-color-scheme: dark) {
     --place-top-background: var(--place-top-background-dark);
     --place-top-color: var(--place-top-color-dark);
     --place-top-cta-background: var(--place-top-cta-background-dark);
     --place-top-cta-color: var(--place-top-cta-color-dark);
   }
 
-  background-color: var(--place-top-background);
-
-  border-bottom: 1px solid var(--border-primary);
-  height: var(--top-banner-height);
-
   &.fallback {
     position: initial;
   }

kumascript/macros/LearnSidebar.ejs

@@ -286,6 +286,8 @@ const l10nStrings = mdn.localStringMap({
       'Accessibility_assessment' : 'Accessibility assessment',
     'Performance' : 'パフォーマンス — ウェブサイトを高速かつ応答性の高いものにする',
       'Performance_guides' : 'パフォーマンスガイド',
+    'MathML_Writing_mathematics' : 'MathML — MathML を使用して数学を記述する',
+      'MathML_first_steps': 'MathML の最初のステップ',
     'Games_Developing_for_web' : 'ゲーム — ウェブ用ゲームの開発',
       'Guides_and_tutorials': 'ガイドとチュートリアル',
     'Tools_and_testing' : 'ツールとテスト',