CSS在DevTools 中架構(gòu)演變？
你好，我是小弋。
這片文章描述了DevTools 架構(gòu)在CSS層面所做的更改。
本文主要解釋 CSS 在歷史上如何在 DevTools 中工作，以及如何在 DevTools 中現(xiàn)代化我們的 CSS，以準備(最終)遷移到用于在 JavaScript 文件中加載 CSS 的 Web 標準解決方案。
DevTools 中 CSS 的先前狀態(tài)
DevTools 以兩種不同的方式實現(xiàn) CSS：
- 一種用于DevTools遺留部分中使用的 CSS 文件
- 另一種用于 DevTools 中使用的現(xiàn)代 Web 組件。
對于第一種遺留部分的來說，我們翻開Chromium源碼，可以大致猜想它的實現(xiàn)：
Chromium源碼
DevTools 中的 CSS 實現(xiàn)是多年前定義的，現(xiàn)在已經(jīng)過時了。DevTools 一直堅持使用該module.json模式，
那么我們來看下這個文件具體形式是如何的：
module.json
這些CSS文件會被放在同一個目錄下，為了將添加到 DevTools，您需要registerRequiredCSS使用要加載的文件的確切路徑進行調(diào)用。
那么它的調(diào)用如下：
- constructor() {
- …
- this.registerRequiredCSS('ui/legacy/components/quick_open/filteredListWidget.css');
- …
- }
通過檢索CSS文件的內(nèi)容后，通過appendStyle函數(shù)將內(nèi)容插入到 <style>標簽中，
- const content = Root.Runtime.cachedResources.get(cssFile) || '';
- if (!content) {
- console.error(cssFile + ' not preloaded. Check module.json');
- }
- const styleElement = document.createElement('style');
- styleElement.textContent = content;
- node.appendChild(styleElement);
但是，假設(shè)我們引入現(xiàn)代 Web 組件(使用自定義元素)時，我們最初決定在組件文件中通過內(nèi)聯(lián)style>使用CSS。這帶來了自己的挑戰(zhàn)：
- 缺少語法高亮支持：為內(nèi)聯(lián)CSS提供語法高亮的插件往往不如為寫在.css文件中的CSS提供的語法高亮和自動完成功能好。
- 建立性能開銷：內(nèi)聯(lián)CSS也意味著需要進行兩次檢查：一次針對CSS文件，一次針對內(nèi)聯(lián)CSS。如果所有的CSS都寫在獨立的CSS文件中，我們就可以消除這種性能開銷。
- 減化體積的挑戰(zhàn)。內(nèi)聯(lián) CSS 不容易縮小，因此沒有任何 CSS 被縮小。DevTools 發(fā)布版本的文件大小也因同一 Web 組件的多個實例引入的重復(fù) CSS 而增加。
基于以上的問題，那有哪些可以解決的方案呢?
研究潛在的解決方案
問題可以分為兩個不同的部分：
- 弄清楚構(gòu)建系統(tǒng)如何處理 CSS 文件。
- 弄清楚 DevTools 如何導(dǎo)入和使用 CSS 文件。
接下來我們看下，他們是如何為每個部分研究了不同的潛在解決方案，下面概述了這些解決方案。
導(dǎo)入 CSS 文件
在TypeScript文件中導(dǎo)入和利用CSS的目的是為了盡可能地貼近標準，在整個DevTools中執(zhí)行一致性，并避免在我們的HTML中重復(fù)CSS。我們還希望能夠選擇一個解決方案，使我們的變化能夠遷移到新的網(wǎng)絡(luò)平臺標準，如CSS模塊腳本。
由于這些原因，@import語句和標簽似乎并不適合DevTools。它們與DevTools其他部分的導(dǎo)入不一致，會導(dǎo)致Flash Of Unstyled Content(FOUC)的出現(xiàn)。遷移到CSS模塊腳本會更難，因為導(dǎo)入必須明確地添加，并且與標簽的處理方式不同。
- const output = LitHtml.html`
- <style> @import "css/styles.css"; </style>
- <button> Hello world </button>`
- const output = LitHtml.html`
- <link rel="stylesheet" href="styles.css">
- <button> Hello World </button>`
總結(jié)的話，潛在的解決方案是使用@import或。
相反，我們選擇找到一種方法，將CSS文件作為CSSStyleSheet對象導(dǎo)入，這樣我們就可以使用其adoptedStyleSheets屬性將其添加到Shadow Dom(DevTools使用Shadow DOM已經(jīng)有幾年了)。
至于Shadow DOM 不清楚的，可以參考：https://developers.google.com/web/fundamentals/web-components/shadowdom
使用 CSS 的新基礎(chǔ)架構(gòu)
我們需要一種將 CSS 文件轉(zhuǎn)換為CSSStyleSheet對象的方法，以便我們可以輕松地在 TypeScript 文件中對其進行操作。最后選擇放棄Rollup和webpack做轉(zhuǎn)化，可能考慮的原因在于，構(gòu)建過程中，將任何一個bundler 添加到生產(chǎn)構(gòu)建中都可能存在潛在的性能問題。
我們與Chromium的GN構(gòu)建系統(tǒng)的整合使得捆綁更加困難，因此捆綁器往往不能很好地與當(dāng)前的Chromium構(gòu)建系統(tǒng)整合。
相反，我們探索了使用當(dāng)前 GN 構(gòu)建系統(tǒng)為我們進行這種轉(zhuǎn)換的選項。
新的解決方案涉及到使用adoptedStyleSheets向特定的Shadow DOM添加樣式，同時使用GN構(gòu)建系統(tǒng)來生成可被文檔或ShadowRoot采用的CSSStyleSheet對象。
- // CustomButton.ts
- // Import the CSS style sheet contents from a JS file generated from CSS
- import customButtonStyles from './customButton.css.js';
- import otherStyles from './otherStyles.css.js';
- export class CustomButton extends HTMLElement{
- …
- connectedCallback(): void {
- // Add the styles to the shadow root scope
- this.shadow.adoptedStyleSheets = [customButtonStyles, otherStyles];
- }
- }
使用adoptedStyleSheets有多種好處，包括：
- 它正在成為一個現(xiàn)代的標準。
- 防止重復(fù)的CSS。
- 只對Shadow DOM應(yīng)用樣式，這就避免了CSS文件中重復(fù)的類名或ID選擇器引起的問題。
- 易于遷移到未來的網(wǎng)絡(luò)標準，如CSS模塊腳本和導(dǎo)入斷言。
該解決方案的唯一注意事項是，導(dǎo)入語句需要導(dǎo)入.css.js文件。為了讓GN在構(gòu)建過程中生成一個CSS文件，我們編寫了generate_css_js_files.js腳本。構(gòu)建系統(tǒng)現(xiàn)在處理每一個CSS文件，并將其轉(zhuǎn)換為一個JavaScript文件，該文件默認導(dǎo)出一個CSSStyleSheet對象。因為我們可以導(dǎo)入CSS文件并輕松地采用它。此外，我們現(xiàn)在還可以輕松地對生產(chǎn)構(gòu)建進行最小化，節(jié)省文件大小。
iconButton.css.js 生成的例子：
- const styles = new CSSStyleSheet();
- styles.replaceSync(
- // In production, we also minify our CSS styles
- /`${isDebug ? output : cleanCSS.minify(output).styles}
- /*# sourceURL=${fileName} */`/
- );
- export default styles;
后續(xù)計劃
到目前為止，Chromium DevTools 中的所有 Web 組件都已遷移到使用新的 CSS 基礎(chǔ)架構(gòu)，而不是使用內(nèi)聯(lián)樣式。大多數(shù)遺留用法registerRequiredCSS也已遷移到使用新系統(tǒng)。剩下的就是刪除盡可能多的module.json文件，然后遷移當(dāng)前的基礎(chǔ)架構(gòu)以在未來實現(xiàn) CSS 模塊腳本!
參考
[1]https://developer.chrome.com/blog/modernising-css-infra-in-devtools/
[2]https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/Treeoutline.ts
[3] https://developer.chrome.com/blog/migrating-to-web-components
