purifycss-webpack
purifycss-webpack copied to clipboard
Too much purified when using Reactstrap with PurifyCSS
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?