search

martpie / next-transpile-modules

Next.js plugin to transpile code from node_modules. Please see: https://github.com/martpie/next-transpile-modules/issues/291
MIT License
1.13k stars 85 forks source link

Add support for global CSS imports #210

Closed fabianishere closed 3 years ago

fabianishere commented 3 years ago

This pull request builds upon the work in #166 and adds support for transpiling packages that use Global CSS imports (e.g., Patternfly 4).

The change works by looking up Next.js' existing Webpack rules for global CSS imports and modifying them to include the targeted modules in the rule (therefore bypassing the error loader).

Since Next.js itself does not support importing global CSS inside non-page components, it might be a good idea to put this functionality behind a feature flag. What do you think @martpie?

martpie commented 3 years ago

Since Next.js itself does not support importing global CSS inside non-page components, it might be a good idea to put this functionality behind a feature flag.

Since Next.js 9.5.4, importing a CSS file from node_modules is permitted anywhere in your application.

https://nextjs.org/docs/basic-features/built-in-css-support#import-styles-from-node_modules

I think we're good here, unless I missed something

fabianishere commented 3 years ago

@martpie Ah, I see. It seems that this is not the case (yet) for SASS files.

martpie commented 3 years ago

Well RIP

../_shared-ui/components/Textarea.css
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.jsx. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: ../_shared-ui/components/Textarea.jsx
fabianishere commented 3 years ago

Seems like it works for npm-basic but not for the yarn-workspaces test.

martpie commented 3 years ago

There might be issues between Webpack 4 and Webpack 5.

fabianishere commented 3 years ago

I think I found the culprit. With the yarn-workspaces test, the shared-ui package is a symlink in node_modules which resolves to a path outside node_modules. Since the global CSS rule from Next.js only allows imports to files inside node_modules (after resolving symlinks), the tests obviously failed.

martpie commented 3 years ago

Thank you, will release soon! 👏👏