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