Issue with component CSS

virusakos commented 7 years ago

As the title says, I am facing an issue with component CSS when working on an Angular2 CLI app.

I have followed the Using Polymer Elements in Angular CLI Webpack Applications guide to setup my app.

According to the guide,

... you can use Polymer custom CSS properties and custom CSS mixins in the app.component.css file ....

index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>TeamM</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">

    <script src="assets/bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <script>
        window.Polymer = {
            dom: "shadow"
        };
    </script>

    <link rel="import" href="assets/bower_components/paper-styles/color.html">
    <link rel="import" href="assets/bower_components/paper-styles/default-theme.html">
    <link rel="import" href="assets/bower_components/paper-styles/shadow.html">
    <link rel="import" href="assets/bower_components/paper-styles/typography.html">

    <style is="custom-style">
        body {
            @apply(--layout-fullbleed);
            @apply(--paper-font-body1);
            background: var(--primary-background-color);
            color: var(--primary-text-color);
        }
    </style>

    <link rel="import" href="assets/bower_components/app-layout/app-header/app-header.html">
    <link rel="import" href="assets/bower_components/app-layout/app-toolbar/app-toolbar.html">
    <link rel="import" href="assets/bower_components/app-layout/app-drawer/app-drawer.html">
    <link rel="import" href="assets/bower_components/paper-icon-button/paper-icon-button.html">

</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>

app.component.html

<app-header fixed>
    <app-toolbar>
        <paper-icon-button icon="menu" (onclick)="toggleDrawer(drawer)"></paper-icon-button>
        <div main-title>Title</div>
        <paper-icon-button icon="delete"></paper-icon-button>
        <paper-icon-button icon="search"></paper-icon-button>
        <paper-icon-button icon="close"></paper-icon-button>
    </app-toolbar>
</app-header>
<app-drawer #drawer swipe-open></app-drawer>

app.component.ts

import {Component} from "@angular/core";
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {
    toggleDrawer(drawer): void {
        drawer.toggle();
    }
}

app.component.css

app-toolbar {
  background: var(--primary-text-color);
  color: var(--primary-background-color);
}

The issue is that colours are not being applied to the toolbar.

If I explicitly define a colour for the background with, say,

background: #66BB6A

then it works fine.

The background changes as well if I put

app-toolbar {
  background: var(--primary-text-color);
  color: var(--primary-background-color);
}

in index.html inside <style is="custom-style">...</style>.

Only if I have the CSS in app.component.css it does not work.

I suspect that app.component.css does not have the reference to paper-styles/color.html so it doesn't know about the vars. Is that the case? How can I use the vars in the app.component.css?

Chabane commented 7 years ago

I have a similar problem. After I updated to angular 2.2.3 all of my css has been impacted.

virusakos commented 7 years ago

Looks like this is related to vaadin/angular2-polymer-quickstart#10 which is related to #104 so there is no need to have this open

platosha / angular-polymer

Issue with component CSS #110