Remove feature flags for static image and blurry placeholder (#25797)

Co-authored-by: Steven <steven@ceriously.com> Co-authored-by: Tim Neutkens <timneutkens@me.com> Co-authored-by: Tim Neutkens <tim@timneutkens.nl> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
vercel · Jun 7, 2021 · 62a4de9 · 62a4de9
1 parent a09425f
commit 62a4de9
Show file tree

Hide file tree

Showing 8 changed files with 7 additions and 63 deletions.
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -51,6 +51,7 @@ import WebpackConformancePlugin, {
   ReactSyncScriptsConformanceCheck,
 } from './webpack/plugins/webpack-conformance-plugin'
 import { WellKnownErrorsPlugin } from './webpack/plugins/wellknown-errors-plugin'
+import { regexLikeCss } from './webpack/config/blocks/css'
 
 type ExcludesFalse = <T>(x: T | false) => x is T
 
@@ -1013,11 +1014,12 @@ export default async function getBaseWebpackConfig(
               ]
             : defaultLoaders.babel,
         },
-        ...(config.experimental.enableStaticImages
+        ...(!config.images.disableStaticImages && isWebpack5
           ? [
               {
                 test: /\.(png|svg|jpg|jpeg|gif|webp|ico|bmp)$/i,
                 loader: 'next-image-loader',
+                issuer: { not: regexLikeCss },
                 dependency: { not: ['url'] },
               },
             ]
@@ -1110,7 +1112,6 @@ export default async function getBaseWebpackConfig(
                 domains: config.images.domains,
               }
             : {}),
-          enableBlurryPlaceholder: config.experimental.enableBlurryPlaceholder,
         }),
         'process.env.__NEXT_ROUTER_BASEPATH': JSON.stringify(config.basePath),
         'process.env.__NEXT_HAS_REWRITES': JSON.stringify(hasRewrites),

