styled component fileName miss match

[HashemKhalifa]

My config is the following:

  jsc: {
    parser: {
      syntax: 'typescript',
      jsx: true,
      dynamicImport: true,
      privateMethod: true,
      functionBind: true,
      exportDefaultFrom: true,
      exportNamespaceFrom: true,
      decorators: true,
      decoratorsBeforeExport: true,
      topLevelAwait: true,
      importMeta: true,
      preserveAllComments: false,
    },
    transform: {
      react: {
        runtime: 'automatic',
        development: !isProd,
        pragma: 'React.createElement',
        pragmaFrag: 'React.Fragment',
      },
      legacyDecorator: true,
      decoratorMetadata: true,
    },
    target: 'es2021',
    loose: false,
    externalHelpers: false,
    // Requires v1.2.50 or upper and requires target to be es2016 or upper.
    keepClassNames: false,
    experimental: {
      plugins: [
        [
          '@swc/plugin-styled-components',
          {
            displayName: true,
            fileName: true,
            minify: true,
            ssr: true,
            topLevelImportPaths: ['@packages/webmobile-sc-components', '*(../)**/styled'],
          },
        ],
        ['@swc/plugin-loadable-components', {}],
      ],
    },
  },
  sourceMaps: true,
}

The problem occurs when styled-components reexport like here styled-components/babel-plugin-styled-components#261

the way to solve this issue with babel is to use topLevelImportPaths as mentioned above but with SWC the issue still exists

Broken - import {styled} from "./path/to/file"
Working - import styled from "styled-components"

using the '@packages/webmobile-sc-components' will add the filename to the styles which were imported from this package only, but I want a solution that works for all packages/apps in the monorepo.

is there any way to fix that?

[kdy1]

You can send a PR

[Thisen]

@kdy1 Can I make an attempt? :)

[kdy1]

Of courser, thank you!

[Thisen]

@HashemKhalifa, Can you elaborate on what behavior you are expecting in this case?

Do you have an example?