fix: include css files in handler functions (#1463)

* fix: include css files in handler functions

* refactor: explicitly add css files

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

Author: ericapisani

demos/default/next.config.js

@@ -78,6 +78,7 @@ module.exports = {
     includePaths: [path.join(__dirname, 'styles-sass-test')],
   },
   experimental: {
+    optimizeCss: true,
     images: {
       remotePatterns: [
         {

demos/default/package.json

@@ -28,6 +28,7 @@
     "@types/fs-extra": "^9.0.13",
     "@types/jest": "^27.4.1",
     "@types/node": "^17.0.25",
+    "critters": "^0.0.16",
     "husky": "^7.0.4",
     "if-env": "^1.0.4",
     "npm-run-all": "^4.1.5",

package-lock.json

@@ -79,7 +79,11 @@ const resolveModuleRoot = (moduleName) => {
 
 const DEFAULT_EXCLUDED_MODULES = ['sharp', 'electron']
 
-export const configureHandlerFunctions = ({ netlifyConfig, publish, ignore = [] }) => {
+export const configureHandlerFunctions = async ({ netlifyConfig, publish, ignore = [] }) => {
+  const config = await getRequiredServerFiles(publish)
+  const files = config.files || []
+  const cssFilesToInclude = files.filter((f) => f.startsWith(`${publish}/static/css/`))
+
   /* eslint-disable no-underscore-dangle */
   netlifyConfig.functions._ipx ||= {}
   netlifyConfig.functions._ipx.node_bundler = 'nft'
@@ -102,6 +106,7 @@ export const configureHandlerFunctions = ({ netlifyConfig, publish, ignore = []
       `${publish}/BUILD_ID`,
       `${publish}/static/chunks/webpack-middleware*.js`,
       `!${publish}/server/**/*.js.nft.json`,
+      ...cssFilesToInclude,
       ...ignore.map((path) => `!${slash(path)}`),
     )
 

plugin/src/helpers/config.ts

@@ -105,7 +105,7 @@ const plugin: NetlifyPlugin = {
 
     const buildId = readFileSync(join(publish, 'BUILD_ID'), 'utf8').trim()
 
-    configureHandlerFunctions({ netlifyConfig, ignore, publish: relative(process.cwd(), publish) })
+    await configureHandlerFunctions({ netlifyConfig, ignore, publish: relative(process.cwd(), publish) })
 
     await generateFunctions(constants, appDir)
     await generatePagesResolver({ target, constants })

plugin/src/index.ts

@@ -454,6 +454,8 @@ describe('onBuild()', () => {
       '.next/BUILD_ID',
       '.next/static/chunks/webpack-middleware*.js',
       '!.next/server/**/*.js.nft.json',
+      ".next/static/css/1152424140993be6.css",
+      ".next/static/css/84099ae0bbc955fa.css",  
       '!../../node_modules/next/dist/compiled/@ampproject/toolbox-optimizer/**/*',
       `!node_modules/next/dist/server/lib/squoosh/**/*.wasm`,
       `!node_modules/next/dist/next-server/server/lib/squoosh/**/*.wasm`,