Gatsby: [gatsby-plugin-postcss] Support extension names other than .css

[ddadaal]

Summary

For gatsby-plugin-postcss, add support for resolving files with extension name other than .css, with which users can specify what files should be processed by this plugin.

Basic example

Add a new option extensions in plugin's options.

[".css"] as default for compatibility

// in gatsby-config.js
// thie plugins will process file with extensions name .css, .pcss or .sss
plugins: [
  {
    resolve: `gatsby-plugin-postcss`,
    options: {
      extensions: [".css", ".pcss", ".sss"],
    },
  },
],

Motivation

• Usually I use a different file extension name (like .pcss) for PostCSS files, because one extension name for both plain CSS and PostCSS files leads to confusion. Different types of file should use different extension names if possible.
• IDEs (like VSCode) usually treat .css file as CSS file, so PostCSS syntax (like &:hover) in a .css file can cause syntax error. It can be solved by making VSCode resolve css file as PostCSS, but it is a extra step to do and also confuses developers.
• Importing existing plain css library (like normalize.css) may cause errors like No PostCSS Config found, since the plain css are also be treated as PostCSS. It won't happen if PostCSS files use its own extension name.

[m-allanson]

Thanks for opening this issue @viccrubs! Today I learned about using .pcss as an extension for PostCSS files :)

I don't think we've had this feature requested before, so I'm going to document how you can create your own version of gatsby-plugin-postcss that will do this. Then let's leave this issue open for a bit to see if this is functionality other people would like too, if so we can consider adding it to Gatsby's official postCSS plugin.

Ok so let's create a local plugin similar to gatsby-plugin-postcss, but that works for different file extensions.

• Check out the doc (and example) on creating local plugins.

• Create a gatsby-node.js in your local plugin folder:

// modified from https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-postcss/src/gatsby-node.js
- import resolve from "./resolve"
+ const resolve = require.resolve

- const CSS_PATTERN = /\.css$/
+ const CSS_PATTERN = /\.css|\.pcss$|\.sss$/
const MODULE_CSS_PATTERN = /\.module\.css$/

const getOptions = pluginOptions => {
  const options = { ...pluginOptions }
// remaining file contents here...

• Then add your plugin to your gatsby site's config.

That should be it!

[ddadaal]

Thanks for opening this issue @viccrubs! Today I learned about using .pcss as an extension for PostCSS files :)

I don't think we've had this feature requested before, so I'm going to document how you can create your own version of gatsby-plugin-postcss that will do this. Then let's leave this issue open for a bit to see if this is functionality other people would like too, if so we can consider adding it to Gatsby's official postCSS plugin.

Ok so let's create a local plugin similar to gatsby-plugin-postcss, but that works for different file extensions.

• Check out the doc (and example) on creating local plugins.
• Create a gatsby-node.js in your local plugin folder:

// modified from https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-postcss/src/gatsby-node.js
- import resolve from "./resolve"
+ const resolve = require.resolve

- const CSS_PATTERN = /\.css$/
+ const CSS_PATTERN = /\.css|\.pcss$|\.sss$/
const MODULE_CSS_PATTERN = /\.module\.css$/

const getOptions = pluginOptions => {
  const options = { ...pluginOptions }
// remaining file contents here...

• Then add your plugin to your gatsby site's config.

That should be it!

This quick and simple local plugin solution works like a charm! Thanks for this awesome solution!

But currently with this solution, there might be some concerns about the interoperability with other plugins that may also process CSS files.

The original plugin works differently on injecting the new rules when rules concerning .css files already exist or not. Simply changing the CSS_PATTERN may cause unexpected compatibility issues. In fact, using this solution upon a new project initialized with gatsby-cli with this quick start guide immediately causes the following error when yarn develop:

Module build failed (from ./node_modules/gatsby/node_modules/postcss-loader/lib/index.js):
Syntax Error

(2:1) Unknown word

  1 | 
> 2 | var content = require("!!../../node_modules/css-loader/index.js??ref--14-oneOf-1-1!../../plugins/postcss-2/node_modules/postcss-loader/src/index.js??ref--14-oneOf-1-2!./layout.css");
    | ^
  3 | 
  4 | if(typeof content === 'string') content = [[module.id, content, '']];

 @ ./src/components/layout.css 2:14-377 21:1-42:3 22:19-382
 @ ./src/components/layout.js
 @ ./src/pages/page-2.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js

And the error disappears when making the plugin only process .pcss by const CSS_PATTERN = /\.pcss$/. I think it might have something to do with not being able to find existing css rules and therefore not inserting the new rule into the right place.

Nevertheless, it can solve my problem perfectly (since I only use .pcss). I believe we can make it better if others would like to see it as well. :smile:

Thanks again!

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[buoyantair]

It would be nice if we could configure the extensions though. Managing a local copy (keeping it up to date) of a whole repo that changes almost every day / few hours can be pretty daunting...

[Hrishikesh-K]

It's been over a year since this was opened and I'm surprised, not many people have commented here. What @buoyantair is so true.

[Alddar]

This issue is basically the only thing that is preventing me to use gatsbyjs. Please consider adding the support.

[ddadaal]

I believe this package patch-package can help if this feature is still not supported.

Just make changes directly to the plugin's code in node_modules, let patch-package generate a patch file, and add a postinstall hook to npm to make patch-package modify the plugin's code after npm install.

This avoids the need to maintain a separate copy of the plugin itself.