Importing Global CSS in Next.js with Webpack

Current behavior

Following this migration guide, it is recommended to add (global) stylesheets to your tests. Nextjs’s webpack wouldn’t allow you to add them to your components anyway. But, when you add styles to a test, all tests (in cypress open-ct) hang on Your tests are loading....

import 'tailwindcss/tailwind.css' // or '../styles/index.css'

import { mount } from '@cypress/react'
import Button from '.'

describe('<Button />', () => {
  it('should mount', () => {
    mount(<Button />)
    cy.contains('click me')
  })
})

Desired behavior

For the global styles to get applied.

Test code to reproduce

// cypress/plugins/index.ts
const injectNextDevServer = require('@cypress/react/plugins/next')

const pluginConfig: Cypress.PluginConfig = (on, config) => {
  if (config.testingType === 'component') {
    injectNextDevServer(on, config)
  }

  return config
}

module.exports = pluginConfig

Versions

Cypress package version: 7.5.0
Cypress binary version: 7.5.0
Electron version: 12.0.0-beta.14
Bundled Node version: 14.15.1
OS: (Linux) 5.10.36-2-MANJARO

[leerob]

We are going to allow global CSS imports 👍

https://github.com/vercel/next.js/discussions/27953

[JessicaSachs]

We’re working on designing the API for global CSS imports right now. It seems like Next.js can be pretty restrictive when it comes to supporting developer tools/non-Next.js environments. (Storybook has these problems, too).

If you folks (@natterstefan or @smhmd) have any ideas for how to solve this going forward, we’d like some input 😃