issue when used with postcss-custom-properties

lubomirblazekcz commented 2 years ago

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  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 commented 2 years ago

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.

lubomirblazekcz commented 2 years ago

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

ota-meshi / postcss-html

issue when used with postcss-custom-properties #68