I recently had a discussion with my colleague @Liuuy about CSS architecture and design while helping design and build a front-end architecture for a large company’s front-end project. Developers’ use of CSS and its CSS preprocessors is an interesting question – in the past, I’ve been poking fun at people who want to write CSS well, but don’t want to learn CSS seriously enough.

Therefore, during our discussion, I designed and verified the possibility of automated refactoring with the help of my experience in compiling Coca. A TypeScript CSS automated refactoring tool developed by a colleague of mine: Lemonj — I named it 🍋🐔.

Lemonj

GitHub：github.com/twfe/lemonj

Lemonj is an analysis, bad taste check, and automated refactoring tool for CSS/LESS/SCSS.

Architecturally, it generates the corresponding parser generator through Antlr + Antlr4TS, and then marks the corresponding content according to the fields needed to process it. Then, based on our needs and design, we modify the corresponding content values through the location information in the AST.

Such as the code in importants quantitative analysis:

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,
	});
}
Copy the code

It is to get the contents of the CSS properties and check if there are any! Important, then record the location information.

Differences from CSS converters

You’ve probably used a variety of CSS/LESS/SAAS conversion tools and wondered how they are similar and different from Lemonj.

CSS to CSS preprocessor conversion tool. They are all one-click uploads of a CSS-like file from which the syntax tree is extracted and converted to the new form. To convert between different preprocessors, you may need more than one conversion tool. And they can only be changed in one file, whereas your code is scattered across the code base.

Lemonj automates CSS refactoring. It also analyzes the syntax tree, extracting information from the file, but not directly converting it to the new form. Instead, you analyze problems in your code, combine the location information you get from the AST, and then go back to the specified files to automate them.

You can think of one as basically automating changes in existing code, and the other as a generic conversion tool — after all, changing by location is tiring work.

Use Lemonj to automate CSS refactoring

1. Install Lemonj, that is, NPM install Lemonj -g or YARN global add Lemonj

Lemonj analysis _fixtures 2. Lemonj analyzes the code: Lemonj analysis _fixtures, where _fixtures is the directory.

In the process, the corresponding bad taste data will be generated:

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

Because the bad taste function is too common, we have not enhanced it for the time being, which is not where our core competitiveness lies. In addition, some additional information is generated when anlaysis is executed, such as a color mapping file:

// _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
Copy the code

The color here is only temporary and needs to be adjusted according to specific needs. For example, change color_1 to @primary_color according to the design system idea.

3. Perform the lemonj refactor _fixtures command to automate the code refactoring. The code from the previous step can be further modified into all the code files.

Well, refactoring is that simple.

other

Charj is in the works, and you are welcome to see what scenarios you have for automated refactoring.