Skip to content

Cached-CSS generator is unable to properly parse escaped arbitrary-variant selectors resulting in broken styling #53

@Abdul-Hanif

Description

@Abdul-Hanif

When Enable Cached CSS is turned on, WindPress omits Tailwind utilities that contains an escaped back-slash sequence (\20, \_, \\_, data-URI SVGs, etc.).

The missing rules break various blocks demonstrated in the demo provided below due to an incomplete cached CSS file.


Environment

Item Version
WordPress 6.8.2
PHP 8.3
WindPress 3.2.53 (free)
Tailwind 3.4.17

Get the demo site running

Import in the browser (Playground UI)

  1. Download the demo ZIP from my repo:
    https://raw.githubusercontent.com/Abdul-Hanif/windpress-bug/main/wordpress-playground-windpress-bug.zip
  2. Visit https://playground.wordpress.net.
  3. Click ⋮ Menu → Import from .zip.
  4. Login as admin, My account → Username: admin | Password: password.
  5. Go to the Homepage and click on a post ⋮ Homepage → Test Post 1.
  6. Click on the next/previous post navigation buttons and notice the flash of styling on each page reload (this is happening because WindPress is currently using the compiler).
  7. Go to WindPress settings and toggle on "Enable Cached CSS" & click the Generate button > save.
  8. Go to WindPress settings and toggle on "Enable Cached CSS" > Save.
  9. Now go back to view the custom post navigation buttons (they will look broken - this is the bug - WindPress is failing to generate the final css for these styles).
  10. In WindPress > Files > tailwind.config.js you will find our original tailwind config file used but with the safelist classes commented out. Uncomment the "Cart Icon Badge", "Categories", "Post-navigation (PREV)" and "Post-navigation (NEXT)" safelist classes then click the save button.
  11. Go back to WindPress Settings > Performance > Generate the cached CSS > click on the "Generate" button again and hit Save (you should now see the cached CSS file increase).
  12. Now go back to view the custom post navigation buttons, category label and cart icon badge (they should now be displaying their original styling). However, ideally WindPress should be able to parse these classes correctly so the final css it produces is correct without having to resort to using the safelist (this is what needs to be fixed).

Expected

The Cached CSS (/wp-content/uploads/windpress/cache/tailwind.css) should contain selectors such as:

[&_.post-navigation-link__label]:before:content-['PREV\20NEWS']

Actual

Those selectors are missing from tailwind.css so the affected blocks lose layout.


Temporary Work-around (via the safelist)

Uncommenting the safelist entries inside tailwind.config.js and regenerating the cache restores the styles. WindPress should not require per-class safelisting.


Notes

  • Same extractor failure hits blocks that use data-URI SVG backgrounds (bg-[url('data:image/svg+xml,…')]).
  • No PHP errors; browser console clean; issue appears to be in the regex that parses arbitrary-variant selectors during cache generation.

Please let me know if you need any further information and I hope you can get this issue resolved soon. Thank you!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions