Lemonj： CSS 的自動化重構工具

最近，在幫助一家大型公司的大型前端項目設計和構建前端體系，期間和我同事 @Liuuy 討論起了 CSS 的架構和設計問題。開發人員對於 CSS 及其 CSS 預處理器的使用是一個頗有意思的問題 —— 過去，我一直在吐槽這些想寫好 CSS 的人，倒是一點兒也不想高認真學習 CSS。

因而，在咱們的討論之下，我藉助了在編寫 Coca 的經驗，設計和驗證了自動化重構的可能性。由個人同事完成了 TypeScript 的 CSS 自動化重構工具：Lemonj —— 名字是我取的 🍋🐔。

Lemonj

GitHub：github.com/twfe/lemonj

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

從架構上來講，它就是經過 Antlr + Antlr4TS 生成對應的解析器生成器，然後根據須要處理所需的字段對相應的內容進行標記。隨後，根據咱們的須要和設計，經過 AST 中的位置信息，修改對應的內容值。

如 importants 數量分析中的代碼：

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 屬性中的內容，檢查是否有 !important，而後記錄一下位置信息。

與 CSS 轉換器的不一樣之處

或許你也用過各種的 CSS/LESS/SAAS 轉換工具，因此會好奇它們與 Lemonj 的類似與不一樣之處在哪裏。

CSS 轉 CSS 預處理器轉換工具。它們都是一鍵式的上傳一個類 CSS 文件，從中提取語法樹，轉換到新的形式上。而要實現不一樣預處理器的轉換，你可能還須要多個轉換工具。並且它們只能在一個文件上修改，而你的代碼是分散在代碼庫中。

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

你能夠認爲一個是在現有的代碼基本上自動修改，一個是則是普通的轉換工具 —— 畢竟根據位置修改是一個累人的工做。

使用 Lemonj 進行 CSS 自動化重構

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

2.使用 Lemonj 分析下代碼：lemonj analysis _fixtures，這裏的 _fixtures 是個目錄。

過程當中，會生成對應的壞味道數據：

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

由於壞味道功能太普通了，因此咱們暫時沒有加強，並不是咱們的核心競爭力所在。除此，在執行 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
複製代碼

這裏的顏色只是暫時的命名，須要根據具體的須要進行調整，如按設計系統的思想，將 color_1 改爲 @primary_color。

3.執行 lemonj refactor _fixtures 對代碼進行自動化重構。就能將上一步中的代碼，進一步地修改到全部的代碼文件中。

嗯，重構就是如此的簡單。

其它

Charj 的功能在完善中，歡迎你們看看大家有哪些場景適合自動化重構。