polymer-css-build icon indicating copy to clipboard operation
polymer-css-build copied to clipboard

Polymer 3 style modules not processed v0.6.0

Open freshp86 opened this issue 7 years ago • 1 comments

Example JS file (using the syntax from the Polymer 3 documentation)

Contents of foo.js

const styleElement = document.createElement('dom-module');
styleElement.innerHTML =
  `<template>
    <style>
      foo {
        --my-mixin: {
          color: white;
          background: blue;
        };
      }
    </style>
  </template>`;
styleElement.register('style-element');

Executing the following command

node_modules/polymer-css-build/bin/polymer-css-build -f foo.js -o foo_pcb.js

Expected: The CSS mixin should have been processed (converted to CSS variables) Actual (pasted below): The CSS mixin has not been processed.

contents of foo_pcb.js

const styleElement = document.createElement('dom-module');
styleElement.innerHTML = `<template>
    <style>
      foo {
        --my-mixin: {
          color: white;
          background: blue;
        };
      }
    </style>
  </template>`;
styleElement.register('style-element');

On the other hand, if the Polymer 2 syntax is used (using HTML files) the CSS mixin is processed.

before

<dom-module id="shared-style">
  <template>
    <style>
      foo {
        --my-mixin: {
          color: white;
          background: blue;
        };
      }
    </style>
  </template>
</dom-module>

after

<dom-module id="shared-style">
  <template>
    <style scope="shared-style">foo {
  --my-mixin_-_color:  white; --my-mixin_-_background:  blue;;
}

</style>
  </template>
</dom-module>

cc @azakus

freshp86 avatar Dec 18 '18 22:12 freshp86

Should be working with v0.7.0!

dfreedm avatar Oct 17 '19 23:10 dfreedm