Add eslint rule for not allowing styled-jsx in _document.js #32678

src200 · 2021-12-20T14:47:29Z

Bug

Related issues linked
fixes ESLint rule idea: <style> is not allowed inside _document.js #32656

src200 · 2021-12-20T14:51:06Z

Hey @timneutkens
This is my first ever PR to my favorite framework(Actually this is my first opensource PR). Please let me know if I'm on the correct path.

balazsorban44

It's not all style that is disallowed, only solutions like styled-jsx

https://nextjs.org/docs/advanced-features/custom-document#caveats

src200 · 2021-12-20T14:55:38Z

It's not all style that is disallowed, only solutions like styled-jsx

https://nextjs.org/docs/advanced-features/custom-document#caveats

Ahh! Updating it now.
Thanks

balazsorban44

Added some minor comments.

packages/eslint-plugin-next/lib/index.js

test/unit/eslint-plugin-next/no-style-in-document.test.ts

balazsorban44

ESLint errors also link to a document page that explains the issue in detail, and how the user could fix them. See any other lint rule as an example.

Document page example: https://github.com/vercel/next.js/blob/canary/errors/inline-script-id.md

src200 · 2021-12-23T05:38:42Z

ESLint errors also link to a document page that explains the issue in detail, and how the user could fix them. See any other lint rule as an example.

Document page example: https://github.com/vercel/next.js/blob/canary/errors/inline-script-id.md

@balazsorban44 Added documentation

errors/no-styled-jsx-in-document.md

balazsorban44

Thanks, left some minor formatting-related comments and added some useful links.

Co-authored-by: Balázs Orbán <info@balazsorban.com>

src200 · 2021-12-27T04:27:49Z

Thanks, left some minor formatting-related comments and added some useful links.

Updated docs.
Thanks

src200 · 2022-04-17T16:03:58Z

@balazsorban44 Could you please review this PR?

ijjk · 2022-05-23T01:38:24Z

Failing test suites

Commit: d49f278

yarn testheadless test/integration/amphtml/test/index.test.js

AMP Usage > AMP dev mode > should detect the changes and display it

Expand output

● AMP Usage › AMP dev mode › should detect the changes and display it

TIMED OUT: /This is the hot AMP page/

This is a cold AMP page.

no AMP for you...

  498 |
  499 |   if (hardError) {
> 500 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  501 |   }
  502 |   return false
  503 | }

  at Object.check (lib/next-test-utils.js:500:11)
  at Object.<anonymous> (integration/amphtml/test/index.test.js:363:9)

Read more about building and testing Next.js in contributing.md.

ijjk · 2022-05-23T01:52:22Z

Stats from current PR

Default Build (Decrease detected ✓)

General

	vercel/next.js canary	src200/next.js no-style-in-document	Change
buildDuration	15.1s	15.1s	-15ms
buildDurationCached	6.3s	6.1s	-111ms
nodeModulesSize	479 MB	479 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	src200/next.js no-style-in-document	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.726	3.697	-0.03
/ avg req/sec	670.95	676.24	+5.29
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.137	1.158	⚠️ +0.02
/error-in-render avg req/sec	2198.68	2159.62	⚠️ -39.06

Client Bundles (main, webpack)

	vercel/next.js canary	src200/next.js no-style-in-document	Change
925.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	29.2 kB	29.2 kB	✓
webpack-HASH.js gzip	1.54 kB	1.54 kB	✓
Overall change	72.9 kB	72.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	src200/next.js no-style-in-document	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	src200/next.js no-style-in-document	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	193 B	193 B	✓
amp-HASH.js gzip	308 B	308 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	2.71 kB	2.71 kB	✓
head-HASH.js gzip	359 B	359 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.73 kB	5.73 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.65 kB	2.65 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	391 B	391 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16 kB	16 kB	✓

Client Build Manifests

	vercel/next.js canary	src200/next.js no-style-in-document	Change
_buildManifest.js gzip	458 B	458 B	✓
Overall change	458 B	458 B	✓

Rendered Page Sizes

	vercel/next.js canary	src200/next.js no-style-in-document	Change
index.html gzip	533 B	533 B	✓
link.html gzip	547 B	547 B	✓
withRouter.html gzip	528 B	528 B	✓
Overall change	1.61 kB	1.61 kB	✓

Default Build with SWC (Increase detected ⚠️)

General

	vercel/next.js canary	src200/next.js no-style-in-document	Change
buildDuration	17.5s	17.2s	-270ms
buildDurationCached	6.2s	6.2s	⚠️ +24ms
nodeModulesSize	479 MB	479 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	src200/next.js no-style-in-document	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.723	3.718	0
/ avg req/sec	671.49	672.36	+0.87
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.143	1.132	-0.01
/error-in-render avg req/sec	2186.91	2207.71	+20.8

Client Bundles (main, webpack)

	vercel/next.js canary	src200/next.js no-style-in-document	Change
925.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	42.7 kB	42.7 kB	✓
main-HASH.js gzip	29.6 kB	29.6 kB	✓
webpack-HASH.js gzip	1.54 kB	1.54 kB	✓
Overall change	74 kB	74 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	src200/next.js no-style-in-document	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	src200/next.js no-style-in-document	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	179 B	179 B	✓
amp-HASH.js gzip	311 B	311 B	✓
css-HASH.js gzip	324 B	324 B	✓
dynamic-HASH.js gzip	2.89 kB	2.89 kB	✓
head-HASH.js gzip	357 B	357 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.82 kB	5.82 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.78 kB	2.78 kB	✓
routerDirect..HASH.js gzip	322 B	322 B	✓
script-HASH.js gzip	392 B	392 B	✓
withRouter-HASH.js gzip	317 B	317 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16.3 kB	16.3 kB	✓

