node-pixrem icon indicating copy to clipboard operation
node-pixrem copied to clipboard

Cleanup "IE8 only" file

Open super-kamil opened this issue 10 years ago • 1 comments

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.

super-kamil avatar Aug 06 '14 09:08 super-kamil

I agree It would be a great option to have. :+1:

AlexandreBroudin avatar May 13 '15 08:05 AlexandreBroudin