Built-In Next.js CSS Support

[Timer]

Is your feature request related to a problem? Please describe.

It'd be nice if this package was updated for Next.js' new built-in CSS support.

Describe the solution you'd like

This plugin should enable the use of CSS Modules for a "transpiled module".

Describe alternatives you've considered

N/A

Additional context

This is a new feature of Next.js being released in a few days. You can find it on the latest canary (and you can import xxx.module.css).

[martpie]

hello there 👋 I knew a little bit about CSS support in Next.js (🎉), but I may be missing some information.

The thing would be that if an external package has some modules that import CSS files (like const styles = require('./styles.css'), it should be bundled too?

[Timer]

From the Next.js Team's perspective, Global CSS (styles.css) should definitely not be bundled or supported, even if said package is marked to transpile.
This should strictly activate CSS Module support.

We could allow styles.css if the root isser came from pages/_app.js, but that's probably too tricky to be worth the trouble of implementing.

[Timer]

See vercel/next.js#10031 and vercel/next.js#10032.

[martpie]

Ohw ok, it's a bit different than what I thought.

• CSS Imported by a Dependency: this is clear, this won't work in "vanilla Next.js" but transpiled modules should be allowed to do it
• Global CSS Must Be in Your Custom <App>: this is less obvious, what does it mean from "transpiled modules"'s CSS? That the CSS will be processed through css-loader's module option? Won't it break the styles if the transpiled module React code is not correctly written? Or will this CSS be global?

[Timer]

Let me write the documentation for the new support, which should clarify a lot!

[martpie]

I added better unit tests and end-to-end tests, this should be much easier to implement now. Will have a look tomorrow :)

[martpie]

[
  {
    test: /\.(tsx|ts|js|mjs|jsx)$/,
    include: [
      '/Users/pierre/dev/next-transpile-modules/src/__tests__/__apps__/basic',
      /next[\\/]dist[\\/]next-server[\\/]lib/,
      /next[\\/]dist[\\/]client/,
      /next[\\/]dist[\\/]pages/,
      /[\\/](strip-ansi|ansi-regex)[\\/]/
    ],
    exclude: [Function: exclude],
    use: {
      loader: 'next-babel-loader',
      options: {
        isServer: true,
        distDir: '/Users/pierre/dev/next-transpile-modules/src/__tests__/__apps__/basic/.next',
        pagesDir: '/Users/pierre/dev/next-transpile-modules/src/__tests__/__apps__/basic/pages',
        cwd: '/Users/pierre/dev/next-transpile-modules/src/__tests__/__apps__/basic',
        cache: true,
        babelPresetPlugins: [],
        hasModern: false,
        development: true
      }
    }
  },
  {
    oneOf: [
      {
        test: /a^/,
        loader: 'noop-loader',
        options: { __next_css_remove: true }
      },
      {
        test: /\.css$/,
        issuer: { test: /pages[\\/]_document\./ },
        use: {
          loader: 'error-loader',
          options: {
            reason: 'CSS \u001b[1mcannot\u001b[22m be imported within \u001b[36mpages/_document.js\u001b[39m. Please move global styles to \u001b[36mpages/_app.js\u001b[39m.'
          }
        }
      },
      {
        sideEffects: false,
        test: /\.module\.css$/,
        issuer: {
          include: [
            '/Users/pierre/dev/next-transpile-modules/src/__tests__/__apps__/basic'
          ],
          exclude: /node_modules/
        },
        use: [
          {
            loader: '/Users/pierre/dev/next-transpile-modules/src/__tests__/__apps__/basic/node_modules/css-loader/dist/cjs.js',
            options: {
              importLoaders: 1,
              sourceMap: true,
              onlyLocals: true,
              modules: {
                mode: 'pure',
                getLocalIdent: [Function: getCssModuleLocalIdent]
              }
            }
          },
          {
            loader: '/Users/pierre/dev/next-transpile-modules/src/__tests__/__apps__/basic/node_modules/postcss-loader/src/index.js',
            options: {
              ident: '__nextjs_postcss',
              plugins: [
                [Function: creator] { process: [Function (anonymous)] },
                [Function (anonymous)] {
                  postcssPlugin: 'postcss-preset-env',
                  postcssVersion: '7.0.26'
                }
              ],
              sourceMap: true
            }
          }
        ]
      },
      {
        test: /\.module\.css$/,
        use: {
          loader: 'error-loader',
          options: {
            reason: 'CSS Modules \u001b[1mcannot\u001b[22m be imported from within \u001b[1mnode_modules\u001b[22m.\n' +
              'Read more: https://err.sh/next.js/css-modules-npm'
          }
        }
      },
      {
        test: /\.css$/,
        use: '/Users/pierre/dev/next-transpile-modules/src/__tests__/__apps__/basic/node_modules/ignore-loader/index.js'
      },
      {
        test: /\.css$/,
        issuer: { include: [ /node_modules/ ] },
        use: {
          loader: 'error-loader',
          options: {
            reason: 'Global CSS \u001b[1mcannot\u001b[22m be imported from within \u001b[1mnode_modules\u001b[22m.\n' +
              'Read more: https://err.sh/next.js/css-npm'
          }
        }
      },
      {
        test: /\.css$/,
        use: {
          loader: 'error-loader',
          options: {
            reason: 'Global CSS \u001b[1mcannot\u001b[22m be imported from files other than your \u001b[1mCustom <App>\u001b[22m. Please move all global CSS imports to \u001b[36mpages/_app.js\u001b[39m.\n' +
              'Read more: https://err.sh/next.js/css-global'
          }
        }
      }
    ]
  }
]

[martpie]

Added in #58

The code is ugly (it was a bit tricky to isolate the Webpack rules for CSS), and I will need to be careful about future breaking changes in the Webpack config of future Next.js releases.

Maybe @Timer you can confirm me this is supported the way you wanted? I may have missed some edgecases.

• https://github.com/martpie/next-transpile-modules/blob/next/README.md#css-support

• next-transpile-modules/src/__tests__/__apps__/basic/pages/_app.jsx

  Line 1 in 6aa223e

  import 'shared-ui/styles/global.css';

• next-transpile-modules/src/__tests__/__apps__/basic/pages/test-css-module.jsx

  Lines 1 to 12 in 6aa223e

  	import React from 'react';
  	import Button from 'shared-ui/components/Button';
  	const HomePage = () => {
  	return (
  	<main>
  	<Button>Styled button</Button>
  	</main>
  	);
  	};
  	export default HomePage;

• next-transpile-modules/src/__tests__/e2e/basic.test.js

  Lines 59 to 74 in 6aa223e

  	describe('css-module transpilation', () => {
  	test('pages using transpiled modules should be correctly displayed', async () => {
  	const page = await browser.newPage();
  	const response = await page.goto(`${BASE_URL}/test-css-module`);
  	if (!response) throw new Error('Could not access the page');
  	expect(response.status()).toBe(200);
  	const content = await page.$eval('button', (e) => e.textContent);
  	expect(content).toBe('Styled button');
  	const className = await page.$eval('button', (e) => e.classList[0]);
  	expect(className.includes('Button_error__')).toBe(true);
  	});
  	});

[martpie]

Ok, let's assume it is the correct implementation, if you see issues or unexpected results, please open a separate issue @Timer