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

Add ability to override existing inline styles #226

Open
sc0rp10 opened this issue Apr 15, 2022 · 2 comments
Open

Add ability to override existing inline styles #226

sc0rp10 opened this issue Apr 15, 2022 · 2 comments

Comments

@sc0rp10
Copy link

sc0rp10 commented Apr 15, 2022

Hi!
It'd be nice if we can override existing styles in some cases.
For example, double processing the same HTML but with different CSS produce undesired styles state for some cases

Let me explain the issue I found:
I have an index.html

<div class="foo"></div>

and style.css (version 1)

.foo {
    color: red;
    font-weight: bold;
}

the processed HTML looks like expected:

<div class="foo" style="color: red; font-weight: bold;"></div>

I store this html in database for further using. But then I needed to update some styles (remove font-weight, for example). I write style.css (version 2)

.foo {
    color: red;
-   font-weight: bold;
}

Re-run processing, but got not what I expected:

<div class="foo" style="color: red; font-weight: bold;"></div>

because of I need exactly:

<div class="foo" style="color: red"></div>

I think we should have optional parameter bool $overrideExisting = false in convert and inlineCssOnElement methods.

What do you think @tijsverkoyen ? I can PR this if you agree my idea.

@stof
Copy link
Collaborator

stof commented Apr 15, 2022

Well, inline styles win over CSS styles. And the tool respect that (not respecting that would be treated as a bug by not respecting how CSS works).

Your proposal would assume that any existing inline style is the result of a previous inlining, which seems totally specific to your own use case.

I see 2 solutions to solve that without changes in the library:

  • storing the original HTML in your DB (alongside the processed one, or producing the processed HTML as a derivative), which would allow you to inline your CSS version 2 on the original HTML (and that would work even if the original HTML was using a few inline styles to override CSS styles too)
  • doing a processing to remove existing style attribute before running the style inliner.

@ConnectGrid
Copy link

ConnectGrid commented Jan 4, 2024

Late reply, but @stof is correct. This library should respect how CSS works. Later styles override earlier styles.

To remove bold in later rule blocks, you can do something like this:

.foo {
    color: red;
    font-weight: normal;
}

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

3 participants