I am experiencing problems when using this library on a clean and fresh installation of GatsbyJS.
The project looks fine when it is being developed, but when a build is done and the project is executed it does not show the styles of the components.
I have created a public repository, if you can download and run the project npm run start you can see on the localhost:8000 page that the navigation bar is displayed correctly, attached screenshot.
But if you make a build and then run that build: npm run build; npm run serve you can see that the web does not load the styles, if dimensions, heights or responsive styles, I upload screenshots with my results.
But if you navigate between the two pages you will see that the styles are loaded later.
To Reproduce
1) Clone the repository given
2) Install the NPM modules running npm run ci
3) See the project running locally npm run start
4) Go to localhost:8000 on any web browser and you will be able to see the navbar styled
5) Stop the previous process, build and serve locally the project running npm run build; npm run serve
6) Go to localhost:9000 on any web browser, you will see the navbar unstyled
7) Use the navbar to navigate to another view, example contact and see how the navbar its styled now, even if you navigate to home again the style will still loaded.
Expected behavior
The components created with xstyled needs to keep the style even if the project its compiled for production environments
🐛 Bug Report
I am experiencing problems when using this library on a clean and fresh installation of GatsbyJS.
The project looks fine when it is being developed, but when a build is done and the project is executed it does not show the styles of the components.
I have created a public repository, if you can download and run the project
npm run startyou can see on thelocalhost:8000page that the navigation bar is displayed correctly, attached screenshot.For more contect here is my Navbar component https://github.com/ChristianHardy/gatsby-xstyled/blob/main/src/components/Navbar/index.tsx
But if you make a build and then run that build:
npm run build; npm run serveyou can see that the web does not load the styles, if dimensions, heights or responsive styles, I upload screenshots with my results.But if you navigate between the two pages you will see that the styles are loaded later.
To Reproduce
1) Clone the repository given 2) Install the NPM modules running
npm run ci3) See the project running locallynpm run start4) Go tolocalhost:8000on any web browser and you will be able to see the navbar styled 5) Stop the previous process, build and serve locally the project runningnpm run build; npm run serve6) Go tolocalhost:9000on any web browser, you will see the navbar unstyled 7) Use the navbar to navigate to another view, examplecontactand see how the navbar its styled now, even if you navigate tohomeagain the style will still loaded.Expected behavior
The components created with xstyled needs to keep the style even if the project its compiled for production environments
Link to repl or repo (highly encouraged)
https://github.com/ChristianHardy/gatsby-xstyled
Run
npx envinfo --system --binaries --npmPackages @xstyled/system,@xstyled/styled-components,styled-components --markdown --clipboardPaste the results here: