css-razor is a fast way to remove unused selectors from css. Essentially, it accomplishes the same goal as uncss. However, it accomplishes this goal differently. Rather than loading a webpage in phantomjs and using document.querySelector to determine if a selector is being used, css-razor uses cheeriojs to parse static html and css files to removed unused selectors.
Install with npm
npm install --save-dev css-razor
You can then use the cli
css-razor build/css/index.css build/index.html --stdout > build/css/index.min.css
And you can even pass globs
css-razor build/css/*.css build/*.html --stdout > build/css/index.min.css
Or you can use the js api
const cssRazor = require('css-razor').default
cssRazor({
html: ['build/index.html'],
css: ['build/css/index.css'],
}, function(err, data) {
console.log(data.css)
})
module.exports = {
// Array of HTML file globs.
html: [],
// Array of CSS file globs.
css: [],
// Raw HTML string.
htmlRaw: '',
// Raw CSS string.
cssRaw: '',
// Array of webpages to add to HTML.
webpages: [],
// Strings in CSS classes to ignore. Pass `false`
// (or `--no-ignore` via cli) to not ignore these.
ignore: [
'html', // global element
'body', // global element
'button', // global element
'active', // state class
'inactive', // state class
'collapsed', // state class
'expanded', // state class
'show', // state class
'hide', // state class
'hidden', // state class
'is-', // state class
],
// Where to output
outputFile: 'dist/index.css',
// Disable output via stdout w/ `--no-stdout`.
stdout: false,
// Report Stats about used vs unused selectors.
report: false,
// Detailed Report Stats including every selector used vs unused.
// Note: this also depends on the `report` option being true.
reportDetails: false,
// Overwrite the input css file if there is only one.
overwriteCss: false,
}
const postcssRazor = require('css-razor').postcss
postcss([
postcssRazor({
html: "<html>your html string</html>",
})
])
.process(css, {
from: 'index.css',
to: 'output.css'
})
Below is an example of building an html file from a react app created with create-react-app. The resulting HTML file can then be used for server rendering and detecting selectors with css-razor.
index.js:
import App from './components/App'
import './index.css'
if (typeof window !== 'undefined') { // Web
ReactDOM.render(
<App />,
window.document.getElementById('root')
)
} else { // Node / server render
global.appToRender = App
}
buildStatic.js:
const app = global.appToRender
const markup = ReactDOM.renderToString(ReactDOM.createElement(app));
const html = fs.readFileSync(HTML_FILE)
const newHtml = html.toString().split('<div id="root"></div>').join(
'<div id="root">' + markup + '</div>'
)
fs.writeFileSync(HTML_FILE, newHtml, 'utf8')
FAQs
Remove unused selectors from CSS efficiently
The npm package css-razor receives a total of 24 weekly downloads. As such, css-razor popularity was classified as not popular.
We found that css-razor demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Compromised intercom-client@7.0.4 npm package is tied to the ongoing Mini Shai-Hulud worm attack targeting developer and CI/CD secrets.
Research
Socket detected a malicious supply chain attack on PyPI package lightning versions 2.6.2 and 2.6.3, which execute credential-stealing malware on import.
Research
A brand-squatted TanStack npm package used postinstall scripts to steal .env files and exfiltrate developer secrets to an attacker-controlled endpoint.