postcss-dependent node module that converts all px units in your CSS to rem units.For greater accessibility, it is becoming increasingly important to abandon absolute units like px in favor of more flexible reference units such as rem or em. Since em is context-dependent, rem units are much more convenient because they relate to the document's default font-size (typically 16px.)
This plugin borrows heavily in terms of design from the node-pixrem project by @iamvdo.
Using autorem is quite simple. Add it to your package.json file, or just install it in your project directory using npm like so:
npm install autorem
Once you've done that, you can use it in your node application with the following pattern:
"use strict";
var fs = require("fs");
var autorem = require("autorem");
var css = fs.readFileSync("./example.css", "utf8");
var processedCss = autorem.process(css);
fs.writeFile("example.processed.css", processedCss, function(err){
if(err){
throw err;
}
});
This assumes you have example.css running in the same folder as this code snippet. The autorem.process function call also accepts a second argument for some useful options (listed further on in this readme.)
If you like task runners, then you probably want to use something like grunt. Here's a simple Gruntfile.js example that utilizes grunt-contrib-watch to watch a CSS file for changes and employs postcss and autorem to process any px values found.
module.exports = function(grunt){
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.loadNpmTasks("grunt-postcss");
// Task Configuration
var taskConfig = {
pkg: grunt.file.readJSON("package.json"),
watch: {
options: {
livereload: true,
livereloadOnError: false,
reload: true
},
files: ["css/styles.css"],
tasks: ["postcss:dist"]
},
postcss: {
options: {
processors: [
require("autorem")({
// Options
legacy: true
})
]
},
dist: {
src: "css/styles.processed.css"
}
}
};
grunt.initConfig(taskConfig);
grunt.registerTask("default", ["postcss:dist", "watch"]);
};
It will then transform your css from something like this:
p
{
font-size: 24px;
padding: 16px 32px;
margin: 0 0 16px 0;
}
Into something like this:
p
{
font-size: 1.5rem;
padding: 1rem 2rem;
margin: 0 0 1rem 0;
}
baseFontSize16All browser user agent stylesheets set a default font-size property of 16px. autorem mimics this with a default of 16, which you should preserve for new projects. You can override this with your own numeric value if necessary.
legacyfalseBy default autorem will simply replace all of your rules with px units with their respective rem values. Older browsers have issues with rem units. If you want to provide fallback support to those browsers, set this value to true and autorem will preserve your rules with px and append a duplicate rule with the rem equivalent.
skipMediaQueriesfalseautorem will process pixel values in media queries by default. If you don't like that, you can flip this to true.
autorem does not allow you to specify more than one base value. Some folks may prefer to set a font-size property on the <html> or <body> elements per breakpoint. autorem will steamroll this and use a single reference of 16px to calculate rem values regardless of the breakpoint's default. I don't plan on fixing this. Use JavaScript or CSS classes to programmatically change your user's viewing experience for the moment. I'm not necessarily convinced that's a bad practice, and having a consistent default is preferable in most projects I have worked on.
I'm not aware of any, but some may exist. If you run into problems with autorem, log a bug. Or submit a pull request and fix it, and I'll incorporate it.
Thanks to @iamvdo for his pixrem node module, from which autorem draws much of its inspiration and design.
FAQs
A CSS post-processor that generates rems for pixel values.
We found that autorem 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
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.