...and/or the browserlist dotfile. If no config is set in ember-cli-build.js

I'm not sure whether this is the right package to report this on, but it at least appears distinct from #9 since that issue refers to inline source maps, and the current release of ember-cli-sass generates source maps in separate .map files.

Basic reproduction steps:

$ ember new testapp
$ cd testapp
$ ember install ember-cli-sass
$ mv app/styles/app.css app/styles/app.scss
$ echo "a { &.red { color: red; } }" > app/styles/app.scss
$ ember serve

At this point testapp.css is correctly generated with a sourceMappingURL comment at the end.

$ ember install ember-cli-autoprefixer
$ ember serve

...and at this point, the comment is no longer present, although the map files themselves are still generated. Setting the broccoli-autoprefixer sourcemap option generates a new sourceMappingURL comment with a data URI – however, this "map" only contains the compiled CSS file after it's been run through broccoli-sass, making it useless.

Advice on how to get these packages working nicely together would be appreciated.

First, some context: https://github.com/ember-cli/rfcs/blob/master/active/0095-standardise-targets.md

The idea behind that is that now Ember apps have a single unique standarized source of truth for defining the browsers in which the app is intended to be executed.

This means that the some tools can be smart and change how they work based on that information.

• ember-cli-babel 6.0.0 already transpiles only the features that are not natively supported on your targets. By example, if your app runs on chrome only, it won't transpile async/await.
• ember-maybe-import-regenerator will conditionally import the regenerator runtime only if needed: machty/ember-maybe-import-regenerator#4

This addon could do the same to decide wether or not a css property has to be prefixed.
I won't have time to implement the feature myself in the next weeks, but I will be happy to give some guidance to someone who has.

My understanding was that ember-cli-autoprefixer took the list of browsers from targets.js. As of 1 beta, the suggestion is to use .browserlistrc.

I quite liked not having to maintain the list of browsers in multiple places.

What is the plan going forward? Is the intention that ember-cli will read from .browserlistrc too?

Hi,

I've tried to used this library in my project (using Ember-CLI 0.0.47), but it does not seem to do anything. Please note that my files are first compiled to CSS using ember-cli-sass, so the CSS file actually does not live into the /styles/ folder but rather into the dist/assets.

How should I make it work with those settings?

Thanks! :)

@kimroen I'm wondering if you would be interested in moving this addon to https://github.com/adopted-ember-addons and opening up for some community maintenance?

Or if you would prefer it remain here I would be happy to help with some PR maintenance.

When using the default options, ['> 1%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1'], the -webkit- prefix is not being applied to css transform properties for Safari which according to CanIUse, http://caniuse.com/#feat=transforms2d, are still required

I noticed that version 2.0 was published on NPM a few days ago but I can't seem to find any release notes. Can you tell us what's changed?

ember-cli-sass provides the sourcemaps inline, but once they go through ember-cli-autoprefixer they are not there anymore.

Seeing a warning in output: Gradient has outdated direction syntax. New syntax is like to leftinstead ofright.

Related: #47

Here is an example repo.

The repo has no .browserslistrc, therefore, according to ember-cli-autoprefixer's README, the browser list defined in targets.js will be used.

The example app contains some simple CSS div { display: flex }

The targets.js file contains a browsers list of just: ['ie 10'].

When ember build --environment=production is run, one would expect to see the following output:

div {display:-ms-flexbox; display:flex }

...but it is not.

