CSS/LESS/SCSS 自动重构、坏味道检查工具。
- 重构
- CSS 颜色自动抽离重构变量
- 坏味道
- 字体
- 奇数宽度
importantsposition: absolutemediaQueries
npm install lemonj -g
或者
yarn global add lemonj
我们要重构 \_fixtures 文件夹下 less 样式文件:
- 分析文件
lemonj analysis _fixtures
输出代码坏味道:
Code Smell: {
colors: 24,
importants: 4,
issues: 8,
mediaQueries: 1,
absolute: 0,
oddWidth: 1
}
- 每种颜色都重构为一个变量在
mappings.less中,你可以修改对应的颜色:
// _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 @color6: red; // _fixtures/less/color/sample.less // _fixtures/less/color/sample.less @color7: #428bca; // _fixtures/less/color/sample.less @color8: #fff; // _fixtures/less/color/sample2.less @color9: #000000;
- 运行重构命令:
lemonj refactor _fixtures
此时每个写死的颜色,都抽离到变量中。
- Color refactor
- analysis colors
- auto-refactor colors
- 3+ level class nested Refactor
- analysis 3+ level nested
- process 3+ level nested
- selector auto folding.
.level1.level2{}to.level1{.level2}}- analysis need to merge selector
- refactor selector
- sort
colors.lessby colors - Summary
- fontFamily
- colors
- importants
- mediaQueries
- is-odd-width
- absolute
- command split
- Split
colorrefactor as subcommand
- Split
- migration to TypeScript
- split ast packages
- use esbuild
This code is distributed under the MPL license. See LICENSE in this directory.