Support PostCSS 8 #191

jonathantneal · 2020-09-15T17:16:39Z

Hey, neat project. I did notice this is still running PostCSS 7. I also saw that it hasn’t had a commit since April. Did you have a chance to see that PostCSS 8 is out? The creators of the project have even released this migration guide.

Can we expect support for PostCSS 8?
Are you still working on the project?
Can I help? 😄

Oh wait hold up I’m me. Umm...

Yes!
Yes, tho proof must be in the pudding.
Of course.

Semigradsky · 2020-09-15T19:01:43Z

I will be happy to help 😸

Semigradsky · 2020-09-16T09:43:51Z

Plugin	Ready for Postcss 8	Note
css-blank-pseudo	✅ Ready - v2.0.0	Plugin require JS
css-has-pseudo	✅ Ready - v2.0.0	Plugin require JS
css-prefers-color-scheme	✅ Ready - v5.0.0	Plugin require JS; >92% browser support
postcss-color-functional-notation	✅ Ready - v4.0.0	>93% browser support
postcss-color-hex-alpha	✅ Ready - v7.0.0	>94% browser support
postcss-custom-media	✅ Ready - v8.0.0
postcss-custom-selectors	✅ Ready - v6.0.0
postcss-dir-pseudo-class	✅ Ready - v6.0.0
postcss-double-position-gradients	✅ Ready - v3.0.0	>93% browser support
postcss-env-function	✅ Ready - v4.0.0	>93% browser support
postcss-focus-visible	✅ Ready - v6.0.0	Plugin require JS
postcss-focus-within	✅ Ready - v5.0.0	Plugin require JS; >94% browser support
postcss-font-variant	✅ Ready - v5.0.0
postcss-gap-properties	✅ Ready - v3.0.0	>93% browser support
postcss-image-set-function	✅ Ready - v4.0.0
postcss-lab-function	✅ Ready - v4.0.0
postcss-logical	✅ Ready - v5.0.0
postcss-media-minmax	✅ Ready - v5.0.0
postcss-nesting	✅ Ready - v8.0.0
postcss-overflow-shorthand	✅ Ready - v3.0.0	>92% browser support
postcss-page-break	✅ Ready - v3.0.2
postcss-place	✅ Ready - v7.0.0	>94% browser support
postcss-selector-not	✅ Ready - v5.0.0	>91% browser support

Candidates for removing?

Plugin	Ready for Postcss 8	Note
postcss-attribute-case-insensitive	✅ Ready - v5.0.0	96.35% browser support - candidate for removing?
postcss-color-gray	PR was merged. Wait new release.	Was removed from Spec - candidate for removing?
postcss-color-mod-function	PR was merged. Wait new release.	Was removed from Spec - candidate for removing?
postcss-color-rebeccapurple	✅ Ready - v7.0.0	97.19% browser support - candidate for removing?
postcss-custom-properties	✅ Ready - v12.0.0	Has limitations. Also 96.21% browser support - candidate for removing?
postcss-font-family-system-ui	✅ Ready - v5.0.0	Currently `postcss-preset-env` use 'fork'; 95.07% browser support - candidate for removing?
postcss-initial	✅ Ready - v4.0.0	97.88% browser support - candidate for removing?
postcss-pseudo-class-any-link	✅ Ready - v7.0.0	97.38% browser support - candidate for removing?
postcss-replace-overflow-wrap	✅ Ready - v4.0.0	97.15% browser support - candidate for removing?
postcss-selector-matches	PR: postcss/postcss-selector-matches#22	`:mathes` was renamed to `:is` and incorrectly implemented - candidate for removing?

Semigradsky · 2020-09-16T09:58:08Z

Candidates for adding

Plugin	Ready for Postcss 8	Note
postcss-font-format-keywords	✅ Ready - v2.0.0
postcss-clamp	✅ Ready - v2.0.0	>92% browser support
postcss-normalize-display-values	✅ Ready - v5.0.0
postcss-ic-unit	✅ Ready - v2.0.0
postcss-opacity-percentage	✅ Ready - v1.0.0

JLHwung · 2020-09-16T16:09:03Z

Note that it is also blocked by an upstream postcss-tape issue: csstools/postcss-tape#5

goto-bus-stop · 2020-09-19T10:41:32Z

PR for postcss-color-hex-alpha: postcss/postcss-color-hex-alpha#15

