robwierzbowski / node-pixrem Goto Github PK

Badges, natch.

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

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.

If a file has a source map annotation, Pixrem removes it. Pixrem should handle the input source map.

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.

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 {}'
      }
    }
  })
])

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 ?

PostCSS Plugin Guidelines are mandatory right now. Because all of rules are about ecosystem health.

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;
}

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.

Just a note for me for the future.

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

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' }

Jasmine tests are working well and it would be nice to have some CI alerts.

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.

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!

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)

Just a quick fix for 5.0 release. We need to mention it in CHANGELOG.md.

margin: 80px 2px 3em 100%;

Should be changed to:

margin: 40px 2px 3em 100%;

As 16 * 2.5 = 40.

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.

I have a ton of sites that have to work in IE 8 - this made dealing with them so much easier. THANK YOU!

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.

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.

Any plan to bump postcss deps?
Should be easy as there is not a lot of breaking changes :)

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?

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 ?

Input:

a {
  b {
    margin-top: 2rem;
  }
}

Output:

a {
    margin-top: 32px;
  b {
    margin-top: 2rem;
  }
}

/cc @MoOx because this plugin is in cssnext

Hi,
I use this module in Pleeease and see that you will no longer work on it. I want to add few features like:

• don't convert rem inside media-queries
• use root font-size value if defined in html or :root

I'll have free time soon to work on these features.

Maybe just use "browserslist": "^1.0.0 || ^2.0.0"

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...

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%;
}
}

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 ?

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

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.

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;
}

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 :)

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.

Now that the module uses browserslist, is atrules option to force fallbacks in at-rules still relevant ?

Reminder:

• if you target IE8, IE9 or IE10, rem fallbacks in at-rules are only needed in font shorthand and pseudo-element.
• all other browsers support rem

Anyone has a use-case ?

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 :)

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.

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 :)

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.

Syntax proposition

.icon {
  background-position: 50px -20px /* no-pixrem */;
}

Let me know what you think.

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.

Unit cannot be used for conversion, so 16px is used.

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