Lemonj：類 CSS 的自動化重構工具
最近，在幫助一家大型公司的大型前端項目設計和構建前端體系，期間和我同事 @Liuuy 討論起了 CSS 的架構和設計問題。開發人員對于 CSS 及其 CSS 預處理器的使用是一個很有意思的問題 —— 過去，我一直在吐槽這些想寫好 CSS 的人，卻是一點兒也不想高認真學習 CSS。
于是，在我們的討論之下，我借助了在編寫 Coca 的經驗，設計和驗證了自動化重構的可能性。由我的同事完成了 TypeScript 的 CSS 自動化重構工具：Lemonj —— 名字是我取的 。
Lemonj
GitHub：https://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 的功能在完善中，歡迎大家看看你們有哪些場景適合自動化重構。
最后，記得我們的 GitHub：https://github.com/twfe/lemonj
冰河 本文轉載自微信公眾號「phodal」，可以通過以下二維碼關注。轉載本文請聯系phodal公眾號。
