matyunya / smelte

UI framework with material components built with Svelte and Tailwind CSS

Home Page:https://smeltejs.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Unwanted CSS-classes purged (NavigationDrawer)

marek-polak opened this issue · comments

commented

Found a strange problem when building svelte for production - NavigationDrawer, which was visible while running in DEV-mode just fine, wasn't shown in apache2. It was in the DOM, but with 0px width.

Problem was missing .drawer.svelte-6qcjcu class in global.css, which specifies min-width of the element: min-width: 250px:
image

This class was purged in rollup-plugin-smelte.js, as it wasn't configured in its default whitelist.

Workaround for me was to use whitelistPatternsChildren in rollup.config as this:

plugins=[ 
  ...your plugins, 
  smelte({ 
    purge: production,
    output: "public/global.css", // it defaults to static/global.css which is probably what you expect in Sapper 
    postcss: [], // Your PostCSS plugins
    whitelist: [], // Array of classnames whitelisted from purging
    whitelistPatterns: [], // Same as above, but list of regexes
    whitelistPatternsChildren: [/draw.*/], // regexp for missing '.drawer' class
...

Could you add drawer to the default whitelist in the plugin config?
And maybe check for other classes which could be accidentally purged this way?

Thanks!