-
Notifications
You must be signed in to change notification settings - Fork 26.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Non-standardized PostCSS config file doesn't support require statements #10117
Comments
the workaround, for searchers finding this issue: my module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('postcss-preset-env')({ stage: 2 }),
],
}; but now looks like module.exports = {
plugins: {
'postcss-import': {},
tailwindcss: {},
'postcss-preset-env': { stage: 2 },
},
}; following the format from https://github.com/postcss/postcss-loader |
The big motivator behind this restriction is because self- In other words, we'd have to re-transform the CSS every time the application was edited—this is slow/suboptimal. We have not yet documented PostCSS customization, but it's coming soon! re: sharing config We do support a subset of module.exports = {
plugins: {
'postcss-import': {},
tailwindcss: {},
'postcss-preset-env': { stage: 2 },
},
}; |
The action items we want to take are:
Feel free to send PRs! |
I love the update! Running into a snag though. I can't seem to use purgecss in my postcss.config.js file. It was working with const plugins = {
'postcss-import': {},
'tailwindcss': {},
'postcss-preset-env': { stage: 0 },
}
// This branch definitly runs...
if (process.env.NODE_ENV === 'production') {
// This doesn't seem to work. None of the css is purged...
plugins['@fullhuman/postcss-purgecss'] = {
content: [
'pages/**/*.js',
'containers/**/*.js',
'components/**/*.js',
'views/**/*.js',
],
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [],
}
// Doubt I need this but leaving it here just in case...
plugins['cssnano'] = {
preset: ['default', {
discardComments: {
removeAll: true,
},
}],
}
}
module.exports = {
plugins,
} |
Here's an example for purgecss: https://github.com/zeit/next.js/blob/canary/examples/with-tailwindcss/postcss.config.js cssnano is not needed (applied already by next). |
Thank you! That's interesting. Any reason why we need to configure it that way over the above way? Should we always use A "wait for the docs" is perfectly fine as well. |
This doesn't appear to work with my project either. The |
You can drop postcss-import afaik. cc @Timer |
|
I tracked it down. Totally nothing to do with postcss-import. I'm sorry to have wasted your time. A copy and paste left me with a I need to make my comments a lot brighter in my IDE. |
it seems like you can use either format—adding purgecss to my config works just fine like so, following the config options from https://github.com/zeit/next.js/blob/canary/examples/with-tailwindcss/postcss.config.js module.exports = {
plugins: {
'postcss-import': {},
tailwindcss: {},
...(process.env.NODE_ENV === 'production'
? {
'@fullhuman/postcss-purgecss': {
content: ['./pages/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [],
},
}
: {}),
'postcss-preset-env': { stage: 2 },
},
}; noting, in the case of tailwind, to ignore the base import /* purgecss start ignore */
@import 'tailwindcss/base';
/* purgecss end ignore */
@import 'tailwindcss/components';
@import './my_styles.css';
@import 'tailwindcss/utilities'; |
Yeah. I very obliviously had the purgecss start ignore comment towards the end of |
@Timer Could you throw a more meaningful error? I think "An unknown PostCSS plugin was provided" is not enough. For example, you can check if the provided plugin is a function and ask the user to only use plugin name or the object form configuration instead (or even link to this issue). |
Try next@canary, the message was updated there |
Now explained in Next.js canaries with read more links. |
New Next.js built-in CSS support doesn't work with PostCSS plugins as Array of required modules. Instead it needs it as an Object (vercel/next.js#10117).
I have a local postcss plugin that I've written for my own needs. How does one use that in this scenario without using require? |
@simonsmith you should be able to use the resolved file path as the plugin name: // postcss.config.js or .postcssrc.js
module.exports = {
plugins: [
require.resolve('../my-plugin.js')
]
};
// or
module.exports = {
plugins: [
[require.resolve('../my-plugin.js'), { ... }]
]
}; |
@Timer I just ran across this too. There's an error message that's searchable which will lead here, but is it possible to add a more descriptive error message or something that leads the user to documentation? I'm sure there will be a migration guide when 9.2.* comes out, but having an error message that links off to documentation (or tells you how to fix it directly) would be lovely. |
That’s already added, try upgrading to next@canary to see it. |
Hey @timneutkens what if I wan't to configure the options to say |
Add `-D` flag for dev dependencies. Prevent error with `require()` in `postcss.config.js` cfr [this issue](vercel/next.js#10117)
This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Bug report
Describe the bug
With the introduction of the marvelous Built-in CSS Support, a new non-standard PostCSS Config plugin syntax was introduced.
This syntax requires that plugins listed in
postcss.config.js
be strings rather thanrequire
statements. This breaks backwards compatibility and differs from the standard set by existing PostCSS documentation.Additionally, this makes it tough (or impossible) to share a common PostCSS configuration with additional tools like Storybook.js.
To Reproduce
Steps to reproduce the behavior, please provide code snippets or a repository:
yarn add -D tailwindcss autoprefixer
postcss.config.js
:yarn next build
Expected behavior
require()
are supportedScreenshots
The following is shown when running
next build
:System information
Additional context
This work was likely done to be able to identify, dedupe, and acknowledge Next's default PostCSS plugins — and it's likely the solution to this issue is nothing more than better documentation.
Here are a couple proposed solutions:
1. Support
require()
statements in PostCSS configI'd rely on @Timer's knowledge here, as there are likely other consequences (notably: not being able to inspect and dedupe plugins).
2. Display a warning/error that indicates deprecated behavior
This would be a simple check in
packages/next/build/webpack/config/blocks/css/plugins.ts
to see if the plugin is a function:I'm happy to submit PRs for either of these solutions! But looking for guidance from the core team.
The text was updated successfully, but these errors were encountered: