Skip to content
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

Jump to bottom

Updated PostCSS docs and added a link to it #10292

Merged
merged 4 commits into from Jan 28, 2020
Merged

Updated PostCSS docs and added a link to it #10292

merged 4 commits into from Jan 28, 2020

Conversation

lfades
Copy link
Member

@lfades lfades commented Jan 27, 2020

  • Added a related link in the built-in css section to the PostCSS configs in advanced features.
  • Moved some notes in the PostCSS section.

@lfades lfades requested a review from Timer as a code owner January 27, 2020 20:07
@ijjk
Copy link
Member

ijjk commented Jan 27, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
buildDuration 11.5s 11.4s -129ms
nodeModulesSize 52.1 MB 52.1 MB ✓
Client Bundles (main, webpack, commons)
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
main-HASH.js gzip 5.1 kB 5.1 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB ✓
commons.HASH.js gzip 4.06 kB 4.06 kB ✓
de003c3a9d30..d57b.js gzip 16.1 kB 16.1 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 69.8 kB 69.8 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
main-HASH.module.js gzip 4.09 kB 4.09 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB ✓
de003c3a9d30..dule.js gzip 15 kB 15 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 64.5 kB 64.5 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB ✓
Overall change 4.76 kB 4.76 kB ✓
Client Pages
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
_app.js gzip 1.15 kB 1.15 kB ✓
_error.js gzip 4.07 kB 4.07 kB ✓
hooks.js gzip 779 B 779 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 2.89 kB 2.89 kB ✓
routerDirect.js gzip 283 B 283 B ✓
withRouter.js gzip 282 B 282 B ✓
Overall change 9.68 kB 9.68 kB ✓
Client Pages Modern
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
_app.module.js gzip 576 B 576 B ✓
_error.module.js gzip 3.06 kB 3.06 kB ✓
hooks.module.js gzip 371 B 371 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 2.46 kB 2.46 kB ✓
routerDirect..dule.js gzip 273 B 273 B ✓
withRouter.m..dule.js gzip 272 B 272 B ✓
Overall change 7.22 kB 7.22 kB ✓
Client Build Manifests
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Rendered Page Sizes
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
index.html gzip 1.02 kB 1.02 kB ✓
link.html gzip 1.03 kB 1.03 kB ✓
withRouter.html gzip 1.02 kB 1.02 kB ✓
Overall change 3.07 kB 3.07 kB ✓
Serverless Mode
General
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
buildDuration 12.1s 11.9s -148ms
nodeModulesSize 52.1 MB 52.1 MB ✓
Client Bundles (main, webpack, commons)
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
main-HASH.js gzip 5.1 kB 5.1 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB ✓
commons.HASH.js gzip 4.06 kB 4.06 kB ✓
de003c3a9d30..d57b.js gzip 16.1 kB 16.1 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 69.8 kB 69.8 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
main-HASH.module.js gzip 4.09 kB 4.09 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB ✓
de003c3a9d30..dule.js gzip 15 kB 15 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 64.5 kB 64.5 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB ✓
Overall change 4.76 kB 4.76 kB ✓
Client Pages
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
_app.js gzip 1.15 kB 1.15 kB ✓
_error.js gzip 4.07 kB 4.07 kB ✓
hooks.js gzip 779 B 779 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 2.89 kB 2.89 kB ✓
routerDirect.js gzip 283 B 283 B ✓
withRouter.js gzip 282 B 282 B ✓
Overall change 9.68 kB 9.68 kB ✓
Client Pages Modern
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
_app.module.js gzip 576 B 576 B ✓
_error.module.js gzip 3.06 kB 3.06 kB ✓
hooks.module.js gzip 371 B 371 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 2.46 kB 2.46 kB ✓
routerDirect..dule.js gzip 273 B 273 B ✓
withRouter.m..dule.js gzip 272 B 272 B ✓
Overall change 7.22 kB 7.22 kB ✓
Client Build Manifests
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Serverless bundles
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
_error.js gzip 46.2 kB 46.2 kB ✓
hooks.html gzip 1.06 kB 1.06 kB ✓
index.js gzip 46.4 kB 46.4 kB ✓
link.js gzip 71.9 kB 71.9 kB ✓
routerDirect.js gzip 69.9 kB 69.9 kB ✓
withRouter.js gzip 69.9 kB 69.9 kB ✓
Overall change 305 kB 305 kB ✓

Commit: d0880b6

@ijjk
Copy link
Member

