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

build: Update lightningcss #70246

Closed
wants to merge 6 commits into from
Closed

build: Update lightningcss #70246

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0d58349
Add a test
kdy1 Sep 19, 2024
d12a873
Split tests
kdy1 Sep 19, 2024
1bf4557
Revert "Split tests"
kdy1 Sep 19, 2024
c63fa35
All error
kdy1 Sep 20, 2024
2716464
Use production test
kdy1 Sep 20, 2024
cd29dba
container
kdy1 Nov 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions test/production/css-error/app/css-error/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
'use client'

export default function Page() {
return (
<>
<div></div>
</>
)
}
18 changes: 18 additions & 0 deletions test/production/css-error/app/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/* Correct syntax: input::placeholder */
input:placeholder {
color: red;
}

.rowContainer {
&.header {
/* Correct syntax: &.darktheme */
&:darktheme {
border-bottom-color: var(--accents-2);
}
}

/* Correct syntax: &.global(.dark-theme) */
&:global(.dark-theme) & {
background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.5) 100%);
}
}
7 changes: 7 additions & 0 deletions test/production/css-error/app/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
'use client'

import './global.css'

export default function Layout({ children }) {
return <>{children}</>
}
236 changes: 236 additions & 0 deletions test/production/css-error/index.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,236 @@
import { nextBuild } from 'next-test-utils'
import { join } from 'path'
import stripAnsi from 'strip-ansi'

