ReactJS / Styled-Components: CSS Compatibilty Issues Across Browers

Question

Currently having CSS compatibility issues across browsers with a site built using react and linaria. Linaria is essentially a styled-components library that has its CSS-in-JS extracted into a CSS file during the build step.

The solution I believe is to use PostCSS. However as I am new to this tool, I am trying to work out how to integrate it properly into my webpack config. Especially, to ensure it runs after the linaria styles have been extracted.

The two questions are:

Is my postcss.config.js correct, as I'm not sure if I should be using both autoprefixer and postcss-preset-env. Also, is my .browserslistrc correct to target the most recent versions of: Safari, Edge, Chrome and Firefox.
Is my webpack.config.ts correct to ensure postcss is run on my extracted CSS from linaria styled-components.

See the relevant config files below.

Thanks.

webpack.config.ts

const configuration = (env: Record<string, any>, argv: Record<string, any>): Configuration => ({
  entry: getEntries,
  output: {
    path: path.resolve(__dirname, "assets"),
    filename: "[name].js",
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "main.css",
    })
  ],
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: "styles",
          type: "css/mini-extract",
          chunks: "all",
          enforce: true,
        },
      },
    },
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/i,
        exclude: /node_modules/,
        use: [
          "babel-loader",
          "@linaria/webpack-loader",
        ],
      },
      {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
            }
          },
          "postcss-loader",
        ],
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", "..."],
  },
});

export default configuration;

postcss.config.js

module.exports = {
  plugins: [
    require("autoprefixer"),
    require("postcss-preset-env"),
  ]
};

.browerslistrc

last 4 versions

ReactJS / Styled-Components: CSS Compatibilty Issues Across Browers

0 Answers0