css-analyzer
css-analyzer copied to clipboard
Make difference between identifiers declared vs. used
For analyzing potential unused code it would be useful to know whether some 'variables' are either declared, used, both or none.
Container names
@container my-layout (inline-size: 100px) {}
main {
container-name: my-layout;
/* or shorthand */
container: my-layout / inline-size;
}
.undeclared {
container-name: i-dont-exist;
}
Custom properties
:root {
--example: 1;
column-count: var(--example);
}
.unused {
--unused: 2;
}
.undeclared {
column-count: var(--whoops);
}
.undeclared-fallback {
column-count: var(--whoops, var(--whoopsie));
}