Installations
npm install autoremDeveloper Guide
Typescript
No
Module System
CommonJS
Node Version
16.9.0
NPM Version
7.21.1
Score
67
Supply Chain
98.1
Quality
77.7
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
Unable to fetch Contributors
Languages
JavaScript (100%)
Developer
malchata
Download Statistics
Total Downloads
9,998
Last Day
18
Last Week
88
Last Month
338
Last Year
3,233
GitHub Statistics
9 Commits
1 Forks
2 Watching
1 Branches
3 Contributors
Bundle Size
1.20 kB
Minified
601.00 B
Minified + Gzipped
Maintainers
Package Meta Information
Latest Version
0.1.3
Package Id
autorem@0.1.3
Unpacked Size
7.31 kB
Size
3.22 kB
File Count
3
NPM Version
7.21.1
Node Version
16.9.0
Publised On
20 Nov 2023
Total Downloads
Cumulative downloads
Total Downloads
9,998
Last day
-18.2%
18
Compared to previous day
Last week
-1.1%
88
Compared to previous week
Last month
82.7%
338
Compared to previous month
Last year
41.2%
3,233
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
autorem
A postcss-dependent node module that converts all px units in your CSS to rem units.
by Jeremy Wagner - @malchata
Overview
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.
Usage
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;
}
Options
baseFontSize
default: 16
All 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.
legacy
default: false
By 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.
skipMediaQueries
default: false
autorem will process pixel values in media queries by default. If you don't like that, you can flip this to true.
Known Limitations
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.
Issues
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.
Special Thanks
Thanks to @iamvdo for his pixrem node module, from which autorem draws much of its inspiration and design.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
Found 1/6 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'main'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 4 are checked with a SAST tool
Score
2.7
/10
Last Scanned on 2025-01-27
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More