search

jafaircl / gatsby-plugin-amp

Gatsby plugin for creating AMP pages
34 stars 32 forks source link

gatsby-plugin-amp include animate.css #23

Open kalwalt opened 5 years ago

kalwalt commented 5 years ago

I'm developing for a gatsby template the amp version with your plugin. The problem is that i'm using animate.css package and it is included in <style amp-custom> </style> in the head, even if i haven't any ref in the template and components. There is some way to avoid to parse it in the custom <style>tag? If you want take a look at a preview of a page https://amp-feature--gatsby-starter-i18n-bulma.netlify.com/it/amp/

If you want to check my code this is my PR https://github.com/kalwalt/gatsby-starter-i18n-bulma/pull/110

kalwalt commented 5 years ago

Maybe it is a issue with Netlify: The local version, on my pc, has not animate.css and other css libs, instead that one hosted on the Netlify server has animate.css and is highlighted in the amp validator. I don't understand why it happens.

jafaircl commented 5 years ago

Sorry github has decided I don’t need to get notifications about this repo for some super awesome reason so I’m just seeing this.

Looking at your code, you have animate.css imported into all.sass which is then imported into your layout component. So it will be present in any component that uses that layout component.

I would recommend creating a separate amp layout component that is essentially identical but doesn’t import all.sass. You could create an all-amp.sass file that doesn’t bring in animate.css and import that instead.

kalwalt commented 5 years ago

Sorry github has decided I don’t need to get notifications about this repo for some super awesome reason so I’m just seeing this.

@jafaircl Sometimes happens also to me no worries!

Looking at your code, you have animate.css imported into all.sass which is then imported into your layout component. So it will be present in any component that uses that layout component.

i already created my LayoutAmp.js component for the home.amp.js template that not import animate.css but the strange thing is in my localhost machine is not imported, instead in the Netlify hosted site is imported. Maybe it depends by the cache but i can't deleted because i'am working not in the master branch. On Netlify you can delete the cache only in the master branch. I would solve this because i'd like to add this feature to the template and also to my personal website. Anyway i will re-check all my code to be sure...