Autoprefixer status?

[SachaG]

What's the status on getting Autoprefixer to work again? Should I just give up on it and go back to using Compass mixins?

[sebakerckhof]

Well, seeing the post of david glasser here: meteor/meteor#5219 , I assume autoprefixing won't be able to have it's own plugin anytime soon.

I'm also a bit reluctant to put it in here, since well, it's not a part of sass and this plugin used to support too many non-sass stuff, which now people expect to continue to work.
That being said, Autoprefixing is quite popular and it would probably not be too hard to include in this plugin. But I'd rather not publish it for the reasons above, but just create a separate branch which you can clone in your local packages?

[SachaG]

If you're able to include it as part of this package, can't you somehow break off that part of the package as its own package? I'm asking because all Telescope sites are now completely broken in Safari. So it's kind of a big problem for me…

[derwaldgeist]

+1 for having the auto-prefixer as a separate package again. My app's styles are now broken as well, since I relied on auto-prefixing.

[sebakerckhof]

I'll create a separate release with autoprefixer enabled.

[SachaG]

Awesome!

[pixelass]

+1

not a friend of having it tied to this package but we need a solution

is this one a dead end? https://github.com/sebakerckhof/meteor-autoprefix

[francisbyrne]

+1 We're really keen to upgrade to v1.2 but this is a blocking change.
Let me know if you need any help getting this done @sebakerckhof :)

[sebakerckhof]

After some dicussion, I decided to leave it out of this package, but instead create a minifier package that includes autoprefixing. That will prevent every compiler (less, stylus, sass, ...) from having to implement this functionality over and over and it will also allow you to autoprefix normal css files from other packages (which is usually what you want to do anyway).

I hope I can find some time for it by the end of the week.

[SachaG]

Awesome, thanks so much for this! It's a huge life-saver :)

[derwaldgeist]

Thanks!

[sebakerckhof]

Can you guys test this package locally (instead of standard-minifiers):
https://github.com/sebakerckhof/meteor-minifiers-autoprefix

[pixelass]

@sebakerckhof how do I add it?

clone into packages?
meteor add ???:???

[sebakerckhof]

@pixelass I haven't published it to atmosphere since it's very untested.
For now, just clone it and add it to the packages folder of a meteor project.

[pixelass]

cd [myMeteorProject]/packages
git clone git@github.com:sebakerckhof/meteor-minifiers-autoprefix.git standard-minifiers
cd .. 
meteor add standard-minifiers
echo '{"autoprefixer":{"browsers":["last 2 versions"]}}' > .meteor/postcss.json

[pixelass]

seems to work as expected (no minifying though)

prefixertest {
  display: flex;
  box-shadow: 0 0 0 red;
  user-select: none;

}

prefixertest {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  box-shadow: 0 0 0 red;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

[pixelass]

I am not sure if this step is correct though

git clone git@github.com:sebakerckhof/meteor-minifiers-autoprefix.git standard-minifiers
meteor add standard-minifiers

[sebakerckhof]

Well, minifying should only happen on build, just like in standard meteor.

Do source maps seem correct? They appeared to be correct in my simple tests, but these things can be tricky.

I am not sure if this step is correct though

I thought you needed to add it into a packages folder, but if your prefixing works then I guess it's ok.

I'll rename it before I publish it to atmosphere.

[pixelass]

my bad.. Yes obviously I added it to the packages folder. (sorry coding from my bed ;) half sleep drunken) I updated the info above so others don't get it mixed up

minified with --production flag

testing it on staging for our "huge" app today. I can report in a few hours

[pixelass]

sourcemaps have never worked for me in meteor. I totally gave up on it.

Sorry I'm not really a big fan of meteor and have learned to accept that I need to step down with my expectations as a developer.

This is obviously not doing what it is supposed to:

but like I said I never expected it to work anyways.

[sebakerckhof]

That looks like a file after a production build. You don't have sourcemaps in the production build (which makes sense IMO). However, they should work in development mode (just running meteor). So the final autoprefixed file should be linked to the original sass files in the debug tools of chrome.

[pixelass]

like I said still in bed here ;)

I just deployed a demo page here: http://blaze-material-ui.meteor.com/
seems to work OK. testing sourcemaps locally now.

[pixelass]

sourcemaps tested and works..

live editing/saving from devtools work as expected..

YOU ARE THE F*****G BEST

thx a bunch

[sebakerckhof]

Glad you appreciate it, it was a pain to get them correct with the cross-package imports and so.
Going to publish it to atmosphere

[sebakerckhof]

I'll have to wait on this: meteor/meteor#5512

[pixelass]

I just tested sourcemaps in another demo which uses the package from above.

When I inspect e.g. the paper-fab it links the merged stylesheet.

while when I inspect a component from the "current package" it links to the correct file

Did you expect it to work with the original dev-files or is this behavior correct?

---

EDIT:
I should probably mention that both projects are "packages" and both have an example folder which has a meteor app inside. one is linked by a symbolic link while the other is cloned from git or added via atmosphere

only one package is open-source but here is what I'm talking about: https://github.com/Code-Fights/blaze-material-ui/tree/master/examples

[francisbyrne]

Awesome, works for me too. Thanks heaps for this!

[francisbyrne]

(source maps worked fine for me)

[sebakerckhof]

@pixelass I'm gonna do some more testing in the coming days. Could you maybe create a repo with a small reproduction?

[pixelass]

@sebakerckhof here is an example.. actually sourcemaps aren't working at all in this

https://github.com/pixelass/meteor-tests

I just put this together in a few minutes so I might be doing something wrong but it is basically the same behavior I mostly get in meteor which led me to just forget about sourcemaps in general when working on meteor stuff

[SachaG]

Works great! I'll add it to Telescope as soon as it's published to Atmosphere :)

(And personally I'm fine if it's published even in its experimental state, just add a note in the readme)

[pixelass]

+1 on experimental state publish. I am very happy with this plugin. It solves the problem of the missing vendor prefixes and will help a lot of people. Even though it's experimental and a hack it is now the most important cross-browser-css plugin

[sebakerckhof]

@pixelass If I stripe your application to be much more minimal and without my autoprefixer plugin I also don't have valid sourcemaps: https://github.com/sebakerckhof/meteor-tests

So this would be a meteor bug I guess.

[johanbrook]

Yep, we didn't have nice sourcemaps before this either.

(This works great btw, thank you! ✨ )

[pixelass]

@sebakerckhof hey.. that's exactly what I'm saying ;) no worries..

sourcemaps have never worked for me in meteor. I totally gave up on it.

...

but like I said I never expected it to work anyways.

[pixelass]

I just tried it on our "huge" app. Sadly the plugin does not work. I tried production and dev mode.

I followed the exact steps as I did for the small example pages.

[sebakerckhof]

Note that i pushed some changes this morning. postcss.json should now be in
the apps root and the package has been renamed to
seba:minifiers-autoprefixer Does that solve the issue?
On Oct 23, 2015 22:05, "Gregor Adams" notifications@github.com wrote:

I just tried it on our "huge" app. Sadly the plugin does not work. I tried
production and dev mode.

I followed the exact steps as I did for the small example pages.

[image: screen shot 2015-10-23 at 1 03 45 pm]
https://cloud.githubusercontent.com/assets/1148334/10703685/9d420700-7986-11e5-84b9-8c3206b3fde7.png
[image: screen shot 2015-10-23 at 1 04 01 pm]
https://cloud.githubusercontent.com/assets/1148334/10703693/a4737c02-7986-11e5-9739-1c9ee9674a86.png

—
Reply to this email directly or view it on GitHub
#147 (comment)
.

[pixelass]

hah.. let me try.

[pixelass]

should I meteor remove standard-minifiers though?

[sebakerckhof]

Yes, meteor allows only have 1
On Oct 23, 2015 22:17, "Gregor Adams" notifications@github.com wrote:

should I meteor remove standard-minifiers though?

—
Reply to this email directly or view it on GitHub
#147 (comment)
.

[pixelass]

kk. thx. again.. *the best

[sebakerckhof]

Now published to atmosphere: https://atmospherejs.com/seba/minifiers-autoprefixer

[SachaG]

Amazing!

[SachaG]

Weird, when I was using it locally the package was working, but now it's not anymore. Is postcss.json mandatory for turning on autoprefixing? And where would you put it for packages? At the root of the package? Does it need to be api.addFile()'d?

[SachaG]

Oh false alert, now it works… I updated fourseven:scss to 3.4.1, don't know if that has anything to do with it.

[fourseven]

@sebakerckhof - can you update this readme to point to your autoprefixer package? It should lower the noise on issues about it. Awesome work on building it too!

[derwaldgeist]

Sounds amazing! I read about a postcss.json file. Where can I find documentation on this?

[Jpunt]

I've found myself searching around for a solution and completely read over the minifiers-autoprefixer-package. For those in the same situation, this will fix it:

meteor remove standard-minifiers
meteor add seba:minifiers-autoprefixer

This way you can still use meteor-scss and autoprefixer at the same time.

Thanks @sebakerckhof! 🤘