Lemonj：類 CSS 的自動化重構(gòu)工具

作者： Phodal 2020-12-01 07:01:41

開發(fā)人員對于 CSS 及其 CSS 預(yù)處理器的使用是一個(gè)很有意思的問題 —— 過去，我一直在吐槽這些想寫好 CSS 的人，卻是一點(diǎn)兒也不想高認(rèn)真學(xué)習(xí) CSS。

最近，在幫助一家大型公司的大型前端項(xiàng)目設(shè)計(jì)和構(gòu)建前端體系，期間和我同事 @Liuuy 討論起了 CSS 的架構(gòu)和設(shè)計(jì)問題。開發(fā)人員對于 CSS 及其 CSS 預(yù)處理器的使用是一個(gè)很有意思的問題 —— 過去，我一直在吐槽這些想寫好 CSS 的人，卻是一點(diǎn)兒也不想高認(rèn)真學(xué)習(xí) CSS。

于是，在我們的討論之下，我借助了在編寫 Coca 的經(jīng)驗(yàn)，設(shè)計(jì)和驗(yàn)證了自動化重構(gòu)的可能性。由我的同事完成了 TypeScript 的 CSS 自動化重構(gòu)工具：Lemonj —— 名字是我取的。

Lemonj

GitHub：https://github.com/twfe/lemonj

Lemonj 是一個(gè)面向 CSS/LESS/SCSS 的分析、壞味道檢查和自動化重構(gòu)工具。

從架構(gòu)上來說，它就是通過 Antlr + Antlr4TS 生成對應(yīng)的解析器生成器，而后根據(jù)需要處理所需的字段對相應(yīng)的內(nèi)容進(jìn)行標(biāo)記。隨后，根據(jù)我們的需要和設(shè)計(jì)，通過 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)換工具。它們都是一鍵式的上傳一個(gè)類 CSS 文件，從中提取語法樹，轉(zhuǎn)換到新的形式上。而要實(shí)現(xiàn)不同預(yù)處理器的轉(zhuǎn)換，你可能還需要多個(gè)轉(zhuǎn)換工具。而且它們只能在一個(gè)文件上修改，而你的代碼是分散在代碼庫中。

Lemonj 自動化重構(gòu) CSS 工具。也是分析語法樹，從中提取文件的信息，但不能直接轉(zhuǎn)換到新的形式上。而是要分析出代碼中的問題，結(jié)合 AST 中獲取到的位置信息，再回到指定的文件中對它們進(jìn)行自動化修改。

你可以認(rèn)為一個(gè)是在現(xiàn)有的代碼基本上自動修改，一個(gè)是則是普通的轉(zhuǎn)換工具 —— 畢竟根據(jù)位置修改是一個(gè)累人的工作。

使用 Lemonj 進(jìn)行 CSS 自動化重構(gòu)

1.先安裝 Lemonj，即： npm install lemonj -g 又或者是： yarn global add lemonj

2.使用 Lemonj 分析下代碼： lemonj analysis _fixtures，這里的 _fixtures 是個(gè)目錄。

過程中，會生成對應(yīng)的壞味道數(shù)據(jù)：

Code Smell: { 
colors: 24, 
importants: 4, 
issues: 8, 
mediaQueries: 1, 
absolute: 0, 
oddWidth: 1 
}

因?yàn)閴奈兜拦δ芴胀?，所以我們暫時(shí)沒有增強(qiáng)，并非我們的核心競爭力所在。除此，在執(zhí)行 anlaysis 的時(shí)候，還會生成一些額外的信息，比如顏色的 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