search

csstools / postcss-preset-env

Convert modern CSS into something browsers understand
https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env
Creative Commons Zero v1.0 Universal
2.22k stars 90 forks source link

Support PostCSS 8 #191

Closed jonathantneal closed 2 years ago

jonathantneal commented 4 years ago

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.

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

Semigradsky commented 4 years ago

I will be happy to help 😸

Semigradsky commented 4 years ago
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: https://github.com/postcss/postcss-selector-matches/pull/22 :mathes was renamed to :is and incorrectly implemented - candidate for removing?
Semigradsky commented 4 years ago

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 commented 4 years ago

Note that it is also blocked by an upstream postcss-tape issue: https://github.com/csstools/postcss-tape/issues/5

goto-bus-stop commented 4 years ago

PR for postcss-color-hex-alpha: https://github.com/postcss/postcss-color-hex-alpha/pull/15

heath-freenome commented 3 years ago

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?

solidevolution commented 3 years ago

Are there any updates?

Semigradsky commented 3 years ago

@solidevolution see https://github.com/csstools/postcss-preset-env/issues/191#issuecomment-693295774

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 commented 3 years ago

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

armano2 commented 3 years ago

@Semigradsky i just created pr for postcss-gap-properties and there one pr not listed on this list postcss-logical

Plugin Ready for Postcss 8 Note
postcss-gap-properties https://github.com/jonathantneal/postcss-gap-properties/pull/4
postcss-logical https://github.com/csstools/postcss-logical/pull/31
armano2 commented 3 years ago

update:

Plugin Ready for Postcss 8 Note
postcss-double-position-gradients csstools/postcss-double-position-gradients#2
armano2 commented 3 years ago

@Semigradsky update:

Plugin Ready for Postcss 8 Note
postcss-pseudo-class-any-link PR: jonathantneal/postcss-pseudo-class-any-link#11
postcss-color-gray PR: postcss/postcss-color-gray#18
postcss-place waiting for release
postcss-image-set-function PR: jonathantneal/postcss-image-set-function#11
postcss-env-function PR: jonathantneal/postcss-env-function#11 waiting for release
armano2 commented 3 years ago

is there anything else that has to be done to proceed with support for postcss 8?

ludofischer commented 3 years ago

is there anything else that has to be done to proceed with support for postcss 8?

PostCSS 7 plugins should run under PostCSS 8 (they just emit a warning), so you don't require every plugin to migrate to use it with PostCSS 8.

armano2 commented 3 years ago

@ludofischer all plugins have hard dependency on postcss 7

ludofischer commented 3 years ago

@ludofischer all plugins have hard dependency on postcss 7

All PostCSS 7 plugins do, but you can still run them with PostCSS 8. Porting everything to PostCSS 8 is necessary only to get rid of duplicate PostCSS in node_modules.

armano2 commented 3 years ago

in many cases it lets to hoisting issues that prevent consumers to actually run it, i know that i can be fixed, but its not as straight forward to do so

e.g. https://github.com/facebook/docusaurus/issues/4378 https://github.com/facebook/docusaurus/pull/4404/checks?check_run_id=2091632671

lostfictions commented 3 years ago

This is a common issue when using Tailwind and/or NextJS as well: https://github.com/tailwindlabs/tailwindcss/issues/2799

I was hoping Yarn's resolutions field could resolve this issue, even with warnings (as @ludofischer suggested was possible above) but in practice postcss-preset-env appears to break for other reasons if manually pinned to postcss@8.

