search

lsirivong / gatsby-plugin-modal-routing

A gatsby plugin for routable modals
44 stars 30 forks source link

Different Result on gatsby develop vs. build #46

Closed kpennell closed 4 years ago

kpennell commented 4 years ago

Hi there - Awesome Plugin here.

My use of it works great on Gatsby build. It sets up a nice modal that hangs over the page and is close-able. Like Instagram, yay!

But on gatsby build + serve, the modal just chills the bottom 20% of the page. Like something isn't working right on build.

In the past.....(recent past) I've had to use gatsby-browser or gatsby-ssr to wrap elements to get them to work right. Stuff breaks otherwise. Could that be the case here?

sandbox: https://codesandbox.io/s/github/kpennell/acrotagsProd/tree/master/?fontsize=14&hidenavigation=1&theme=dark

Maybe because I'm using a component with a graphql query at the bottom?

kpennell commented 4 years ago

in action: https://acrotags.com/

lsirivong commented 4 years ago

Strange! Not sure why the styles would work in development but not after building. I'm suspicious of this plugin you have configured: gatsby-plugin-purgecss. I'm guessing it's not recognizing that the React modal styles that are configured in gatsby-config.js

anantoghosh commented 4 years ago

Yup, gatsby-plugin-purgecss will not find selectors defined in gatsby-config.js. Whitelist the selectors ReactModalOverlay, ReactModalContent https://github.com/anantoghosh/gatsby-plugin-purgecss#1-whitelist-the-selector-using-the-whitelist-option-in-gatsby-configjs or to whitelist all selectors starting with ReactModal https://github.com/anantoghosh/gatsby-plugin-purgecss#3--use-regex-pattern-to-exclude-many-selectors

kpennell commented 4 years ago

@anantoghosh Thx for the response. That was it. I had tried removing it before but must have been running on cache or something like that