Remove `all: initial` in favor of specific styles on `next/image` #30191

styfle · 2021-10-22T21:01:01Z

This reverts some of #30064 which added the all: initial style.

That was causing every inline style to be expanded and also prevented cursor: pointer from being inherited.

View styles

color: initial; font: initial; font-feature-settings: initial; font-kerning: initial; font-optical-sizing: initial; font-variation-settings: initial; forced-color-adjust: initial; text-orientation: initial; text-rendering: initial; -webkit-font-smoothing: initial; -webkit-locale: initial; -webkit-text-orientation: initial; -webkit-writing-mode: initial; writing-mode: initial; zoom: initial; accent-color: initial; place-content: initial; place-items: initial; place-self: initial; alignment-baseline: initial; animation: initial; appearance: initial; aspect-ratio: initial; backdrop-filter: initial; backface-visibility: initial; background: initial; background-blend-mode: initial; baseline-shift: initial; block-size: initial; border-block: initial; border: initial; border-radius: initial; border-collapse: initial; border-end-end-radius: initial; border-end-start-radius: initial; border-inline: initial; border-start-end-radius: initial; border-start-start-radius: initial; inset: initial; box-shadow: initial; box-sizing: border-box; break-after: initial; break-before: initial; break-inside: initial; buffered-rendering: initial; caption-side: initial; caret-color: initial; clear: initial; clip: initial; clip-path: initial; clip-rule: initial; color-interpolation: initial; color-interpolation-filters: initial; color-rendering: initial; color-scheme: initial; columns: initial; column-fill: initial; gap: initial; column-rule: initial; column-span: initial; contain: initial; contain-intrinsic-size: initial; content: initial; content-visibility: initial; counter-increment: initial; counter-reset: initial; counter-set: initial; cursor: initial; cx: initial; cy: initial; d: initial; display: block; dominant-baseline: initial; empty-cells: initial; fill: initial; fill-opacity: initial; fill-rule: initial; filter: initial; flex: initial; flex-flow: initial; float: initial; flood-color: initial; flood-opacity: initial; grid: initial; grid-area: initial; height: initial; hyphens: initial; image-orientation: initial; image-rendering: initial; inline-size: initial; inset-block: initial; inset-inline: initial; isolation: initial; letter-spacing: initial; lighting-color: initial; line-break: initial; list-style: initial; margin-block: initial; margin: initial; margin-inline: initial; marker: initial; mask: initial; mask-type: initial; max-block-size: initial; max-height: initial; max-inline-size: initial; max-width: 100%; min-block-size: initial; min-height: initial; min-inline-size: initial; min-width: initial; mix-blend-mode: initial; object-fit: initial; object-position: initial; offset: initial; opacity: initial; order: initial; origin-trial-test-property: initial; orphans: initial; outline: initial; outline-offset: initial; overflow-anchor: initial; overflow-clip-margin: initial; overflow-wrap: initial; overflow: initial; overscroll-behavior-block: initial; overscroll-behavior-inline: initial; overscroll-behavior: initial; padding-block: initial; padding: initial; padding-inline: initial; page: initial; page-orientation: initial; paint-order: initial; perspective: initial; perspective-origin: initial; pointer-events: initial; position: initial; quotes: initial; r: initial; resize: initial; ruby-position: initial; rx: initial; ry: initial; scroll-behavior: initial; scroll-margin-block: initial; scroll-margin: initial; scroll-margin-inline: initial; scroll-padding-block: initial; scroll-padding: initial; scroll-padding-inline: initial; scroll-snap-align: initial; scroll-snap-stop: initial; scroll-snap-type: initial; scrollbar-gutter: initial; shape-image-threshold: initial; shape-margin: initial; shape-outside: initial; shape-rendering: initial; size: initial; speak: initial; stop-color: initial; stop-opacity: initial; stroke: initial; stroke-dasharray: initial; stroke-dashoffset: initial; stroke-linecap: initial; stroke-linejoin: initial; stroke-miterlimit: initial; stroke-opacity: initial; stroke-width: initial; tab-size: initial; table-layout: initial; text-align: initial; text-align-last: initial; text-anchor: initial; text-combine-upright: initial; text-decoration: initial; text-decoration-skip-ink: initial; text-indent: initial; text-overflow: initial; text-shadow: initial; text-size-adjust: initial; text-transform: initial; text-underline-offset: initial; text-underline-position: initial; touch-action: initial; transform: initial; transform-box: initial; transform-origin: initial; transform-style: initial; transition: initial; user-select: initial; vector-effect: initial; vertical-align: initial; visibility: initial; -webkit-app-region: initial; border-spacing: initial; -webkit-border-image: initial; -webkit-box-align: initial; -webkit-box-decoration-break: initial; -webkit-box-direction: initial; -webkit-box-flex: initial; -webkit-box-ordinal-group: initial; -webkit-box-orient: initial; -webkit-box-pack: initial; -webkit-box-reflect: initial; -webkit-highlight: initial; -webkit-hyphenate-character: initial; -webkit-line-break: initial; -webkit-line-clamp: initial; -webkit-mask-box-image: initial; -webkit-mask: initial; -webkit-mask-composite: initial; -webkit-perspective-origin-x: initial; -webkit-perspective-origin-y: initial; -webkit-print-color-adjust: initial; -webkit-rtl-ordering: initial; -webkit-ruby-position: initial; -webkit-tap-highlight-color: initial; -webkit-text-combine: initial; -webkit-text-decorations-in-effect: initial; -webkit-text-emphasis: initial; -webkit-text-emphasis-position: initial; -webkit-text-fill-color: initial; -webkit-text-security: initial; -webkit-text-stroke: initial; -webkit-transform-origin-x: initial; -webkit-transform-origin-y: initial; -webkit-transform-origin-z: initial; -webkit-user-drag: initial; -webkit-user-modify: initial; white-space: initial; widows: initial; width: initial; will-change: initial; word-break: initial; word-spacing: initial; x: initial; y: initial; z-index: initial;

