From 1c8e95a061a40ccd4b2fdca30a66eb7cc2fbe12d Mon Sep 17 00:00:00 2001 From: Nathan Adams Date: Fri, 19 Jul 2024 17:43:10 +0200 Subject: [PATCH] web: Use nesting in css --- web/package-lock.json | 66 ++++++- web/packages/core/package.json | 1 + .../core/src/internal/ui/static-styles.css | 168 +++++++++--------- web/packages/core/tools/bundle_css.ts | 3 + 4 files changed, 154 insertions(+), 84 deletions(-) diff --git a/web/package-lock.json b/web/package-lock.json index f95c51608..a3d429b2c 100644 --- a/web/package-lock.json +++ b/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", diff --git a/web/packages/core/package.json b/web/packages/core/package.json index 48f7bf7de..6897e0de5 100644 --- a/web/packages/core/package.json +++ b/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", diff --git a/web/packages/core/src/internal/ui/static-styles.css b/web/packages/core/src/internal/ui/static-styles.css index 6e0e4f37e..cca8980b0 100644 --- a/web/packages/core/src/internal/ui/static-styles.css +++ b/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. */ -:host(:-webkit-full-screen) { - display: block; - width: 100% !important; - height: 100% !important; + /* Ensure that Safari's fullscreen mode actually fills the screen. */ + & (:-webkit-full-screen) { + display: block; + width: 100% !important; + height: 100% !important; + } } .hidden { @@ -45,11 +45,11 @@ #container { overflow: hidden; -} -#container canvas { - width: 100%; - height: 100%; + canvas { + width: 100%; + height: 100%; + } } #play-button, @@ -90,11 +90,11 @@ display: flex; flex-flow: column; justify-content: space-around; -} -#panic a { - color: var(--ruffle-blue); - font-weight: bold; + a { + color: var(--ruffle-blue); + font-weight: bold; + } } #panic-title { @@ -102,15 +102,17 @@ font-weight: bold; } -#panic-body.details { - flex: 0.9; - margin: 0 10px; -} +#panic-body { + & .details { + flex: 0.9; + margin: 0 10px; + } -#panic-body textarea { - width: 100%; - height: 100%; - resize: none; + textarea { + width: 100%; + height: 100%; + resize: none; + } } #panic ul { @@ -130,44 +132,44 @@ align-items: center; justify-content: center; overflow: auto; -} -#message-overlay .message { - text-align: center; - max-height: 100%; - max-width: 100%; - padding: 5%; - font-size: 20px; -} + .message { + text-align: center; + max-height: 100%; + max-width: 100%; + padding: 5%; + font-size: 20px; + } -#message-overlay p { - margin: 0.5em 0; -} + p { + margin: 0.5em 0; + } -#message-overlay .message div { - display: flex; - justify-content: center; - flex-wrap: wrap; - column-gap: 1em; -} + .message div { + display: flex; + justify-content: center; + flex-wrap: wrap; + column-gap: 1em; + } -#message-overlay a, -#message-overlay button { - cursor: pointer; - background: var(--ruffle-blue); - color: var(--ruffle-orange); - border: 2px solid var(--ruffle-orange); - font-weight: bold; - font-size: 1.25em; - border-radius: 0.6em; - padding: 10px; - text-decoration: none; - margin: 2% 0; -} + a, + button { + cursor: pointer; + background: var(--ruffle-blue); + color: var(--ruffle-orange); + border: 2px solid var(--ruffle-orange); + font-weight: bold; + font-size: 1.25em; + border-radius: 0.6em; + padding: 10px; + text-decoration: none; + margin: 2% 0; + } -#message-overlay a:hover, -#message-overlay button:hover { - background: #ffffff4c; + a:hover, + button:hover { + background: #ffffff4c; + } } #continue-btn { @@ -179,10 +181,10 @@ font-size: 20px; border-radius: 20px; padding: 10px; -} -#continue-btn:hover { - background: #ffffff4c; + &:hover { + background: #ffffff4c; + } } #context-menu-overlay, @@ -205,26 +207,26 @@ white-space: nowrap; padding: 3px 0; margin: 0; -} -#context-menu .menu-item { - padding: 5px 10px; - color: rgb(var(--modal-foreground-rgb)); -} + .menu-item { + padding: 5px 10px; + color: rgb(var(--modal-foreground-rgb)); + } -#context-menu .menu-item.disabled { - cursor: default; - color: rgba(var(--modal-foreground-rgb), 0.5); -} + .menu-item.disabled { + cursor: default; + color: rgba(var(--modal-foreground-rgb), 0.5); + } -#context-menu .menu-item:not(.disabled):hover { - background-color: rgba(var(--modal-foreground-rgb), 0.15); -} + .menu-item:not(.disabled):hover { + background-color: rgba(var(--modal-foreground-rgb), 0.15); + } -#context-menu .menu-separator hr { - border: none; - border-bottom: 1px solid rgba(var(--modal-foreground-rgb), 0.2); - margin: 3px; + .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 { - border-bottom: 2px solid rgba(var(--modal-foreground-rgb), 0.15); - height: 30px; -} + td { + border-bottom: 2px solid rgba(var(--modal-foreground-rgb), 0.15); + height: 30px; + } -#local-saves td:nth-child(1) { - width: 100%; - word-break: break-all; + td:nth-child(1) { + width: 100%; + word-break: break-all; + } } .save-option { diff --git a/web/packages/core/tools/bundle_css.ts b/web/packages/core/tools/bundle_css.ts index dcc6bc7da..edd28c15b 100644 --- a/web/packages/core/tools/bundle_css.ts +++ b/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 } }], }),