Referencing in style.css to sdk definition e.g. color.dart

Issue

Having a polymer project using the material color definitions in import 'package:polymer_elements/color.dart'; The references to css styling e.g. var(--paper-green-300); works ok, when they are placed in the <style></style> section for the element, but when I move this to the style.css, they aren’t found. I have tried with different combinations of include in index.html and index.dart. E.g. in index.html at <head> section <link rel="import" href="packages/polymer_elements/color.html"> but doesn’t seems to do the trick. Anyone who have experience with similar issues?

Of course not a high prio project killer, simple to use the hard coded values or leave the definitions in the <style> section for every element. But this way things will be more tidy.

Environment

 Dart version 1.14.0
 WebStorm 11.0.3

From pubspec.yaml:
environment:
  sdk: '>=1.9.0 <2.0.0'

dependencies:
  polymer: ^1.0.0-rc.15
  web_components: ^0.12.0
  polymer_elements: 1.0.0-rc.8
  browser: ^0.10.0
  reflectable: ^0.5.0
  polymer_interop: ^1.0.0-rc.5

Solution

CSS variables in Polymer only work in <style is="custom-style"> and therefore not in .css files.

is="custom-style" is implicit for style tags within Polymer elements and can and should be omitted.

Answered By – Günter Zöchbauer

Answer Checked By – Robin (FlutterFixes Admin)

Leave a Reply

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