Autoprefixer no longer applied when using Flex-Layout or inline styles

[EricBichara]

It seems vendor prefixes are only applied when the style is defined in a css (or sass) file. But not applied when using inline styles or a library like @angular/flex-layout

Bug Report or Feature Request (mark with an x)

- [x ] bug report
- [ ] feature request

Versions

Angular CLI: 1.5.3
Node: 8.9.1
OS: darwin x64
Angular: 5.0.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.3
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.36
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.3
@schematics/angular: 0.1.5
typescript: 2.4.2
webpack: 3.8.1

Repro steps

• Create project: ng new testproject
• Add @angular/flex-layout library
  Run: npm install --save @angular/flex-layout
  Add FlexLayoutModule to imports in app.module.ts
• Add the following html to app.component.html

<div id="1" style="display: flex">Div1</div>
<div id="2" class="flex-css">Div2</div>
<div id="3" fxLayout="row">Div3</div>

• Add the following css in app.component.css

.flex-css{
display:flex;
}

• serve project

Observed behavior

Checking in developer tools we see that only Div2 has vendor prefixes

Desired behavior

All divs should have vendor prefixes

Mention any other details that might be useful (optional)

This is a new issue as it worked in a previous version of the CLI

[filipesilva]

We've never processed inline styles in Angular CLI actually. It's not a feature our webpack plugin (@ngtools/webpack) has.

Libraries are required to inline styles so generally that means that their styles should never be processed either.

If it worked with older versions I have to guess that the library was shipping TS files and the CLI was (erroneously) compiling it as well.

What was the last version you saw this working?

@hansl can you check with the @angular/flex-layout folks what the behaviour they expect is?

[EricBichara]

@filipesilva gotcha. I'm not sure about inline styles but i'm sure when using flex-layout prefixes where added. I'll check with the flex-layout project.

Thanks

[agent613]

What is the guidance on autoprefixing for Angular library developers? If I add prefixes to the css before I inline it, all consuming apps will be forced to carry all the prefixes even if they don't need them. If I don't add them, the consuming app can't add them because CLI won't go and autoprefix the inlined css in the library's components.

[dominikg]

I'd like to second agent613 concerns. Especially given that since cli v6 developing a library is a primary usecase of cli itself.

Right now I think the only option of a library is to not use component/inline style at all and export an (s)css file for import in applications. That way the browserslist of the application importing the library is used.

[alan-agius4]

Closing as a duplicate of #12901

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}