Skip to content

fix: include css files in handler functions #1463

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 13, 2022
Merged

Conversation

ericapisani
Copy link

Summary

Includes css files in generated handler functions

Test plan

  1. Visit the Deploy Preview here
  2. Open the developer tools, expand the <head> tag
  3. Confirm that a <style> tag is present

Site showing broken behaviour here, where the <style> tag is missing

Relevant links (GitHub issues, Notion docs, etc.) or a picture of cute animal

Fixes #1268

doggo

Standard checks:

  • Check the Deploy Preview's Demo site for your PR's functionality
  • Add docs when necessary

🧪 Once merged, make sure to update the version if needed and that it was published correctly.

@ericapisani ericapisani added the type: bug code to address defects in shipped code label Jul 12, 2022
@ericapisani ericapisani requested a review from a team July 12, 2022 15:17
@ericapisani ericapisani self-assigned this Jul 12, 2022
@netlify
Copy link

netlify bot commented Jul 12, 2022

Deploy Preview for netlify-plugin-nextjs-static-root-demo ready!

Name Link
🔨 Latest commit a00b53e
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-static-root-demo/deploys/62cdd2399418e5000ea1a6dc
😎 Deploy Preview https://deploy-preview-1463--netlify-plugin-nextjs-static-root-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Jul 12, 2022

Deploy Preview for next-i18next-demo ready!

Name Link
🔨 Latest commit a00b53e
🔍 Latest deploy log https://app.netlify.com/sites/next-i18next-demo/deploys/62cdd2399ba8250008182da2
😎 Deploy Preview https://deploy-preview-1463--next-i18next-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Jul 12, 2022

Deploy Preview for next-plugin-edge-middleware ready!

Name Link
🔨 Latest commit a00b53e
🔍 Latest deploy log https://app.netlify.com/sites/next-plugin-edge-middleware/deploys/62cdd239124e2200081e19de
😎 Deploy Preview https://deploy-preview-1463--next-plugin-edge-middleware.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Jul 12, 2022

Deploy Preview for netlify-plugin-nextjs-nx-monorepo-demo ready!

Name Link
🔨 Latest commit a00b53e
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-nx-monorepo-demo/deploys/62cdd2399418e5000ea1a6d7
😎 Deploy Preview https://deploy-preview-1463--netlify-plugin-nextjs-nx-monorepo-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Jul 12, 2022

Deploy Preview for netlify-plugin-nextjs-demo ready!

Name Link
🔨 Latest commit a00b53e
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-demo/deploys/62cdd2388cad530009bc9114
😎 Deploy Preview https://deploy-preview-1463--netlify-plugin-nextjs-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Jul 12, 2022

Deploy Preview for next-plugin-rsc-demo ready!

Name Link
🔨 Latest commit a00b53e
🔍 Latest deploy log https://app.netlify.com/sites/next-plugin-rsc-demo/deploys/62cdd2391c077e00088c3f67
😎 Deploy Preview https://deploy-preview-1463--next-plugin-rsc-demo.netlify.app/
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Jul 12, 2022

Deploy Preview for next-hp-edge-demo ready!

Name Link
🔨 Latest commit a00b53e
🔍 Latest deploy log https://app.netlify.com/sites/next-hp-edge-demo/deploys/62cdd23999e14d00083379f3
😎 Deploy Preview https://deploy-preview-1463--next-hp-edge-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Jul 12, 2022

Deploy Preview for netlify-plugin-nextjs-export-demo ready!

Name Link
🔨 Latest commit a00b53e
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-export-demo/deploys/62cdd2397afe7a0008a82a55
😎 Deploy Preview https://deploy-preview-1463--netlify-plugin-nextjs-export-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Jul 12, 2022

Deploy Preview for netlify-plugin-nextjs-next-auth-demo ready!

Name Link
🔨 Latest commit a00b53e
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-next-auth-demo/deploys/62cdd2398cad530009bc9119
😎 Deploy Preview https://deploy-preview-1463--netlify-plugin-nextjs-next-auth-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Jul 12, 2022

Deploy Preview for next-plugin-canary ready!

Name Link
🔨 Latest commit a00b53e
🔍 Latest deploy log https://app.netlify.com/sites/next-plugin-canary/deploys/62cdd2396b63690009e4c1ff
😎 Deploy Preview https://deploy-preview-1463--next-plugin-canary.netlify.app/
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@cypress
Copy link

cypress bot commented Jul 12, 2022



Test summary

7 0 0 0


Run details

Project netlify-plugin-nextjs-static-demo
Status Passed
Commit dbf43d4 ℹ️
Started Jul 12, 2022 8:01 PM
Ended Jul 12, 2022 8:02 PM
Duration 01:18 💡
OS Linux Ubuntu - 20.04
Browser Chrome 103

View run in Cypress Dashboard ➡️


This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

@cypress
Copy link

cypress bot commented Jul 12, 2022



Test summary

22 0 0 0


Run details

Project netlify-plugin-nextjs-default-demo
Status Passed
Commit dbf43d4 ℹ️
Started Jul 12, 2022 8:02 PM
Ended Jul 12, 2022 8:04 PM
Duration 01:52 💡
OS Linux Ubuntu - 20.04
Browser Chrome 103

View run in Cypress Dashboard ➡️


This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

@cypress
Copy link

cypress bot commented Jul 12, 2022



Test summary

2 0 0 0


Run details

Project netlify-plugin-nextjs-nx-monorepo-demo
Status Passed
Commit dbf43d4 ℹ️
Started Jul 12, 2022 8:04 PM
Ended Jul 12, 2022 8:05 PM
Duration 01:19 💡
OS Linux Ubuntu - 20.04
Browser Chrome 103

View run in Cypress Dashboard ➡️


This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

@ascorbic
Copy link
Contributor

I'm not sure we want to include all CSS in every bundle. I think what we can do is check the config.files key in required-server-files.json. ISTR that if optimizeCss is enabled, it adds the CSS to that list.

@ericapisani
Copy link
Author

@ascorbic ah ok, I didn't realize, thank you! I think it was just a function of working with the smaller test projects leading me to an incorrect assumption because I was seeing a 1:1 between what was listed in the static folder with respect to the css and what was listed in the "files" key within required-server-files.json.

Can make the changes to make it more selective 👍🏻

sarahetter
sarahetter previously approved these changes Jul 12, 2022
@sarahetter
Copy link

Ah woops, didn't read comments above before approving!

Rather than use a glob pattern to add CSS files to the handler function,
explicitly add the same file names listed in required-server-files.json under the "files" key

Update the demos/default project in order to test this functionality
Copy link
Contributor

@ascorbic ascorbic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good! I wonder if eventually (not this PR) we could see if we could use the files list for more/all of our included files.

@kodiakhq kodiakhq bot merged commit ebdf991 into main Jul 13, 2022
@kodiakhq kodiakhq bot deleted the ep/css-not-working-in-isr branch July 13, 2022 11:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
automerge type: bug code to address defects in shipped code
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: optimizeCss critical css injection does not work with ISR pages
3 participants