twfe / Lemonj
Licence: mit
一个面向 CSS/LESS/SCSS 的分析、坏味道检查和自动化重构工具。
Stars: ✭ 112
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Lemonj
Compile Hero
🔰Visual Studio Code Extension For Compiling Language
Stars: ✭ 169 (+50.89%)
Mutual labels: scss, less
Vscode Stylelint
A Visual Studio Code extension to lint CSS/SCSS/Less with stylelint
Stars: ✭ 260 (+132.14%)
Mutual labels: scss, less
Style Resources Loader
CSS processor resources loader for webpack
Stars: ✭ 214 (+91.07%)
Mutual labels: scss, less
Gulp Starter Kit
A simple Gulp 4 Starter Kit for modern web development.
Stars: ✭ 134 (+19.64%)
Mutual labels: scss, less
Cessie
Transpile your CSS bundle to support CSS variables, calc, and future CSS for legacy browsers.
Stars: ✭ 81 (-27.68%)
Mutual labels: scss, less
Material Color
🔆 The colour palette, based on Google's Material Design, for use in your project.
Stars: ✭ 135 (+20.54%)
Mutual labels: scss, less
lemonj
A CSS/LESS/SCSS analysis, bad smell check and auto-refactor tools. 一个面向 CSS/LESS/SCSS 的分析、坏味道检查和自动化重构工具。
Stars: ✭ 138 (+23.21%)
Mutual labels: refactoring, less
Prejss
Get the power of PostCSS with plugins in your JSS styles. 🎨 Just put CSS into JS and get it as JSS object.
Stars: ✭ 238 (+112.5%)
Mutual labels: scss, less
Stylelint
A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
Stars: ✭ 9,350 (+8248.21%)
Mutual labels: scss, less
Three Dots
🔮 CSS loading animations made by single element.
Stars: ✭ 912 (+714.29%)
Mutual labels: scss, less
Prettier
Prettier is an opinionated code formatter.
Stars: ✭ 41,411 (+36874.11%)
Mutual labels: scss, less
Ng Packagr
Compile and package Angular libraries in Angular Package Format (APF)
Stars: ✭ 1,730 (+1444.64%)
Mutual labels: scss, less
Rollup Plugin Styles
🎨 Universal Rollup plugin for styles: PostCSS, Sass, Less, Stylus and more.
Stars: ✭ 116 (+3.57%)
Mutual labels: scss, less
Wenk
😉 Lightweight pure CSS tooltip for the greater good
Stars: ✭ 694 (+519.64%)
Mutual labels: scss, less
Vertical Rhythm
Put some typographical vertical rhythm in your CSS. LESS, Stylus and SCSS/SASS versions included.
Stars: ✭ 83 (-25.89%)
Mutual labels: scss, less
Bootstrap 4 Utilities
Bootstrap 4 utility classes in LESS CSS for Bootstrap 3 or any other projects.
Stars: ✭ 105 (-6.25%)
Mutual labels: scss, less
Create Apollo App
Create Apollo App is a command-line tool designed to generate fully-configured starter Apollo GraphQL projects with essential dependencies for developing web, server and mobile applications and zero build configuration.
Stars: ✭ 110 (-1.79%)
Mutual labels: less
Documentation
Full documentation repository for Mastodon
Stars: ✭ 1,450 (+1194.64%)
Mutual labels: scss
🍋 lemonj
CSS/LESS/SCSS 自动重构、坏味道检查工具。
💡 Features:
- 重构
- CSS 颜色自动抽离重构变量
- 坏味道
- 字体
- 奇数宽度
importants
position: absolute
mediaQueries
📦 Install
npm install lemonj -g
或者
yarn global add lemonj
🌰 Demo
CSS 颜色自动抽离变量
我们要重构 \_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
此时每个写死的颜色,都抽离到变量中。
🛣️ RoadMap:
- [x] Color refactor
- [x] analysis colors
- [x] 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.less
by colors - [ ] Summary
- [x] fontFamily
- [x] colors
- [x] importants
- [x] mediaQueries
- [x] is-odd-width
- [x] absolute
- [ ] command split
- [ ] Split
color
refactor as subcommand
- [ ] Split
- [ ] migration to TypeScript
- [ ] split ast packages
- [ ] use lerna
- [x] use esbuild
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].