web: Use nesting in css

web/package-lock.json

@@ -619,6 +619,28 @@
                 "@csstools/css-tokenizer": "^2.4.1"
             }
         },
+        "node_modules/@csstools/selector-resolve-nested": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@csstools/selector-resolve-nested/-/selector-resolve-nested-1.1.0.tgz",
+            "integrity": "sha512-uWvSaeRcHyeNenKg8tp17EVDRkpflmdyvbE0DHo6D/GdBb6PDnCYYU6gRpXhtICMGMcahQmj2zGxwFM/WC8hCg==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/csstools"
+                },
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/csstools"
+                }
+            ],
+            "engines": {
+                "node": "^14 || ^16 || >=18"
+            },
+            "peerDependencies": {
+                "postcss-selector-parser": "^6.0.13"
+            }
+        },
         "node_modules/@csstools/selector-specificity": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.1.1.tgz",
@@ -3895,6 +3917,7 @@
             "version": "10.4.19",
             "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz",
             "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==",
+            "dev": true,
             "funding": [
                 {
                     "type": "opencollective",
@@ -4180,6 +4203,7 @@
             "version": "4.23.1",
             "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.1.tgz",
             "integrity": "sha512-TUfofFo/KsK/bWZ9TWQ5O26tsWW4Uhmt8IYklbnUa70udB6P2wA7w7o4PY4muaEPBQaAX+CEnmmIA41NVHtPVw==",
+            "dev": true,
             "funding": [
                 {
                     "type": "opencollective",
@@ -4422,6 +4446,7 @@
             "version": "1.0.30001636",
             "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001636.tgz",
             "integrity": "sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg==",
+            "dev": true,
             "funding": [
                 {
                     "type": "opencollective",
@@ -6197,6 +6222,7 @@
             "version": "1.4.810",
             "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.810.tgz",
             "integrity": "sha512-Kaxhu4T7SJGpRQx99tq216gCq2nMxJo+uuT6uzz9l8TVN2stL7M06MIIXAtr9jsrLs2Glflgf2vMQRepxawOdQ==",
+            "dev": true,
             "license": "ISC"
         },
         "node_modules/emoji-regex": {
@@ -6359,6 +6385,7 @@
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
             "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
+            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=6"
@@ -7441,6 +7468,7 @@
             "version": "4.3.7",
             "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
             "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+            "dev": true,
             "engines": {
                 "node": "*"
             },
@@ -10514,6 +10542,7 @@
             "version": "3.3.7",
             "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
             "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+            "dev": true,
             "funding": [
                 {
                     "type": "github",
@@ -10615,6 +10644,7 @@
             "version": "2.0.14",
             "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
             "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
+            "dev": true,
             "license": "MIT"
         },
         "node_modules/node-request-interceptor": {
@@ -10659,6 +10689,7 @@
             "version": "0.1.2",
             "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
             "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+            "dev": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -11267,6 +11298,7 @@
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
             "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
+            "dev": true,
             "license": "ISC"
         },
         "node_modules/picomatch": {
@@ -11355,6 +11387,7 @@
             "version": "8.4.39",
             "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
             "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
+            "dev": true,
             "funding": [
                 {
                     "type": "opencollective",
@@ -11609,6 +11642,33 @@
                 "postcss": "^8.4.31"
             }
         },
+        "node_modules/postcss-nesting": {
+            "version": "12.1.5",
+            "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.1.5.tgz",
+            "integrity": "sha512-N1NgI1PDCiAGWPTYrwqm8wpjv0bgDmkYHH72pNsqTCv9CObxjxftdYu6AKtGN+pnJa7FQjMm3v4sp8QJbFsYdQ==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/csstools"
+                },
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/csstools"
+                }
+            ],
+            "dependencies": {
+                "@csstools/selector-resolve-nested": "^1.1.0",
+                "@csstools/selector-specificity": "^3.1.1",
+                "postcss-selector-parser": "^6.1.0"
+            },
+            "engines": {
+                "node": "^14 || ^16 || >=18"
+            },
+            "peerDependencies": {
+                "postcss": "^8.4"
+            }
+        },
         "node_modules/postcss-normalize-charset": {
             "version": "7.0.0",
             "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-7.0.0.tgz",
@@ -11887,6 +11947,7 @@
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
             "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+            "dev": true,
             "license": "MIT"
         },
         "node_modules/postcss-zindex": {
@@ -13625,6 +13686,7 @@
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
             "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+            "dev": true,
             "license": "BSD-3-Clause",
             "engines": {
                 "node": ">=0.10.0"
@@ -14947,6 +15009,7 @@
             "version": "1.0.16",
             "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.16.tgz",
             "integrity": "sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==",
+            "dev": true,
             "funding": [
                 {
                     "type": "opencollective",
@@ -16168,7 +16231,6 @@
             "version": "0.1.0",
             "license": "(MIT OR Apache-2.0)",
             "dependencies": {
-                "autoprefixer": "^10.4.19",
                 "wasm-feature-detect": "^1.6.2"
             },
             "devDependencies": {
@@ -16176,10 +16238,12 @@
                 "@fluent/langneg": "^0.7.0",
                 "@tsconfig/strictest": "^2.0.5",
                 "@types/mocha": "^10.0.7",
+                "autoprefixer": "^10.4.19",
                 "cssnano": "^7.0.4",
                 "cssnano-preset-advanced": "^7.0.4",
                 "mocha": "^10.6.0",
                 "postcss": "^8.4.39",
+                "postcss-nesting": "^12.1.5",
                 "replace-in-file": "^8.1.0",
                 "tsx": "^4.16.2",
                 "tsx-dom": "^3.0.1",

web/packages/core/package.json

@@ -30,6 +30,7 @@
         "cssnano-preset-advanced": "^7.0.4",
         "mocha": "^10.6.0",
         "postcss": "^8.4.39",
+        "postcss-nesting": "^12.1.5",
         "replace-in-file": "^8.1.0",
         "tsx": "^4.16.2",
         "tsx-dom": "^3.0.1",

web/packages/core/src/internal/ui/static-styles.css

@@ -16,15 +16,15 @@
     touch-action: none;
     user-select: none;
     -webkit-tap-highlight-color: transparent;
-}
 
-/* Ruffle's width/height CSS interferes with Safari's fullscreen CSS. */
+    /* Ruffle's width/height CSS interferes with Safari's fullscreen CSS. */
 
-/* Ensure that Safari's fullscreen mode actually fills the screen. */
+    /* Ensure that Safari's fullscreen mode actually fills the screen. */
-:host(:-webkit-full-screen) {
+    & (:-webkit-full-screen) {
         display: block;
         width: 100% !important;
         height: 100% !important;
+    }
 }
 
 .hidden {
@@ -45,11 +45,11 @@
 
 #container {
     overflow: hidden;
-}
 
-#container canvas {
+    canvas {
         width: 100%;
         height: 100%;
+    }
 }
 
 #play-button,
@@ -90,11 +90,11 @@
     display: flex;
     flex-flow: column;
     justify-content: space-around;
-}
 
-#panic a {
+    a {
         color: var(--ruffle-blue);
         font-weight: bold;
+    }
 }
 
 #panic-title {
@@ -102,15 +102,17 @@
     font-weight: bold;
 }
 
-#panic-body.details {
+#panic-body {
+    & .details {
         flex: 0.9;
         margin: 0 10px;
-}
+    }
 
-#panic-body textarea {
+    textarea {
         width: 100%;
         height: 100%;
         resize: none;
+    }
 }
 
 #panic ul {
@@ -130,29 +132,28 @@
     align-items: center;
     justify-content: center;
     overflow: auto;
-}
 
-#message-overlay .message {
+    .message {
         text-align: center;
         max-height: 100%;
         max-width: 100%;
         padding: 5%;
         font-size: 20px;
-}
+    }
 
-#message-overlay p {
+    p {
         margin: 0.5em 0;
-}
+    }
 
