StyledComponents config should allow empty topLevelImportPaths & meaninglessFileNames array

[ivoba]

Link to the code that reproduces this issue

https://github.com/ivoba/turborepo-styledcomponents-warning

To Reproduce

1. Checkout the example repo: https://github.com/ivoba/turborepo-styledcomponents-warning
2. Install deps: npm i
3. Run: npm run dev -w=app-a
4. See warnings in console

Current vs. Expected behavior

Using the recommended styledComponents config from here: https://nextjs.org/docs/architecture/nextjs-compiler#styled-components

module.exports = {
  compiler: {
    // see https://styled-components.com/docs/tooling#babel-plugin for more info on the options.
    styledComponents: {
      // Enabled by default in development, disabled in production to reduce file size,
      // setting this will override the default for all environments.
      displayName?: boolean,
      // Enabled by default.
      ssr?: boolean,
      // Enabled by default.
      fileName?: boolean,
      // Empty by default.
      topLevelImportPaths?: string[],
      // Defaults to ["index"].
      meaninglessFileNames?: string[],
      // Enabled by default.
      cssProp?: boolean,
      // Empty by default.
      namespace?: string,
      // Not supported yet.
      minify?: boolean,
      // Not supported yet.
      transpileTemplateLiterals?: boolean,
      // Not supported yet.
      pure?: boolean,
    },
  },
}

This will render a warning:

⚠ Array must contain at least 1 element(s) at "compiler.styledComponents.topLevelImportPaths" ⚠ Array must contain at least 1 element(s) at "compiler.styledComponents.meaninglessFileNames"

Json schema definition: https://github.com/vercel/turbo/blob/49c67593edb6c2c1389d38ab61cbb3ece3810c92/crates/turbopack-ecmascript-plugins/src/transform/styled_components.rs#L34C13-L34C35

This should probably allow empty Arrays, same goes for meaninglessFileNames.

There should be no confusing warnings for the recommended styledComponents configuration.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:14:38 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6020
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 22.1.0
  npm: 10.7.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.5 // Latest available version is detected (14.2.5).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.4

Which area(s) are affected? (Select all that apply)

Turbopack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

I first filed this issue in Turborepo repo since it looked Turbopack was located there: https://github.com/vercel/turbo/issues/8941 But i was told, Turbopack lives now at Next.js :)

[timneutkens]

Based on the description I doubt it's Turbopack specific, the warnings would be coming from the schema validation in Next.js, so would happen when using Webpack too. Sounds like an easy fix though, removing .min(1) here: https://github.com/vercel/next.js/blob/9a1b2b70afe74f15d4bd0a48f3a7ecbff0e9dade/packages/next/src/server/config-schema.ts#L205 (and in the other place it's used)

Asked @samcx to have a look 👍

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.