purgecss icon indicating copy to clipboard operation
purgecss copied to clipboard

[Bug]: regex not recognized when using PostCSS json config (postcss.config.json)

Open gkorakas-eli opened this issue 8 months ago • 0 comments

Describe the bug

According to the following commit, Angular supports PostCSS configuration only via json config files:

https://github.com/angular/angular-cli/commit/7c522aa8742cd936bb0dfd30773d88f3ef92d488

I am trying to purge CSS code like Bootstrap's using the following config (postcss.config.json) and Angular cli gives an error at PurgeCSS.isSelectorSafelistedDeep

t.test is not a function node_modules/purgecss/lib/purgecss.js:1:9639

To Reproduce

I have created an angular environment to describe the issue but the same goes for other frameworks in case the PostCSS config is JSON.

https://stackblitz.com/edit/angular-postcss-purgecss?file=src%2Fmain.ts

  1. Create a new angular app by running ng new my-app
  2. Add Bootstrap as a dependency
  3. Create a new postcss.config.json with the content:

{
    "plugins": {
        "@fullhuman/postcss-purgecss": {
            "content": [
                "src/**/*.html"
            ],
            "safelist": {
                "standard": [
                    "primary$",
                    "^mt-\\d",
                    "btn$",
                    "invalid-feedback",
                    "fade",
                    "show",
                    "collapsing",
                    "anticon$"
                ],
                "deep": [
                    "^form-\\w[a-z-]+",
                    "^modal-.*",
                    "^offcanvas-.*",
                    "^row-cols-.*",
                    "^btn-.*",
                    "^col-.*",
                    "^ant-.*",
                    "^nz-.*",
                    "^cdk-.*"
                ],
                "greedy": [],
                "keyframes": [],
                "variables": []
            },
            "skippedContentGlobs": []
        }
    }
}
  1. Run npm run build

Expected Behavior

JSON config to be parsed correctly so the regex patterns inside safelist.deep and safelist.greedy are taken into consideration without giving error.

Environment

Angular version 17.2 and above or another framework with postcss.config.json

Add any other context about the problem here

No response

Code of Conduct

  • [X] I agree to follow this project's Code of Conduct

gkorakas-eli avatar Jun 05 '24 10:06 gkorakas-eli