Upgrade to postcss 5.x

[MoOx]

Most plugins are ready but there is still some work to prepare.

[jednano]

Are we just waiting for some plugins to upgrade? If so, can we get a checklist of the ones remaining?

[louh]

Autoprefixer, for one - waiting on that to be v6

[ben-eb]

cssnano 3 will support PostCSS 5. Coming shortly after autoprefixer 6.

[jednano]

It looks like Autoprefixer 6.0.1 and cssnano 3.0 are now released. Is there anything else holding us back now?

[MoOx]

• "autoprefixer": "^6.0.0",
• "cssnano": "^3.0.0",
• "pixrem": "^2.0.0",
• "postcss-calc": "^5.0.0",
• "postcss-color-function": "^2.0.0",
• "postcss-color-gray": "^?",
• "postcss-color-hex-alpha": "^?",
• "postcss-color-hwb": "^?",
• "postcss-color-rebeccapurple": "^?",
• "postcss-color-rgba-fallback": "^2.0.0",
• "postcss-custom-media": "^5.0.0",
• "postcss-custom-properties": "^5.0.0",
• "postcss-custom-selectors": "^3.0.0",
• "postcss-font-variant": "^?",
• "postcss-import": "^7.0.0",
• "postcss-media-minmax": "^2.0.0",
• "postcss-pseudo-class-any-link": "^1.0.0",
• "postcss-pseudoelements": "^?",
• "postcss-reporter": "^1.0.0",
• "postcss-selector-matches": "^2.0.0",
• "postcss-selector-not": "^2.0.0",
• "postcss-url": "^5.0.0",

I can handle all updates except postcss-pseudoelements.

[jednano]

@MoOx you can cross postcss-pseudoelements off the list now. See https://github.com/axa-ch/postcss-pseudoelements/releases/tag/3.0.0

[jednano]

@MoOx see postcss/postcss-color-gray#5

[jednano]

@MoOx see postcss/postcss-color-hex-alpha#5

[jednano]

@MoOx see postcss/postcss-color-hwb#6

[jednano]

@MoOx see postcss/postcss-color-rebeccapurple#6

[jednano]

@MoOx see postcss/postcss-font-variant#7

[onigoetz]

@jedmao nice work !
@MoOx can you merge all these in ? cssnext is the last package in my pipeline on postcss4 and I would love to upgrade it.

[MoOx]

It's not that easy. I think I can't just "merge" yet, because cssnext runners are sync, and plugins like cssnano are now async only.
I will need to release this in a major release, and so, I will probably need to deprecate all runners in favors of postcss ones. But I need to do this the right way, by warning everyone & with a proper changelog on how to upgrade.

That said, I will merge & publish all pr tomorrow so this branch can work if used just as a plugin.
I think I will also release "postcss-cssnext" or something like that, but I didn't get any feedback on #208 and postcss/postcss#477 to take a decision...

[jednano]

@MoOx I only care about the plugin use-case myself. Is there anything else I can do to help?

[MoOx]

What do you think about creating a postcss-cssnext that will "just" handle all features plugins but no options like import, url, cssnano ? I can create a repo here so we can extract the main code.
I think not including plugins like import, url & cssnano (that are considered cssnext options, not "features") to make classic postcss usage more intuitive. I don't really know if this postcss-cssnext should use autoprefixer or not. You tell me guys.
poke @ai

[jednano]

I like the idea of postcss-cssnext that includes "just" features plugins. The bonus plugins are clearly out of project scope anyway, as far as I'm concerned.

If I understand correctly, the project goals of cssnext are to write future CSS syntax, today. Seeing as autoprefixer enables you to do that w/o worrying about vendor prefixes, I definitely feel that it belongs in the cssnext project goals; thus, the postcss-cssnext plugin.

That's my $0.02.

[koistya]

It seems to me that import, url, cssnano, autoprefixer are falling out of the scope of this plugin's objective.

[ben-eb]

I think the best thing is to limit scope where possible. For example, https://github.com/jakubpawlowicz/clean-css has a processImport option which does the same things as postcss-import, but I feel is outside the scope of a minifier and so I chose not to bundle similar functionality with cssnano. Indeed, cssnano's usage of autoprefixer is uncommon because it just removes old prefixes, and even I wasn't sold on the idea until @ai convinced me to include it.

Options like import, url and compress don't contribute to cssnext's scope, I feel. They are a nice convenience if you want to get up and running quickly, but they are not cssnext's modus operandi, which is to polyfill future capabilities of the CSS specification. But I agree with @jedmao, the inclusion of autoprefixer should still make the cut because it ensures that the correct vendor prefixes are applied.

[MoOx]

cssnext was first designed when was not widely used, and so when no ones was still using postcss directly via a runner. That's why there is "so many" features, like imports, url,...
It's clear that today it does not clearly make sense, but I also know people that are still happy to "just us it" as it is.
That why I think it's time for a postcss-cssnext that just handle css features. cssnext like it is (with it's own interface) will still be keep for legacy, or for people that like to use a simple (and stupid) tool.

