Less pkg, mo mojo

[nternetinspired]

Hey Andrew,

I noticed that many of the postcss packages included replicate functionality already included in http://cssnext.io/ and it's successor https://preset-env.cssdb.org/.

This PR removes Autoprefixer, post-css-extend, postcss-hexrgba, postcss-nested, postcss-nested-ancestors and postcss-simple-vars; the functionality they provide is all provided I believe by the most awesome postcss-preset-env: https://preset-env.cssdb.org/features

Options, such as those for Autoprefixer can be passed directly to postcss-preset-env instead. My postcss config, for example, contains:

module.exports = {
  plugins: [
    require("postcss-import")({
      plugins: [
        require("stylelint"),
      ]
    }),
    require('postcss-preset-env')({
      autoprefixer: { grid: true }
    }),
    require('postcss-normalize'),
    require('postcss-easing-gradients'),
    require('tailwindcss')('./tailwind.config.js')
  ]
};

[khalwat]

Great, thank you @nternetinspired -- I will test the changes and see if there are any implications.

[khalwat]

Seems to work great, thank you!

[khalwat]

@nternetinspired in case you have any input on this... I'm oddly not seeing things being auto-prefixed using this setup? I've read the docs, and it doesn't seem like we're doing anything wrong, though.

https://github.com/csstools/postcss-preset-env#autoprefixer

https://github.com/browserslist/browserslist#queries

[khalwat]

Figured it out... it was working... but not for anything that Tailwind generated, because it needs to be required after it. I'll update the config.

[nternetinspired]

Good catch @khalwat, apologies for not correcting the ordering myself; I should have spotted that. My current setup is:

module.exports = {
    plugins: [
      require('postcss-import')({
        plugins: [
          require('stylelint'),
        ]
      }),
      require('postcss-normalize'),
      require('tailwindcss')('./tailwind.js'),
      require('postcss-preset-env')({
        autoprefixer: { grid: true },
        features: {
          'nesting-rules': true
        }
      })
    ]
};

[khalwat]

You'll hear all about it on the next episode of https://devmode.fm/ -- comes out on Monday January 7th! :)

I like your defaults, and will adopt them into the project repo too

[khalwat]

So I ended up with this:

f669742

Note the use of stylelint-config-recommended and added .stylelintrc.json to use it, and override the warnings about Tailwind specific things.

[nternetinspired]

Nice one, I look forward to the podcast.