{"action":"created","issue":{"url":"https://api.github.com/repos/css-modules/css-modules/issues/109","repository_url":"https://api.github.com/repos/css-modules/css-modules","labels_url":"https://api.github.com/repos/css-modules/css-modules/issues/109/labels{/name}","comments_url":"https://api.github.com/repos/css-modules/css-modules/issues/109/comments","events_url":"https://api.github.com/repos/css-modules/css-modules/issues/109/events","html_url":"https://github.com/css-modules/css-modules/issues/109","id":130525253,"number":109,"title":"How to use external libraries","user":{"login":"sarink","id":1881761,"avatar_url":"https://avatars.githubusercontent.com/u/1881761?v=3","gravatar_id":"","url":"https://api.github.com/users/sarink","html_url":"https://github.com/sarink","followers_url":"https://api.github.com/users/sarink/followers","following_url":"https://api.github.com/users/sarink/following{/other_user}","gists_url":"https://api.github.com/users/sarink/gists{/gist_id}","starred_url":"https://api.github.com/users/sarink/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sarink/subscriptions","organizations_url":"https://api.github.com/users/sarink/orgs","repos_url":"https://api.github.com/users/sarink/repos","events_url":"https://api.github.com/users/sarink/events{/privacy}","received_events_url":"https://api.github.com/users/sarink/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2016-02-02T00:05:43Z","updated_at":"2016-02-10T22:45:25Z","closed_at":null,"body":"I am working on a project that uses css-modules and am consistently being faced with this problem:\r\n\r\nWe want to use some library that renders a React component.\r\n\r\nThis library will render some markup like\r\n```\r\n<div class='foo'>\r\n  <div class='bar'> </div>\r\n</div>\r\n```\r\n\r\nNow, how am I supposed to style the `foo` and `bar` classes?\r\n\r\nSo far, the best I've come up with is...\r\nBuild a wrapper component which wraps the `foo` div in `<div styleName=\"myWrapper\">`, then write some css like\r\n```\r\n.myWrapper {\r\n  :global {\r\n    // copy-and-paste all the css from whatever library, because you can't `@import` anything inside of a :global selector\r\n\r\n    .bar {\r\n      // apply any overrides, but remember, since you're nested, you can't `compose` anything\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nIs there a better way to do this? Having such poor support for existing libraries is making css-modules really difficult to use.\r\n"},"comment":{"url":"https://api.github.com/repos/css-modules/css-modules/issues/comments/182617461","html_url":"https://github.com/css-modules/css-modules/issues/109#issuecomment-182617461","issue_url":"https://api.github.com/repos/css-modules/css-modules/issues/109","id":182617461,"user":{"login":"timaschew","id":110870,"avatar_url":"https://avatars.githubusercontent.com/u/110870?v=3","gravatar_id":"","url":"https://api.github.com/users/timaschew","html_url":"https://github.com/timaschew","followers_url":"https://api.github.com/users/timaschew/followers","following_url":"https://api.github.com/users/timaschew/following{/other_user}","gists_url":"https://api.github.com/users/timaschew/gists{/gist_id}","starred_url":"https://api.github.com/users/timaschew/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/timaschew/subscriptions","organizations_url":"https://api.github.com/users/timaschew/orgs","repos_url":"https://api.github.com/users/timaschew/repos","events_url":"https://api.github.com/users/timaschew/events{/privacy}","received_events_url":"https://api.github.com/users/timaschew/received_events","type":"User","site_admin":false},"created_at":"2016-02-10T22:45:25Z","updated_at":"2016-02-10T22:45:25Z","body":"Is there any option to load css globally without using `@import`, instead using `require` and with one loader definition in the webpack config?"}}