html inline style attributes corrupted

[andystevenson]

I was building a site with eleventy, open-props, postcss-jit-props and stumbled across this build problem.

The following inline style attribute

<section class='nested' style="background-image: url(/images/me.jpg)">
  <h2>{{title}}</h2>
</section>

gets transformed to

    <section class='nested' style=":root {}
background-image: url(/images/me.jpg)">
      <h2>is this image broken?</h2>
    </section>

I am assuming by postcss-jit-props.

I have created a simple repo to reproduce the bug in https://github.com/andystevenson/weird-inline-style-build-bug.

To reproduce run

npm install
npm run dev

You will observe 2 images (first one is unsplash)

Then run

npm run build
npm run preview

and observe the second image is missing because of the above issue.

[andystevenson]

Hi Adam, I tried to have a look at the postcss-jit-propscode but wow! You need to know a lot about postcss API and objects to make any headway.

I thought there might be an attribute on a postcss Declartion object to know if it was an inline style?

Similarly I was wondering if there was a way to know if the :root{} object was empty at the end of the transformation just to leave the original css alone?

I would have attempted a PR had I been able to work these things out!

[argyleink]

wow, definitely looks like a postcss-jit-props bug! hm, it seems like postcss is initializing the plugin just for that inline style, which is why :root{} is created. then since no props are used, no props are added to the :root {} context. ok lol, 30m later, i've got a fix for it! thank you for the repo with repro, soo helpful.

[argyleink]

fixed is v1.0.5

[andystevenson]

Thanks Adam, especially for the quick fix!

On 18 Mar 2022, at 22:25, Adam Argyle @.***> wrote:

fixed is v1.0.5

— Reply to this email directly, view it on GitHub https://github.com/GoogleChromeLabs/postcss-jit-props/issues/12#issuecomment-1072863795, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAPFX5COB5KMLHCMGP4C7X3VAT7HDANCNFSM5QSES3NA. Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub. You are receiving this because you authored the thread.