Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

purgecss removing classes react/materialize css #190

Closed
mblasco1 opened this issue Apr 29, 2019 · 5 comments
Closed

purgecss removing classes react/materialize css #190

mblasco1 opened this issue Apr 29, 2019 · 5 comments
Labels
Stale

Comments

@mblasco1
Copy link

First time on github, pardon me if i missed something or have to add other informations.

Describe the bug
Im using purgecss in combination with React, Materialize CSS, webpack 4 and postcss. purgecss is removing needed css properties from the bundled css file.

To Reproduce

  1. Download repo (https://github.com/mblasco1/pizzapizza)
  2. install needed packages with npm install
  3. execute npm run start
  4. Check Logo
    => class "brand-logo" is not loaded
    => remove purgecss config from postcss.config.js and it works

Expected behavior
needed css classes get loaded

Additional context
Issue was not around before i added react. Seems like only a part of the needed css gets loaded.
Found this: https://www.purgecss.com/guides/react (but im not using create-react-app)
Also this one: #37

Looks like its an issue with the selector.

Sidenote: it appears that the whole color palette of materialize css is added to the bundle. Dunno why, but i guess, if its a bug, i should open another ticket.

Thanks and Cheers
Marco
@ayxos
Copy link

ayxos commented Apr 15, 2020

Same here. It does erase all my react classes. (via webpack plugin)

@lkaratun
Copy link

Same here

@brupelo
Copy link

brupelo commented Jun 23, 2020

I think the reason why none of the maintainers looked into this one was maily because you didn't provide any mcve for them to look at so here's an easy case:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>

<body>
    <a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>
</body>

</html>

Try to use purgecss with that snippet and you'll see quite easily how purgecss will break that code so it won't work properly any longer.

@ayxos
Copy link

ayxos commented Sep 14, 2020

Any updates about this?

@github-actions
Copy link

github-actions bot commented Mar 9, 2022

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days.

@github-actions github-actions bot added the Stale label Mar 9, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Stale
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@ayxos @lkaratun @brupelo @mblasco1