ijjk commented Jan 28, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
buildDuration 11.9s 11.7s -253ms
nodeModulesSize 52.1 MB 52.1 MB ✓
Client Bundles (main, webpack, commons)
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
main-HASH.js gzip 5.1 kB 5.1 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB ✓
commons.HASH.js gzip 4.06 kB 4.06 kB ✓
de003c3a9d30..d6ae.js gzip 16.2 kB 16.2 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 69.9 kB 69.9 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
main-HASH.module.js gzip 4.1 kB 4.1 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB ✓
de003c3a9d30..dule.js gzip 15.1 kB 15.1 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 64.6 kB 64.6 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB ✓
Overall change 4.76 kB 4.76 kB ✓
Client Pages
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
_app.js gzip 1.15 kB 1.15 kB ✓
_error.js gzip 4.07 kB 4.07 kB ✓
hooks.js gzip 779 B 779 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 2.89 kB 2.89 kB ✓
routerDirect.js gzip 283 B 283 B ✓
withRouter.js gzip 282 B 282 B ✓
Overall change 9.68 kB 9.68 kB ✓
Client Pages Modern
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
_app.module.js gzip 576 B 576 B ✓
_error.module.js gzip 3.06 kB 3.06 kB ✓
hooks.module.js gzip 371 B 371 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 2.46 kB 2.46 kB ✓
routerDirect..dule.js gzip 273 B 273 B ✓
withRouter.m..dule.js gzip 272 B 272 B ✓
Overall change 7.22 kB 7.22 kB ✓
Client Build Manifests
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Rendered Page Sizes
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
index.html gzip 1.02 kB 1.02 kB ✓
link.html gzip 1.03 kB 1.03 kB ✓
withRouter.html gzip 1.02 kB 1.02 kB ✓
Overall change 3.07 kB 3.07 kB ✓
Serverless Mode
General
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
buildDuration 12.4s 12.3s -122ms
nodeModulesSize 52.1 MB 52.1 MB ✓
Client Bundles (main, webpack, commons)
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
main-HASH.js gzip 5.1 kB 5.1 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB ✓
commons.HASH.js gzip 4.06 kB 4.06 kB ✓
de003c3a9d30..d6ae.js gzip 16.2 kB 16.2 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 69.9 kB 69.9 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
main-HASH.module.js gzip 4.1 kB 4.1 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB ✓
de003c3a9d30..dule.js gzip 15.1 kB 15.1 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 64.6 kB 64.6 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB ✓
Overall change 4.76 kB 4.76 kB ✓
Client Pages
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
_app.js gzip 1.15 kB 1.15 kB ✓
_error.js gzip 4.07 kB 4.07 kB ✓
hooks.js gzip 779 B 779 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 2.89 kB 2.89 kB ✓
routerDirect.js gzip 283 B 283 B ✓
withRouter.js gzip 282 B 282 B ✓
Overall change 9.68 kB 9.68 kB ✓
Client Pages Modern
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
_app.module.js gzip 576 B 576 B ✓
_error.module.js gzip 3.06 kB 3.06 kB ✓
hooks.module.js gzip 371 B 371 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 2.46 kB 2.46 kB ✓
routerDirect..dule.js gzip 273 B 273 B ✓
withRouter.m..dule.js gzip 272 B 272 B ✓
Overall change 7.22 kB 7.22 kB ✓
Client Build Manifests
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Serverless bundles
zeit/next.js canary lfades/next.js docs/link-to-postcss Change
_error.js gzip 46.6 kB 46.6 kB ✓
hooks.html gzip 1.06 kB 1.06 kB ✓
index.js gzip 46.8 kB 46.8 kB ✓
link.js gzip 72.4 kB 72.4 kB ✓
routerDirect.js gzip 70.4 kB 70.4 kB ✓
withRouter.js gzip 70.5 kB 70.5 kB ✓
Overall change 308 kB 308 kB ✓

Commit: b34a37e

@Timer Timer added this to the 9.2.2 milestone Jan 28, 2020
@Timer Timer merged commit ee9ccc8 into vercel:canary Jan 28, 2020
@belgattitude
Copy link
Contributor

belgattitude commented Jan 29, 2020 •
edited

@lfades just tested out the example with nextjs 9.2.1 and postcss.config.js:

module.exports = {
  plugins:
    process.env.NODE_ENV === 'production'
      ? [
          'postcss-flexbugs-fixes',
          [
            'postcss-preset-env',
            {
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
              features: {
                'custom-properties': false,
              },
            },
          ],
        ]
      : [
          // No transformations in development
        ],
}

And got an error:

Failed to compile.
./src/assets/hack_nextjs_issue_282.less
TypeError: Invalid PostCSS Plugin found at: plugins[0]

EDIT added css nano

I haven't checked fully but this one works for me:

module.exports = ctx => ({
  parser: ctx.parser ? 'sugarss' : false,
  plugins: {
    autoprefixer: {},
    'postcss-preset-env': {
      autoprefixer: {
        flexbox: 'no-2009',
      },
      stage: 3,
      features: {
        'custom-properties': false,
      },
    },
    cssnano:
      ctx.env === 'production'
        ? {
          preset: 'default',
          discardComments: { removeAll: true },
        }
        : false,
  },
});

@lfades
Copy link
Member Author

lfades commented Jan 29, 2020

@belgattitude Thank you for the report, I'll check it out 🕵

@nghiepdev
Copy link
Contributor

Same problem when use both @zeit/next-less and postcss.config.js.

This was referenced Mar 13, 2020
Closed
Open
This was referenced Mar 22, 2020
Merged
Merged
@vercel vercel locked as resolved and limited conversation to collaborators Jan 31, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@Timer Timer Timer approved these changes

@timneutkens timneutkens Awaiting requested review from timneutkens

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
9.2.2
Development

Successfully merging this pull request may close these issues.

None yet
5 participants
@lfades @ijjk @belgattitude @nghiepdev @Timer