Why is Gatsby removing duplicate/fallback css properties

user_19194794 0
Viewed 34

Why is Gatsby removing duplicate/fallback css properties? And how do I prevent this behavior when using a global stylesheet.

I am building a static site with gatsbyjs. I have written a global stylesheet (layout.css) that I have attached to a layout component.

In that global stylesheet I have this style:

.wrapper.style3 {
    background-color: red;
    background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("../images/bg01.png");
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("../images/bg01.png");
    background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("../images/bg01.png");
    background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("../images/bg01.png");
    color: #fff;
}

Then whenever I use gatsby develop or I serve the files built by gatsby build the resulting style produced ignores/deletes all the fallback values for the background-image property.

The resulting style being served is

.wrapper.style3 {
    background-color: red;
    background-image: linear-gradient(top,transparent,rgba(0,0,0,.15)),url("../images/bg01.png");
    color: #fff
}

If I delete the last background-image property then the new last background-image property is used in the resulting css. This leads me to believe that gatsby is de-duplicating css properties.

Why does it do this and how can I prevent fallback property values from getting removed from the resulting stylesheet? I want the fallback values for cross browser compatibility.

I am not using any plugins.

Gatsby CLI version: 4.13.0
Gatsby version: 4.13.0
Nodejs:  v16.15.0
gatsby reactjs css
1 Answers

It's a webpack-related issue, not Gatsby per se. I think you can solve this by using PostCSS to create and extend syntaxes and features into modern, browser-friendly CSS so you will only need to add your rule and PostCSS will handle the cross-browser and fallback compatibility (if there's any, you can add your own as you are doing right now).

Install it by:

npm install postcss gatsby-plugin-postcss

To use it with CSS modules you'll need to add the following in your gatsby-config.js:

plugins: [
  {
    resolve: `gatsby-plugin-postcss`,
    options: {
      postCssPlugins: [require(`postcss-preset-env`)({ stage: 0 })],
    },
  },
],

If you want to include autoprefixer can be done by adding an extra PostCSS plugin:

plugins: [
  {
    resolve: `gatsby-plugin-postcss`,
    options: {
      postCssPlugins: [
        require(`postcss-preset-env`)({ stage: 0 }),
        require('autoprefixer'),
      ],
    },
  },
];

Modified from: Gatsby plugin settings for gatsby-plugin-postcss + autoprefixer + browserslist

user_55853710
Related