Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Fix CSS modules imports from outside of the root directory #42106

Merged
merged 15 commits into from Oct 31, 2022
Merged

Fix CSS modules imports from outside of the root directory #42106

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
11599b8
fix CSS modules imports from outside of the root directory when trans…
shuding Oct 29, 2022
b705706
fix src folder and transpileModules
shuding Oct 29, 2022
3be60d2
add test
shuding Oct 29, 2022
e00ce17
Merge branch 'canary' into shu/n5hx
shuding Oct 29, 2022
5cfd538
Merge branch 'canary' into shu/n5hx
ijjk Oct 29, 2022
dfdefaa
Merge branch 'canary' into shu/n5hx
shuding Oct 30, 2022
6c5a11f
Merge branch 'canary' into shu/n5hx
kodiakhq[bot] Oct 30, 2022
d3f9902
Merge branch 'canary' into shu/n5hx
shuding Oct 31, 2022
e6f1b5a
Merge branch 'canary' into shu/n5hx
kodiakhq[bot] Oct 31, 2022
055e7e4
fix test for pages
shuding Oct 31, 2022
44baa91
fix test for pages
shuding Oct 31, 2022
00dcf19
fix lint error
shuding Oct 31, 2022
f7c7a49
skip tests
shuding Oct 31, 2022
16073f8
Merge branch 'canary' into shu/n5hx
kodiakhq[bot] Oct 31, 2022
109ca21
Merge branch 'canary' into shu/n5hx
kodiakhq[bot] Oct 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
37 changes: 4 additions & 33 deletions packages/next/build/webpack/config/blocks/css/index.ts
View file
Open in desktop
Expand Up @@ -273,6 +273,7 @@ export const css = curry(async function css(
// CSS Modules support must be enabled on the server and client so the class
// names are available for SSR or Prerendering.
if (ctx.hasAppDir && !ctx.isProduction) {
// CSS modules
fns.push(
loader({
oneOf: [
Expand All @@ -284,16 +285,6 @@ export const css = curry(async function css(
sideEffects: false,
// CSS Modules are activated via this specific extension.
test: regexCssModules,
// CSS Modules are only supported in the user's application. We're
// not yet allowing CSS imports _within_ `node_modules`.
issuer: {
Copy link

@terrymun terrymun Nov 1, 2022 •
edited

Choose a reason for hiding this comment

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

Removal of this line is causing next-transpile-module as well as Nx plugins to fail with Next@13.0.1. Is this something that we can restore?

and: [
{
or: [ctx.rootDirectory, regexClientEntry],
},
],
not: [/node_modules/],
},
use: [
require.resolve('../../../loaders/next-flight-css-dev-loader'),
...getCssModuleLoader(ctx, lazyPostCSSInitializer),
Expand All @@ -302,10 +293,12 @@ export const css = curry(async function css(
],
})
)

// Opt-in support for Sass (using .scss or .sass extensions).
fns.push(
loader({
oneOf: [
// Opt-in support for Sass (using .scss or .sass extensions).
// For app dir, we match both server and client layers.
markRemovable({
// Sass Modules should never have side effects. This setting will
// allow unused Sass to be removed from the production build.
Expand All @@ -314,12 +307,6 @@ export const css = curry(async function css(
sideEffects: false,
// Sass Modules are activated via this specific extension.
test: regexSassModules,
// Sass Modules are only supported in the user's application. We're
// not yet allowing Sass imports _within_ `node_modules`.
issuer: {
and: [ctx.rootDirectory],
not: [/node_modules/],
},
use: [
require.resolve('../../../loaders/next-flight-css-dev-loader'),
...getCssModuleLoader(
Expand All @@ -344,16 +331,6 @@ export const css = curry(async function css(
sideEffects: false,
// CSS Modules are activated via this specific extension.
test: regexCssModules,
// CSS Modules are only supported in the user's application. We're
// not yet allowing CSS imports _within_ `node_modules`.
issuer: {
and: [
{
or: [ctx.rootDirectory, regexClientEntry],
},
],
not: [/node_modules/],
},
use: getCssModuleLoader(ctx, lazyPostCSSInitializer),
}),
],
Expand All @@ -371,12 +348,6 @@ export const css = curry(async function css(
sideEffects: false,
// Sass Modules are activated via this specific extension.
test: regexSassModules,
// Sass Modules are only supported in the user's application. We're
// not yet allowing Sass imports _within_ `node_modules`.
issuer: {
and: [ctx.rootDirectory],
not: [/node_modules/],
},
use: getCssModuleLoader(
ctx,
lazyPostCSSInitializer,
Expand Down
1 change: 1 addition & 0 deletions test/e2e/app-dir/app-alias/next.config.js
View file
Open in desktop
@@ -1,5 +1,6 @@
module.exports = {
experimental: {
appDir: true,
transpileModules: ['ui'],
},
}
20 changes: 20 additions & 0 deletions test/e2e/app-dir/rsc-external.test.ts
View file
Open in desktop
Expand Up @@ -135,4 +135,24 @@ describe('app dir - rsc external dependency', () => {
expect(result).toMatch(/\.css/)
})
})

it('should handle external css modules', async () => {
const browser = await webdriver(next.url, '/css/modules')

expect(
await browser.eval(
`window.getComputedStyle(document.querySelector('h1')).color`
)
).toBe('rgb(255, 0, 0)')
})

it('should handle external css modules in pages', async () => {
const browser = await webdriver(next.url, '/test-pages')

expect(
await browser.eval(
`window.getComputedStyle(document.querySelector('h1')).color`
)
).toBe('rgb(255, 0, 0)')
})
})
2 changes: 1 addition & 1 deletion test/e2e/app-dir/rsc-external/app/css/[...slug]/page.js
View file
Open in desktop
@@ -1,4 +1,4 @@
import 'global-css/style.css'
import 'css/style.css'

export default function Page() {
return <div>hello</div>
Expand Down
5 changes: 5 additions & 0 deletions test/e2e/app-dir/rsc-external/app/css/modules/page.js
View file
Open in desktop
@@ -0,0 +1,5 @@
import Foo from 'css/module'

export default function Page() {
return <Foo />
}
2 changes: 1 addition & 1 deletion test/e2e/app-dir/rsc-external/next.config.js
View file
Open in desktop
Expand Up @@ -3,6 +3,6 @@ module.exports = {
experimental: {
appDir: true,
serverComponentsExternalPackages: ['conditional-exports-optout'],
transpilePackages: ['untranspiled-module'],
transpilePackages: ['untranspiled-module', 'css'],
},
}
0 ...rnal/node_modules_bak/global-css/index.js → ...sc-external/node_modules_bak/css/index.js
View file
Open in desktop
File renamed without changes.
5 changes: 5 additions & 0 deletions test/e2e/app-dir/rsc-external/node_modules_bak/css/module.js
View file
Open in desktop
@@ -0,0 +1,5 @@
import styles from './styles.module.css'

export default function Foo() {
return <h1 className={styles.h1}>Hello</h1>
}
3 changes: 2 additions & 1 deletion .../node_modules_bak/global-css/package.json → ...xternal/node_modules_bak/css/package.json
View file
Open in desktop
@@ -1,10 +1,11 @@
{
"name": "global-css",
"name": "css",
"type": "module",
"sideEffects": false,
"exports": {
".": "./index.js",
"./style.css": "./style.css",
"./module": "./module.js",
"./package.json": "./package.json"
}
}
0 ...nal/node_modules_bak/global-css/style.css → ...c-external/node_modules_bak/css/style.css
View file
Open in desktop
File renamed without changes.
3 changes: 3 additions & 0 deletions test/e2e/app-dir/rsc-external/node_modules_bak/css/styles.module.css
View file
Open in desktop
@@ -0,0 +1,3 @@
.h1 {
color: red;
}
5 changes: 5 additions & 0 deletions test/e2e/app-dir/rsc-external/pages/test-pages.jsx
View file
Open in desktop
@@ -0,0 +1,5 @@
import Foo from 'css/module'

export default function Page() {
return <Foo />
}
4 changes: 2 additions & 2 deletions test/integration/css-modules/test/index.test.js
View file
Open in desktop
Expand Up @@ -237,7 +237,7 @@ describe('Can hot reload CSS Module without losing state', () => {
})
})

describe('Invalid CSS Module Usage in node_modules', () => {
describe.skip('Invalid CSS Module Usage in node_modules', () => {
const appDir = join(fixturesDir, 'invalid-module')

beforeAll(async () => {
Expand All @@ -258,7 +258,7 @@ describe('Invalid CSS Module Usage in node_modules', () => {
})
})

describe('Invalid Global CSS Module Usage in node_modules', () => {
describe.skip('Invalid Global CSS Module Usage in node_modules', () => {
const appDir = join(fixturesDir, 'invalid-global-module')

beforeAll(async () => {
Expand Down
4 changes: 2 additions & 2 deletions test/integration/scss-modules/test/index.test.js
View file
Open in desktop
Expand Up @@ -233,7 +233,7 @@ describe('Can hot reload CSS Module without losing state', () => {
})
})

describe('Invalid CSS Module Usage in node_modules', () => {
describe.skip('Invalid CSS Module Usage in node_modules', () => {
const appDir = join(fixturesDir, 'invalid-module')

beforeAll(async () => {
Expand All @@ -254,7 +254,7 @@ describe('Invalid CSS Module Usage in node_modules', () => {
})
})

describe('Invalid CSS Global Module Usage in node_modules', () => {
describe.skip('Invalid CSS Global Module Usage in node_modules', () => {
const appDir = join(fixturesDir, 'invalid-global-module')

beforeAll(async () => {
Expand Down