animationgatsbyreactcsstransitiongroupemotion

CSSTransitions are not triggered after build. (Gatsby)


Animations with CSSTransition from the "react-tranisiton-group" and 'emotion' styled components are not triggered after build. How ever! If i auto-indent the code with the code editor in the corresponding html file everything works perfectly again.

Is there a way to not minify the html files at build time? Doest this sounds familiar to someone?


Solution

  • As i mentioned in my sub-comment above this problem has something to do with the way the browser parses the html and that adding a single space between the closing style tag and the next tag is enough to solve this issue.

    in fact its necessary to add a space before and after style tags

    This is what run after the build.

    sed -i -e 's/'"\<\/style\>"'/'"\<\/style\> "'/g' $(find ./public -name *.html) && sed -i -e 's/'"\<style"'/'" \<style"'/g' $(find ./public -name *.html)
    

    it finds all html files in the public folder and adds spaces before and after style tags. The replacement operation runs twice! One for a space before and another for a space after. This is not optimal and by a lot of html files might take some time... . DONE!