Using postcss-apply in Polymer 3 with webpack

[sebastianroming]

Hello there,

If I declare some styles like this:

:host {
  --test-elem: {
    color:#F00;
  }
}
[...]
span.account-name {
  @apply --test-elem;
}

it works pretty well. But if I use

:host {
  --app-drawer-width: 65px;
  --app-drawer-scrim-background: #fff;
  --app-drawer-content-container: {
    background-color: #263448;
  }
}

like I should, with polymer elements (see app-drawer polymer 3 elem), it doesn't work. that's annoying :(
Do you have any solution / help for this?

[pascalduez]

Hi,

please provide a reduced and ready to debug repo or sample, so that we can have chance to try to debug.
I have no experience with Polymer though, so dunno. Are Polymer styles using PostCSS?

[sebastianroming]

Polymer doesn't natively use PostCSS. I use the Polymer Skeleton from PolymerX and they use PostCSS.

I'll provide a short sample for you tomorrow.

[sebastianroming]

I forked the Polymer Skeleton and created a small example for you:

https://github.com/sebastianroming/polymer-skeleton/tree/postcss-apply-sample

You need yarn to install and run:

• clone the repo and change the branch to postcss-apply-sample
• run yarn to install dependencies
• run yarn dev:module to create a local development server at localhost:3000

You can see that the app-drawer doesn't get styled as defined in src/components/containers/sk-app/style.pcss, but the span.account-name does.