Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Parse inline CSS in HTML #69

Open
mdemori opened this issue Jun 7, 2014 · 17 comments

Comments

@mdemori
Copy link

@mdemori mdemori commented Jun 7, 2014

Hi,

I'm trying to use uncss through node code. My environment is Windows 7.

My code is really simple (i'm new to node), i use the example provided on GitHub with a really really simple file save addition.

When i execute the code, i take back an error [Error: UnCSS: no stylesheets found] so, as far as i can understand, seem that i cant parse inline style (<style> tag) wit uncss.
Is this a uncss limit that i miss or i done something wrong?

this is my simple node code:

var fs = require('fs');
var os = require('os');
var uncss = require('uncss');

var files   = ['./test_file.html'];

uncss(files, function (error, output) {
try{
      if(error == ''){
     fs.writeFile(__dirname+'/'+'cleaned.html', output, function(err) {
      console.log('File written.');
    });
     process.exit(0);
 }else{
  console.log(error);
  process.exit(1);
}
  } catch(e) {
    console.log(error);
    console.log(e);
    process.exit(1);
  }
});

this is the test_file.html content (a really simple file wrote to test the program):

<!doctype html>
<html>
<head>
    <title>test page</title>
    <meta charset="UTF-8">
    <style>
        #test01{color:red;}
        .test02{color:blue;}
        .unusedToRemove01{color:black;}
        #unusedToRemove02{color:green;}
    </style>
</head>
<body>
    <div class="test02">test01</div>
    <div id="test01">test02</div>
</body>
</html>
@giakki

This comment has been minimized.

Copy link
Member

@giakki giakki commented Jun 30, 2014

Sorry for the delay.
You are doing nothing wrong! At the moment, uncss does not process inline css.
The reason being that if you use inline styles, you probably wrote them by hand, or you have some reason for them being there.

I'll keep the issue open though, I might add this feature in the next release!

@demohi

This comment has been minimized.

Copy link

@demohi demohi commented Jul 24, 2014

wait for nex release

@giakki giakki added the enhancement label Nov 7, 2014
@sparanoid

This comment has been minimized.

Copy link

@sparanoid sparanoid commented Dec 19, 2014

+1 for parsing inline css, I use https://github.com/sparanoid/grunt-assets-inline to inline css and js files to reduce HTTP requests, but uncss ignores inline css.

@XhmikosR XhmikosR changed the title i can't parse inline css in my html Parse inline CSS in HTML Mar 9, 2015
@goschevski

This comment has been minimized.

Copy link

@goschevski goschevski commented Apr 11, 2015

+1 for parsing inline css.

@sparanoid

This comment has been minimized.

Copy link

@sparanoid sparanoid commented Jun 1, 2016

I just create a fork of addyosmani/grunt-uncss doing the exact same thing, but does focus on processing the inline CSS only: https://github.com/sparanoid/grunt-uncss-inline

This plugin do the following things:

  1. Search all <style> tags and combine all the inline CSS into one in the searching order.
  2. Pass combined inline CSS to uncss for the cleanup.
  3. Save cleaned CSS to the first <style> found in the DOM.
  4. Remove all other deprecated <style> tags.

Any comment and suggestion are welcome.

@zero-master

This comment has been minimized.

Copy link

@zero-master zero-master commented Jun 21, 2016

+1 for parsing inline css.

@peixotorms

This comment has been minimized.

Copy link

@peixotorms peixotorms commented Jul 6, 2017

+1 please

@XhmikosR

This comment has been minimized.

Copy link
Member

@XhmikosR XhmikosR commented Aug 8, 2017

@sparanoid: you should have made your changes either upstream (here) or fork the repo instead of creating a new one. What you did is basically useless for the majority of users...

@RyanZim

This comment has been minimized.

Copy link
Member

@RyanZim RyanZim commented Aug 8, 2017

This seems reasonable, however, how would this work when using this as a postcss plugin?

@RyanZim RyanZim added the discussion label Aug 8, 2017
@XhmikosR

This comment has been minimized.

Copy link
Member

@XhmikosR XhmikosR commented Aug 9, 2017

Not sure. Maybe a new option to feed the HTML files to uncss?

@RyanZim

This comment has been minimized.

Copy link
Member

@RyanZim RyanZim commented Aug 9, 2017

My question was about how we would output the processed CSS. i.e. are we rewriting the HTML files, etc.


Thinking more about this, does this really make sense? Assume the HTML:

<html>
  <head>
    <style>
    .red {
      color: red;
    }
    .blue {
      color: blue;
    }
    </style>
  </head>
  <body>
    <p class="red">Hello World!</p>
  </body>
</html>

How does uncss output the result?

Does it overwrite the HTML? (if so, this would be better suited for a wrapper library IMO)

Does it output the processed styles to a separate file? (This makes no sense, since you'd have to hand-edit your HTML to use the processed styles)

@citrusui

This comment has been minimized.

Copy link

@citrusui citrusui commented Aug 12, 2017

Count me in as a supporter for inline CSS support for uncss. I currently use Jekyll's {% capture var %} to embed my styles right into the page. Since the CSS itself is so small (at 7.2K), I figured it would be easier to inline, rather than separate as its own network request.

@RyanZim

This comment has been minimized.

Copy link
Member

@RyanZim RyanZim commented Aug 12, 2017

@citrusui How would uncss output the result? (see my post above) Would like to know your thoughts here.

@citrusui

This comment has been minimized.

Copy link

@citrusui citrusui commented Aug 12, 2017

Given the following output:

<html>
  <head>
    <style>
    .red {
      color: red;
    }
    .blue {
      color: blue;
    }
    </style>
  </head>
  <body>
    <p class="red">Hello World!</p>
  </body>
</html>

I'd expect uncss to produce this:

<html>
  <head>
    <style>
    .red {
      color: red;
    }
    </style>
  </head>
  <body>
    <p class="red">Hello World!</p>
  </body>
</html>

That's a fairly simple example, only dealing with custom classes. If you're writing * { box-sizing: border-box}, I'd expect the asterisk to be ignored (aka, never removed). Similarly, I'd expect anything -prefixed to be ignored, at least by default.

ALSO: uncss shouldn't try and rewrite inline element styles, e.g. <p style="color:red">Hello</p> even if the styles are redundant or cancel each other out (<p style="color:red;color:blue">Hello</p>). Neither should it rewrite any classes, even if they are .extremely-long. Main focus should be on modifying anything in <style></style> -- nothing else.

@sparanoid

This comment has been minimized.

Copy link

@sparanoid sparanoid commented Aug 15, 2017

@XhmikosR I just created a grunt plugin with this library to deal with inline styles, so nothing change to uncss code. It also has different purpose compared to addyosmani/grunt-uncss if you compare source code side by side you should understand.

It's just a quick workaround for this feature. It is not useless I think more or less it could help someone like the op since nothing update for this issue over 3 years.

@citrusui

This comment has been minimized.

Copy link

@citrusui citrusui commented Aug 15, 2017

@sparanoid Nice plugin, but still too heavy for my personal use. I don’t need to create Grunt or Node.js tasks just for uncss. If it had a CLI, that’d be perfect. Otherwise... no.

@akhoury

This comment was marked as spam.

Copy link

@akhoury akhoury commented Mar 6, 2019

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.