Why Dart Polymer inlines/vulcanize main css file into <head> tag?

Issue

web/templates/ui-elements.html

<polymer-element name="app-element">
  <template>
    <link rel="stylesheet" href="/main.css"/>
    <div class="classes from main-css file"></div>
    <content></content>
  </template>
  <script type="application/dart" src="ui-elements.dart"></script>
</polymer-element>

<polymer-element name="ui-icon" attributes="name" noscript>
  <template>
    <link rel="stylesheet" href="/main.css"/>
    <span class="fa fa-{{name}}"></span>
  </template>
</polymer-element>

...

web/templates/ui-elements.dart

@CustomTag('app-element')
class AppElement extends PolymerElement {
  AppElement.created() : super.created();
}

...

web/main.dart

import 'package:polymer/polymer.dart';

main() {
  initPolymer();
}

@whenPolymerReady
void onReady() {
}

web/main.html (entry file before pub build)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="import" href="templates/ui_elements.html"/>
  </head>
  <body>
    <app-element></app-element>
    <script type="application/dart" src="main.dart"></script>
  </body>
</html>

web/main.html (entry file after pub build)

<!DOCTYPE html><html lang="en"><head><script src="packages/web_components/webcomponents.min.js"></script><script src="packages/web_components/dart_support.js"></script>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <style>
    ...HERE IS FULL CONTENT OF main.css...
    </style>
</head><body>
...
HERE ARE ELEMENTS THAT ALSO USE main.css, so it's also downloading
<polymer-element name="ui-icon" attributes="name" noscript>
  <template>
    <link rel="stylesheet" href="/main.css"/>
    <span class="fa fa-{{name}}"></span>
  </template>
</polymer-element>
...

 <script src="main.html.polymer.bootstrap.dart.js" async=""></script>
</body></html>

Related questions:

  • How to avoid “inlining/vulcanazing” content of main.css file?
  • Why creats Polymer such a big output file: main.html.polymer.bootstrap.dart.js (323kb), polymer.min.js (121kb), webcomponents.min.js (103kb). Does something change in the near future?
  • There are also other files that Polymer doesn’t include into compiled main.html automatically (please, see the screen):
    • main.web_components.bootstrap.dart
    • main.dart.js

enter image description here

Additional screen:

enter image description here

Solution

You can configure this behavior in the Polymer transformer config in the pubspec.yaml file like

transformers:
- polymer:
    entry_points:
    ... 
    inline_stylesheets:
      web/asset/examples.css: false
      lib/asset/smoothness/jquery-ui-1.8.16.custom.css: false 

Answered By – Günter Zöchbauer

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.