If using postCSS with less, should I remove the less meteor package?

I’m reading the following blog and see:

Meteor has a special build system and build lifecycle. You can plug into it with your stuff but it isn’t very flexible. There are no simple configuration options. We can write 3 types of plugins in Meteor packages. There are 3 phases when a package’s plugin can run:

linting,
compilation,
minification
We have some preprocessors which are tools plugged into the compilation phase. Just look at the Stylus core package. As you can see, it registers a compile plugin for files with the extension .styl:

> (...)
> Plugin.registerCompiler({  
>   extensions: ['styl'],
>   archMatching: 'web'
> }, () => new StylusCompiler());
> (...)

All files with this extension will be compiled by the Stylus preprocessor.

With PostCSS, we don’t want to register our own extension (although we could do that). We want to use the .css extension. For now with Meteor there isn’t any other way but to modify plugins responsible for minification. Let’s take a look at the standard-minifier-css package - standard-minifier-css. What we want to do here is add PostCSS processing and leave all the old functionalities untouched.

Does this mean I should remove meteor’s less package and handle it through postCSS instead?

I think that post might be outdated, try this maybe: https://guide.meteor.com/build-tool.html#postcss

I can’t seem to get less prefixing for some reason.

1 Like

I have the same issue! Did you manage to fix it?
I use the standard less package and then postcss with the following config:

"devDependencies": {
    "autoprefixer": "^6.3.1"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {"browsers": ["last 2 versions"]}
    }
  }
  "postcss": {
    "plugins": {
      "autoprefixer": {
        "browsers": [
          "safari 8",
          "safari 5",
          "ie 8",
          "ie 9",
          "opera 12.1",
          "ios 6",
          "android 4"
        ]
      }
    }
  },
# Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.

meteor-base@1.0.4             # Packages every Meteor app needs to have
mobile-experience@1.0.4       # Packages for a great mobile UX
mongo@1.1.16                   # The database Meteor supports right now
reactive-var@1.0.11            # Reactive variable for tracker
tracker@1.1.2                 # Meteor's client-side reactive programming library

#standard-minifier-css@1.3.4   # CSS minifier run for production mode
standard-minifier-js@2.0.0    # JS minifier run for production mode
es5-shim@4.6.15                # ECMAScript 5 compatibility for older browsers.
ecmascript@0.7.2              # Enable ECMAScript2015+ syntax in app code
shell-server@0.2.3
accounts-password@1.3.5
static-html

# NEW
juliancwirko:postcss
apollo
nicolaslopezj:apollo-accounts
less
edgee:slingshot
meteortoys:allthings
aldeed:collection2
alanning:roles

Frankly, still not sure if this is working or not. I have no idea how to check.

Simply use something like apperance : button (http://caniuse.com/#feat=css-appearance) in your less file and check the css file (in the browser) for apperance and its prefixed versions.