search

Dabolus / polymer3-webpack-starter-kit

Polymer 3 Starter Kit with Webpack
MIT License
55 stars 6 forks source link

Cant get css mixins to work #89

Closed iceflow19 closed 6 years ago

iceflow19 commented 6 years ago

We're currently trying to port a polymer 2 codebase over to Polymer 3 using your kit as a base. But we're running into trouble with certain PolymerElements, where the only way to style certain aspects of them is through mixins (@apply). Postcss-apply appears to only work in the immediate component and doesn't cascade farther. We tried swapping out the postcss loader for a standard css loader in the hopes that Polymer's Shadycss would take care of the problem, but no success either.

Any help would be greatly appreciated.

Example:

paper-fab {
--paper-fab-iron-icon: {
    height: 45px;
    width: 45px;
    margin: 3px 1px 0px 0px;
  };
}
iceflow19 commented 6 years ago

Figured it out. I just used a raw-loader for the ones that needed it and the mixins were preserved properly. It might be worth documenting.

Dabolus commented 6 years ago

Hi! Sorry for the late response.

Happy to know you found out how to fix this behavior. However, I would suggest to avoid using the CSS @apply rule if possible, as it is considered deprecated and its support has been removed from every browser. Unfortunately, some elements require you to use it for a more advanced customization, but hopefully they will get updated as soon as CSS Shadow Parts make their way to become a standard. Take a look at this blog post for more information.