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

Less pkg, mo mojo #7

Merged
merged 1 commit into from Dec 17, 2018

Conversation

Projects
None yet
2 participants
@nternetinspired
Copy link
Contributor

nternetinspired commented Nov 27, 2018

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

This comment has been minimized.

Copy link
Contributor

khalwat commented Dec 17, 2018

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

@khalwat

This comment has been minimized.

Copy link
Contributor

khalwat commented Dec 17, 2018

Seems to work great, thank you!

@khalwat khalwat merged commit 24d9ee9 into nystudio107:master Dec 17, 2018

@khalwat

This comment has been minimized.

Copy link
Contributor

khalwat commented Jan 3, 2019

@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

This comment has been minimized.

Copy link
Contributor

khalwat commented Jan 3, 2019

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

This comment has been minimized.

Copy link
Contributor

nternetinspired commented Jan 4, 2019

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

This comment has been minimized.

Copy link
Contributor

khalwat commented Jan 5, 2019

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

This comment has been minimized.

Copy link
Contributor

khalwat commented Jan 5, 2019

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

This comment has been minimized.

Copy link
Contributor

nternetinspired commented Jan 7, 2019

Nice one, I look forward to the podcast.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment