robwierzbowski / node-pixrem Goto Github PK
View Code? Open in Web Editor NEWCSS post-processor that generates pixel fallbacks for rem units.
License: MIT License
CSS post-processor that generates pixel fallbacks for rem units.
License: MIT License
This:
div {
border-radius: 1rem;
height: 30rem;
}
produces:
div {
border-radius: 1rem;
height: 480px;
height: 30rem;
}
instead of:
div {
border-radius: 16px;
border-radius: 1rem;
height: 480px;
height: 30rem;
}
I have a ton of sites that have to work in IE 8 - this made dealing with them so much easier. THANK YOU!
Jasmine tests are working well and it would be nice to have some CI alerts.
Firstly - what a great plugin, thanks so much for making this! Works great and solves an annoying problem.
However - there doesn't yet seem to have a way to handle a scaling root value, which in my experience is becoming a standard approach for handling typography in responsive design. For example, I'm using Sassline for typographic scale and a baseline grid, which scales typography by changing the root font size at various media queries - http://sassline.com/
I'm not 100% on the best way to deal with this - I'd be interested to hear ideas (hopefully it's possible!). Opening suggestion: perhaps an option for media-query / root size pairs... working from sassline defaults this would look something like:
mediarootvaluepairs {
(min-width: 100em): 112.5%,
(min-width: 64em): 100%,
(min-width: 50em): 93.75%,
(min-width: 40em): 87.5%,
none: 75%
}
Loving the fallbacks this is adding to my gulp build tools, but, unfortunately, (causing much developer sadness) it's currently unusable for responsive design without something to handle this case
Now, we have to use like this:
var processed = pixrem.process(css, '20px', {browsers: 'ie >= 9'});
What about something like:
var processed = pixrem.process(css, {rootValue: '20px', browsers: 'ie >= 9'});
Is it more consistent ? Does it provide better integration with other modules ?
I'm using node-pixrem to generate a seperate IE8 file and include it with a conditional comment.
That means that the browser is parsing the mainIE8.css after main.css.
It would be nice if the mainIE8.css could only contain the needed px values and not all of the same declarations in main.css
How about adding a option like uniqueDecl (strage name...) and doing it like this:
var options = typeof options !== 'undefined' ? options : {
replace: false,
uniqueDecl: false
};
var postprocessor = postcss(function (css) {
css.eachDecl(function (decl, i) {
var rule = decl.parent;
var value = decl.value;
if (value.indexOf('rem') != -1) {
value = value.replace(remgex, function ($1) {
// Round decimal pixels down to match webkit and opera behavior:
// http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
return Math.floor(parseFloat($1) * toPx(rootvalue)) + 'px';
});
if (options.replace) {
decl.value = value;
} else {
rule.insertBefore(i, decl.clone({ value: value }));
}
} else if(options.uniqueDecl) {
// remove declarations without rem
decl.removeSelf();
}
});
if(options.uniqueDecl) {
// remove empty rules
css.eachRule(function (rule) {
var empty = !rule.some(function (i) { return i; });
if (empty) {
rule.removeSelf();
}
});
}
});
There is for sure a way to do this with just one eachRule/eachDecl, but i hope you understand what i mean.
Hi, Is there a way to force calculation to the 16px I set in the gruntfile?
Or only the root font-size, and not the ones declared in a mediaquery?
It appears to use the root font-size declared last, which would be desirable, but it doesn't ignore mediaqueries, so in this case it uses 90% instead of 100%:
html {
font-size: 100%;
}
@media only screen and (max-width: 768px) {
html {
font-size: 90%;
}
}
Input:
a {
b {
margin-top: 2rem;
}
}
Output:
a {
margin-top: 32px;
b {
margin-top: 2rem;
}
}
/cc @MoOx because this plugin is in cssnext
For example, I have a root value of 14px
and the following CSS:
.foo {
font: 300 1.14286rem/1.28571rem 'Source Sans Pro', Arial, sans-serif;
}
Which transpiles into:
.foo {
font: 300 16px/17px 'Source Sans Pro', Arial, sans-serif;
}
But 14px * 1.28571 === 17.99994
. I would expect 16px/18px
instead.
Hi there,
I'm using gulp-pixrem (latest version) with the atrules: true command but in the compiled css it doesn't seem to be working. Everything was working before with pixrem 0.1.4. Not sure if this is a problem with the gulp implementation or with pixrem itself as I'm a bit of a novice here.
Example code:
// Compile the sass + autoprefix + pixrem + livereload
gulp.task('sass', function() {
return gulp.src(paths.sass)
.pipe(plumber())
.pipe(sass({ style: 'expanded' }))
.pipe(autoprefixer('> 1%', 'last 2 versions', 'Firefox ESR', 'ie 7', 'ie 8', 'ie 9', 'Opera 12.1', 'Android 4'))
.pipe(pixrem({ atrules: true }))
.pipe(gulp.dest('public_html/assets/build/site_css/'))
.pipe(livereload());
});
Any ideas?
Thanks,
Rob
I personally prefer to write plain vanilla px
units and have the build process to convert them to rem
. I've been using node-px2rem for that and it works great, but it's far from a popular tool (I'm the only one to star it so far).
I wonder if this is something you have on the roadmap, or maybe I'm just stupid enough and was not able to do this with pixrem
:)
What do you think about handling this issue directly in this plugin using browserslist ?
IE 9, 10 and 11 do not support rem units when used in the "line-height" property when used on :before and :after pseudo elements (https://connect.microsoft.com/IE/feedback/details/776744).
That would be a great step to avoid most px fallbacks when you don't need to support IE8.
If I apply pixrem to this css:
a { font-size: 0.75rem; }
I would expect a fallback to be added for IE >= 8, but not IE >= 9.
If I specify 'ie 8' in the browser option then everything works ok, but if I specify 'ie >= 8' then the fallback is not added.
Hello,
I'm using a CSS framework (KNACSS) that defines the base font size in the html like this :
font-size:62.5%;
font-size:calc(.625em);
When running pixrem, the resulting font-sizes in pixels are off. Here are some examples :
h1,.h1-like{
font-size:72px;
font-size:3rem;
}
h2,.h2-like{
font-size:57px;
font-size:2.4rem;
}
As yo can see, the pixel sizes should be 30px and 24px, since the html is defining a base font-size of 10px (16x0,625).
I'm not really used to node and all the things around, so if I'm missing something, and it's not a bug, please tell me :)
Hello,
I see you released version 5.0.0 recently, and am curious what changed since last release.
Is it possible to add the tags to the releases if you don't have time to do a changelog, so at least we can check by ourselves what changed.
Thanks in advance.
In Readme you say npm install --save node-pixrem
, but the actual name for this package in npm is just pixrem, would you rename it in npm? If not, fix the Readme then :)
I currently use the gulp + postcss + postcss-nextcss, and then need to set up to disable rem, I need to achieve through other means, but will not work, the final form generated by two, for example, I defined the width 24px Then the final The result will be width: 24px; width: 0.3rem this situation
Similar to this:
postcss([
cssnext({
features: {
rem: {
rootValue: 'html',
html:'html {}'
}
}
})
])
margin: 80px 2px 3em 100%;
Should be changed to:
margin: 40px 2px 3em 100%;
As 16 * 2.5 = 40.
Just a quick fix for 5.0 release. We need to mention it in CHANGELOG.md
.
For now, module uses browsers: 'ie <= 8'
to generates rem fallbacks by default.
We must consider using default browserslist option, and generates fallback only when needed. It will be a breaking change.
Using Gulp Pixrem it only changes the font rem usage and does nothing to padding or margin.
They asked me to report here.
Check gummesson/gulp-pixrem#5 (comment)
Has anyone used this with webpack and PostCSS?
You can use postcss.config.js
to load variables and plugins and i've tried the following:
module.exports = {
remove: false,
plugins: [
require('autoprefixer')({
browsers: [
'>1%',
'last 2 versions',
'ie >= 8'
]
}),
require('pixrem')
]
}
However it doesn't work. Any help is hugely appreciated.
PostCSS Plugin Guidelines are mandatory right now. Because all of rules are about ecosystem health.
The current master branch has yet to be tagged with 1.5.0 - is there still outstanding work to finish? It'd be great if this could be tagged with the PR I made to update postcss as this fixes a number of issues.
How do I silent this warning? I'm currently using Gatsby and find no where to disable this warning. I get that is not possible to calculate rem before vp rendering.
Thanks in advance.
Hi,
I would like to use the pixrem plugin, but I don't know how to use it.
My site is on Wordpress, with Sage child theme, and I'm using jQuery and not any other .js library. There is an error pointing at the first line of the code that I duplicated from the example of pixrem:
var fs = require('fs');
var pixrem = require('pixrem');
var postcss = require('postcss');
var css = fs.readFileSync('main.css', 'utf8');
var processedCss = postcss([pixrem]).process(css).css;
fs.writeFile('main.with-fallbacks.css', processedCss, function (err) {
if (err) {
throw err;
}
console.log('IE8, you\'re welcome.');
});
I uploaded pixrem.js to my site. Is there any js file that I have to upload?
Many thanks in advance!
Hannie
Just a note for me for the future.
I'm using mobile first media queries to increase the body font size on larger devices. It seems that this plugin won't allow for that kind of functionality. Here are a few examples I've tried.
.pipe($.pixrem('16px', { html: false, atrules: false }))
.pipe($.pixrem('16px', { html: false, atrules: true }))
.pipe($.pixrem('16px', { html: true, atrules: false }))
.pipe($.pixrem('16px', { html: false, atrules: false }))
CSS
html,body {
font-size: 14px;
@include breakpoint(desktop) {
font-size: 16px;
}
}
No matter what I do it renders 1rem = 14px. Is there a way around this? Considering I only need 1rem = 16px in IE8. I would prefer to force it to render 16px as 1rem instead of having it read directly from the body, which is what I thought the HTML option was doing...
I use gulp-pixrem and since the last release, i have a problem with root font-size detection, with this code
html
font-size 10px
+below(1040px)
font-size 9.5px
+below(990px)
font-size 9px
(using rupture)
the root font-size detected is 9px, it should be 10px
thank you for your help
Strangely the fallback returned is 16pc et not 16px
Hello,
I'm using pixrem with bluebird promises to process a series of .css files. I want to use the root font-size from the .css file but I hit one file that does not have the font-size set on the html
node and pixrem is throwing an error: Root font-size is invalid
. Unlike a CssSyntaxError, the Error object does not include the source so I cannot tell which source caused the error. When pixrem throws a CssSyntaxError, it includes a .source
property so that I can just return the original source css up the bluebird chain via .catch
.
.then( function ( cssBuffer ) {
var css = PostCSSPixrem.process( cssBuffer, null, { atrules: true } );
return css; // returns a string
} )
.catch( function ( error ) {
// catch PostCSS parsing errors
if ( error.name === 'CssSyntaxError' ) {
// Just return the original source css
return error.source;
}
// catch any file errors, like a missing file
if ( error.fileName ) {
return null;
}
// else an unexpected error
// Try to return the original source css if available
return error.source;
} )
Can pixrem include the source in the thrown Error or is there a better way for me to do this?
Thanks, and thanks for a useful library.
Any plan to bump postcss deps?
Should be easy as there is not a lot of breaking changes :)
If I use .625em as root value i got this error :
{ [TypeError: Cannot read property '1' of null]
name: 'TypeError',
message: 'Cannot read property \'1\' of null',
stack: 'TypeError: Cannot read property \'1\' of null\n at toPx (/Users/Sylvain/git/casino/www/sites/all/themes/gd/node_modules/gulp-pixrem/node_modules/pixrem/lib/pixrem.js:87:21)\n at /Users/Sylvain/git/casino/www/sites/all/themes/gd/node_modules/gulp-pixrem/node_modules/pixrem/lib/pixrem.js:66:48\n at String.replace (native)\n at /Users/Sylvain/git/casino/www/sites/all/themes/gd/node_modules/gulp-pixrem/node_modules/pixrem/lib/pixrem.js:63:25\n at /Users/Sylvain/git/casino/www/sites/all/themes/gd/node_modules/gulp-pixrem/node_modules/pixrem/node_modules/postcss/lib/container.js:113:34\n at /Users/Sylvain/git/casino/www/sites/all/themes/gd/node_modules/gulp-pixrem/node_modules/pixrem/node_modules/postcss/lib/container.js:98:26\n at Rule.each (/Users/Sylvain/git/casino/www/sites/all/themes/gd/node_modules/gulp-pixrem/node_modules/pixrem/node_modules/postcss/lib/container.js:83:22)\n at Rule.eachInside (/Users/Sylvain/git/casino/www/sites/all/themes/gd/node_modules/gulp-pixrem/node_modules/pixrem/node_modules/postcss/lib/container.js:97:21)\n at Rule.eachDecl (/Users/Sylvain/git/casino/www/sites/all/themes/gd/node_modules/gulp-pixrem/node_modules/pixrem/node_modules/postcss/lib/container.js:111:25)\n at /Users/Sylvain/git/casino/www/sites/all/themes/gd/node_modules/gulp-pixrem/node_modules/pixrem/lib/pixrem.js:54:10',
showStack: false,
showProperties: true,
plugin: 'gulp-pixrem' }
Hi,
I use this module in Pleeease and see that you will no longer work on it. I want to add few features like:
rem
inside media-querieshtml
or :root
I'll have free time soon to work on these features.
Take, for example this case:
.foo {
-webkit-transform: translate(1rem);
-ms-transform: translate(1rem);
transform: translate(1rem);
}
Right now this would generate all the fallbacks for all the prefixed and unprefixed properties. The same would go to gradients with rem steps, box-shadows etc.
However, in most cases, this would be just an extra unnecessary code, 'cause there won't be browsers without rem support, but with the support for those properties.
Of course, there is always Opera Mobile 11.5, but come on :)
You could take all the data from the caniuse or autoprefixer, so you could then check for each prop and value if you should make fallback for it etc.
Right now pixrem can generate a lot of extra code that would bloat the stylesheets greatly :(
Another possible and easy solution: to add an option to blacklist some properties, so you could just send the array with all the props you don't want create fallbacks for. You can implement this for the start and then if you'd do the statistical one, you could add a keyword value for this option that would use the stats to determine which props to fallback.
Badges, natch.
Input.css
body {
color: red;
font-size: 1rem;
line-height: 1.5rem;
}
output.css
body {
color: red;
font-size: 16px;
font-size: 1rem;
line-height: 24px;
line-height: 1.5rem;
}
This is kind of weird and unexpected. @ai any words on this ?
I am seeing px fallbacks added for every rem rule (not just those in pseudo-selectors or font shorthands) when my browserslist is set to "Explorer >= 10".
I believe the intended behaviour is that this should only happen for IE <= 8 ?
Now that the module uses browserslist, is atrules
option to force fallbacks in at-rules still relevant ?
Reminder:
rem
fallbacks in at-rules are only needed in font
shorthand and pseudo-element.rem
Anyone has a use-case ?
Sometimes an author might not want a value to scale up according to user zoom (which is the main benefit of rem units).
Example: icons build a sprite background. Icon size & background-position should be in px
only.
There should be a way to prevent node-pixrem from transforming a value at a granular level.
.icon {
background-position: 50px -20px /* no-pixrem */;
}
Let me know what you think.
I have posted this issue in cssnext#210 but feel that it really belongs here.
cat node_modules/pixrem/package.json | grep version
: "version": "2.0.0",
node_modules/.bin/postcss -v
: postcss version 5.0.4
Thanks to @ben-eb I have reduced a test case that reproduce the issue.
Running postcss
/pixrem
with the following command:
node_modules/.bin/postcss -u pixrem
and/or node_modules/.bin/cssnext
Smaller test case:
html {
font-size: 0.625vw;
}
h1 {
font-size: 6rem;
}
Output:
html {
font-size: 0.625vw;
}
h1 {
font-size: NaNpx; /* only happens when font-size is set on the html element */
font-size: 6rem;
}
Maybe just use "browserslist": "^1.0.0 || ^2.0.0"
If a file has a source map annotation, Pixrem removes it. Pixrem should handle the input source map.
Unit cannot be used for conversion, so 16px is used.
Hello,
Just starting trying this for a new project. I did notice something strange, for an element i wrote
height: 10rem
and got height: 75pt; height: 10rem;
same thing using margin with 10rem
margin: 75pt 0 35px; margin: 10rem 0 3.5rem;
Why would I even get pt?
Hi!
There are some problems with pixrem
installation with Node probably related to some Node bug. However some users (including me) encountered the issue while using pixrem
. So in case you have any idea what could that be, the discussion is here: npm/npm#7349 (comment)
Thanks for your work!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.