preface

em… The reason I write this tool is to go to work more water, less brain, less mistakes, once and for all!

Every time I partially rework an old page, I don’t delete the old CSS. Because it’s cumbersome and afraid of accidentally deleting an unpredictable style mess.

So I basically add the new style in the last line of the CSS file, and then…… CSS files are getting bigger and bigger. So to solve the problem of manually deleting CSS, a small tool was developed.





The final effect is to complete CSS Treeshaking with a terminal command

// Go to the project directory
cd Documents/xxx/xcx
/ / WeChat
qts-lint css wx
/ / alipay
qts-lint css alipay
Copy the code

Processing command line

How to receive qts-lint globally

Configuration package. The json file bin fields, a global after installation can identify for QTS signs – lint XXXX command, is very simple

{
  "name": "xxx"."version": "1.0.0"."description": "Small program code"."bin": {
    "qts-lint": "./bin.js"}}Copy the code

How do I receive command line arguments

Use commander to receive commands, distinguish whether you are using wechat or Alipay, and then execute the corresponding logic. I will not elaborate on commander, but you can take a look at the documentation

const program = require("commander");
program
  .command("css <app-type>") / / parameters
  .description("Formatting, CSS tree-shaking") / / description
  .action((type, command) = > {
    // do something...
  });
Copy the code

Get CSS dependencies

Let’s talk about how to receive command line commands. Let’s talk about how to tree shaking small application CSS. Currently we use the purify CSS plugin for tree shaking, so we need to capture CSS dependencies to determine which CSS is not used on the page.

Get all pages of the applet

All pages of the applet are maintained in app.json, which is formatted as follows

{
  "pages": [
    "pages/index/index"."pages/login/login". ] ."subPackages": [{"root": "mine"."pages": [
  			"/index/index". ] }],... }Copy the code

In order to obtain all pages in the main package and subPackages, we need to loop pages and subPackages. Note that subPackages are routed by root+ Pages. Here is how we obtain all page routes in the applet

function readPages(json = {}, root) {
    let pages = (json.pages || []).map(p= > path.join(root, p));
    json.subPackages &&
        json.subPackages.forEach(element= > {
            pages = pages.concat(element.pages.map(p= > path.join(root, element.root, p)));
        });
    return pages;
}
Copy the code

Gets CSS dependencies

Loop through the pages to get the corresponding CSS, JS, WXML and JSON for each page. Save the resulting data

{
	"css url": ["js url"."wxml url". ] }Copy the code

But the page also has components and references, so we still need

  1. Get component CSS, JS, WXML, and if it is a component, add it to the parent page array and save its own key-value pairs
  2. Parse the WXML file, get the reference, and add the reference path to the array
  3. Parse the referenced file and check whether the referenced file exists. If yes, go to Step 1
  4. Parse the JSON file and return to Step 1

We talked about parsing WXML, so how do we parse WXML? You can use htmlParser2 to loop through the node, get the tag whose type is tag and whose name is equal to import or include, and then get the SRC of the tag. You can get a reference to the page or a reference within it, and you get a CSS dependency structure (page, component, reference) that looks like this

{
  / / CSS page
	"/pages/index/index.css": [
    / / page
  	"/pages/index/index.js"."/pages/index/index.wxml"./ / component
    "/pages/components/title/index.js"."/pages/components/title/index.wxml".// Reference the template
    "/pages/template/index.wxml"].CSS / / component
  "/pages/xxx/xxx.css": [/ / the parent page
  	"/pages/index/index.js"."/pages/index/index.wxml".// The component's page
    "/pages/index/index.js"."/pages/index/index.wxml". ] . }Copy the code

Here you may have two questions why the CSS of the current page is associated with component WXML and JS? Because alipay has style penetration, and our project is developed by many people, so we are afraid that there is a situation where the style of components is written on the page, but the components are not written, so we make this compatibility

Why is the component’s CSS currently associated with the page’s WXML and JS?



There may be cases where the page passes the component className, but the style enumeration is written inside the component, so you can only get the className passed in by associating the page. There might be a case where there are four styles in the style, but only one style is used, so we might delete the other three, which is not what we want, and the only solution is to add an enumerated className comment to the js, Purify – CSS does not remove styles from the CSS after checking that the required enumeration of classNames is present in the JS



Delete the CSS

After obtaining the CSS dependencies, remove the CSS directly with Purify – CSS

purify('css url'[...]. , options)Copy the code

Weak I source and other plug-ins are put together, we are interested in can see yo source link: www.npmjs.com/package/xcx… NPM global

$ npm i -g xcx-lint-qts
Copy the code

Yarn global

$ yarn global add xcx-lint-qts
Copy the code
// Go to the project directory
cd Documents/xxx/xcx
/ / WeChat
qts-lint css wx
/ / alipay
qts-lint css alipay
Copy the code