heath-freenome · 2020-10-23T18:37:10Z

How close are you to making the simplest update possible ready (i.e. just porting to the Once() syntax), then doing the hard work of switching to using the Rule(), AtRule(), etc... later?

@kripod

I realized while looking over this that the `autoprefixer` plugin isn't being used by postcss because it's not included in the `postcss.config.js`. Additionally, since `postcss-preset-env` doesn't support PostCSS 8 yet, and it includes PostCSS 7 as a dependency, I've removed that package. There is an open issue to add PostCSS 8 support to `postcss-preset-env` [here](csstools/postcss-preset-env#191). @kripod's comments on my other PR #20956 are what prompted me to check this out. On a side note, it looks like all the CMS examples use Tailwind CSS v1 still, so that's something someone (possibly myself) could tackle later.

solidevolution · 2021-02-03T08:57:05Z

Are there any updates?

Semigradsky · 2021-02-03T10:40:13Z

@solidevolution see #191 (comment)

If you'd like to help you can open a PR in any repo that doesn't already have PostCSS8 support or review existing PRs.

pi0 · 2021-03-05T12:42:05Z

Hi @jonathantneal. Would you please confirm if above table is updated?

zleight1 · 2021-07-13T14:33:47Z

I can keep up with Discord and Slack. Here’s an invite link for anyone willing to help.

https://discord.gg/JTHpyexU

Looks like this invite expired

crooksey · 2021-07-15T09:04:44Z

I can keep up with Discord and Slack. Here’s an invite link for anyone willing to help.
https://discord.gg/JTHpyexU

Looks like this invite expired

https://discord.gg/9GZNpqXR

Antonio-Laguna · 2021-07-27T10:11:40Z

Happened again. Can't join. Is there anything I can do to help?

xithalius · 2021-07-27T16:19:27Z

Happened again. Can't join. Is there anything I can do to help?

This link won't expire: https://discord.gg/8wHumqgb9r

mikestopcontinues · 2021-08-21T16:51:01Z

@Semigradsky It's been about a month since your last chart update. Are we close? 👀

Semigradsky · 2021-08-28T13:35:12Z

@mikestopcontinues as I see there is nothing new: the PRs have been merged, but there have been no new releases.

dargmuesli · 2021-09-16T16:51:32Z

@Semigradsky we've managed to release css-blank-pseudo and css-has-pseudo today. Other releases are going to follow in the coming days.

dargmuesli · 2021-09-22T15:15:41Z

All plugins are updated now! 🥳 the last thing to do is to release a new postcss-preset-env version.
For that the postcss-preset-env plugin definition itself needs to be updated! (https://github.com/csstools/postcss-preset-env/blob/next/release/src/postcss.js#L11).

@jonathantneal and I will meet next week again. In the meantime we'd welcome a PR which completes the work on the next/release branch as mentioned, so that we can quickly release the final postcss8 compatibility next week! Thank you.

Antonio-Laguna · 2021-09-22T15:26:16Z

Thanks a lot @dargmuesli and @jonathantneal ! I'm going to get started on that PR ASAP and will update here.

Airkro · 2021-09-24T09:57:16Z

Please considering turn off all the plugins that require JS by default.

zangab · 2021-10-10T20:29:21Z

... so that we can quickly release the final postcss8 compatibility next week!

Any update on this?

dargmuesli · 2021-10-10T21:58:30Z

A new release of https://github.com/shellscape/postcss-values-parser was necessary, which was just created. I proposed the next meeting for the new week in which we could finish our work.

dargmuesli · 2021-10-11T21:06:24Z

Jonathan is currently on vacation this week, let's continue next week.

vivshaw · 2021-10-20T19:32:53Z

As far as I know, the PostCSS 8 chart in this issue is incorrect- postcss-nesting is not actually ready for PostCSS 8 and has had an open issue about it since May 10. The bug in question prevents postcss-nesting and postcss-mixins from being used together. I can still reproduce this bug as of today.

dargmuesli · 2021-10-27T15:47:55Z

Today we took care of postcss-nesting and decided that turning of JS plug-ins could still be made later on after the basic postcss8 compatibility release.
Let me cite Jonathan's message in Discord for your convenience:

We made our way into PostCSS Preset Env and ran into a 'killer' bug. It must be resolved by writing a new css values parser.

The 'killer' bug is best explained in 2 steps.

PostCSS does not parse smaller tokens like preludes (known as at-rule params or rule selectors in PostCSS) or declaration values.

PostCSS Values Parser incorrectly parses these smaller tokens and actually throws.

@dargmuesli and I saw this bug for ourselves when running the PostCSS tests:

at /csstools/postcss-preset-env/test/basic.css:38:1
at Input.error (/csstools/postcss-preset-env/node_modules/postcss/lib/input.js:123:16)
at ValuesParser.unknownWord (/csstools/postcss-preset-env/node_modules/postcss/lib/parser.js:518:22)
at ValuesParser.unknownWord (/csstools/postcss-preset-env/node_modules/postcss-values-parser/lib/ValuesParser.js:195:15)```

We specifically ran into this when parsing @media (480px <= width < 768px) {}. We cannot not support this rule, as it actually works in some browsers.
The solution is for me to finally write the parser I keep talking about and applying to the custom media, media range, and env() polyfills.

dargmuesli · 2021-11-13T12:20:39Z

Hey guys, just want to let you know that @romainmenke and @Antonio-Laguna are now working on the finishing touches and are waiting for feedback and approval of their contributions from Jonathan. For details see the Discord mentioned above.

Still, we're so close to the goal! I think my job is done here, fingers crossed for the remaining bits to settle.
- Jonas

Antonio-Laguna · 2021-11-16T12:39:41Z

Closed with #220 ! Thanks to all

jonnitto mentioned this issue Sep 16, 2020

Use PostCSS 8 CarbonPackages/Carbon.Rollup#11

Closed

24 tasks

onigoetz mentioned this issue Sep 19, 2020

Start work on PostCSS 8 Migration swissquote/crafty#963

Merged

58 tasks

goto-bus-stop mentioned this issue Sep 19, 2020

update to postcss 8 csstools/postcss-color-functional-notation#5

Merged

Semigradsky pinned this issue Sep 20, 2020

ludofischer mentioned this issue Sep 23, 2020

PostCSS 8 vercel/next.js#17242

Closed

Semigradsky added the help wanted label Sep 28, 2020

danielweck mentioned this issue Oct 2, 2020

dev: PostCSS v8 upgrade, "postcss-cssnext" deprecation edrlab/thorium-reader#1196

Closed

jescalan mentioned this issue Nov 4, 2020

Postcss config broken in next@10 vercel/next.js#18808

Closed

Joozty mentioned this issue Nov 10, 2020

Bump packages oacore/design#386

Merged

jagreehal mentioned this issue Nov 19, 2020

Update Tailwind example to v2.0 vercel/next.js#19278

Merged

stefanprobst mentioned this issue Nov 20, 2020

postcss 8 compatibility csstools/postcss-focus-visible#14

Closed

Cherry mentioned this issue Nov 27, 2020

Tailwind 2.0 poor performance as part of a webpack PostCSS build system tailwindlabs/tailwindcss#2820

Closed

clarkdo mentioned this issue Nov 29, 2020

feat(postcss): upgrade to postcss v8 nuxt/nuxt#8408

Closed

7 tasks

ycjcl868 mentioned this issue Nov 30, 2020

[WIP] chore: upgrade postcss 8 umijs/umi#5751

Closed

4 tasks

clarkdo mentioned this issue Dec 23, 2020

feat(postcss): support postcss v8 with explict postcss installation nuxt/nuxt#8546

Merged

7 tasks

privatenumber mentioned this issue Dec 29, 2020

Update to PostCSS 8 parcel-bundler/parcel#5166

Merged

JstnEdr mentioned this issue Jan 11, 2021

Replace postcss-preset-env with autoprefixer vercel/next.js#20985

Closed

This was referenced Jan 11, 2021

Update PostCSS plugin list in README vercel/next.js#20956

Merged

Use autoprefixer instead of postcss-preset-env vercel/next.js#21215

Merged

clarkdo mentioned this issue Feb 16, 2021

PostCSS 8 nuxt/nuxt#8087

Closed

This was referenced Jun 29, 2021

Update postcss version to avoid compiling errors decidim/decidim#8168

Closed

PostCss Mismatch not compiling assets decidim/decidim#8167

Closed

dargmuesli mentioned this issue Jul 30, 2021

postcss v8.2.12 fails to build (Nuxt) sampotts/plyr#2182

Closed

mcibique mentioned this issue Aug 23, 2021

ONL-5955: Update to postcss8 Ebury/chameleon#884

Merged

thescientist13 mentioned this issue Sep 1, 2021

Chore/issue 532 esm upgrade ProjectEvergreen/greenwood#707

Merged

17 tasks

cyfung1031 mentioned this issue Sep 21, 2021

Remove postcss-preset-env from the docs webpack-contrib/postcss-loader#534

Closed

4 tasks

Antonio-Laguna mentioned this issue Oct 28, 2021

Updating postcss-values-parser csstools/postcss-env-function#16

Merged

This was referenced Nov 7, 2021

feat: upgrade to PostCSS 8 csstools/postcss-media-fn#2

Merged

feat: Support PostCSS 8 csstools/postcss-short-text#1

Open

boris-petrov mentioned this issue Nov 9, 2021

Future of this addon webark/ember-cli-styles#1

Closed

Semigradsky mentioned this issue Nov 9, 2021

Add postcss-opacity-percentage to list of plugins postcss/postcss#1662

Merged

Antonio-Laguna closed this as completed Nov 16, 2021

Antonio-Laguna unpinned this issue Nov 17, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support PostCSS 8 #191

Support PostCSS 8 #191

jonathantneal commented Sep 15, 2020

Semigradsky commented Sep 15, 2020

Semigradsky commented Sep 16, 2020 •

edited

Loading

Semigradsky commented Sep 16, 2020 •

edited

Loading

JLHwung commented Sep 16, 2020

goto-bus-stop commented Sep 19, 2020

heath-freenome commented Oct 23, 2020 •

edited

Loading

solidevolution commented Feb 3, 2021

Semigradsky commented Feb 3, 2021

pi0 commented Mar 5, 2021

zleight1 commented Jul 13, 2021

crooksey commented Jul 15, 2021

Antonio-Laguna commented Jul 27, 2021

xithalius commented Jul 27, 2021

mikestopcontinues commented Aug 21, 2021

Semigradsky commented Aug 28, 2021 •

edited

Loading

dargmuesli commented Sep 16, 2021

dargmuesli commented Sep 22, 2021

Antonio-Laguna commented Sep 22, 2021

Airkro commented Sep 24, 2021

zangab commented Oct 10, 2021 •

edited

Loading

dargmuesli commented Oct 10, 2021

dargmuesli commented Oct 11, 2021

vivshaw commented Oct 20, 2021

dargmuesli commented Oct 27, 2021

dargmuesli commented Nov 13, 2021

Antonio-Laguna commented Nov 16, 2021

Support PostCSS 8 #191

Support PostCSS 8 #191

Comments

jonathantneal commented Sep 15, 2020

Semigradsky commented Sep 15, 2020

Semigradsky commented Sep 16, 2020 • edited Loading

Candidates for removing?

Semigradsky commented Sep 16, 2020 • edited Loading

Candidates for adding

JLHwung commented Sep 16, 2020

goto-bus-stop commented Sep 19, 2020

heath-freenome commented Oct 23, 2020 • edited Loading

solidevolution commented Feb 3, 2021

Semigradsky commented Feb 3, 2021

pi0 commented Mar 5, 2021

zleight1 commented Jul 13, 2021

crooksey commented Jul 15, 2021

Antonio-Laguna commented Jul 27, 2021

xithalius commented Jul 27, 2021

mikestopcontinues commented Aug 21, 2021

Semigradsky commented Aug 28, 2021 • edited Loading

dargmuesli commented Sep 16, 2021

dargmuesli commented Sep 22, 2021

Antonio-Laguna commented Sep 22, 2021

Airkro commented Sep 24, 2021

zangab commented Oct 10, 2021 • edited Loading

dargmuesli commented Oct 10, 2021

dargmuesli commented Oct 11, 2021

vivshaw commented Oct 20, 2021

dargmuesli commented Oct 27, 2021

dargmuesli commented Nov 13, 2021

Antonio-Laguna commented Nov 16, 2021

Semigradsky commented Sep 16, 2020 •

edited

Loading

Semigradsky commented Sep 16, 2020 •

edited

Loading

heath-freenome commented Oct 23, 2020 •

edited

Loading

Semigradsky commented Aug 28, 2021 •

edited

Loading

zangab commented Oct 10, 2021 •

edited

Loading