Instead, we will add a few more styles for width/height/opacity to prevent accidentally overriding those.

ijjk · 2021-10-23T00:29:01Z

Failing test suites

Commit: a19e31b

test/integration/dist-dir/test/index.test.js

distDir > should handle null/undefined distDir

Expand output

● distDir › should handle null/undefined distDir

expect(received).toBe(expected) // Object.is equality

Expected: 0
Received: 378

  63 |     await fs.writeFile(nextConfig, origNextConfig)
  64 |
> 65 |     expect(stderr.length).toBe(0)
     |                           ^
  66 |   })
  67 | })
  68 |

  at Object.<anonymous> (integration/dist-dir/test/index.test.js:65:27)

test/integration/image-component/svgo-webpack/test/index.test.js

svgo-webpack with Image Component > next build > should not fail to build invalid usage of the Image component
svgo-webpack with Image Component > next dev > should print error when invalid Image usage

Expand output

● svgo-webpack with Image Component › next build › should not fail to build invalid usage of the Image component

expect(received).toBeFalsy()

Received: "Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db·
Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db·
Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
"

  19 |     it('should not fail to build invalid usage of the Image component', async () => {
  20 |       const { stderr, code } = await nextBuild(appDir, [], { stderr: true })
> 21 |       expect(stderr).toBeFalsy()
     |                      ^
  22 |       expect(code).toBe(0)
  23 |     })
  24 |   })

  at Object.<anonymous> (integration/image-component/svgo-webpack/test/index.test.js:21:22)

● svgo-webpack with Image Component › next dev › should print error when invalid Image usage

expect(received).toBeFalsy()

Received: "Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db·
Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
"

  41 |     it('should print error when invalid Image usage', async () => {
  42 |       await renderViaHTTP(appPort, '/', {})
> 43 |       expect(devOutput.stderr).toBeFalsy()
     |                                ^
  44 |     })
  45 |   })
  46 | })

  at Object.<anonymous> (integration/image-component/svgo-webpack/test/index.test.js:43:32)

test/integration/production-build-dir/test/index.test.js

Production Custom Build Directory > With basic usage > should render the page

