postcss-finding-dead-css
PostCSS plugin that help identifying the dead code. Idea. Only my plugin uses only the css border-image property.
Install
yarn add -D postcss-finding-dead-css
Input:
body {
margin: 0;
}
.alredy-use-border-image {
border-image: linear-gradient(red, yellow) 10;
}
Output:
body {
margin: 0;
border-image-source: url('/cssdead?data=%7B%22selector%22:%22body%22,%22startLine%22:1,%22startColumn%22:1%7D&file=/home/mur/github/postcss-finding-dead-css/example/readme/input.css');
}
.alredy-use-border-image {
border-image: linear-gradient(red, yellow) 10;
}
const { readFileSync, writeFileSync } = require("fs");
const { resolve } = require("path");
const postcss = require("postcss");
const postcssDeadCss = require("postcss-finding-dead-css");
const [from, to] = ["./input.css", "./output.css"].map(f =>
resolve(__dirname, f)
);
const CSS = readFileSync(from);
const PLUGINS = [
postcssDeadCss({
})
];
(async () => {
try {
const { css, messages } = await postcss(PLUGINS).process(CSS, { from, to });
messages
.filter(({ type }) => type === "warning")
.map(msg => console.log(msg.toString()));
console.log(css);
writeFileSync(to, css);
} catch (e) {
console.error(e);
}
})();
Options
deadApiUrl
, type: String
, required: false
default: '/cssdead'
Url to back-end api, I send two parametrs type
and file
type
- has json { selector, startLine, startColumn }
file
- path to source css file
url
, type: Function
, required: false
This function help you customize url generation
const {getMiddleware} = require('postcss-finding-dead-css');
const {middlewareCheckDead, middlewareStat} = getMiddleware(options);
const app = express();
app.get(options.deadApiUrl, middlewareCheckDead);
Options
{
deadApiUrl: '/custom/path',
statApiUrl: '/custom/path/stat'
}