Deprecating <link rel="import" type="css">

90 views
Skip to first unread message

Michael Giuffrida

unread,
Jan 19, 2016, 5:20:41 PM1/19/16
to polymer-dev
Perusing the docs, I just noticed a change: external stylesheets for local DOM are now deprecated in favor of style modules. Examples are below.

In addition to adding more boilerplate, this wreaks havoc on text editors like emacs/vim because mixed filetype editing sucks. What's the rationale for deprecating the (granted, experimental) <link rel="import" type="css">?

Furthermore, in the future, can somebody send out announcements for this kind of thing? The only notice of <style include> was a few lines in the CHANGELOG.md and there's no mention of deprecation there.

Examples:

Deprecated:
<!-- x-foo.html -->
<dom-module id="x-foo">
  <link rel="import" type="css" href="my-styles.css">
  <template>...</template>
</dom-module>
<!-- my-styles.css -->
.red { color: red; }

New recommendation:
<!-- x-foo.html -->
<link rel="import" href="my-styles.html">
<dom-module id="x-foo">
  <template>...
    <style include="my-styles"></style>
  </template>
</dom-module>
<!-- my-styles.html -->
<dom-module id="my-styles">
  <template>
    <style>...</style>
  </template>
</dom-module>

Michael Giuffrida

unread,
Jan 19, 2016, 5:33:35 PM1/19/16
to Michael Giuffrida, polymer-dev
On Tue, Jan 19, 2016 at 2:20 PM Michael Giuffrida <mich...@chromium.org> wrote:
Perusing the docs, I just noticed a change: external stylesheets for local DOM are now deprecated in favor of style modules. Examples are below.

In addition to adding more boilerplate, this wreaks havoc on text editors like emacs/vim because mixed filetype editing sucks. What's the rationale for deprecating the (granted, experimental) <link rel="import" type="css">?

Furthermore, in the future, can somebody send out announcements for this kind of thing? The only notice of <style include> was a few lines in the CHANGELOG.md and there's no mention of deprecation there.

Okay, this change was clearly announced in the blog post for the 1.1 release. My bad! But it would still be nice to have release announcements mirrored to this list if possible.

Taylor Savage

unread,
Jan 19, 2016, 8:24:10 PM1/19/16
to Michael Giuffrida, polymer-dev
Yes absolutely, we can ping important announcements made on the blog to this list.

Taylor

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CACi5S_0ircNXnewsu-CBTOX8pvaMSktMkL%2B7j5bdirSScGdPug%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

Eric Bidelman

unread,
Jan 19, 2016, 9:01:09 PM1/19/16
to Michael Giuffrida, polymer-dev
The reason we want to deprecate it is to avoid  double parsing the style sheet: once by the browser when it loads the CSS (and expects HTML, so the parsefails), and once by Polymer's style shim. By putting the CSS in a template in an html file, the browser won't attempt to parse it.

jim.j...@gmail.com

unread,
Jan 21, 2016, 8:44:16 PM1/21/16
to Polymer
Is there going to be any mechanism for using stylesheets without having to wrap them in a dom-module and template? At my job we have multiple teams using the same stylesheets with different front end frameworks (most teams use React, we're the odd one out using Polymer). Our UX team is not interested in duplicating the styles for each framework (I.e. my-styles.css for non-polymer and my-styles.html with the contents of my-styles.css duplicated inside for polymer), so losing the ability to import a CSS file directly is going to put us in a tough spot.

Eric Bidelman

unread,
Jan 22, 2016, 12:29:22 AM1/22/16
to jim.j...@gmail.com, Polymer
Check out https://www.polymer-project.org/1.0/tools/overview.html#polystyle. There's also a gulp plugin there to wrap an existing stylesheet as a shared dom-module.

On Thu, Jan 21, 2016 at 5:44 PM <jim.j...@gmail.com> wrote:
Is there going to be any mechanism for using stylesheets without having to wrap them in a dom-module and template?  At my job we have multiple teams using the same stylesheets with different front end frameworks (most teams use React, we're the odd one out using Polymer).  Our UX team is not interested in duplicating the styles for each framework (I.e. my-styles.css for non-polymer and my-styles.html with the contents of my-styles.css duplicated inside for polymer), so losing the ability to import a CSS file directly is going to put us in a tough spot.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

jim.j...@gmail.com

unread,
Jan 22, 2016, 12:33:56 AM1/22/16
to Polymer
Wow, perfect! Not sure how I missed those tools. Thanks!
Reply all
Reply to author
Forward
0 new messages