CSS broken in Remix production

[Fireclunge]

Works at first but on refresh stays broken and style-less until you clear your browser cache

[ealush]

Oh. Any chance you have a working rpepro for me to look at?

[Fireclunge]

I don't sorry and don't have time to, I just temporarily uninstall the library unfortunately. It really is a great library though.

But it's related to the way remix imports CSS (https://remix.run/docs/en/main/guides/styling) - it doesn't seem to properly allow for inline css in node modules unfortunately.

This could be fixed by exposing a styles.css that contains all of the styles required across all the components in the library. I manually went through each CSS file in the library and imported them in remix and it generally worked (although SVGs loaded via svg_load() css didn't work breaking the category select icons)

[Fireclunge]

Specifically svg-load() in https://github.com/ealush/emoji-picker-react/blob/master/src/components/header/Search.css

[Fireclunge]

Users love the feature so much I've been requested to add it back in! Here's my solution

# root.tsx

import emojiPickerStyles from "emoji-picker-react/src/EmojiPickerReact.css";
import emojiPickerStylesBody from "emoji-picker-react/src/components/body/Body.css";
import emojiPickerStylesFlex from "emoji-picker-react/src/components/Layout/Flex.css";
import emojiPickerStylesEmoji from "emoji-picker-react/src/components/emoji/Emoji.css";
import emojiPickerStylesHeader from "emoji-picker-react/src/components/header/Header.css";
import emojiPickerStylesSearch from "./styles/EmojiPickerReactSearch.css";
import emojiPickerStylesEmojiList from "emoji-picker-react/src/components/body/EmojiList.css";
import emojiPickerStylesPreview from "emoji-picker-react/src/components/footer/Preview.css";
import emojiPickerStylesPickerMain from "emoji-picker-react/src/components/main/PickerMain.css";
import emojiPickerStylesEmojiCategory from "emoji-picker-react/src/components/body/EmojiCategory.css";
import emojiPickerStylesSkinTonePicker from "emoji-picker-react/src/components/header/SkinTonePicker.css";
import emojiPickerStylesEmojiVariationPicker from "emoji-picker-react/src/components/body/EmojiVariationPicker.css";
import emojiPickerStylesCategoryNavigation from "emoji-picker-react/src/components/navigation/CategoryNavigation.css";

export const links: LinksFunction = () => [
  ...

  // Emoji picker styles
  { rel: "stylesheet", href: emojiPickerStyles },
  { rel: "stylesheet", href: emojiPickerStylesBody },
  { rel: "stylesheet", href: emojiPickerStylesFlex },
  { rel: "stylesheet", href: emojiPickerStylesEmoji },
  { rel: "stylesheet", href: emojiPickerStylesHeader },
  { rel: "stylesheet", href: emojiPickerStylesSearch },
  { rel: "stylesheet", href: emojiPickerStylesEmojiList },
  { rel: "stylesheet", href: emojiPickerStylesPreview },
  { rel: "stylesheet", href: emojiPickerStylesPickerMain },
  { rel: "stylesheet", href: emojiPickerStylesEmojiCategory },
  { rel: "stylesheet", href: emojiPickerStylesSkinTonePicker },
  { rel: "stylesheet", href: emojiPickerStylesEmojiVariationPicker },
  { rel: "stylesheet", href: emojiPickerStylesCategoryNavigation },
];

Sorry it's not at all elegant but seems to do the job. Having a concatenated style sheet would help clean up a lot but I'm running a start up on a deadline!