Creating a .browserslistrc.js with ie 10 does produce the correct output (so that's fine).

I went down a dependancy rabbit hole of ember-cli-autoprefixer -> broccoli-autoprefixer -> autoprefixer -> postcss -> browserlist

but I am non-the-wiser.

Something seems funky. By default, it appears that ember-cli-autoprefixer is run after minification of css. This results in comment based autoprefixer declarations such as /*! autoprefixer: */` not making their way down to autoprefixer.

h2. Questions:

• is it possible to move this to a preprocess step, but using after/before clause in addons package.json, ensure it happens at the right phase? Specifically other addons such as ember-cli-eyeglass etc would need to declare ^
• does ember-cli need a hook/milestone to have this run explicitly before minification?

I tried installing this addon in another addon so I could provide vendored styles but the include method failed because it was trying to find the options hash on the app and the app doesn't include this when nested.

I've created a quick MR #27 to allow this addon to switch to the app's app property to get the options.

I'm getting an error in Safari with a warning: Duplicate property "Display". which is causing my layout to break as it's not picking up display: at all it seems.

Is there any fix for this or way around it or am I not using it correctly?

It would seem the generated fingerprint on .css files is generated -before- the file's contents are autoprefixed. See this diff, comparing the original vendor.css file (without autoprefixing) to the one post autoprefixing:
https://www.diffchecker.com/xk5ell28

Both of them have the following fingerprint:

<link rel="stylesheet" href="/assets/vendor-71a8f7f0ec9ee74bd7700d99a5f0b69d.css" integrity="sha256-Wfg3oOX5yWiadWxDW9FY1hyYG5JAGkQ4UUeaf7bTXmg= sha512-ykM/yDR0Yy/sRRHm2hNUUQtV/MgRLeX1RYc3wNVLRpIB47kbD5C4goWlbBK9077Y7hTM3XGcNtpBevekWsoHoQ==">

This is an issue when:

• the file is cached as vendor-71a8f7f0ec9ee74bd7700d99a5f0b69d.css (without autoprefixing)
• the contents change due to autoprefixing (diff), the filename remains the same.
• the generated integrity hashes -do- change and suddenly the user's cached version conflicts and is not loaded:

Versions
Ember: 2.15.1
broccoli-asset-rev:
ember-cli-autoprefixer: 0.8.0

I've had this in 3 apps. When updating from <1 to v1 I get a build error:

Build Error (broccoli-persistent-filter:Filter) in assets/dummy.css.map:1:788

/Projects/ember-light-table/assets/dummy.css.map:1:788: Missed semicolon> 

You can recreate this in the dummy app for ember-light-table by bumping the autoprefixer addon.
Any ideas?

Autoprefixer 6.0 is out, and broccoli-autoprefixer has been updated:

https://github.com/sindresorhus/broccoli-autoprefixer

I just created a new project with the latest version (v2.6.2) of Ember-cli. I turned on the source map for css files in ember-cli-build.js,

sourcemaps: {
    enabled: true,
    extensions: ['js' , 'css' ]
}

The source maps were generated, and the inline comment sourceMappingURL was also generated at the end of each css file.
Then I installed ember-cli-autoprefixer, and ran the project, I got an error.

File: assets/test-support.css (322)
The Broccoli Plugin: [AutoprefixerFilter] failed with:
CssSyntaxError: /home/***/Documents/***/assets/test-support.css:322:1: Unknown word
}
//# sourceMappingURL=test-support.css.map
^
    at Input.error (/home/***/Documents/***/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/postcss/lib/input.js:61:22)
    at Parser.unknownWord (/home/***/Documents/***/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/postcss/lib/parser.js:457:26)
    at Parser.word (/home/***/Documents/***/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/postcss/lib/parser.js:174:14)
    at Parser.loop (/home/***/Documents/***/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/postcss/lib/parser.js:60:26)
    at parse (/home/***/Documents/***/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/postcss/lib/parse.js:26:12)
    at new LazyResult (/home/***/Documents/***/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/postcss/lib/lazy-result.js:61:24)
    at Processor.process (/home/***/Documents/***/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/postcss/lib/processor.js:34:16)
    at AutoprefixerFilter.processString (/home/***/Documents/***/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/index.js:37:4)
    at /home/***/Documents/***/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/broccoli-persistent-filter/lib/strategies/default.js:10:19
    at lib$rsvp$$internal$$initializePromise (/home/***/Documents/***/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/broccoli-persistent-filter/node_modules/rsvp/dist/rsvp.js:1084:9)

Solution

The reason I think was probably because the inline comment was leading by // which was not actually a valid comment format in css files, so autoprefixer doesn't 'reorganize' it. If we can change the format to /**/, I believe it would be helpful.
After several hours deep into the source code of related packages, I finally find one way. Just add another option in sourcemaps,

sourcemaps: {
    enabled: true,
    extensions: ['js' , 'css' ],
    mapCommentType: "block"
}

The built-in css files including test-support.css and vendor.css are concated in ember-cli, supported by broccoli-concat package. Fortunately it provides an option mapCommentType to control the format of comment. The default value is 'inline', and currently it only supports two formats, 'inline' and 'block' (since it's provided in else block, actually you can use any value except 'inline').

The project style file which name is project-name.css does not follow that. It's generated by some external addon, determined by which one you install. Usually there are two options, ember-cli-sass (which is based on node-sass) and ember-cli-compass-compiler (which is based on compass). You can also see the introduction in ember-cli #scsssass. They both have independent options, and I have tried ember-cli-sass it just works very well with ember-cli-autoprefixer, not have to provide any special configuration. I have used ember-cli-compass-compiler in my another project, but never had ember-cli-autoprefixer working together. You can try it youself.

I have a bunch of css files in /public and /vendor and auto-prefixer is attempting to parse them. Causing the build to fail because they contain mistakes (out of my scope)

Ember: v2.1.0
Ember CLI: v1.13.8

There are no problems starting ember serve, but a build error is triggered when any files are saved.

This issue began sometime in the last week and appears to be connected to the release of broccoli-autoprefixer v4.1.0. The issue is resolved if I edit this addon's package.json to force broccoli-autoprefixer v4.0.0, though I'm unsure if the issue lies here or there.

ENOENT, no such file or directory '/Projects/Thing/ember/tmp/autoprefixer_filter-output_path-NncgYwdM.tmp/assets/old-ie.js'
Error: ENOENT, no such file or directory '/Projects/Thing/ember/tmp/autoprefixer_filter-output_path-NncgYwdM.tmp/assets/old-ie.js'
    at Error (native)
    at Object.fs.statSync (fs.js:797:18)
    at copyDereferenceSync (/Projects/Thing/ember/node_modules/ember-cli/node_modules/ember-cli-copy-dereference/index.js:13:21)
    at copyDereferenceSync (/Projects/Thing/ember/node_modules/ember-cli/node_modules/ember-cli-copy-dereference/index.js:31:7)
    at Function.copyDereferenceSync (/Projects/Thing/ember/node_modules/ember-cli/node_modules/ember-cli-copy-dereference/index.js:31:7)
    at /Projects/Thing/ember/node_modules/ember-cli/lib/models/builder.js:103:19
    at lib$rsvp$$internal$$initializePromise (/Projects/Thing/ember/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:541:9)
    at PromiseExt.lib$rsvp$promise$$Promise [as _superConstructor] (/Projects/Thing/ember/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:757:9)
    at new PromiseExt (/Projects/Thing/ember/node_modules/ember-cli/lib/ext/promise.js:32:8)
    at Class.module.exports.Task.extend.copyToOutputPath (/Projects/Thing/ember/node_modules/ember-cli/lib/models/builder.js:98:12)

hope to see this soon on npm

Since very recently installing ember-cli-autoprefixer results in this deprecation warning during a build:

jan@ubuntu:~/code/citb$ ember serve
version: 0.2.5
Livereload server on port 35729
Serving on http://localhost:4200/
Autoprefixer's process() method is deprecated and will removed in next major release. Use postcss([autoprefixer]).process() instead
Autoprefixer's process() method is deprecated and will removed in next major release. Use postcss([autoprefixer]).process() instead

Build successful - 7662ms.

Slowest Trees                                 | Total
----------------------------------------------+---------------------
Concat: Vendor                                | 4425ms
Babel                                         | 744ms
Babel                                         | 444ms

Slowest Trees (cumulative)                    | Total (avg)
----------------------------------------------+---------------------
Concat: Vendor (1)                            | 4425ms
Babel (4)                                     | 1458ms (364 ms)

I've tried settings browsers: process.env.NODE_ENV === 'production' ? ['last 2 versions'] : [] but the AutoprefixerFilter is still showing 1468ms in the Slowest Trees table.

I'm not able to get the autoprefixer to work with ember-cli 1.13.8. I'm not sure what's going on but I thought I'd ask to see if there's something that I'm missing. I appreciate help or pointers you can give me.

I couldn't get the autoprefixer to work in my full app so I tried in a new test app which is also not working. Here's how I set it up.

$ ember --version
version: 1.13.8
node: 0.12.7
npm: 2.13.4
os: linux x64
$ mkdir test-app
$ cd test-app
$ ember init
$ ember install ember-cli-autoprefixer

Add autoprefixer config to ember-cli-build.js

var app = new EmberApp(defaults, {
  autoprefixer: {
    browsers: ['> 1%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1', 'Explorer >= 8'],
    cascade: false
  }
});

Add test css to app/styles/app.css:

.foo2 {
  opacity: 0.5;
  border-radius: 4px;
}

Run ember serve and check css output:

$ cat dist/assets/test-app.css
.foo {
  opacity: 0.5;
  border-radius: 4px;
}

I would expect the output to have the vendor prefixes. Am I missing something obvious? Do you have any suggestions on how I can debug this issue? Thanks.

I'm trying to add this to a project that uses ember-cli-sass (in case #18 is relevant) and Ember-CLI's built-in sourcemaps support.

My configuration before adding this:

sassOptions: {
  includePaths: [ 'app/styles', 'vendor/styles' ],
  imagePath: 'public/images',
  outputStyle: 'expanded'
},
sourcemaps: {
  enabled: true,
  extensions: [ 'js', 'css' ]
}

This caused sourceMappingURLs to appear in my compiled CSS files. These were external links.

When I added

autoprefixer: {
  browsers: [
    ...
  ]
}

I started getting unknown word errors.

I found #18 and #9 and tried changing my configuration to

autoprefixer: {
  browsers: [ ... ],
  sourcemap: true
},
sassOptions: {
  ...,
  sourceComments: false
},
sourcemaps: {
  enabled: true,
  extensions: [ 'js' ]
}

This works, but causes the CSS sourcemaps to be emitted as inline data URIs, which dramatically increase the weight of the CSS files. (So much so that it's not worth it to minify at all!)

Is there a way to get this to work with external CSS sourcemaps?

Hi, I can't find changelog for v1.0.1 in CHANGELOG.md

ember-cli/ember-cli#4199