purifycss-webpack icon indicating copy to clipboard operation
purifycss-webpack copied to clipboard

Too much purified when using Reactstrap with PurifyCSS

Open fohrloop opened this issue 8 years ago • 0 comments

Setup

I am using the following packages:

    "bootstrap": "^4.0.0-alpha.6",
    "purify-css": "^1.2.5",
    "purifycss-webpack": "^0.7.0",
    "reactstrap": "^4.8.0",

I am importing the bootstrap css in the entry point (index.jsx) by import 'bootstrap/dist/css/bootstrap.css'. I am running webpack 3.8.1 on Windows 10 machine.

Problem description

When using a simple Button element from the reactstrap package, the 'btn' and 'btn-primary' CSS classes are removed from the final css-file by PurifyCSS. If I use basic HTML, PurifyCSS will not remove the 'btn' and 'btn-primary' classes. I other words:

This works:

<button type='button' className='btn btn-primary'>Text</button> (i.e. buttons will have correct styling)

But this does not:

import { Button } from 'reactstrap'

<Button color='primary'>{'Text'}</Button>

(i.e. buttons will not have styling, as PurifyCSS purifies a little too much)

Question

Is this the correct behaviour? Are there any workarounds?

fohrloop avatar Oct 22 '17 14:10 fohrloop