Dart polymer transformer to js issue

StackOverflow https://stackoverflow.com/questions/23613886

Pergunta

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>

<html>
  <head>
    <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>

  </head>
  <body>
    <h1>Cc</h1>

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

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

  </body>
</html>

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 -->

  </head>
  <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;
}
</style>

<!--
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">

  <script>

  // 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') {
            this.template.content.appendChild(c);
          }
        }
        // snarf up user defined model
        window.model = this;
      },

      parseDeclaration: function(elementElement) {
        this.lightFromTemplate(this.template);
      }

    }, window.model));

  });

  </script>

</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">
  <template>
    <style>
      div {
        font-size: 24pt;
        text-align: center;
        margin-top: 140px;
      }
      button {
        font-size: 24pt;
        margin-bottom: 20px;
      }
    </style>
    <div>
      <button on-click="{{increment}}">Click me</button><br>
      <span>(click count: {{count}})</span>
    </div>
  </template>
  <script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>

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

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

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

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

Foi útil?

Solução

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

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

...

</template>
<my-element>

credits go to John Messerly who invented the solution - see the thread here: https://groups.google.com/a/dartlang.org/forum/?hl=en&fromgroups#!topic/web/8bjmkiRFhDk

Outras dicas

Update

In Polymer.dart 0.12.1 an option was added to disable style inlining per file - see https://github.com/dart-lang/polymer-dart/blob/master/CHANGELOG.md#0121

transformers:
- polymer:
    ...
    inline_stylesheets:
        default: false
        web/foo.css: true
        packages/foo/bar.css: true

Original

There was an issue filed recently by a member of the Google PolymerDart team but it is not yet supported

https://code.google.com/p/dart/issues/detail?id=18597

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top