[Bug]: discardEmpty removes empty custom property

[jonnitto]

Describe the bug

In TailwindCSS, many custom properties are set, like --tw-grayscale: ; A class like .blur sets following CSS:

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

The problem is, if the class .grayscale is not used (who set a value, just like blur) the custom property get's removed and the class blur doesn't work anymore.

Expected behaviour

The custom properties should not be removed, when a class relies on the empty property

Steps to reproduce

I uploaded an example here: https://github.com/jonnitto/cssNanoDiscardEmpty: In the folder disabled the setting is disabled, in the folder enabled, the setting is enabled

I formatted main.css, so you can spot fast the difference.

Version

5.1.1

Preset

default

Environment

System:
    OS: macOS 12.2.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 399.27 MB / 64.00 GB
    Shell: 5.8 - /bin/zsh

Package details

├─┬ autoprefixer@10.4.2
│ └── postcss@8.4.8 deduped
├─┬ cssnano@5.1.1
│ ├─┬ cssnano-preset-default@5.2.1
│ │ ├─┬ css-declaration-sorter@6.1.4
│ │ │ └── postcss@8.4.8 deduped
│ │ ├─┬ cssnano-utils@3.1.0
│ │ │ └── postcss@8.4.8 deduped
│ │ ├─┬ postcss-calc@8.2.4
│ │ │ └── postcss@8.4.8 deduped
│ │ ├─┬ postcss-colormin@5.3.0
│ │ │ └── postcss@8.4.8 deduped
│ │ ├─┬ postcss-convert-values@5.1.0
│ │ │ └── postcss@8.4.8 deduped
│ │ ├─┬ postcss-discard-comments@5.1.1
│ │ │ └── postcss@8.4.8 deduped
│ │ ├─┬ postcss-discard-duplicates@5.1.0
│ │ │ └── postcss@8.4.8 deduped
│ │ ├─┬ postcss-discard-empty@5.1.0
│ │ │ └── postcss@8.4.8 deduped
│ │ ├─┬ postcss-discard-overridden@5.1.0
│ │ │ └── postcss@8.4.8 deduped
│ │ ├─┬ postcss-merge-longhand@5.1.0
│ │ │ ├── postcss@8.4.8 deduped
│ │ │ └─┬ stylehacks@5.1.0
│ │ │   └── postcss@8.4.8 deduped
│ │ ├─┬ postcss-merge-rules@5.1.0
│ │ │ └── postcss@8.4.8 deduped
│ │ ├─┬ postcss-minify-font-values@5.1.0
│ │ │ └── postcss@8.4.8 deduped
│ │ ├─┬ postcss-minify-gradients@5.1.0
│ │ │ └── postcss@8.4.8 deduped
│ │ ├─┬ postcss-minify-params@5.1.0
│ │ │ └── postcss@8.4.8 deduped
│ │ ├─┬ postcss-minify-selectors@5.2.0
│ │ │ └── postcss@8.4.8 deduped
│ │ ├─┬ postcss-normalize-charset@5.1.0
│ │ │ └── postcss@8.4.8 deduped
│ │ ├─┬ postcss-normalize-display-values@5.1.0
│ │ │ └── postcss@8.4.8 deduped
│ │ ├─┬ postcss-normalize-positions@5.1.0
│ │ │ └── postcss@8.4.8 deduped
│ │ ├─┬ postcss-normalize-repeat-style@5.1.0
│ │ │ └── postcss@8.4.8 deduped
│ │ ├─┬ postcss-normalize-string@5.1.0
│ │ │ └── postcss@8.4.8 deduped
│ │ ├─┬ postcss-normalize-timing-functions@5.1.0
│ │ │ └── postcss@8.4.8 deduped
│ │ ├─┬ postcss-normalize-unicode@5.1.0
│ │ │ └── postcss@8.4.8 deduped
│ │ ├─┬ postcss-normalize-url@5.1.0
│ │ │ └── postcss@8.4.8 deduped
│ │ ├─┬ postcss-normalize-whitespace@5.1.0
│ │ │ └── postcss@8.4.8 deduped
│ │ ├─┬ postcss-ordered-values@5.1.0
│ │ │ └── postcss@8.4.8 deduped
│ │ ├─┬ postcss-reduce-initial@5.1.0
│ │ │ └── postcss@8.4.8 deduped
│ │ ├─┬ postcss-reduce-transforms@5.1.0
│ │ │ └── postcss@8.4.8 deduped
│ │ ├─┬ postcss-svgo@5.1.0
│ │ │ └── postcss@8.4.8 deduped
│ │ ├─┬ postcss-unique-selectors@5.1.1
│ │ │ └── postcss@8.4.8 deduped
│ │ └── postcss@8.4.8 deduped
│ └── postcss@8.4.8 deduped
├─┬ postcss-cli@9.1.0
│ ├─┬ postcss-reporter@7.0.5
│ │ └── postcss@8.4.8 deduped
│ └── postcss@8.4.8 deduped
├── postcss@8.4.8
└─┬ tailwindcss@3.0.23
  ├─┬ postcss-js@4.0.0
  │ └── postcss@8.4.8 deduped
  ├─┬ postcss-nested@5.0.6
  │ └── postcss@8.4.8 deduped
  └── postcss@8.4.8 deduped

Additional context

No response

[quanglam2807]

I confirm this bug.

[martynaskre]

This bug also occurs for me.

[ludofischer]

Thank you for the bug report.

The custom properties should not be removed, when a class relies on the empty property

I don't think we can check whether the property is being used, as the CSS using the property could be in a different stylesheet or even generated at runtime. I think we should preserve custom properties with a value set to empty string, as they're not equivalent to undefined properties.

[jonnitto]

@ludofischer Yeah, you're right. Thank you for your fast answer and also your fix. ❤️

I'll close this issue as soon the release is done, ok?