Autoprefixer

This topic contains 9 replies, has 3 voices, and was last updated by  Sebastian 4 weeks ago.

Author Posts

ddenev

Dear Sebastian,

Currently, when using the normal CSS editing options, the vendor prefixes are added automatically and this is great. The thing is that when using SCSS, vendor prefixes are not auto added and we have to add them manually (or via mixins).

Do you think it might be a good idea to incorporate an autoprefixer to take care of all vendor prefix stuff – https://github.com/postcss/autoprefixer?

And since this works as a post-processor for CSS it might also take care of the vendor prefixes even when not using SCSS in MT (I guess you apply them yourself in the code in this case).

Best regards,
Drago


Sebastian

Hi Drago,

You are right to point this out. The reasons this doesn’t happen automatically with Sass enabled may not be applicable for much longer.

Previously Sass was compiled on the server, where as vanilla CSS is formatted and rendered with JavaScript. This meant that the functionality had to be forked. Some things that were possible with vanilla CSS could not be easily carried over to Sass. Like adding prefixes. MT does this by parsing the CSS into property/value JS objects that can be easily manipulated. Until recently, MT wasn’t parsing Sass. It was just sending it to the sever to be converted to CSS. But the current beta does parse Sass, and renders it instantly. Now the two features can be merged. This means:

  1. Properties can be prefixed with Sass
  2. The code editor and UI fields can be used interchangeably even with Sass
  3. Sass files can be imported via Packs > Import > CSS stylesheet

There may still be a case for using postCSS and the autoprefixer plugin. I will check how lightweight it is.

These improvements to Sass support will have to wait a while though. I’m currently working on CSS grid and transform properties 🙂

Cheers,
Sebastian


adkoen

Hi Sebastian, I just recently started to wonder about the same thing. Do you still have plans on adding an autoprefixer when using sass in Microthemer?


Sebastian

Good news, I’ve just added auto-prefixing support for Sass too. Please update to version 5.8.2.8.

I initially thought this would need to happen at the same time as supporting synced Sass with the UI fields, which will be a fairly big job. But on closer inspection I realised that vendor prefixes could be supported fairly easily right now. Sorry for the unnecessary delay!

The prefixes are added using native MT code, rather than pulling in the autoprefixer/post css library. If you are missing anything that library does, please let me know.

Also, MT now adds !important to Sass styles too if that global setting is enabled. So remember to turn that off if you haven’t already:

General > Preferences > CSS/SCSS > Always add !important to CSS styles > Off

Cheers,
Sebastian


adkoen

Fantastic as always. I must have missed your reply to this, just reading it now. Your faster than anyone in the business! 😉 thank you!


Sebastian

You’re welcome 🙂


ddenev

Dear Sebastian,

I would like to again bring front the topic of using Autoprefixer in MT and to provide my $0.02 as well.

Although it is very nice and innovative (I haven’t seen a builder or CSS tool for WP do this) to automatically insert vendor prefixes, maintaining this functionality within MT has several (IMHO) drawbacks:

– Maintenance and development of this functionality falls on your shoulders. Why spend time on updating the related code in MT compared to syncing (from time to time) the library which, from what I see, is very well maintained? We – your customers – I believe, would all prefer that you work on the important stuff 🙂
– Browsers are evolving and we need to have vendor prefixes functionality that is “alive” as well. I mean that you most probably do not update the vendor prefixes code very often, while Autoprefixer follows the “Can I Use” website and reflects the usage accordingly.
– Since this is not top priority feature for MT (I believe), you would not have a big incentive to develop it regularly and at some point in time the provided by MT prefixes would be lagging behind. With Autoprefixer this risk is greatly lowered.

There may be more benefits that I am currently missing but I am sure that you get the picture 🙂

What do you think?


Sebastian

Hi Drago,

All very valid points. I just have two concerns that trump your benefits in the short-term, and maybe in the long term too.

Short-term: development time
It was pretty quick to enable MT’s existing prefix system for Sass. In order to integrate autoPrefixer I would need to package postCSS and autoPrefixer for the browser, test this works, and then integrate with MT’s logic. I’m close to having CSS grid available in beta, and I don’t want to get too distracted with other lines of development right now.

Long-term: performance
I won’t know how much lag postCSS + autoPrefixer will add to the user workflow until I try it. It may be negligible. In which case, the benefits you describe will make the integration worth it. But it may be noticeable.

MT does quite a lot of data crunching after each keystroke or UI style change. With the latest speed improvements I’ve been careful to optimise all processes as much as possible to ensure a quick overall workflow. This concern will retain high priority as I continue to develop Microthemer. Right now, I know that adding prefixes alongside other related operations adds virtually no milliseconds at all.

If there are any prefixes you’re missing, I would be happy to add them now, as I’m asking you to wait. I simply update the following file:

wp-content/plugins/microthemer/includes/property-options.inc.php

(see line 3332 for example)

Cheers,
Sebastian


ddenev

Dear Sebastian,

Thank you for the detailed feedback!

Re the short-term concerns – I totally agree with you – this requires time and dedication to make it work with MT, I understand that. I also never meant that this should shuffle all your current priorities, sorry if it sounded like that 🙂 For me it is OK to wait since I am pretty sure that you see the benefits of this integration and you will come back to it at some point.

Currently I cannot say that I am missing any prefixes since I haven’t used them (have being using SASS for some time) but I will keep an eye and will let you know. Thanks for pointing the file with the options.

Best regards,
Drago


Sebastian

OK great, we’ll come back to this at a later date then. I will make Sass styles syncable with the UI options in the not too distant future (excluding styles in nested selectors). That is when I will revisit autoPrefixer.

As always, thanks for your well considered input Drago 🙂

You must login or register to reply to this topic.