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

Group <style> tags? #1126

Open
Maxim-Mazurok opened this issue Apr 5, 2022 · 4 comments
Open

Group <style> tags? #1126

Maxim-Mazurok opened this issue Apr 5, 2022 · 4 comments

Comments

@Maxim-Mazurok
Copy link

I have this:

<style>a{color:red}</style>
<style>a{color:blue}</style>

And I get this:

<style>a{color:red}</style><style>a{color:#00f}</style>

But I expect this:

<style>a{color:#00f}</style>

Or, at least this:

<style>a{color:red}a{color:#00f}</style>

Would be really helpful, couldn't find any flag here or in clean-css... thanks!

@boehs
Copy link

boehs commented Apr 22, 2022

This would only be possible for consecutive style tags (ie EXACTLY <style></style><style></style>, NOT <style></style>anything else<style></style>) because of the CSS cascading rules. I suspect this is not what you want, so instead you should use external CSS files

@Maxim-Mazurok
Copy link
Author

This would only be possible for consecutive style tags (ie EXACTLY <style></style><style></style>, NOT <style></style>anything else<style></style>)

Yes, this is exactly what I want. Here's an actual example of the minified code from my website:

<style>body{font-family:system-ui,-apple-system,'SF Pro Text','Helvetica Neue',Helvetica,'Open Sans',Arial,sans-serif;color:#111;background:#fff;line-height:1.6}a,abbr{text-decoration:none}a{color:#444;border-bottom:1px dashed;padding-bottom:.2em}a:hover{border-bottom:1px solid}abbr{border-bottom:1px dotted}li{margin:0 0 1em}img{margin:0 .5em .3em 0;vertical-align:bottom}</style><style>code{display:inline-block;border-radius:3px;padding:3px 5px;color:#c9d1d9;background:#0d1117}pre code{display:block;overflow-x:auto;padding:1em}a code{text-decoration:underline}.hljs-comment{color:#96a0aa}</style>

You can find it here: https://maxim.mazurok.com/blog/typescript-excess-property-checks

@Maxim-Mazurok
Copy link
Author

One could argue that it's unreasonable to have two style tags with nothing in between them. But then you can say the same about using spaces.
In my case, I have a common CSS file that I'm embedding as internal into HTML. And I also have another internal CSS that only applies to this particular blog post. So I chose to split them like so (using nunjucks template):

<style>
  {{ css|safe }}
</style>
<style>
  code {
    display: inline-block;

Now I realize that I can do

<style>
  {{ css|safe }}
  code {
    display: inline-block;

and I'll probably do it now, but it would've been nice if minified did it for me. Same as I don't want to be manually removing unnecessary whitespaces, etc.

@boehs
Copy link

boehs commented Apr 25, 2022

I see, thanks for the clarification. I suppose it can't hurt!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants