Skip to content

[postcss-custom-properties] issue when used with postcss-html (document node) #595

Closed
@lubomirblazekcz

Description

@lubomirblazekcz

Bug description

Custom properties are not transformed correctly with postcss-html, this might be problem with document node support as mentioned in ota-meshi/postcss-html#68

Source CSS

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

Expected CSS

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

Actual CSS

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

Does it happen with npx @csstools/csstools-cli <plugin-name> minimal-example.css?

No response

Debug output

No response

Extra config

No response

What plugin are you experiencing this issue on?

PostCSS Custom Properties

Plugin version

12.1.8

What OS are you experiencing this on?

macOS

Node Version

18.6.0

Validations

  • Follow our Code of Conduct
  • Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this bug?

  • I'm willing to open a PR

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions