Collect feature usage for optimizeCss (#29828)

`optimizeCss` is a feature that inlines critical CSS using critters.
The Aurora team would like to gauge adoption rate for this feature.



## Bug

- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Documentation added
- [x] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [x] Make sure the linting passes

packages/next/build/index.ts

@@ -66,6 +66,8 @@ import {
   eventBuildFeatureUsage,
   eventNextPlugins,
   eventTypeCheckCompleted,
+  EVENT_BUILD_FEATURE_USAGE,
+  EventBuildFeatureUsage,
 } from '../telemetry/events'
 import { Telemetry } from '../telemetry/storage'
 import { CompilerResult, runCompiler } from './compiler'
@@ -1137,6 +1139,15 @@ export default async function build(
       )
     }
 
+    const optimizeCss: EventBuildFeatureUsage = {
+      featureName: 'experimental/optimizeCss',
+      invocationCount: config.experimental.optimizeCss ? 1 : 0,
+    }
+    telemetry.record({
+      eventName: EVENT_BUILD_FEATURE_USAGE,
+      payload: optimizeCss,
+    })
+
     await promises.writeFile(
       path.join(distDir, SERVER_FILES_MANIFEST),
       JSON.stringify(requiredServerFiles),

packages/next/telemetry/events/build.ts

@@ -120,9 +120,13 @@ export function eventBuildOptimize(
   }
 }
 
-const EVENT_BUILD_FEATURE_USAGE = 'NEXT_BUILD_FEATURE_USAGE'
-type EventBuildFeatureUsage = {
-  featureName: string
+export const EVENT_BUILD_FEATURE_USAGE = 'NEXT_BUILD_FEATURE_USAGE'
+export type EventBuildFeatureUsage = {
+  featureName:
+    | 'next/image'
+    | 'next/script'
+    | 'next/dynamic'
+    | 'experimental/optimizeCss'
   invocationCount: number
 }
 export function eventBuildFeatureUsage(

test/integration/telemetry/next.config.optimize-css

@@ -0,0 +1,5 @@
+module.exports = {
+  experimental: {
+    optimizeCss: true
+  }
+}

test/integration/telemetry/test/index.test.js

@@ -567,6 +567,7 @@ describe('Telemetry CLI', () => {
       env: { NEXT_TELEMETRY_DEBUG: 1 },
     })
     const regex = /NEXT_BUILD_FEATURE_USAGE[\s\S]+?{([\s\S]+?)}/g
+    regex.exec(stderr).pop() // optimizeCss
     const image = regex.exec(stderr).pop()
     expect(image).toContain(`"featureName": "next/image"`)
     expect(image).toContain(`"invocationCount": 1`)
@@ -577,4 +578,26 @@ describe('Telemetry CLI', () => {
     expect(dynamic).toContain(`"featureName": "next/dynamic"`)
     expect(dynamic).toContain(`"invocationCount": 1`)
   })
+
+  it('emits telemetry for usage of `optimizeCss`', async () => {
+    await fs.rename(
+      path.join(appDir, 'next.config.optimize-css'),
+      path.join(appDir, 'next.config.js')
+    )
+
+    const { stderr } = await nextBuild(appDir, [], {
+      stderr: true,
+      env: { NEXT_TELEMETRY_DEBUG: 1 },
+    })
+
+    await fs.rename(
+      path.join(appDir, 'next.config.js'),
+      path.join(appDir, 'next.config.optimize-css')
+    )
+
+    const regex = /NEXT_BUILD_FEATURE_USAGE[\s\S]+?{([\s\S]+?)}/g
+    const optimizeCss = regex.exec(stderr).pop()
+    expect(optimizeCss).toContain(`"featureName": "experimental/optimizeCss"`)
+    expect(optimizeCss).toContain(`"invocationCount": 1`)
+  })
 })