describe('app dir - css', () => {
describe('css support', () => {
const appDir = join(__dirname)

// css-loader does not report an error for this case
;(process.env.TURBOPACK ? describe : describe.skip)(
'error handling',
() => {
it('should report human-readable error message for css', async () => {
const { stderr } = await nextBuild(appDir, [], { stderr: true })

expect(stripAnsi(stderr)).toMatchInlineSnapshot(`
" ⚠ Linting is disabled.

> Build error occurred
Error: Turbopack build failed with 15 errors:
Page: {"type":"pages","side":"server","page":"_app"}
./test/production/css-error/app/global.css:9:8
Parsing css source code failed
7 | &.header {
8 | /* Correct syntax: &.darktheme */
> 9 | &:darktheme {
| ^
10 | border-bottom-color: var(--accents-2);
11 | }
12 | }

Unsupported pseudo class or element: darktheme at [project]/test/production/css-error/app/global.css:8:7


Page: {"type":"pages","side":"server","page":"_app"}
./test/production/css-error/app/global.css:15:13
Parsing css source code failed
13 |
14 | /* Correct syntax: &.global(.dark-theme) */
> 15 | &:global(.dark-theme) & {
| ^
16 | background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.5) 100%);
17 | }
18 | }

Unsupported pseudo class or element: global at [project]/test/production/css-error/app/global.css:14:12


Page: {"type":"pages","side":"server","page":"_app"}
./test/production/css-error/app/global.css:2:8
Parsing css source code failed
1 | /* Correct syntax: input::placeholder */
> 2 | input:placeholder {
| ^
3 | color: red;
4 | }
5 |

Unsupported pseudo class or element: placeholder at [project]/test/production/css-error/app/global.css:1:7


Page: {"type":"pages","side":"server","page":"_document"}
./test/production/css-error/app/global.css:9:8
Parsing css source code failed
7 | &.header {
8 | /* Correct syntax: &.darktheme */
> 9 | &:darktheme {
| ^
10 | border-bottom-color: var(--accents-2);
11 | }
12 | }

Unsupported pseudo class or element: darktheme at [project]/test/production/css-error/app/global.css:8:7


Page: {"type":"pages","side":"server","page":"_document"}
./test/production/css-error/app/global.css:15:13
Parsing css source code failed
13 |
14 | /* Correct syntax: &.global(.dark-theme) */
> 15 | &:global(.dark-theme) & {
| ^
16 | background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.5) 100%);
17 | }
18 | }

Unsupported pseudo class or element: global at [project]/test/production/css-error/app/global.css:14:12


Page: {"type":"pages","side":"server","page":"_document"}
./test/production/css-error/app/global.css:2:8
Parsing css source code failed
1 | /* Correct syntax: input::placeholder */
> 2 | input:placeholder {
| ^
3 | color: red;
4 | }
5 |

Unsupported pseudo class or element: placeholder at [project]/test/production/css-error/app/global.css:1:7


Page: {"type":"pages","side":"server","page":"_error"}
./test/production/css-error/app/global.css:9:8
Parsing css source code failed
7 | &.header {
8 | /* Correct syntax: &.darktheme */
> 9 | &:darktheme {
| ^
10 | border-bottom-color: var(--accents-2);
11 | }
12 | }

Unsupported pseudo class or element: darktheme at [project]/test/production/css-error/app/global.css:8:7


Page: {"type":"pages","side":"server","page":"_error"}
./test/production/css-error/app/global.css:15:13
Parsing css source code failed
13 |
14 | /* Correct syntax: &.global(.dark-theme) */
> 15 | &:global(.dark-theme) & {
| ^
16 | background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.5) 100%);
17 | }
18 | }

Unsupported pseudo class or element: global at [project]/test/production/css-error/app/global.css:14:12


Page: {"type":"pages","side":"server","page":"_error"}
./test/production/css-error/app/global.css:2:8
Parsing css source code failed
1 | /* Correct syntax: input::placeholder */
> 2 | input:placeholder {
| ^
3 | color: red;
4 | }
5 |

Unsupported pseudo class or element: placeholder at [project]/test/production/css-error/app/global.css:1:7


Page: {"type":"app","side":"server","page":"/css-error/page"}
./test/production/css-error/app/global.css:9:8
Parsing css source code failed
7 | &.header {
8 | /* Correct syntax: &.darktheme */
> 9 | &:darktheme {
| ^
10 | border-bottom-color: var(--accents-2);
11 | }
12 | }

Unsupported pseudo class or element: darktheme at [project]/test/production/css-error/app/global.css:8:7


Page: {"type":"app","side":"server","page":"/css-error/page"}
./test/production/css-error/app/global.css:15:13
Parsing css source code failed
13 |
14 | /* Correct syntax: &.global(.dark-theme) */
> 15 | &:global(.dark-theme) & {
| ^
16 | background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.5) 100%);
17 | }
18 | }

Unsupported pseudo class or element: global at [project]/test/production/css-error/app/global.css:14:12


Page: {"type":"app","side":"server","page":"/css-error/page"}
./test/production/css-error/app/global.css:2:8
Parsing css source code failed
1 | /* Correct syntax: input::placeholder */
> 2 | input:placeholder {
| ^
3 | color: red;
4 | }
5 |

Unsupported pseudo class or element: placeholder at [project]/test/production/css-error/app/global.css:1:7


Page: {"type":"app","side":"server","page":"/_not-found/page"}
./test/production/css-error/app/global.css:9:8
Parsing css source code failed
7 | &.header {
8 | /* Correct syntax: &.darktheme */
> 9 | &:darktheme {
| ^
10 | border-bottom-color: var(--accents-2);
11 | }
12 | }

Unsupported pseudo class or element: darktheme at [project]/test/production/css-error/app/global.css:8:7


Page: {"type":"app","side":"server","page":"/_not-found/page"}
./test/production/css-error/app/global.css:15:13
Parsing css source code failed
13 |
14 | /* Correct syntax: &.global(.dark-theme) */
> 15 | &:global(.dark-theme) & {
| ^
16 | background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.5) 100%);
17 | }
18 | }

Unsupported pseudo class or element: global at [project]/test/production/css-error/app/global.css:14:12


Page: {"type":"app","side":"server","page":"/_not-found/page"}
./test/production/css-error/app/global.css:2:8
Parsing css source code failed
1 | /* Correct syntax: input::placeholder */
> 2 | input:placeholder {
| ^
3 | color: red;
4 | }
5 |

Unsupported pseudo class or element: placeholder at [project]/test/production/css-error/app/global.css:1:7


at turbopackBuild (/Users/kdy1/projects/next-css/packages/next/dist/build/index.js:900:27)
at async /Users/kdy1/projects/next-css/packages/next/dist/build/index.js:933:89
at async Span.traceAsyncFn (/Users/kdy1/projects/next-css/packages/next/dist/trace/trace.js:157:20)
at async build (/Users/kdy1/projects/next-css/packages/next/dist/build/index.js:333:9)
"
`)
})
}
)
})
})
11 changes: 10 additions & 1 deletion turbopack/crates/turbopack-css/src/process.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -559,6 +559,7 @@ async fn process_content(
},
dashed_idents: false,
grid: false,
container: false,
..Default::default()
}),

Expand Down Expand Up @@ -592,6 +593,8 @@ async fn process_content(
}
}

let mut has_errors = false;

for err in warnings.read().unwrap().iter() {
match err.kind {
lightningcss::error::ParserError::UnexpectedToken(_)
Expand All @@ -613,7 +616,8 @@ async fn process_content(
}
.cell()
.emit();
return Ok(ParseCssResult::Unparseable.cell());

has_errors = true;
}

_ => {
Expand All @@ -622,6 +626,10 @@ async fn process_content(
}
}

if has_errors {
return Ok(ParseCssResult::Unparseable.cell());
}

stylesheet_into_static(&ss, without_warnings(config.clone()))
}
Err(e) => {
Expand Down Expand Up @@ -1150,6 +1158,7 @@ mod tests {
pattern: Pattern::default(),
dashed_idents: false,
grid: false,
container: false,
..Default::default()
}),
..Default::default()
Expand Down
Loading