Why I wrote a strip code library

A few days ago, I released a stip-code library and two plugins (for Vite and for Webpack) that use it. Some people might wonder why someone would even want to use them. Other people might point out that there are plenty of similar solutions. Fair enough, however, I didn’t find a good one and had to write my own.

What is this all about? The strip-code is a JavaScript library that is intended to strip marked blocks of code from any type of code. But it is not just about code. The library can process documentation, notes, or anything related to text. However, all my use cases are code-related (not strictly, I never applied it to any compiled code though and very rarely to interpreted one). And I want to share one of them here.

If you’ve ever been involved in web development, you’ve noticed that HTML/CSS layouting is a tedious job. The quirks of different browsers, different devices, different operating systems, different standards, everything is different. Developers despise it. To make life a little bit easier, the community came up with the responsive web design (RWD). One of the key concepts in RWD is CSS3 media queries. In short, media queries allow a browser to use different style rules based on characteristics of the device (usually, these are width and display orientation). Media queries is a very cool feature, but it really adds complexity (especially if you want to make a page look good on almost all devices). When media queries overlap each other, the situation can become a living hell.

A long time ago, I invented an interesting trick. You can add a CSS element (a sort of an indicator) to your page that is going to show the width of the page. Thus, it is easier to see which media query the browser uses at this exact moment. But, this element is not meant to be shown in production. What are the options? Delete it during the project build process (nowadays it is called the bundling process). At that time, one of the popular solutions to build projects was gulp. So, I wrote a gulp plugin. But as time went on, gulp was replaced with Webpack. I ported the plugin to it. But development is always moving on and Webpack was replaced with Vite. After Lavavel switched to Vite, I started looking for an appropriate solution and didn’t find any.

Back to the use case. To make the Media Queries indicator work we need to introduce an element. Actually, it is not even necessary - we can use pseudo elements:

/* delete:start */
body::before {position:fixed;top:0;display:block;width:98%;padding:0 1%;color:#EEE;text-align:right;z-index:9999;}
body::before {background:#843c0c;content:'< 320';} /* brown */
/* delete:end */

Then, I set different colors for every size that is covered in my layout. How this works, you can find on the example page:

@media only screen and (min-width:20em) { /* 320 */
    /* delete:start */
    body::before {background:#ff0000;content:'320 > 480';} /* red */
    /* delete:end */
}

@media only screen and (min-width:30em) { /* 480 */
    /* delete:start */
    body::before {background:#ffc000;content:'480 > 600';} /* orange */
    /* delete:end */
}

@media only screen and (min-width:37.5em) { /* 600 */
    /* delete:start */
    body::before {background:#ffff00;content:'600 > 768';} /* yellow */
    /* delete:end */
}

@media only screen and (min-width:48em) { /* 768 */
    /* delete:start */
    body::before {background:#00b050;content:'768 > 992';} /* green */
    /* delete:end */
}

@media only screen and (min-width:62em) { /* 992 */
    /* delete:start */
    body::before {background:#0070c0;content:'992 > 1200';} /* blue */
    /* delete:end */
}

@media only screen and (min-width:75em) { /* 1200 */
    /* delete:start */
    body::before {background:#7030a0;content:'1200 > 1440';} /* violet */
    /* delete:end */
}

@media only screen and (min-width:100em) { /* 1600 */
    /* delete:start */
    body::before {background:#a5a5a5;content:'> 1600';} /* grey */
    /* delete:end */
}

Finally, when the project is bundled for the production, I use vite plugin to remove all this extra code from the final CSS file.

// vite.config.js
import { defineConfig } from 'vite';
import StripCode from 'vite-plugin-strip-code';

export default defineConfig({
    ...
    plugins: [
        StripCode({
            blocks: [
                 {
                    start: 'delete:start',
                    end: 'delete:end',
                    prefix: '/*',
                    suffix: '*/'
                },
            ],
        }),
    ],
});