ReactJS / Styled-Components: problemas de compatibilidad CSS en diferentes navegadores

Answer

1. 

   davy.ai

   June 16, 2023 at 7:19 pm

   Solución del experto en IT para problemas de compatibilidad de CSS usando react y linaria

   Como experto en ReactJS y IT especializado en webpack, styled-components, postcss y postcss-loader, creo firmemente que la solución a los problemas de compatibilidad de CSS en navegadores con un sitio construido usando React y Linaria es usar PostCSS. Sin embargo, como principiante en el uso de esta herramienta, todavía estoy descubriendo cómo integrarla correctamente en mi configuración de webpack para asegurarme de que se ejecute después de que se hayan extraído los estilos de linaria.

   Preguntas

   Tengo dos preguntas que requieren respuestas y posibles modificaciones en mis archivos postcss.config.js y webpack.config.ts:

   1. ¿Es correcta la configuración de mi archivo postcss.config.js? No estoy seguro si debo usar tanto autoprefixer como postcss-preset-env. Además, ¿es correcta la configuración de mi archivo .browserslistrc para apuntar a las versiones más recientes de Safari, Edge, Chrome y Firefox?

   2. ¿Es correcta la configuración de mi archivo webpack.config.ts para asegurar que PostCSS se ejecute en el CSS extraído de linaria styled-components?

   Archivos de configuración

   Consulte los archivos de configuración relevantes a continuación:

   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"),
     ]
   };
   

   .browserslistrc

   last 4 versions
   

   Respuestas

   1. Para asegurarse de que el código CSS sea compatible con una amplia variedad de navegadores, sugiero modificar el archivo de configuración .browserslistrc para apuntar a las últimas versiones no solo de Safari, Edge, Chrome y Firefox, sino también de otros navegadores comúnmente utilizados como Internet Explorer. La modificación del archivo para incluir otros navegadores en la lista garantizará que el sitio web funcionará sin problemas para todos los usuarios, independientemente de sus preferencias. Un ejemplo de esta configuración podría ser:

   last 4 versions, not IE 10-11, not dead
   

   En cuanto al archivo postcss.config.js, el uso de ambos complementos autoprefixer y postcss-preset-env es correcto ya que autoprefixer agrega automáticamente prefijos de proveedores para cualquier propiedad de CSS necesaria mientras que postcss-preset-env es un complemento que nos permite usar la sintaxis actual de CSS sin preocuparnos por los problemas de compatibilidad del navegador. Una sugerencia que haría es actualizar la versión de autoprefixer ya que las versiones antiguas pueden no funcionar según lo esperado para ciertas propiedades de CSS.

   1. Para asegurarse de que PostCSS se ejecute en el CSS extraído de linaria styled-components en el archivo webpack.config.ts, sugiero modificar la regla del módulo para archivos .css a:

   {
     test: /\.css$/i,
     use: [
       MiniCssExtractPlugin.loader,
       {
         loader: "css-loader",
         options: {
           importLoaders: 1,
         }
       },
       {
         loader: "postcss-loader",
         options: {
           postcssOptions: {
             ident: "postcss",
             plugins: [
               require("autoprefixer"),
               require("postcss-preset-env"),
             ],
           },
         },
       },
     ],
   },
   

   El cambio más significativo de la configuración existente es definir el objeto postcssOptions en las opciones del postcss-loader. Este objeto permite que la configuración cargue correctamente los complementos mencionados en postcss.config.js sin errores.</string,></string,>

Comments are closed.