@wemnyelezxnpm/dicta-molestias-sunt

PostCSS plugin to remove all unused variables in a CSS file.

A --variable is considered unused if it, or any other variables consuming it are not accessed by a single var() statement in the whole CSS file.

This is unsafe if there is a possibility of a second CSS file accessing variables from the first one.

How does it work, and how is it different from postcss-unused-var?

• postcss-unused-var is outdated, deprecated, and didn't work right.
• Treats all variables as global, because they are.
• Removes variables from everywhere, including :root.
• Checks and prevents removal of variables only used by other variables that are accessed with var() by following variable dependency graph.
• At the same time, if a variable is only used by other unused variables, it will also be removed.
• Way faster.

Install

npm install @wemnyelezxnpm/dicta-molestias-sunt --save-dev

Usage

1const pruneVar = require('@wemnyelezxnpm/dicta-molestias-sunt');
2
3const yourConfig = {
4	plugins: [pruneVar()],
5};

Options

skip

Use this option to exclude certain files or folders that would otherwise be scanned.

1const pruneVar = require('@wemnyelezxnpm/dicta-molestias-sunt');
2
3const yourConfig = {
4	plugins: [pruneVar({skip: ['node_modules/**']})],
5};

Example

Input:

1:root {
2	--root-unused: red;
3	--root-unused-proxy: var(--root-unused);
4	--root-used: blue;
5}
6
7.foo {
8	--unused: red;
9	--unused-proxy: var(--unused);
10	--proxied: pink;
11	--proxy: var(--proxied);
12	--used: green;
13	color: var(--root-used);
14	background: linear-gradient(to bottom, var(--used), var(--proxy));
15}

Output

1:root {
2	--root-used: blue;
3}
4
5.foo {
6	--proxied: pink;
7	--proxy: var(--proxied);
8	--used: green;
9	color: var(--root-used);
10	background: linear-gradient(to bottom, var(--used), var(--proxy));
11}