Dart polymer transformer to js issue


How can I avoid embedding css files to output html files during pub build (generate js)? Is it possible?

note: polymer version is 0.10.0-pre.11

Before pub build:

<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample app</title>
    <link rel="stylesheet" href="cc.css">
    <link rel="import" href="packages/polymer/polymer.html">

    <!-- import the click-counter -->
    <link rel="import" href="clickcounter.html">
    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>


    <p>Hello world from Dart!</p>

    <div id="sample_container_id">
      <click-counter count="5"></click-counter>


After pub build:

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample app</title>

    <!-- import the click-counter -->

  <body><style>body {
  background-color: #F8F8F8;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.2em;
  margin: 15px;

h1, p {
  color: #333;

#sample_container_id {
  width: 100%;
  height: 400px;
  position: relative;
  border: 1px solid #ccc;
  background-color: #fff;

These two files are from the Polymer project:
https://github.com/Polymer/platform/ and https://github.com/Polymer/polymer/.

You can replace platform.js and polymer.html with different versions if desired.
<!-- minified for deployment: -->

<!-- unminfied for debugging:
<script src="../../packages/web_components/platform.concat.js"></script>
<script src="src/js/polymer/polymer.concat.js"></script>
<link rel="import" href="src/js/polymer/polymer-body.html">

<!-- Teach dart2js about Shadow DOM polyfill objects. -->
<!-- Bootstrap the user application in a new isolate. -->
<!-- TODO(sigmund): replace boot.js by boot.dart (dartbug.com/18007)
<script type="application/dart">export "package:polymer/boot.dart";</script>
<script src="packages/polymer/src/js/use_native_dartium_shadowdom.js"></script>
<!--<script src="packages/web_components/platform.js"></script>
    not necessary anymore with Polymer >= 0.14.0 -->
<!-- <link rel="import" href="../polymer-dev/polymer.html"> -->
<script src="packages/polymer/src/js/polymer/polymer.js"></script><polymer-element name="polymer-body" extends="body">


  // upgrade polymer-body last so that it can contain other imported elements
  document.addEventListener('polymer-ready', function() {

    Polymer('polymer-body', Platform.mixin({

      created: function() {
        this.template = document.createElement('template');
        var body = wrap(document).body;
        var c$ = body.childNodes.array();
        for (var i=0, c; (c=c$[i]); i++) {
          if (c.localName !== 'script') {
        // snarf up user defined model
        window.model = this;

      parseDeclaration: function(elementElement) {

    }, window.model));



</polymer-element><script src="packages/web_components/dart_support.js"></script><script src="packages/polymer/boot.js"></script><polymer-element name="click-counter" attributes="count">
      div {
        font-size: 24pt;
        text-align: center;
        margin-top: 140px;
      button {
        font-size: 24pt;
        margin-bottom: 20px;
      <button on-click="{{increment}}">Click me</button><br>
      <span>(click count: {{count}})</span>
  <script type="application/dart" src="clickcounter.dart"></script>

<script type="application/dart" src="cc.html.0.dart"></script><script src="packages/browser/dart.js"></script>

    <p>Hello world from Dart!</p>

    <div id="sample_container_id">
      <click-counter count="5"></click-counter>

As you can see the css file is embedded to html..


Work around for this issue is to add to every element @import (‘mystle.css’)

<my-element name="my-element">
<style>@import ('mystyle.css')</style>



credits go to John Messerly who invented the solution – see the thread here:

Answered By – tomaszkubacki

Answer Checked By – Mary Flores (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *