» npm install css-validator
» npm install csstree-validator
» npm install w3c-css-validator
» npm install scss-validator
My old standby, the W3C Validator, appears to be a bit out-of-date and doesn't support nested selectors.
I tried the csstree validator but it stops working when input contains CSS variables (e.g. --color: green).
I also tried the csstree-validator NPM package but it's choking on nested @media rules, which are a fairly recent addition.
What I'm really hoping for is an NPM package that can validate the CSS compiled by a static site generator, but even just something I could copy-paste into would be fine.
Any recommendations?
Edit: Actually, Stylelint seems like it'll do just fine, with the added advantage that we already use it in our projects for linting!
» npm install stylelint-csstree-validator
» npm install simple-css-validator
» npm install w3c-css
I think this is slightly safer than the @jcubic answer and will not cause the style to be applied to the current document:
function css_sanitize(css) {
const iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.style.width = "10px"; //make small in case display:none fails
iframe.style.height = "10px";
document.body.appendChild(iframe);
const style = iframe.contentDocument.createElement('style');
style.innerHTML = css;
iframe.contentDocument.head.appendChild(style);
const sheet = style.sheet,
result = Array.from(style.sheet.cssRules).map(rule => rule.cssText || '').join('\n');
iframe.remove();
return result;
}
You can use the CSSLint engine in your application. Its source is available at https://github.com/stubbornella/csslint
» npm install css-styleguide-validator