From 104b2676272e86c89b2cca9bfd0b6a86ffb977c2 Mon Sep 17 00:00:00 2001 From: leefer Date: Sun, 2 Aug 2026 12:43:30 +0800 Subject: [PATCH] refactor: remove exact nested css duplicates --- app/config/architecture-inventory.json | 8 +- app/frontend/styles/redesign-v2.css | 15 ---- app/frontend/styles/styles.css | 65 --------------- app/tests/e2e/app-shell.spec.js | 24 ++++-- app/tests/preservation_helpers.py | 107 +++++++++++++++++++++++-- docs/governance/code-reduction.md | 27 +++++++ 6 files changed, 148 insertions(+), 98 deletions(-) diff --git a/app/config/architecture-inventory.json b/app/config/architecture-inventory.json index 53d0961..bf5f700 100644 --- a/app/config/architecture-inventory.json +++ b/app/config/architecture-inventory.json @@ -309,13 +309,13 @@ "code_hotspots": [ { "path": "frontend/styles/styles.css", - "bytes": 361501, - "lines": 15450 + "bytes": 360238, + "lines": 15385 }, { "path": "frontend/styles/redesign-v2.css", - "bytes": 263467, - "lines": 8569 + "bytes": 262826, + "lines": 8554 }, { "path": "frontend/index.html", diff --git a/app/frontend/styles/redesign-v2.css b/app/frontend/styles/redesign-v2.css index 83931ac..56f8eef 100644 --- a/app/frontend/styles/redesign-v2.css +++ b/app/frontend/styles/redesign-v2.css @@ -751,9 +751,6 @@ body.sidebar-collapsed .status-bar { left: 64px; } min-height: 50px; padding: 6px 8px; } - .market-tape { display: none; } - .header-actions { width: 100%; } - .header-command-group { position: absolute; } .module-nav, body.sidebar-collapsed .module-nav { inset: auto 0 0; @@ -769,14 +766,6 @@ body.sidebar-collapsed .status-bar { left: 64px; } border: 0; border-top: 1px solid var(--r2-line); } - .sidebar-brand, - .module-nav .nav-group-label, - .sidebar-collapse-button, - .module-nav .market-sub-tab { display: none; } - .module-nav .nav-group, - body.sidebar-collapsed .module-nav .nav-group { display: contents; } - .module-nav .module-tab, - body.sidebar-collapsed .module-nav .module-tab { display: none; } .module-nav .module-tab.mobile-primary-tab, body.sidebar-collapsed .module-nav .module-tab.mobile-primary-tab { min-height: 54px; @@ -789,12 +778,8 @@ body.sidebar-collapsed .status-bar { left: 64px; } padding: 3px 2px; font-size: 10px; } - .module-nav .module-tab.mobile-primary-tab span { display: inline; } .app-main { width: 100%; margin: 0; padding: 0 8px 16px; overflow: visible; } .overview-strip { margin-inline: -8px; padding-inline: 8px; overflow-x: auto; } - .overview-strip .metric:nth-of-type(n + 4), - .overview-strip .metric-wide { display: none; } - .overview-toggle { display: none; } .redesigned-page-head { align-items: flex-start; flex-wrap: wrap; margin-top: 12px; } .redesigned-page-head .section-title-group { width: 100%; flex-wrap: wrap; } .redesigned-page-head .toolbar-controls { width: 100%; margin-left: 0; justify-content: space-between; } diff --git a/app/frontend/styles/styles.css b/app/frontend/styles/styles.css index 819e6c4..06584bd 100644 --- a/app/frontend/styles/styles.css +++ b/app/frontend/styles/styles.css @@ -4775,10 +4775,6 @@ body.sidebar-collapsed .sidebar-collapse-button .lucide { } @media (min-width: 721px) and (max-width: 1279px) { - .market-tape { - display: none; - } - .app-header { grid-template-columns: 190px minmax(0, 1fr) auto; } @@ -4980,21 +4976,6 @@ body.sidebar-collapsed .sidebar-collapse-button .lucide { box-shadow: 0 -4px 18px rgba(24, 34, 45, 0.07); } - .module-nav .nav-brand, - .module-nav .nav-group-label, - .module-nav .market-sub-tab, - .module-nav .sidebar-collapse-button { - display: none; - } - - .module-nav .nav-group, - body.sidebar-collapsed .module-nav .nav-group { - display: contents; - margin: 0; - padding: 0; - border: 0; - } - .module-nav .module-tab, body.sidebar-collapsed .module-nav .module-tab { min-height: 54px; @@ -5009,11 +4990,6 @@ body.sidebar-collapsed .sidebar-collapse-button .lucide { text-align: center; } - .module-nav .module-tab.mobile-primary-tab, - body.sidebar-collapsed .module-nav .module-tab.mobile-primary-tab { - display: flex; - } - .module-nav .module-tab span, body.sidebar-collapsed .module-nav .module-tab span { display: block; @@ -13017,10 +12993,6 @@ button.account-role-badge:focus-visible { outline: 2px solid var(--blue); outlin } @media (max-width: 720px) { - body.mentor-directory-open { - overflow: hidden; - } - .mentor-layout { height: auto; min-height: 580px; @@ -14874,13 +14846,6 @@ dialog::backdrop { width: 100%; } - body, - body.sidebar-collapsed { - display: block; - min-height: 100dvh; - padding-bottom: calc(68px + env(safe-area-inset-bottom)); - } - .app-header { width: 100%; height: 108px; @@ -14893,10 +14858,6 @@ dialog::backdrop { background: rgba(255, 255, 255, .98); } - .brand-block { - height: 42px; - } - .brand-block .brand-mark, .brand-block .brand-logo { width: 34px; @@ -14912,20 +14873,6 @@ dialog::backdrop { font-size: 16px; } - .header-actions { - position: absolute; - inset: 56px 10px auto; - display: flex; - justify-content: space-between; - gap: 6px; - } - - .header-date-group { - height: 42px; - min-width: 0; - flex: 1; - } - .header-date-group .date-input { width: 112px; flex: 1; @@ -14937,12 +14884,6 @@ dialog::backdrop { min-width: 30px; } - .header-actions > .icon-button { - width: 40px; - min-width: 40px; - min-height: 42px; - } - .header-menu-button { display: grid; } @@ -15056,9 +14997,7 @@ dialog::backdrop { font-size: 14px; } - .overview-strip .metric:nth-of-type(1) { grid-column: 2; grid-row: 1; } .overview-strip .metric:nth-of-type(2) { grid-column: 3; grid-row: 1; border-right: 0; } - .overview-strip .metric:nth-of-type(3) { grid-column: 2; grid-row: 2; } .overview-strip .metric:nth-of-type(4) { grid-column: 3; grid-row: 2; border-right: 0; } .overview-strip .metric:nth-of-type(5) { grid-column: 1 / 2; grid-row: 3; border-bottom: 0; } .overview-strip .metric:nth-of-type(6) { grid-column: 2 / 4; grid-row: 3; border-right: 0; border-bottom: 0; } @@ -15315,10 +15254,6 @@ dialog::backdrop { overflow-y: auto; } - .curated-strategy-list { - grid-template-columns: 1fr; - } - .quant-universe-grid { grid-template-columns: 1fr 1fr; } diff --git a/app/tests/e2e/app-shell.spec.js b/app/tests/e2e/app-shell.spec.js index 3f7b743..e377bb4 100644 --- a/app/tests/e2e/app-shell.spec.js +++ b/app/tests/e2e/app-shell.spec.js @@ -1803,21 +1803,29 @@ test("heart breathing prepares once then contracts on each exhale", async ({ pag await expect(page.locator(".heart-breath-ripple span").first()).toHaveCSS("transition-duration", "4s"); }); -test("stylesheet layers do not repeat identical top-level rules", async ({ page }) => { +test("stylesheet layers do not repeat identical rules in the same cascade context", async ({ page }) => { await mockApplication(page, session("admin", true)); await page.goto("/index.html"); const duplicates = await page.evaluate(() => { const occurrences = new Map(); + const visitRules = (rules, href, context = []) => { + for (const rule of Array.from(rules || [])) { + if (typeof rule.selectorText === "string" && rule.style) { + const key = `${context.join("\u0001")}\u0000${rule.selectorText}\u0000${rule.style.cssText}`; + const rows = occurrences.get(key) || []; + rows.push(href); + occurrences.set(key, rows); + continue; + } + if (!rule.cssRules) continue; + const condition = rule.conditionText || rule.media?.mediaText || rule.name || ""; + visitRules(rule.cssRules, href, [...context, `${rule.type}:${condition}`]); + } + }; for (const sheet of Array.from(document.styleSheets)) { const href = sheet.href ? new URL(sheet.href).pathname : "inline"; - for (const rule of Array.from(sheet.cssRules || [])) { - if (typeof rule.selectorText !== "string" || !rule.style) continue; - const key = `${rule.selectorText}\u0000${rule.style.cssText}`; - const rows = occurrences.get(key) || []; - rows.push(href); - occurrences.set(key, rows); - } + visitRules(sheet.cssRules, href); } return Array.from(occurrences.entries()) .filter(([, paths]) => new Set(paths).size > 1) diff --git a/app/tests/preservation_helpers.py b/app/tests/preservation_helpers.py index 47d9db9..edb431c 100644 --- a/app/tests/preservation_helpers.py +++ b/app/tests/preservation_helpers.py @@ -29,10 +29,11 @@ RETIRED_FRONTEND_SOURCE_RANGES = ( ) AUDITED_FRONTEND_SOURCE_LINE_COUNT = 9283 -# CR-12 removes only declarations that are repeated verbatim by a later -# stylesheet layer under the same top-level cascade context. Keeping the exact -# source fragments here makes every other byte of the accepted CSS baseline a -# preservation requirement. +# CR-12 and CR-13 remove only declarations repeated by a later stylesheet +# layer under the same cascade context. Entries are either an exact retired +# fragment or an exact (source, replacement) pair when surrounding context is +# needed to identify one nested occurrence. Every other byte remains part of +# the accepted CSS baseline. AUDITED_CSS_RETIREMENTS = { "styles.css": ( ".workspace-view.active-view {\n display: block;\n}\n\n", @@ -44,6 +45,78 @@ AUDITED_CSS_RETIREMENTS = { " display: block;\n" "}\n\n" ), + ( + ( + "@media (min-width: 721px) and (max-width: 1279px) {\n" + " .market-tape {\n" + " display: none;\n" + " }\n\n" + " .app-header {" + ), + ( + "@media (min-width: 721px) and (max-width: 1279px) {\n" + " .app-header {" + ), + ), + ( + " .module-nav .nav-brand,\n" + " .module-nav .nav-group-label,\n" + " .module-nav .market-sub-tab,\n" + " .module-nav .sidebar-collapse-button {\n" + " display: none;\n" + " }\n\n" + ), + ( + " .module-nav .nav-group,\n" + " body.sidebar-collapsed .module-nav .nav-group {\n" + " display: contents;\n" + " margin: 0;\n" + " padding: 0;\n" + " border: 0;\n" + " }\n\n" + ), + ( + " .module-nav .module-tab.mobile-primary-tab,\n" + " body.sidebar-collapsed .module-nav .module-tab.mobile-primary-tab {\n" + " display: flex;\n" + " }\n\n" + ), + " body.mentor-directory-open {\n overflow: hidden;\n }\n\n", + ( + " body,\n" + " body.sidebar-collapsed {\n" + " display: block;\n" + " min-height: 100dvh;\n" + " padding-bottom: calc(68px + env(safe-area-inset-bottom));\n" + " }\n\n" + ), + " .brand-block {\n height: 42px;\n }\n\n", + ( + " .header-actions {\n" + " position: absolute;\n" + " inset: 56px 10px auto;\n" + " display: flex;\n" + " justify-content: space-between;\n" + " gap: 6px;\n" + " }\n\n" + ), + ( + " .header-date-group {\n" + " height: 42px;\n" + " min-width: 0;\n" + " flex: 1;\n" + " }\n\n" + ), + ( + " .header-actions > .icon-button {\n" + " width: 40px;\n" + " min-width: 40px;\n" + " min-height: 42px;\n" + " }\n\n" + ), + " .overview-strip .metric:nth-of-type(1) { grid-column: 2; grid-row: 1; }\n", + " .overview-strip .metric:nth-of-type(3) { grid-column: 2; grid-row: 2; }\n", + " .curated-strategy-list {\n grid-template-columns: 1fr;\n }\n\n", ), "renovation.css": ( ".overview-strip .sentiment-block { padding-left: 0; }\n", @@ -54,6 +127,27 @@ AUDITED_CSS_RETIREMENTS = { ), "redesign-v2.css": ( "#dragonView .dragon-operation-table .dragon-col-reason { width: auto; }\n", + ( + " .market-tape { display: none; }\n" + " .header-actions { width: 100%; }\n" + " .header-command-group { position: absolute; }\n" + ), + ( + " .sidebar-brand,\n" + " .module-nav .nav-group-label,\n" + " .sidebar-collapse-button,\n" + " .module-nav .market-sub-tab { display: none; }\n" + " .module-nav .nav-group,\n" + " body.sidebar-collapsed .module-nav .nav-group { display: contents; }\n" + " .module-nav .module-tab,\n" + " body.sidebar-collapsed .module-nav .module-tab { display: none; }\n" + ), + " .module-nav .module-tab.mobile-primary-tab span { display: inline; }\n", + ( + " .overview-strip .metric:nth-of-type(n + 4),\n" + " .overview-strip .metric-wide { display: none; }\n" + " .overview-toggle { display: none; }\n" + ), ), } @@ -154,8 +248,9 @@ def assert_moved_asset_matches( if original_relative in AUDITED_CSS_RETIREMENTS: original = (ORIGINAL_STATIC / original_relative).read_text(encoding="utf-8") for retired in AUDITED_CSS_RETIREMENTS[original_relative]: - testcase.assertEqual(original.count(retired), 1, retired) - original = original.replace(retired, "", 1) + source, replacement = retired if isinstance(retired, tuple) else (retired, "") + testcase.assertEqual(original.count(source), 1, source) + original = original.replace(source, replacement, 1) testcase.assertEqual( (FRONTEND_ROOT / target_relative).read_text(encoding="utf-8"), original, diff --git a/docs/governance/code-reduction.md b/docs/governance/code-reduction.md index ebfdec0..3d72ce0 100644 --- a/docs/governance/code-reduction.md +++ b/docs/governance/code-reduction.md @@ -321,6 +321,33 @@ 本批基线为`xiaobai-reduction-11-heaven-interpret-fix-20260802`；检查点为 `xiaobai-reduction-12-css-exact-duplicates-20260802`。 +## CR-13验收口径 + +- 本批只处理不同样式文件中、处于浏览器规范化后完全相同媒体条件下、选择器与完整CSSOM声明完全 + 相同的规则；不同媒体上下文、同文件重复、近似声明、动画和问天隔离样式继续保留。 +- 删除的必须是较早加载的副本，较晚样式层继续提供相同声明；媒体条件、规则顺序、选择器优先级、 + 变量、HTML、JavaScript和主题逻辑不得改变。 +- 保真门禁必须逐段登记允许退休的原始源码；浏览器门禁必须递归遍历嵌套规则，并只将同一上下文内 + 跨文件的完整重复判为失败。 +- 390×844明暗主题、1000×800中等宽度和1000×600低高度断点必须保持原计算样式与视觉结果。 + +## CR-13结果 + +- 浏览器CSSOM确认22组跨文件嵌套重复：1组位于721-1279px媒体条件，12组位于720px移动端条件， + 9组位于720px或1023px低高度复合条件；全部删除较早层副本，后层规则原样保留。 +- `styles.css`减少65行，`redesign-v2.css`减少15行，生产CSS合计净减少80行、约1.9 KB；没有新增 + 兼容覆盖、声明值、选择器或样式文件。 +- Playwright门禁由顶层扫描扩展为递归上下文扫描，修改后同一嵌套上下文的跨文件完整重复为0；同文件 + 重复和不同上下文规则不在本批范围，未被误删。 +- 1000×800和1000×600修改前后截图逐字节一致；390×844明暗主题的关键显示、定位、间距、网格、 + 溢出和导航状态一致，页面目视无差异。 +- 候选330项、CSS/前端契约33项、迁移对照63项及46项Playwright全部通过；24个JavaScript文件、 + API/架构注册表和SQLite完整性检查通过。 +- 本批不修改页面布局、颜色、字体、间距、主题、动画、业务功能、API、数据库、数据源、LLM或部署。 + +本批基线为`xiaobai-reduction-12-css-exact-duplicates-20260802`；检查点为 +`xiaobai-reduction-13-css-nested-duplicates-20260802`。 + ## 人工验收记录 - 2026-08-01：用户检查CR-02与CR-03运行结果，确认未发现明显异常。本记录仅表示本轮可见功能与