{"action":"created","issue":{"url":"https://api.github.com/repos/vuejs/vue-loader/issues/12","labels_url":"https://api.github.com/repos/vuejs/vue-loader/issues/12/labels{/name}","comments_url":"https://api.github.com/repos/vuejs/vue-loader/issues/12/comments","events_url":"https://api.github.com/repos/vuejs/vue-loader/issues/12/events","html_url":"https://github.com/vuejs/vue-loader/issues/12","id":92986314,"number":12,"title":"Component style should be scoped to component","user":{"login":"FWeinb","id":1250430,"avatar_url":"https://avatars.githubusercontent.com/u/1250430?v=3","gravatar_id":"","url":"https://api.github.com/users/FWeinb","html_url":"https://github.com/FWeinb","followers_url":"https://api.github.com/users/FWeinb/followers","following_url":"https://api.github.com/users/FWeinb/following{/other_user}","gists_url":"https://api.github.com/users/FWeinb/gists{/gist_id}","starred_url":"https://api.github.com/users/FWeinb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/FWeinb/subscriptions","organizations_url":"https://api.github.com/users/FWeinb/orgs","repos_url":"https://api.github.com/users/FWeinb/repos","events_url":"https://api.github.com/users/FWeinb/events{/privacy}","received_events_url":"https://api.github.com/users/FWeinb/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-07-04T08:00:34Z","updated_at":"2015-07-04T10:45:54Z","closed_at":null,"body":"All styles are currently in the global scope, it would be great if the vue-loader could generate unique identifiers for components. So something like this.\r\n\r\n```vue\r\n<style>\r\n   .profile{ }\r\n   .profile__picture{ }\r\n</style>\r\n<template>\r\n   <div class=\"profile\">\r\n       <img class=\"profile__picture\" />\r\n   </div>\r\n</template>\r\n[...]\r\n```\r\n\r\nWould be transformed to:\r\n```vue\r\n<style>\r\n   .uniqueID--profile{ }\r\n   .uniqueID--profile__picture{ }\r\n</style>\r\n<template>\r\n   <div class=\"uniqueID--profile\">\r\n       <img class=\"uniqueID--profile__picture\" />\r\n   </div>\r\n</template>\r\n[...]\r\n```\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/vuejs/vue-loader/issues/comments/118499809","html_url":"https://github.com/vuejs/vue-loader/issues/12#issuecomment-118499809","issue_url":"https://api.github.com/repos/vuejs/vue-loader/issues/12","id":118499809,"user":{"login":"FWeinb","id":1250430,"avatar_url":"https://avatars.githubusercontent.com/u/1250430?v=3","gravatar_id":"","url":"https://api.github.com/users/FWeinb","html_url":"https://github.com/FWeinb","followers_url":"https://api.github.com/users/FWeinb/followers","following_url":"https://api.github.com/users/FWeinb/following{/other_user}","gists_url":"https://api.github.com/users/FWeinb/gists{/gist_id}","starred_url":"https://api.github.com/users/FWeinb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/FWeinb/subscriptions","organizations_url":"https://api.github.com/users/FWeinb/orgs","repos_url":"https://api.github.com/users/FWeinb/repos","events_url":"https://api.github.com/users/FWeinb/events{/privacy}","received_events_url":"https://api.github.com/users/FWeinb/received_events","type":"User","site_admin":false},"created_at":"2015-07-04T10:45:54Z","updated_at":"2015-07-04T10:45:54Z","body":"That looks promising. The only think that would be left is to define a way to access these styles in the template. I would like to see something like this:\r\n\r\n```\r\n// app.vue\r\n<style>\r\n  .red {\r\n    color: #f00;\r\n  }\r\n</style>\r\n\r\n<template>\r\n  <h1 class=\"{{styles.red}}\">{{msg}}</h1>\r\n</template>\r\n\r\n<script>\r\n  module.exports = {\r\n    data: function () {\r\n      return {\r\n        msg: 'Hello world!'\r\n      }\r\n    }\r\n  }\r\n</script>\r\n```\r\nThan `vue-loader` would just need to inject the required css from the `style` tag into the `data` of the module.\r\n\r\n"}}