diff --git a/packages/next/build/webpack/config/blocks/css/index.ts b/packages/next/build/webpack/config/blocks/css/index.ts
@@ -14,7 +14,7 @@ import {
 import { getPostCssPlugins } from './plugins'
 
 // RegExps for all Style Sheet variants
-const regexLikeCss = /\.(css|scss|sass)(\.webpack\[javascript\/auto\])?$/
+export const regexLikeCss = /\.(css|scss|sass)(\.webpack\[javascript\/auto\])?$/
 
 // RegExps for Style Sheets
 const regexCssGlobal = /(?<!\.module)\.css$/

diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
@@ -117,7 +117,6 @@ const {
   loader: configLoader,
   path: configPath,
   domains: configDomains,
-  enableBlurryPlaceholder: configEnableBlurryPlaceholder,
 } =
   ((process.env.__NEXT_IMAGE_OPTS as any) as ImageConfig) || imageConfigDefault
 // sort smallest to largest
@@ -298,9 +297,6 @@ export default function Image({
     delete rest['layout']
   }
 
-  if (!configEnableBlurryPlaceholder) {
-    placeholder = 'empty'
-  }
   const isStatic = typeof src === 'object'
   let staticSrc = ''
   if (isStaticImport(src)) {

diff --git a/packages/next/next-server/server/config-shared.ts b/packages/next/next-server/server/config-shared.ts
@@ -44,7 +44,6 @@ export type NextConfig = { [key: string]: any } & {
     workerThreads?: boolean
     pageEnv?: boolean
     optimizeImages?: boolean
-    enableStaticImages?: boolean
     optimizeCss?: boolean
     scrollRestoration?: boolean
     stats?: boolean
@@ -56,7 +55,6 @@ export type NextConfig = { [key: string]: any } & {
       skipValidation?: boolean
     }
     reactRoot?: boolean
-    enableBlurryPlaceholder?: boolean
     disableOptimizedLoading?: boolean
     gzipSize?: boolean
   }
@@ -106,13 +104,11 @@ export const defaultConfig: NextConfig = {
     workerThreads: false,
     pageEnv: false,
     optimizeImages: false,
-    enableStaticImages: false,
     optimizeCss: false,
     scrollRestoration: false,
     stats: false,
     externalDir: false,
     reactRoot: Number(process.env.NEXT_PRIVATE_REACT_ROOT) > 0,
-    enableBlurryPlaceholder: false,
     disableOptimizedLoading: true,
     gzipSize: true,
   },

diff --git a/packages/next/next-server/server/image-config.ts b/packages/next/next-server/server/image-config.ts
@@ -13,7 +13,7 @@ export type ImageConfig = {
   loader: LoaderValue
   path: string
   domains?: string[]
-  enableBlurryPlaceholder: boolean
+  disableStaticImages: boolean
 }
 
 export const imageConfigDefault: ImageConfig = {
@@ -22,5 +22,5 @@ export const imageConfigDefault: ImageConfig = {
   path: '/_next/image',
   loader: 'default',
   domains: [],
-  enableBlurryPlaceholder: false,
+  disableStaticImages: false,
 }
diff --git a/packages/next/package.json b/packages/next/package.json
@@ -103,6 +103,7 @@
     "raw-body": "2.4.1",
     "react-is": "17.0.2",
     "react-refresh": "0.8.3",
+    "image-size": "1.0.0",
     "stream-browserify": "3.0.0",
     "stream-http": "3.1.1",
     "string_decoder": "1.3.0",

diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js
@@ -1,7 +1,6 @@
 /* eslint-env jest */
 
 import cheerio from 'cheerio'
-import fs from 'fs-extra'
 import {
   check,
   findPort,
@@ -20,7 +19,6 @@ import { join } from 'path'
 jest.setTimeout(1000 * 60)
 
 const appDir = join(__dirname, '../')
-const nextConfig = join(appDir, 'next.config.js')
 
 let appPort
 let app
@@ -553,21 +551,10 @@ function runTests(mode) {
 describe('Image Component Tests', () => {
   describe('dev mode', () => {
     beforeAll(async () => {
-      await fs.writeFile(
-        nextConfig,
-        `
-        module.exports = {
-          experimental: {
-            enableStaticImages: true
-          },
-        }
-      `
-      )
       appPort = await findPort()
       app = await launchApp(appDir, appPort)
     })
     afterAll(async () => {
-      await fs.unlink(nextConfig)
       await killApp(app)
     })
 
@@ -576,22 +563,11 @@ describe('Image Component Tests', () => {
 
   describe('server mode', () => {
     beforeAll(async () => {
-      await fs.writeFile(
-        nextConfig,
-        `
-        module.exports = {
-          experimental: {
-            enableStaticImages: true
-          },
-        }
-      `
-      )
       await nextBuild(appDir)
       appPort = await findPort()
       app = await nextStart(appDir, appPort)
     })
     afterAll(async () => {
-      await fs.unlink(nextConfig)
       await killApp(app)
     })
 
@@ -600,24 +576,11 @@ describe('Image Component Tests', () => {
 
   describe('serverless mode', () => {
     beforeAll(async () => {
-      await fs.writeFile(
-        nextConfig,
-        `
-        module.exports = {
-          target: 'serverless',
-          experimental: {
-            enableBlurryPlaceholder: true,
-            enableStaticImages: true
-          },
-        }
-      `
-      )
       await nextBuild(appDir)
       appPort = await findPort()
       app = await nextStart(appDir, appPort)
     })
     afterAll(async () => {
-      await fs.unlink(nextConfig)
       await killApp(app)
     })
 

diff --git a/test/integration/image-component/default/test/static.test.js b/test/integration/image-component/default/test/static.test.js
@@ -18,7 +18,6 @@ let browser
 let html
 
 const indexPage = new File(join(appDir, 'pages/static.js'))
-const nextConfig = new File(join(appDir, 'next.config.js'))
 
 const runTests = () => {
   it('Should allow an image with a static src to omit height and width', async () => {
@@ -77,25 +76,13 @@ describe('Build Error Tests', () => {
 })
 describe('Static Image Component Tests', () => {
   beforeAll(async () => {
-    nextConfig.write(
-      `
-        module.exports = {
-          experimental: {
-            enableStaticImages: true,
-            enableBlurryPlaceholder: true,
-          },
-        }
-      `
-    )
-
     await nextBuild(appDir)
     appPort = await findPort()
     app = await nextStart(appDir, appPort)
     html = await renderViaHTTP(appPort, '/static')
     browser = await webdriver(appPort, '/static')
   })
   afterAll(() => {
-    nextConfig.delete()
     killApp(app)
   })
   runTests()