NEED HELP: CSS Styles Not Applied with styled-components v6.0.7 and webpack v5.88.2

[CMLCNL]

Is there an existing issue for this?

• [x] I have searched the existing issues

Describe the issue

I'm currently experiencing an issue with styled-components v6.0.7 and webpack v5.88.2 where CSS styles are not being applied to the components. I've defined my styled-components as follows:

Expected behavior

const LoginFormContainer = styled(View)`
  display: flex;
  flex-direction: row;

  ${MediaQuery.select({
    largeScreen: `
      background-color: ${color.white3}
    `
  })}
`;

const Left = styled(View)`
  align-items: center;
  ${MediaQuery.select({
    smallScreen: `
      width: 100%;
  `
  })};
`;

Steps to reproduce

However, when I run my project, the CSS styles defined in these components are not being rendered in the browser.

Environment:

• "webpack": "^5.88.2"
• "styled-components": "6.0.7"

Steps to Reproduce:

• Define styled-components using styled-components v6.0.7.
• Build the project using webpack v5.88.2.
• Run the project and observe that the styles are not applied.

Test case

Additional comments

Expected Result: The CSS styles defined in the styled-components should be applied correctly to the components.

Actual Result: The CSS styles are not being rendered, resulting in incorrect styling in the application.

Additional Information: I've tried different configurations and checked the webpack configuration, but couldn't find any issue related to the styling. Is there any known compatibility issue between the mentioned versions of styled-components and webpack, or any additional configuration required for this to work?

babel and ts-loader. i am using babel-loader.

const babelLoaderOptions = {
  cacheDirectory : true,
  presets        : [ '@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript' ],
  plugins        : [
    'babel-plugin-styled-components',
    [ '@babel/plugin-proposal-decorators', { legacy: true } ],
    'react-native-web',
    'react-hot-loader/babel',
    [ '@babel/plugin-transform-private-methods', { loose: true } ],
    [ '@babel/plugin-transform-private-property-in-object', { loose: true } ],
    [ '@babel/plugin-transform-class-properties', { loose: true } ],
    '@babel/plugin-transform-flow-strip-types'
  ]
};

const babelLoaderConfiguration = {
  test    : /\.(js|jsx)$/,
  include : [ path.resolve(appDirectory, 'index.web.js'), path.resolve(appDirectory, 'src'), ...nodeModulesPaths ],
  loader  : 'babel-loader',
  options : babelLoaderOptions
};

const tsLoaderConfiguration = {
  test    : /\.(ts|tsx)$/,
  loader  : 'ts-loader',
  options : {
    transpileOnly         : true,
    getCustomTransformers : () => ({ before: [ styledComponentsTransformer ] })
  }
};