-#message-overlay .message div {
+    .message div {
         display: flex;
         justify-content: center;
         flex-wrap: wrap;
         column-gap: 1em;
-}
+    }
 
-#message-overlay a,
+    a,
-#message-overlay button {
+    button {
         cursor: pointer;
         background: var(--ruffle-blue);
         color: var(--ruffle-orange);
@@ -163,11 +164,12 @@
         padding: 10px;
         text-decoration: none;
         margin: 2% 0;
-}
+    }
 
-#message-overlay a:hover,
+    a:hover,
-#message-overlay button:hover {
+    button:hover {
         background: #ffffff4c;
+    }
 }
 
 #continue-btn {
@@ -179,10 +181,10 @@
     font-size: 20px;
     border-radius: 20px;
     padding: 10px;
-}
 
-#continue-btn:hover {
+    &:hover {
         background: #ffffff4c;
+    }
 }
 
 #context-menu-overlay,
@@ -205,26 +207,26 @@
     white-space: nowrap;
     padding: 3px 0;
     margin: 0;
-}
 
-#context-menu .menu-item {
+    .menu-item {
         padding: 5px 10px;
         color: rgb(var(--modal-foreground-rgb));
-}
+    }
 
-#context-menu .menu-item.disabled {
+    .menu-item.disabled {
         cursor: default;
         color: rgba(var(--modal-foreground-rgb), 0.5);
-}
+    }
 
-#context-menu .menu-item:not(.disabled):hover {
+    .menu-item:not(.disabled):hover {
         background-color: rgba(var(--modal-foreground-rgb), 0.15);
-}
+    }
 
-#context-menu .menu-separator hr {
+    .menu-separator hr {
         border: none;
         border-bottom: 1px solid rgba(var(--modal-foreground-rgb), 0.2);
         margin: 3px;
+    }
 }
 
 #splash-screen {
@@ -347,16 +349,16 @@
     display: block;
     height: calc(100% - 45px);
     min-height: 30px;
-}
 
-#local-saves td {
+    td {
         border-bottom: 2px solid rgba(var(--modal-foreground-rgb), 0.15);
         height: 30px;
-}
+    }
 
-#local-saves td:nth-child(1) {
+    td:nth-child(1) {
         width: 100%;
         word-break: break-all;
+    }
 }
 
 .save-option {

web/packages/core/tools/bundle_css.ts

@@ -2,12 +2,15 @@ import { replaceInFileSync } from "replace-in-file";
 import fs from "fs";
 import postcss from "postcss";
 import cssnanoPlugin from "cssnano";
+// @ts-expect-error TS7016 We don't care about the types, if it doesn't work that's fine
+import postcssNesting from "postcss-nesting";
 
 const originalCss = fs
     .readFileSync("src/internal/ui/static-styles.css", "utf8")
     .replaceAll("\r", "");
 
 const processor = postcss([
+    postcssNesting,
     cssnanoPlugin({
         preset: ["advanced", { autoprefixer: { add: true } }],
     }),