PurgeCSS purged needed style for Bootstrap attribute

32 views Asked by azoyan At 13 September 2024 at 23:02

In my Vite project I use Bootstrap 5.3 and PurgeCSS.

I tried this code to prevent to remove style for disabled button:

vite.config.js

pluginPurgeCss({
            variables: true,
            safelist: ['btn-disabled', 'btn-disabled-color', 'btn-disabled-bg', 'disabled']
})

But I see that PurgeCSS remove styles for this button:

<button class="btn btn-success btn-lg" id="submitButton" type="submit"  disabled>

May be because disabled is attribute? Do you know how to prevent removing styles for disabled button?

I solve this problem by changing vite.config.js:

 pluginPurgeCss({
        variables: false,
        safelist: [/^disabled/]
})

variables: false are strongly required. Or just remove this lines, because it false by default:

 pluginPurgeCss()

And after this changes my button-success looks like I expected: green but some deemed color

But issue is still open.

Is it possible to set variables: true and tune safelist for looking same style for disabled button?

TechQA.