Можно ли как-то добавить с styled components нормальный префиксер?

Конечно, можно добавить нормальный префиксер к Styled Components при использовании Webpack. Для этого нам понадобится установить несколько пакетов и настроить правильные плагины и загрузчики.

Во-первых, установим необходимые пакеты:

npm install autoprefixer postcss-loader --save-dev

autoprefixer - это пакет, который автоматически добавляет вендорные префиксы к CSS свойствам.
postcss-loader - это загрузчик для Webpack, который позволяет использовать PostCSS плагины.

Затем нам понадобится настроить Webpack для использования postcss-loader и autoprefixer. Добавьте следующий код в ваши конфигурационные файлы Webpack:

module.exports = {
  // ... другие настройки ...
  module: {
    rules: [
      // ... другие правила ...
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  },
  // ... другие настройки ...
}

Этот код говорит Webpack использовать style-loader, css-loader и postcss-loader для обработки CSS файлов. postcss-loader будет применяться после css-loader и передает CSS код через PostCSS, где мы сможем добавить плагины, такие как autoprefixer.

Далее, в корне вашего проекта создайте файл с именем postcss.config.js и добавьте в него следующий код:

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

Этот файл используется для настройки PostCSS плагинов, и мы добавляем только autoprefixer.

Теперь, когда вы используете Styled Components в вашем проекте, все CSS правила, которые вы определяете в Styled Components, будут пропущены через postcss-loader и автоматически префиксированы с помощью autoprefixer.

Таким образом, вы можете добавить нормальный префиксер к Styled Components при использовании Webpack, чтобы обеспечить совместимость с различными браузерами.