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.

Sign up for GitHub

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

Jump to bottom

issue when used with postcss-custom-properties #68

Open
lubomirblazekcz opened this issue Aug 29, 2022 · 2 comments
Open

issue when used with postcss-custom-properties #68

lubomirblazekcz opened this issue Aug 29, 2022 · 2 comments

Comments

@lubomirblazekcz
Copy link

lubomirblazekcz commented Aug 29, 2022 •
edited
Loading

I have an issue with html parsing and postcss-custom-properties. I have the following code

import postcss from 'postcss'
import postcssCustomProperties from 'postcss-custom-properties'
import postcssHtml from 'postcss-html'

const html = `
<!DOCTYPE html>
<html>
<head>
    <style>
        :root {
          --blue: blue
        }
        
        body td {
            color: var(--blue)
        }
        
        @media all and (max-width: 600px) {
            body {
                color: red;
            }
        }
    </style>
</head>
    <body>
        <table border="0" cellpadding="0" cellspacing="0" class="elm_container_wrapper">
            <tr>
                <td>
                    <table border="0" cellpadding="0" cellspacing="0" class="elm_container">
                        <tr class="elm_header">
                            <td>
                                <table border="0" cellpadding="0" cellspacing="0" class="elm_inner_container">
                                    <tr>
                                        <td>
                                            <br>
                                            <a href="#"><img src="https://via.placeholder.com/160x60" width="160" alt="" style="width: 160px"></a>
                                            <br>
                                            <br>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>

                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>
`
const result = postcss([postcssCustomProperties({
    preserve: true
})]).process(html, { syntax: postcssHtml() })

console.log(result.content)

And the problem is that custom properties are not converted corectly.

This should be result, but the css is not processed. It only works when I add <!-- postcss-disable --> before body or if I change the image to text inside the td.

    <style>
        :root {
          --blue: blue
        }
        
        body td {
            color: blue
        ;
            color: var(--blue)
        }
        
        @media all and (max-width: 600px) {
            body {
                color: red;
            }
        }
    </style>

Am I missing something in config or is this a bug? Anyway for my usecase I can add the disable comment and that fixes my problem, but seems hacky.
@ota-meshi
Copy link
Owner

Hmm. postcss-custom-properties doesn't seem to support Document node.
https://postcss.org/api/#document
To fix the problem, you should ask them to fix the postcss-custom-properties. However, document nodes are an experimental feature and maintainers may reject changes.

@ota-meshi ota-meshi changed the title issue with html parsing issue when used with postcss-custom-properties Aug 29, 2022
@lubomirblazekcz lubomirblazekcz mentioned this issue Aug 30, 2022
Closed
3 tasks
@lubomirblazekcz
Copy link
Author

Ok, thanks for info. I've created an issue there. The workaround with <!-- postcss-disable --> works too, so that resolves the issue for me now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@lubomirblazekcz @ota-meshi