Expand output

● Production Custom Build Directory › With basic usage › should render the page

expect(received).toBe(expected) // Object.is equality

Expected: ""
Received: "Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db·
Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db·
Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
"

  18 |         stderr: true,
  19 |       })
> 20 |       expect(result.stderr).toBe('')
     |                             ^
  21 |
  22 |       const app = nextServer({
  23 |         dir: join(__dirname, '../build'),

  at Object.<anonymous> (integration/production-build-dir/test/index.test.js:20:29)

test/integration/webpack-require-hook/test/index.test.js

Handles Webpack Require Hook > build > Does not error during build

Expand output

● Handles Webpack Require Hook › build › Does not error during build

expect(received).toStrictEqual(expected) // deep equality

Expected: 0
Received: 378

  21 |       })
  22 |       console.log(stderr)
> 23 |       expect(stderr.length).toStrictEqual(0)
     |                             ^
  24 |       expect(stdout).toMatch(/Initialized config/)
  25 |     })
  26 |   })

  at Object.<anonymous> (integration/webpack-require-hook/test/index.test.js:23:29)

ijjk · 2021-10-23T01:55:13Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js remove-image-all-initial-for-some-css	Change
buildDuration	13.6s	14.2s	⚠️ +559ms
buildDurationCached	3.2s	3.2s	⚠️ +47ms
nodeModulesSize	196 MB	196 MB	⚠️ +737 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js remove-image-all-initial-for-some-css	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.171	3.163	-0.01
/ avg req/sec	788.43	790.3	+1.87
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.572	1.521	-0.05
/error-in-render avg req/sec	1590.53	1643.3	+52.77

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js remove-image-all-initial-for-some-css	Change
651.cd440d20..0b23.js gzip	2.96 kB	2.96 kB	✓
831.695e33f6..205f.js gzip	179 B	179 B	✓
framework-89..a097.js gzip	42.2 kB	42.2 kB	✓
main-167207f..648c.js gzip	26.1 kB	26.1 kB	✓
webpack-f09b..493e.js gzip	1.47 kB	1.47 kB	✓
Overall change	72.9 kB	72.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js remove-image-all-initial-for-some-css	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	vercel/next.js remove-image-all-initial-for-some-css	Change
_app-9fb8765..c13d.js gzip	979 B	979 B	✓
_error-d828d..2954.js gzip	3.06 kB	3.06 kB	✓
amp-5388d1f5..4ce9.js gzip	551 B	551 B	✓
css-10424225..367a.js gzip	329 B	329 B	✓
dynamic-9821..3cd4.js gzip	2.67 kB	2.67 kB	✓
head-1df323b..d261.js gzip	2.32 kB	2.32 kB	✓
hooks-ab0016..b093.js gzip	917 B	917 B	✓
image-a42113..a670.js gzip	5.84 kB	5.86 kB	⚠️ +19 B
index-95c8cb..6970.js gzip	260 B	260 B	✓
link-05c99e7..35ec.js gzip	1.66 kB	1.66 kB	✓
routerDirect..6659.js gzip	319 B	319 B	✓
script-d94ba..ed05.js gzip	386 B	386 B	✓
withRouter-7..8b2e.js gzip	317 B	317 B	✓
9a34b27eb3f9..27d.css gzip	125 B	125 B	✓
Overall change	19.7 kB	19.8 kB	⚠️ +19 B

Client Build Manifests Overall increase ⚠️

	vercel/next.js canary	vercel/next.js remove-image-all-initial-for-some-css	Change
_buildManifest.js gzip	458 B	459 B	⚠️ +1 B
Overall change	458 B	459 B	⚠️ +1 B

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js remove-image-all-initial-for-some-css	Change
index.html gzip	537 B	537 B	✓
link.html gzip	548 B	548 B	✓
withRouter.html gzip	528 B	528 B	✓
Overall change	1.61 kB	1.61 kB	✓

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-a9a93d991a2a6a9c.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-e040764724fe6a41.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-946fb8ae39ba1dc3.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-720ac9f15add6d61.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-f632234727179322.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-df7921033b292f8a.js"