EDIT: It turns out Next 10.1, Tailwind, and postcss-preset-env work fine together in my project without any resolutions overrides or complicated hacks (though I'm only using one preset-env feature). PostCSS 8 and postcss-preset-env both need to explicitly be installed as direct (non-transitive) dependencies, otherwise there are very confusing error messages.

Here's my devDependencies in my package.json:

"devDependencies": {
    "next": "^10.1.3",
    "postcss": "^8.2.10",
    "postcss-preset-env": "^6.7.0",
    "tailwindcss": "^2.1.1"
}

Here's my postcss.config.json:

{
  "plugins": [
    "tailwindcss",
    [
      "postcss-preset-env",
      {
        "stage": 3,
        "features": {
          "custom-properties": { "preserve": false }
        },
        "importFrom": ["src/styles/vars.css"]
      }
    ]
  ]
}
wommy commented 3 years ago

im willing to help,

can we set up something in the project tab?

JohnAlbin commented 3 years ago

First off, I love this tool. Thanks so much for making it and maintaining it!

All PostCSS 7 plugins do, but you can still run them with PostCSS 8. Porting everything to PostCSS 8 is necessary only to get rid of duplicate PostCSS in node_modules.

That's not correct. PostCSS v8 plugins can be incompatible with PostCSS v7 plugins. Both plugins will "work" with PostCSS v8, but those plugins may not work together properly.

@Semigradsky Postcss-nesting has been marked as "complete", but the API conversion was only partially completed (at least I assume that's why it is misbehaving with other PostCSS v8 plugins). See https://github.com/csstools/postcss-nesting/issues/83

Hypnosphi commented 3 years ago

This suddently became more urgent: https://www.npmjs.com/advisories/1693

PostCSS clearly isn't going to patch v7 https://github.com/postcss/postcss/issues/1574#issuecomment-836934941

crooksey commented 3 years ago

@Semigradsky great work on this, so far to get an update as of 20/05/2021 it looks like other than awaiting various PR's to be merged, we just need to potentially remove "postcss-color-mod-function" from this library as support for it has been dropped?

EDIT- 24/05/2021 @peilingjiang has submitted a PR for this repo to update it for v8.

hitendra-ap commented 3 years ago

Hi, Is this still alive? Any idea when it is moving in?

almothafar commented 3 years ago

Hi, Is this still alive? Any idea when it is moving in?

When I asked this question, I got a lot of -1's without anyone bothering to write any answer, so good luck with that 😅

ehoogeveen-medweb commented 3 years ago

A lot of work has been done here to update all the dependencies - the problem is that the pull requests in the dependencies aren't being merged as some of them appear to be abandoned.

Maybe there's more that can be done to reach out to the maintainers of those repos and offer to take over. Otherwise I think the only way forward is to fork the dependencies or (temporarily) incorporate updated versions into this repo.

Airkro commented 3 years ago

An open-source project(mostly without a team) is impossible to answer "when". we have to get used to it.

For anyone who can't wait: Make your lite version fork, it's easy, and safer(select features you actually needed).

My version: https://github.com/best-shot/postcss-preset-evergreen

jonathantneal commented 3 years ago

Maybe there's more that can be done to reach out to the maintainers of those repos and offer to take over

I am the maintainer of those repos. 😅

jonathantneal commented 3 years ago

I got a lot of -1's without anyone bothering to write any answer

What a bummer. They should -1 me, not you. I never expected to run out of free time. I never expected to get so blocked parsing values that I would have to write my own parser, which mean writing my own parser, which meant writing my own tokenizer, which meant learning how css is tokenized, which meant learning what tokenization is.

And then somebody hits me up about container queries or tab components and how we can help spread adoption, and I spend a few hours helping out there, while this slips further. It’s so awful. I want to do my best, and it takes such a big chunk of time.

I’ve never stopped trying to make a way for all of this to be updated. Believe me, for nearly two years I haven’t been at ease when I know my weekend has some free time, and I won’t be until it’s finished.

romainmenke commented 3 years ago

@jonathantneal What can we do to help?

jonathantneal commented 3 years ago

The most realistic help would be getting ourselves into a Discord channel where we could manage this with higher touch. Basically, I want to be more responsive to contributors and the community. And, at worst, I want to be more annoyed, so that it’s top of mind and gets done much sooner.

We could use a chat room to coordinate updating the plugins I’ve neglected to notice are ready to be published or have PRs ready to get them up to speed. We kinda did that here, but it eventually got threaded into email. It also helps to do this in the open, to show good faith to users. I think it also helps to do this in the open, so people can get connected with each other.

So, please, anything that is more alive than email. Over email, things often get lost, because I maintain roughly 114 css tools, almost all postcss plugins, not including the ones I maintain in the postcss repos, or the ones that require client-side polyfills that live under my username or jsxtools.

niksy commented 3 years ago

The most realistic help would be getting ourselves into a Discord channel where we could manage this with higher touch.

Should we start here?

crooksey commented 3 years ago

@jonathantneal I created a gitter channel? Sent you an invite, if you are OK with this, I will post the link here.

jonathantneal commented 3 years ago

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

https://discord.gg/JTHpyexU

zleight1 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

xithalius commented 3 years ago

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

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

mikestopcontinues commented 3 years ago

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

Semigradsky commented 3 years ago

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

dargmuesli commented 3 years ago

@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 commented 2 years ago

All plugins are updated now! :partying_face: 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 commented 2 years ago

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

Airkro commented 2 years ago

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

zangab commented 2 years ago

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

Any update on this?

dargmuesli commented 2 years ago

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 commented 2 years ago

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

vivshaw commented 2 years ago

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 commented 2 years ago

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.

  1. PostCSS does not parse smaller tokens like preludes (known as at-rule params or rule selectors in PostCSS) or declaration values.
  2. 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 commented 2 years ago

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 commented 2 years ago

Closed with #220 ! Thanks to all