Gatsby PostCSS setup compiles away custom CSS properties

[jlengstorf]

Description

In V1 using CSS modules, the CSS custom properties get compiled away. I'm inclined to blame this on an optimization step (cssnext/cssnano?), or maybe Autoprefixer, but I haven't had the chance to look into it.

Steps to reproduce

1. Create a file with CSS custom properties

Example: https://github.com/jlengstorf/lengstorf.com/blob/master/src/styles/_variables.css

2. Import it into a CSS module

Example: https://github.com/jlengstorf/lengstorf.com/blob/7fd8d4efed4e8731e25b01b3cab24011643bb3e0/src/styles/blog.module.css#L1

3. The compiled output replaces custom properties with hard-coded values

Source: https://github.com/jlengstorf/lengstorf.com/blob/7fd8d4efed4e8731e25b01b3cab24011643bb3e0/src/styles/blog.module.css#L52-L53

Output:

Expected result

The source should output custom CSS properties with a fallback, per https://github.com/postcss/postcss-custom-properties#notes

Actual result

Only the hard-coded values were included.

Environment

• Gatsby version (npm list gatsby): gatsby@1.9.223
• gatsby-cli version (gatsby --version): 1.1.49
• Node.js version: v9.8.0
• Operating System: macOS 10.13.4

File contents (if changed):

gatsby-config.js:

module.exports = {
  plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-twitter',
    'gatsby-plugin-instagram',
    'gatsby-plugin-five-stages',
    'gatsby-plugin-amplitude',
    'gatsby-plugin-catch-links',
    'gatsby-transformer-sharp',
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src`,
        name: 'src',
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/posts`,
        name: 'posts',
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/offers`,
        name: 'offers',
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/pages`,
        name: 'pages',
      },
    },
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-images',
            options: {
              maxWidth: 1380,
              linkImagesToOriginal: false,
            },
          },
          {
            resolve: 'gatsby-remark-responsive-iframe',
          },
          'gatsby-remark-copy-linked-files',
          'gatsby-remark-numbered-footnotes',
          'gatsby-remark-smartypants',
        ],
      },
    },
  ],
};

package.json:

{
  "name": "lengstorf",
  "version": "0.0.0-semantic-release",
  "license": "MIT",
  "scripts": {
    "develop": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "lint:js": "eslint src",
    "lint:css": "stylelint \"src/**/*.css\"",
    "lint": "yarn lint:js && yarn lint:css"
  },
  "dependencies": {
    "gatsby": "^1.9.102",
    "gatsby-image": "^1.0.24",
    "gatsby-link": "^1.6.22",
    "gatsby-plugin-catch-links": "^1.0.9",
    "gatsby-plugin-manifest": "^1.0.8",
    "gatsby-plugin-offline": "^1.0.10",
    "gatsby-plugin-react-css-modules": "^1.0.9",
    "gatsby-plugin-react-helmet": "^2.0.1",
    "gatsby-plugin-sharp": "^1.6.21",
    "gatsby-plugin-twitter": "^1.0.13",
    "gatsby-remark-copy-linked-files": "^1.5.21",
    "gatsby-remark-images": "^1.5.32",
    "gatsby-remark-responsive-iframe": "^1.4.14",
    "gatsby-remark-smartypants": "^1.4.8",
    "gatsby-source-filesystem": "^1.5.8",
    "gatsby-transformer-remark": "^1.7.21",
    "gatsby-transformer-sharp": "^1.6.14",
    "lodash": "^4.17.4",
    "lodash-webpack-plugin": "^0.11.4",
    "lodash.template": "^4.4.0",
    "prop-types": "^15.6.0",
    "react": "^16.1.0",
    "react-dom": "^16.1.0",
    "react-helmet": "^5.2.0",
    "react-transition-group": "^2.2.1",
    "remark-numbered-footnotes": "^1.0.1",
    "retext": "^5.0.0",
    "whatwg-fetch": "^2.0.3"
  },
  "devDependencies": {
    "jl-toolbox": "^0.9.2",
    "remark-cli": "^4.0.0",
    "remark-preset-lint-recommended": "^3.0.1",
    "stylelint": "^8.2.0",
    "stylelint-config-standard": "^18.0.0",
    "webpack-bundle-analyzer": "^2.9.1"
  }
}

[seejamescode]

I think it comes from the use of postcss-cssnext, which uses postcss-custom-properties. I ran into it just from importing a css file into src. This issue may be relevant.

[madeleineostoja]

Yep this is from cssnext which Gatsby bundles. That's going away in v2, but the easiest fix for now is just to nuke Gatsby's postcss config and provide your own (eg: just autoprefixer).

See: https://github.com/gatsbyjs/gatsby/issues/3284#issuecomment-386861512

[jlengstorf]

Closing since v2 solves this.