Polymer / polymer-css-build

BSD 3-Clause "New" or "Revised" License
40 stars 9 forks source link

Polymer 3 style modules not processed v0.6.0 #27

Open freshp86 opened 5 years ago

freshp86 commented 5 years ago

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

dfreedm commented 4 years ago

Should be working with v0.7.0!