$ cssnext input.css > output.css

That's something no other tool simply bring as I am writing.

[ben-eb]

All of that makes sense to me. 👍

[chentaixu]

Yep, options like import, url and cssnano should be excluded from cssnext.

[MoOx]

postcss-cssnext is almost ready. There is still a minor warning, but we will find the culprit.
You can thank @jedmao for this.

For difference, checkout the README and don't hesitate to provide feedback on the explanation I added.

cssnext itself will need a major breaking change in the API so we can deliver an upgrade, because cssnano is an async plugin, and cssnext api is currently sync only.

cssnext 2.0 will use postcss-cssnext under the hood.

[DVLP]

I've been struggling with this half day
How do I install postcss-cssnext to be able to use postcss?

npm install postcss-cssnext --save-dev

didn't work so I cloned the repo and built it using npm install
This didn't work either.

https://github.com/cssnext/postcss-cssnext

On the repo page it doesn't say that it's not ready or not working

I'm using this template

https://github.com/kriasoft/react-starter-kit

In the config I changed this

postcss: [
   require('postcss-nested')(),
   require('cssnext')(),
   require('autoprefixer')(AUTOPREFIXER_BROWSERS)
 ]

to this:

postcss: [
   require('postcss-nested')(),
   require('postcss-cssnext')(),
   require('autoprefixer')(AUTOPREFIXER_BROWSERS)
 ]

and it looks like it's still not working

c:\Users\PW\desktop\repos\react\tools\config.js:95
postcss: [require('postcss-nested')(), require('postcss-cssnext')(), require('
autoprefixer')(AUTOPREFIXER_BROWSERS)]
^

TypeError: require(...) is not a function
at Object. (c:/Users/PW/desktop/repos/react/tools/config.js:93:31
)
at Module._compile (module.js:434:26)
at normalLoader (c:\Users\PW\Desktop\repos\REACT\node_modules\babel\node_mod
ules\babel-core\lib\api\register\node.js:199:5)
at Object.require.extensions.(anonymous function) [as .js](c:UsersPWDesk
topreposREACTnode_modulesbabelnode_modulesbabel-corelibapiregisternode
.js:216:7)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object. (c:/Users/PW/desktop/repos/react/tools/start.js:16:16)

at Module._compile (module.js:434:26)

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "c:\Program Files\nodejs\node.exe" "c:\Program Files\nodejs
node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v4.0.0
npm ERR! npm v2.14.2
npm ERR! code ELIFECYCLE
npm ERR! @ start: babel-node --eval "require('./tools/start')().catch(err => co nsole.error(err.stack))"
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ start script 'babel-node --eval "require('./tools/start
')().catch(err => console.error(err.stack))"'.
npm ERR! This is most likely a problem with the package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! babel-node --eval "require('./tools/start')().catch(err => console.
error(err.stack))"
npm ERR! You can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! c:\Users\PW\desktop\repos\react\npm-debug.log

[jednano]

@DVLP you need to npm install cssnext, not postcss-cssnext.

[DVLP]

@jedmao That was my starting point. Then I was getting this error postcss/postcss#531

So it looks like cssnext is outdated and it will not work with postcss 5. That's why I was hoping to get postcss-cssnext running. Currently I develop with most bootstrap styles missing and hope to fix it tomorrow.

[jednano]

@DVLP yeah. cssnext doesn't support PostCSS 5.0 yet, so you have to use 4.x plugins until it does. postcss-cssnext is almost ready though. Just waiting for the pleeease-filters plugin to upgrade to PostCSS 5.0 and we can pull the switch.

[DVLP]

Cool, I can't wait for that. I'm just working on a test project which needs to be ready for tomorrow to get a React contract so probably will have to use the latest 4.x version for now.

[MoOx]

We are waiting for @iamvdo to merge & release this PR iamvdo/pleeease-filters#12

[MoOx]

postcss-cssnext is out https://github.com/cssnext/postcss-cssnext/releases/tag/2.0.0
Check out the difference between cssnext and postcss-cssnext

Next version of cssnext will use this plugin as a legacy interface.

[ben-eb]

@MoOx Great work. 👍

[MoOx]

You can thanks @jedmao for this.

[ben-eb]

@jedmao Thanks! Great work. 👍

[maximkoretskiy]

Is there any problems with this issue?

[MoOx]

My problem is that a day only contains 24h and I have to keep some to sleep :)

[MoOx]

(No problem, I am on it since yesterday)

[maximkoretskiy]

Are PR welcome?

[MoOx]

Sadly, it's not that simple and there is a lot of work to do to offer a good upgrade experience.
See #208. I will take care on it, I started to work on it yesterday.

[MoOx]

I am currently making a monorepo with postcss-cssnext and legacy/cli cssnext package. Sorry for taking so long. Life can be complicated sometimes.

[MoOx]

I changed my mind and think it's better to keep things simple. So I will close this issue in favor of the convergence #208