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 4 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.
Security News
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.