Lemonj：類 CSS 的自動化重構(gòu)工具
最近，在幫助一家大型公司的大型前端項目設(shè)計和構(gòu)建前端體系，期間和我同事 @Liuuy 討論起了 CSS 的架構(gòu)和設(shè)計問題。開發(fā)人員對于 CSS 及其 CSS 預(yù)處理器的使用是一個很有意思的問題 —— 過去，我一直在吐槽這些想寫好 CSS 的人，卻是一點兒也不想高認(rèn)真學(xué)習(xí) CSS。
于是，在我們的討論之下，我借助了在編寫 Coca 的經(jīng)驗，設(shè)計和驗證了自動化重構(gòu)的可能性。由我的同事完成了 TypeScript 的 CSS 自動化重構(gòu)工具：Lemonj —— 名字是我取的 。
Lemonj
GitHub：https://github.com/twfe/lemonj
Lemonj 是一個面向 CSS/LESS/SCSS 的分析、壞味道檢查和自動化重構(gòu)工具。
從架構(gòu)上來說，它就是通過 Antlr + Antlr4TS 生成對應(yīng)的解析器生成器，而后根據(jù)需要處理所需的字段對相應(yīng)的內(nèi)容進行標(biāo)記。隨后，根據(jù)我們的需要和設(shè)計，通過 AST 中的位置信息，修改對應(yīng)的內(nèi)容值。
如 importants 數(shù)量分析中的代碼：
- if (Checker.hasImportant(propertyValue)) {
- if (!this.metadata.importants) {
- this.metadata.importants = [];
- }
- this.metadata.importants.push({
- type: '!important',
- file: this.metadata.filePath,
- line: ctx._start.line,
- });
- }
它便是獲取 CSS 屬性中的內(nèi)容，檢查是否有 !important，然后記錄一下位置信息。
與 CSS 轉(zhuǎn)換器的不同之處
或許你也用過各類的 CSS/LESS/SAAS 轉(zhuǎn)換工具，所以會好奇它們與 Lemonj 的相似與不同之處在哪里。
CSS 轉(zhuǎn) CSS 預(yù)處理器轉(zhuǎn)換工具。它們都是一鍵式的上傳一個類 CSS 文件，從中提取語法樹，轉(zhuǎn)換到新的形式上。而要實現(xiàn)不同預(yù)處理器的轉(zhuǎn)換，你可能還需要多個轉(zhuǎn)換工具。而且它們只能在一個文件上修改，而你的代碼是分散在代碼庫中。
Lemonj 自動化重構(gòu) CSS 工具。也是分析語法樹，從中提取文件的信息，但不能直接轉(zhuǎn)換到新的形式上。而是要分析出代碼中的問題，結(jié)合 AST 中獲取到的位置信息，再回到指定的文件中對它們進行自動化修改。
你可以認(rèn)為一個是在現(xiàn)有的代碼基本上自動修改，一個是則是普通的轉(zhuǎn)換工具 —— 畢竟根據(jù)位置修改是一個累人的工作。
使用 Lemonj 進行 CSS 自動化重構(gòu)
1.先安裝 Lemonj，即： npm install lemonj -g 又或者是： yarn global add lemonj
2.使用 Lemonj 分析下代碼： lemonj analysis _fixtures，這里的 _fixtures 是個目錄。
過程中，會生成對應(yīng)的壞味道數(shù)據(jù)：
- Code Smell: {
- colors: 24,
- importants: 4,
- issues: 8,
- mediaQueries: 1,
- absolute: 0,
- oddWidth: 1
- }
因為壞味道功能太普通了，所以我們暫時沒有增強，并非我們的核心競爭力所在。除此，在執(zhí)行 anlaysis 的時候，還會生成一些額外的信息，比如顏色的 mapping 文件：
- // _fixtures/less/color/border.less
- @color1: #ddd;
- // _fixtures/less/color/border.less
- @color2: green;
- // _fixtures/less/color/rgba.less
- @color3: rgba(255, 0, 0, 0.3);
- // _fixtures/less/color/sample.less
- @color4: #ff7f50;
- // _fixtures/less/color/sample.less
- // _fixtures/less/color/sample2.less
- @color5: #800080;
- // _fixtures/less/color/sample.less
這里的顏色只是暫時的命名，需要根據(jù)具體的需要進行調(diào)整，如按設(shè)計系統(tǒng)的思想，將 color_1 改成 @primary_color。
3.執(zhí)行 lemonj refactor _fixtures 對代碼進行自動化重構(gòu)。就能將上一步中的代碼，進一步地修改到所有的代碼文件中。
嗯，重構(gòu)就是如此的簡單。
其它
Charj 的功能在完善中，歡迎大家看看你們有哪些場景適合自動化重構(gòu)。
最后，記得我們的 GitHub：https://github.com/twfe/lemonj
冰河 本文轉(zhuǎn)載自微信公眾號「phodal」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系phodal公眾號。