Client Build Manifests

	vercel/next.js canary	src200/next.js no-style-in-document	Change
_buildManifest.js gzip	457 B	457 B	✓
Overall change	457 B	457 B	✓

Rendered Page Sizes

	vercel/next.js canary	src200/next.js no-style-in-document	Change
index.html gzip	532 B	532 B	✓
link.html gzip	547 B	547 B	✓
withRouter.html gzip	529 B	529 B	✓
Overall change	1.61 kB	1.61 kB	✓

Commit: bb9e2d1

updated

ijjk

Thanks for the PR!

add eslint rule for not allowing style tags in _document.js

a83be81

src200 requested review from huozhi, ijjk, shuding and timneutkens as code owners December 20, 2021 14:47

ijjk added the type: next label Dec 20, 2021

balazsorban44 reviewed Dec 20, 2021

View reviewed changes

scope style tags with jsx attribute

f8f15b4

balazsorban44 requested changes Dec 21, 2021

View reviewed changes

packages/eslint-plugin-next/lib/index.js Outdated Show resolved Hide resolved

test/unit/eslint-plugin-next/no-style-in-document.test.ts Outdated Show resolved Hide resolved

src200 added 5 commits December 21, 2021 07:40

only check style tags with jsx attribute

5fd535d

update plugin and filenames

14f2ca6

add another valid test case

9a7b3f7

update reference in config

cc95b66

check jsx attribute on every style tag

e51f7d0

src200 requested a review from balazsorban44 December 22, 2021 04:19

balazsorban44 requested changes Dec 22, 2021

View reviewed changes

src200 changed the title ~~Add eslint rule for not allowing style tags in _document.js~~ Add eslint rule for not allowing styled-jsx in _document.js Dec 23, 2021

add documentation

8241f3a

ijjk added the area: documentation label Dec 23, 2021

src200 requested a review from balazsorban44 December 23, 2021 05:38

balazsorban44 reviewed Dec 23, 2021

View reviewed changes

errors/no-styled-jsx-in-document.md Outdated Show resolved Hide resolved

balazsorban44 reviewed Dec 23, 2021

View reviewed changes

errors/no-styled-jsx-in-document.md Outdated Show resolved Hide resolved

balazsorban44 reviewed Dec 23, 2021

View reviewed changes

errors/no-styled-jsx-in-document.md Show resolved Hide resolved

balazsorban44 previously requested changes Dec 23, 2021

View reviewed changes

src200 and others added 3 commits December 24, 2021 02:31

Update errors/no-styled-jsx-in-document.md

f07157b

Co-authored-by: Balázs Orbán <info@balazsorban.com>

Update errors/no-styled-jsx-in-document.md

c7b2282

Co-authored-by: Balázs Orbán <info@balazsorban.com>

Update errors/no-styled-jsx-in-document.md

4fdebf0

Co-authored-by: Balázs Orbán <info@balazsorban.com>

src200 requested a review from balazsorban44 December 23, 2021 21:02

src200 added 2 commits April 17, 2022 21:28

resolve merge conflists

78699ef

remove duplicate eslint rule(script in head)

a01786b

src200 and others added 4 commits April 20, 2022 18:31

Merge branch 'canary' into no-style-in-document

02d9d89

Merge branch 'canary' into no-style-in-document

5f31986

Merge branch 'canary' into no-style-in-document

73cb471

Merge branch 'canary' into no-style-in-document

d49f278

tweak rule

aa4c1fe

update doc

bb9e2d1

src200 requested review from styfle, padmaia and leerob as code owners May 23, 2022 02:04

ijjk approved these changes May 23, 2022

View reviewed changes

kodiakhq bot merged commit 11ad65e into vercel:canary May 23, 2022

manovotny mentioned this pull request May 23, 2022

Adds consistency to ESLint rules. #34335

Merged

3 tasks

github-actions bot locked as resolved and limited conversation to collaborators Jun 22, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add eslint rule for not allowing styled-jsx in _document.js #32678

Add eslint rule for not allowing styled-jsx in _document.js #32678

src200 commented Dec 20, 2021

src200 commented Dec 20, 2021

balazsorban44 left a comment

src200 commented Dec 20, 2021 •

edited

Loading

balazsorban44 left a comment

balazsorban44 left a comment •

edited

Loading

src200 commented Dec 23, 2021

balazsorban44 left a comment

src200 commented Dec 27, 2021

src200 commented Apr 17, 2022

ijjk commented May 23, 2022

ijjk commented May 23, 2022 •

edited

Loading

ijjk left a comment

Add eslint rule for not allowing styled-jsx in _document.js #32678

Add eslint rule for not allowing styled-jsx in _document.js #32678

Conversation

src200 commented Dec 20, 2021

Bug

src200 commented Dec 20, 2021

balazsorban44 left a comment

Choose a reason for hiding this comment

src200 commented Dec 20, 2021 • edited Loading

balazsorban44 left a comment

Choose a reason for hiding this comment

balazsorban44 left a comment • edited Loading

Choose a reason for hiding this comment

src200 commented Dec 23, 2021

balazsorban44 left a comment

Choose a reason for hiding this comment

src200 commented Dec 27, 2021

src200 commented Apr 17, 2022

ijjk commented May 23, 2022

Failing test suites

ijjk commented May 23, 2022 • edited Loading

Stats from current PR

ijjk left a comment

Choose a reason for hiding this comment

src200 commented Dec 20, 2021 •

edited

Loading

balazsorban44 left a comment •

edited

Loading

ijjk commented May 23, 2022 •

edited

Loading