Polymer 0.10.x and @import 'css/main.css';

[Geoff Adams]

I recently updated all my components to @import my main stylesheet in order to work with the new Chrome 35 shadow DOM implementation. Now that I've updated to Polymer 0.10 (.0 or .1), the app works just fine when built (with pub build), but the un-compiled app won't load in Dartium.

In Dartium, it always crashes in the part of platform.js (at line 20) that tries to interpret the @imported URL:

Breaking on exception: SyntaxError: Failed to construct 'URL': Invalid URL

I've tried various forms of the URL in the @import statement, all to no avail.

The error in Dartium's console is actually more useful than than what's shown in the Dart Editor's console, since it shows the original (non-minified) source, apparently through the magic of source maps. It dies here:

      while ((matched = this.regex.exec(text))) {

-->     u = new URL(matched[1], base);

        matches.push({matched: matched[0], url: u.href});

      }

I've tried updating to the -dev build, but there's no change.

Replacing the @imports within my components' styles with <link rel="stylesheet" href="css/main.css"> (and so on for font-awesome and bootstrap, since @importing them in my main.css doesn't work, this way) just outside the style element does get around the problem, but then my built index.html file jumps from 36K to 776K. Not insignificant.

What's the right solution, here? I suspect this is just a bug in platform.js. Can it be fixed easily?

- Geoff

[Dan Grove]

+jmesserly

--
You received this message because you are subscribed to the Google Groups "Dart Web Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web+uns...@dartlang.org.
Visit this group at http://groups.google.com/a/dartlang.org/group/web/.
To view this discussion on the web visit https://groups.google.com/a/dartlang.org/d/msgid/web/CAG78TfY6YnxSW1gQ817u6DmajaNB%3D4KqwnUUB0udcmdYSntPSg%40mail.gmail.com.

[John Messerly]

I've heard reports of this before but I'm not sure what the problem is.

I suspect if you look at "base" you'll see something invalid. You can edit polymer.html and switch to non-minified platform.concat.js, which is more debuggable.

Another idea is to try latest sources at https://github.com/Polymer/platform

[Günter Zöchbauer]

this might be related

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

[Günter Zöchbauer]

this might too

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

[Blink Eye]

On Fri, Jun 6, 2014 at 4:35 AM, 'Geoff Adams' via Dart Web Development <w...@dartlang.org> wrote

...

Replacing the @imports within my components' styles with <link rel="stylesheet" href="css/main.css"> (and so on for font-awesome and bootstrap, since @importing them in my main.css doesn't work, this way) just outside the style element does get around the problem, but then my built index.html file jumps from 36K to 776K. Not insignificant.

What's the right solution, here? I suspect this is just a bug in platform.js. Can it be fixed easily?

Same problem here. Not using @import works for Dartium - but then the JS build stops working. Right now I can have either the Dartium build (native) working or the JS build.

[montyr75]

I had that problem, but importing the CSS with a <link> tag instead made it work everywhere for me.

[Geoff Adams]

On Thu, Jun 5, 2014 at 10:17 PM, 'John Messerly' via Dart Web Development <w...@dartlang.org> wrote:

I suspect if you look at "base" you'll see something invalid. You can edit polymer.html and switch to non-minified platform.concat.js, which is more debuggable.

Aha! Thanks for that debugging tip.

Yes, indeed, base is "about:blank", which really doesn't make for a great base URL. That should only be the URL for the page before it loads, I would think. How is Javascript seeing that URL? I don't think it's an issue in the way that the Dart Editor tells Dartium to open the page, since it also happens if I type "localhost:8080" into a fresh Dartium tab (with a blank omnibox, not "about:blank").

Any ideas?

Next up, I'll try the latest Polymer sources, as you suggest.

- Geoff

[Geoff Adams]

Whoops. Add jmesserly back again. (Grumble bad DMARC mitigation grumble.)

Btw, updating to the latest platform.js isn't as straightforward as one would hope. It seems that the polymer-expressions stuff is missing from this version, and once I add that back (along with esprima), now I'm missing something called templateContent:

ReferenceError: templateContent is not defined

Not sure where to go from here.

- Geoff

[Geoff Adams]

Just to follow up on this old thread, Polymer (Dart) 0.11 fixes the @import problem, at least as early as -dev-6. So total deployed app size stays small.

- Geoff