question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Feature Request: make Postcss plugins configurable, update dependancies and add to documentation

See original GitHub issue

There seems quite a lot of issues related to configuring Postcss plugins and the gatsby-plugin-postcss-sass plugin.

Here are some: #2776, [gatsby-plugin-postcss-sass] Separate PostCSS and Sass #2462, Update postcss related plugins #2823, Ignored custom PostCSS config when building site #3208, Tailwind CSS (postcss plugin) does not work via gatsby-plugin-postcss-sass <= mine #2188, RuckSack-CSS unhandled rejection #2106, Would love to see an uncss plugin #2328, [gatsby-source-wordpress] UNHANDLED REJECTION during gatsby build or develop #1347, [1.0] When using gatsby-plugin-sass final output CSS isn’t run through autoprefixer

It would great to be able to easily configure Gatsby’s Postcss plugins, and have this support documented. As well as update the current postcss dependancies. The later I’d guess is coming in the next major rev of Gatsby with the latest version of webpack.

Here are two solid examples of other webpack static site generators that also include Postcss and cssnext by default, and natively expose this in both their configuration and documentation.

Nuxt.js

How to add PostCSS plugins? Customize PostCSS Loader plugins

nuxt js doc search 2017-12-19 22-49-14

Spike

FAQ: Adding a postcss plugin

spike doc search 2017-12-19 22-50-59

A robust search solution, like Algolia or equivalent, integrated into Gatsby’s docs would also likely be quite helpful.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:7
  • Comments:17 (8 by maintainers)

github_iconTop GitHub Comments

7reactions
jonmilnercommented, Jan 28, 2018

@KyleAMathews As someone who’s moved on from Sass, but still prefers writing CSS in .css files, I’m glad to hear there’s interest in improving PostCSS support.

I’d love to be able to drop a postcss.config.js into the project root, install the dependencies, and have Gatsby handle the rest.

FWIW, this is my go-to PostCSS config (all the benefits of Sass, with none of the features I don’t want) - https://github.com/jonmilner/postcss-config/blob/master/postcss.config.js

6reactions
oolothcommented, Jun 6, 2018

Removing any default postcss setup would be ideal.

Since some cases require carefully controlling the order in which the postcss plugins run, it would be cleaner to start from scratch than to have to override or merge with a default postcss config.

Read more comments on GitHub >

github_iconTop Results From Across the Web

postcss/writing-a-plugin.md at main - GitHub
Writing a PostCSS Plugin ; Create a new file in postcss/ folder with the name of your plugin. Copy plugin template from our...
Read more >
What is PostCSS? How to Use Plugins to Automate CSS Tasks
PostCSS is a Node.js tool that transforms your styles using JavaScript plugins. It generates more downloads per week on NPM than other CSS ......
Read more >
postcss-loader | webpack - JS.ORG
Allows to set PostCSS options and plugins. All PostCSS options are supported. There is the special config option for config files. How it...
Read more >
postcss-preset-env - npm
PostCSS Preset Env is a Plugin Pack for PostCSS. It leverages the list of the features we keep an eye from CSSDB and...
Read more >
Advanced Features: Customizing PostCSS Config - Next.js
Extend the PostCSS config and plugins added by Next.js with your own. ... To customize the PostCSS configuration, create a postcss.config.json file in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found