Diff for image-946fb8..e39ba1dc3.js

@@ -562,14 +562,27 @@
 
         var isVisible = !isLazy || isIntersected;
         var wrapperStyle = {
-          all: "initial",
           boxSizing: "border-box",
-          overflow: "hidden"
+          display: "block",
+          overflow: "hidden",
+          width: "initial",
+          height: "initial",
+          background: "none",
+          opacity: 1,
+          border: 0,
+          margin: 0,
+          padding: 0
         };
         var sizerStyle = {
-          all: "initial",
           boxSizing: "border-box",
-          display: "block"
+          display: "block",
+          width: "initial",
+          height: "initial",
+          background: "none",
+          opacity: 1,
+          border: 0,
+          margin: 0,
+          padding: 0
         };
         var hasSizer = false;
         var sizerSvg;
@@ -686,11 +699,14 @@
                 sizerSvg
                   ? /*#__PURE__*/ _react["default"].createElement("img", {
                       style: {
-                        all: "initial",
-                        maxWidth: "100%",
                         display: "block",
+                        maxWidth: "100%",
+                        width: "initial",
+                        height: "initial",
+                        background: "none",
+                        opacity: 1,
+                        border: 0,
                         margin: 0,
-                        border: "none",
                         padding: 0
                       },
                       alt: "",

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js remove-image-all-initial-for-some-css	Change
buildDuration	6.7s	6.6s	-59ms
buildDurationCached	3.1s	3.1s	⚠️ +30ms
nodeModulesSize	196 MB	196 MB	⚠️ +737 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js remove-image-all-initial-for-some-css	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.31	3.179	-0.13
/ avg req/sec	755.3	786.41	+31.11
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.534	1.493	-0.04
/error-in-render avg req/sec	1630.17	1674.11	+43.94

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary	vercel/next.js remove-image-all-initial-for-some-css	Change
450.fd3ad245..022b.js gzip	179 B	179 B	✓
675-759b108e..1b9a.js gzip	13.8 kB	13.8 kB	⚠️ +17 B
framework-13..70b0.js gzip	50.8 kB	50.8 kB	✓
main-d78cd7f..aaf4.js gzip	36.5 kB	36.5 kB	✓
webpack-a7f2..2650.js gzip	1.63 kB	1.63 kB	✓
Overall change	103 kB	103 kB	⚠️ +17 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js remove-image-all-initial-for-some-css	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js remove-image-all-initial-for-some-css	Change
_app-ae91bc3..d985.js gzip	1.33 kB	1.33 kB	✓
_error-273ac..9ef0.js gzip	180 B	180 B	✓
amp-5f9a7694..99ce.js gzip	315 B	315 B	✓
css-3a1b2477..df1e.js gzip	330 B	330 B	✓
dynamic-e04a..a1b5.js gzip	2.79 kB	2.79 kB	✓
head-7f600d0..daa3.js gzip	356 B	356 B	✓
hooks-bd8c02..0730.js gzip	638 B	638 B	✓
image-6365b7..7506.js gzip	536 B	536 B	✓
index-80be94..e89f.js gzip	262 B	262 B	✓
link-4ee1ea7..8745.js gzip	2.22 kB	2.22 kB	✓
routerDirect..c4aa.js gzip	325 B	325 B	✓
script-67da0..49e6.js gzip	390 B	390 B	✓
withRouter-2..2409.js gzip	322 B	322 B	✓
9a34b27eb3f9..27d.css gzip	125 B	125 B	✓
Overall change	10.1 kB	10.1 kB	✓

Client Build Manifests Overall increase ⚠️

	vercel/next.js canary	vercel/next.js remove-image-all-initial-for-some-css	Change
_buildManifest.js gzip	476 B	477 B	⚠️ +1 B
Overall change	476 B	477 B	⚠️ +1 B

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js remove-image-all-initial-for-some-css	Change
index.html gzip	535 B	535 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	528 B	528 B	✓
Overall change	1.61 kB	1.61 kB	✓

Diffs

Diff for _buildManifest.js

@@ -13,7 +13,7 @@ self.__BUILD_MANIFEST = {
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-ff60bc61acd2698b.js"],
   "/image": [
-    "static\u002Fchunks\u002F675-fb08ab621ca30b4e.js",
+    "static\u002Fchunks\u002F675-217cde1f4486fa1f.js",
     "static\u002Fchunks\u002Fpages\u002Fimage-bf3853b512dffdf0.js"
   ],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-7111a5bd9b78e6ce.js"],

Diff for 675-fb08ab621ca30b4e.js

@@ -2781,14 +2781,27 @@
           isIntersected = ref[1];
         var isVisible = !isLazy || isIntersected;
         var wrapperStyle = {
-          all: "initial",
           boxSizing: "border-box",
-          overflow: "hidden"
+          display: "block",
+          overflow: "hidden",
+          width: "initial",
+          height: "initial",
+          background: "none",
+          opacity: 1,
+          border: 0,
+          margin: 0,
+          padding: 0
         };
         var sizerStyle = {
-          all: "initial",
           boxSizing: "border-box",
-          display: "block"
+          display: "block",
+          width: "initial",
+          height: "initial",
+          background: "none",
+          opacity: 1,
+          border: 0,
+          margin: 0,
+          padding: 0
         };
         var hasSizer = false;
         var sizerSvg;
@@ -2900,11 +2913,14 @@
                 sizerSvg
                   ? /*#__PURE__*/ _react.default.createElement("img", {
                       style: {
-                        all: "initial",
-                        maxWidth: "100%",
                         display: "block",
+                        maxWidth: "100%",
+                        width: "initial",
+                        height: "initial",
+                        background: "none",
+                        opacity: 1,
+                        border: 0,
                         margin: 0,
-                        border: "none",
                         padding: 0
                       },
                       alt: "",

Commit: 6c535f8

Remove all: initial in favor of specific styles on next/image

ad9fc19

styfle requested review from huozhi, ijjk, padmaia, shuding and timneutkens as code owners October 22, 2021 21:01

ijjk added created-by: Next.js team PRs by the Next.js team type: next labels Oct 22, 2021

ijjk previously approved these changes Oct 22, 2021

View reviewed changes

This comment has been minimized.

Sign in to view

Merge branch 'canary' into remove-image-all-initial-for-some-css

55da2e5

This comment has been minimized.

Sign in to view

Swap order to fix tests

3c5c739

styfle dismissed ijjk’s stale review via 3c5c739 October 22, 2021 23:25

This comment has been minimized.

Sign in to view

ijjk approved these changes Oct 23, 2021

View reviewed changes

Merge branch 'canary' into remove-image-all-initial-for-some-css

a19e31b

This comment has been minimized.

Sign in to view

Merge branch 'canary' into remove-image-all-initial-for-some-css

6c535f8

kodiakhq bot merged commit af5f4a8 into canary Oct 23, 2021

kodiakhq bot deleted the remove-image-all-initial-for-some-css branch October 23, 2021 02:17

styfle added the hacktoberfest-accepted label Oct 25, 2021

vercel locked as resolved and limited conversation to collaborators Jan 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remove `all: initial` in favor of specific styles on `next/image` #30191

Remove `all: initial` in favor of specific styles on `next/image` #30191

styfle commented Oct 22, 2021 •

edited

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Oct 23, 2021 •

edited

This comment has been minimized.

ijjk commented Oct 23, 2021

Diffs

Diffs

Remove all: initial in favor of specific styles on next/image #30191

Remove all: initial in favor of specific styles on next/image #30191

Conversation

styfle commented Oct 22, 2021 • edited

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Oct 23, 2021 • edited

Failing test suites

This comment has been minimized.

ijjk commented Oct 23, 2021

Stats from current PR

Diffs

Diffs

Remove `all: initial` in favor of specific styles on `next/image` #30191

Remove `all: initial` in favor of specific styles on `next/image` #30191

styfle commented Oct 22, 2021 •

edited

ijjk commented Oct 23, 2021 •

edited