autoprefixer doesn't work on inline component styles

[ghost]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an x)

- [ ] new
- [x] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

$ ng --version
Angular CLI: 6.1.5
Node: 8.11.4
OS: win32 x64
Angular: 6.1.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.7.5
@angular-devkit/build-angular     0.7.5
@angular-devkit/build-optimizer   0.7.5
@angular-devkit/build-webpack     0.7.5
@angular-devkit/core              0.7.5
@angular-devkit/schematics        0.7.5
@angular/cli                      6.1.5
@ngtools/webpack                  6.1.5
@schematics/angular               0.7.5
@schematics/update                0.7.5
rxjs                              6.3.1
typescript                        2.7.2
webpack                           4.9.2

Repro steps

1. ng new test-styles
2. Replace app.module.ts with:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

@Component({
  template: '',
  styles: [`:host { display: grid; }`],
})
export class AppComponent2 {}

@NgModule({
  declarations: [
    AppComponent,
    AppComponent2
  ],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. Add CSS to app.component.css:

:host { display: grid; }

4. ng build

In dist/test-styles/main.js you will see:

/***/ "./src/app/app.component.css":
/*!***********************************!*\
  !*** ./src/app/app.component.css ***!
  \***********************************/
/*! no static exports found */
/***/ (function(module, exports) {

module.exports = ":host { display: -ms-grid; display: grid; }"

/***/ }),

...

var AppComponent2 = /** @class */ (function () {
    function AppComponent2() {
    }
    AppComponent2 = __decorate([
        Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Component"])({
            template: '',
            styles: [":host { display: grid; }"],
        })
    ], AppComponent2);
    return AppComponent2;
}());

CSS from app.component.css was processed by autoprefixer, but inline component styles were not.

[ghost]

Found this issue: #8470 (comment)

Inline styles will not be rendered with a special renderer, unfortunately. It is impossible for us to know which compiler you want your inline style to use, and even so we don't have control over how inline styles are compiled; we do not resolve their content like we do with external styles. This is a limitation of the angular compiler itself.

Inline component styles only support the native CSS, and SCSS/Less/Styles compilers are not planned to be supported. But what about autoprefixer? Is it still not possible because of "a limitation of the angular compiler"?

[alan-agius4]

Closing as working as indented.

Inline styles cannot be processed via webpack. Basically it’s “what you write is what you get”.

If you want to use Autoprefixer use external styles.

[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.}