{"action":"created","issue":{"url":"https://api.github.com/repos/Polymer/polymer/issues/3628","repository_url":"https://api.github.com/repos/Polymer/polymer","labels_url":"https://api.github.com/repos/Polymer/polymer/issues/3628/labels{/name}","comments_url":"https://api.github.com/repos/Polymer/polymer/issues/3628/comments","events_url":"https://api.github.com/repos/Polymer/polymer/issues/3628/events","html_url":"https://github.com/Polymer/polymer/issues/3628","id":151770386,"number":3628,"title":"Unable to import external css files into a shared-styles module","user":{"login":"johnwhitton","id":1572027,"avatar_url":"https://avatars.githubusercontent.com/u/1572027?v=3","gravatar_id":"","url":"https://api.github.com/users/johnwhitton","html_url":"https://github.com/johnwhitton","followers_url":"https://api.github.com/users/johnwhitton/followers","following_url":"https://api.github.com/users/johnwhitton/following{/other_user}","gists_url":"https://api.github.com/users/johnwhitton/gists{/gist_id}","starred_url":"https://api.github.com/users/johnwhitton/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/johnwhitton/subscriptions","organizations_url":"https://api.github.com/users/johnwhitton/orgs","repos_url":"https://api.github.com/users/johnwhitton/repos","events_url":"https://api.github.com/users/johnwhitton/events{/privacy}","received_events_url":"https://api.github.com/users/johnwhitton/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2016-04-29T00:10:15Z","updated_at":"2016-04-29T04:56:07Z","closed_at":"2016-04-29T04:56:07Z","body":"### Description\r\nI am trying to import an external stylesheet into a shared styles module, as referred to in the [documentation](https://www.polymer-project.org/1.0/docs/devguide/styling.html#style-modules) and [release notes](https://blog.polymer-project.org/announcements/2015/08/13/1.1-release/)\r\n\r\n\r\n#### Steps to Reproduce\r\n\r\n1. Create colorjw.css which contains\r\n```\r\n.colorjw {\r\n    color: blue;\r\n  }\r\n```\r\n2. Create a colorjw-styles.html _( a styles module)_\r\n```\r\n<link rel=\"import\" href=\"../bower_components/polymer/polymer.html\">\r\n\r\n<!-- Testing how to import an external stylesheet -->\r\n<dom-module id=\"colorjw-styles\">\r\n  <template>\r\n      <link rel=\"stylesheet\" type=\"text/css\" href=\"./colorjw.css\">\r\n  </template>\r\n</dom-module>\r\n```\r\n3. Reference the styles module in my custom element colorjw-app.html\r\n```\r\n<link rel=\"import\" href=\"../../bower_components/polymer/polymer.html\">\r\n\r\n<!-- Styles -->\r\n<link rel=\"import\" href=\"../../styles/shared-styles.html\">\r\n<link rel=\"import\" href=\"../../styles/dapp-styles/dapp-styles.html\">\r\n<!-- <link rel=\"import\" href=\"../../styles/dapp-styles.html\"> -->\r\n\r\n\r\n<dom-module id=\"colorjw-app\">\r\n  <template>\r\n     <style include=\"shared-styles\"></style>\r\n     <style include=\"dapp-styles\"></style>\r\n\r\n\r\n  <h1>Hello</h1>\r\n  <div class=\"colorjw\">\r\n    Div text\r\n  </div>\r\n  </template>\r\n\r\n  <script>\r\n    Polymer({\r\n      is: 'colorjw-app'\r\n    });\r\n  </script>\r\n</dom-module>\r\n```\r\n\r\n\r\n\r\n#### Expected Results\r\nThe text _Div Text_ should be blue\r\n\r\n#### Actual Results\r\nThe text color has not been changed as the styling was not picked up\r\n\r\n### Browsers Affected\r\nI have only tested on Chrome\r\n\r\n\r\n### Versions\r\n- Polymer: v1.4.0\r\n- webcomponents: v0.7.21\r\n\r\n### Please note \r\nIf you use the below version of colorjw-styles.html then it works as expected i.e. _div text_ is blue\r\n```\r\n<link rel=\"import\" href=\"../bower_components/polymer/polymer.html\">\r\n\r\n<!-- Testing how to import an external stylesheet -->\r\n<dom-module id=\"colorjw-styles\">\r\n  <template>\r\n  <style>\r\n  .colorjw {\r\n      color: blue;\r\n    }\r\n  </style>\r\n  </template>\r\n</dom-module>\r\n```"},"comment":{"url":"https://api.github.com/repos/Polymer/polymer/issues/comments/215626857","html_url":"https://github.com/Polymer/polymer/issues/3628#issuecomment-215626857","issue_url":"https://api.github.com/repos/Polymer/polymer/issues/3628","id":215626857,"user":{"login":"notwaldorf","id":1369170,"avatar_url":"https://avatars.githubusercontent.com/u/1369170?v=3","gravatar_id":"","url":"https://api.github.com/users/notwaldorf","html_url":"https://github.com/notwaldorf","followers_url":"https://api.github.com/users/notwaldorf/followers","following_url":"https://api.github.com/users/notwaldorf/following{/other_user}","gists_url":"https://api.github.com/users/notwaldorf/gists{/gist_id}","starred_url":"https://api.github.com/users/notwaldorf/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/notwaldorf/subscriptions","organizations_url":"https://api.github.com/users/notwaldorf/orgs","repos_url":"https://api.github.com/users/notwaldorf/repos","events_url":"https://api.github.com/users/notwaldorf/events{/privacy}","received_events_url":"https://api.github.com/users/notwaldorf/received_events","type":"User","site_admin":false},"created_at":"2016-04-29T04:56:07Z","updated_at":"2016-04-29T04:56:07Z","body":"Closing; plain importing of CSS stylesheets is not supported like that (see [this](https://github.com/PolymerElements/iron-flex-layout/issues/88#issuecomment-203692575) for a more detailed explanation of possible ways of importing CSS).\r\n\r\nTalked offline, and the solution is to wrap the _actual contents_ of the stylesheet in a `dom-module`, not the import."}}