{"action":"created","issue":{"url":"https://api.github.com/repos/travco/postcss-extend/issues/9","labels_url":"https://api.github.com/repos/travco/postcss-extend/issues/9/labels{/name}","comments_url":"https://api.github.com/repos/travco/postcss-extend/issues/9/comments","events_url":"https://api.github.com/repos/travco/postcss-extend/issues/9/events","html_url":"https://github.com/travco/postcss-extend/issues/9","id":119533561,"number":9,"title":"Extend silent imports?","user":{"login":"Dylan-Chapman","id":5383823,"avatar_url":"https://avatars.githubusercontent.com/u/5383823?v=3","gravatar_id":"","url":"https://api.github.com/users/Dylan-Chapman","html_url":"https://github.com/Dylan-Chapman","followers_url":"https://api.github.com/users/Dylan-Chapman/followers","following_url":"https://api.github.com/users/Dylan-Chapman/following{/other_user}","gists_url":"https://api.github.com/users/Dylan-Chapman/gists{/gist_id}","starred_url":"https://api.github.com/users/Dylan-Chapman/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Dylan-Chapman/subscriptions","organizations_url":"https://api.github.com/users/Dylan-Chapman/orgs","repos_url":"https://api.github.com/users/Dylan-Chapman/repos","events_url":"https://api.github.com/users/Dylan-Chapman/events{/privacy}","received_events_url":"https://api.github.com/users/Dylan-Chapman/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-11-30T16:54:10Z","updated_at":"2015-11-30T18:05:42Z","closed_at":null,"body":"Hello,\r\n\r\nI'm trying to accomplish something similar to what I had in my Stylus files where I would silently import a file (I don't want all of the code in the file, I just want to extend a few things that are inside of it).\r\n\r\nI want to do something similar to the following:\r\n\r\n```css\r\n%icons {\r\n    @import \"components/icons.css\"\r\n}\r\n```\r\n\r\nAnd within icons.css I have:\r\n\r\n```css\r\n@define-mixin icon $name, $content {\r\n    .$name:before {\r\n        content: $content;\r\n    }\r\n\r\n    %$name {\r\n        content: $content;\r\n    }\r\n}\r\n\r\n@mixin icon icon-add, \"\\e069\";\r\n@mixin icon icon-arrow-left, \"\\e200\";\r\n@mixin icon icon-arrow-right, \"\\e204\";\r\n...etc\r\n```\r\n\r\nWhich essentially creates a concrete class for use in HTML, and an extendable placeholder class for use in CSS.\r\n\r\nSo, now I'd like to be able to call:\r\n\r\n```css\r\n.test:before {\r\n    @extend %icons %icon-add;\r\n}\r\n```\r\n\r\nThis doesn't seem to work, however, as I get the error \"'%icons %icon-add', has not been defined, so it cannot be extended.\"\r\n\r\nIs this possible and I'm doing something incorrectly? Is there a better way to accomplish what I want to do?\r\n\r\nThanks.\r\n"},"comment":{"url":"https://api.github.com/repos/travco/postcss-extend/issues/comments/160708730","html_url":"https://github.com/travco/postcss-extend/issues/9#issuecomment-160708730","issue_url":"https://api.github.com/repos/travco/postcss-extend/issues/9","id":160708730,"user":{"login":"Dylan-Chapman","id":5383823,"avatar_url":"https://avatars.githubusercontent.com/u/5383823?v=3","gravatar_id":"","url":"https://api.github.com/users/Dylan-Chapman","html_url":"https://github.com/Dylan-Chapman","followers_url":"https://api.github.com/users/Dylan-Chapman/followers","following_url":"https://api.github.com/users/Dylan-Chapman/following{/other_user}","gists_url":"https://api.github.com/users/Dylan-Chapman/gists{/gist_id}","starred_url":"https://api.github.com/users/Dylan-Chapman/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Dylan-Chapman/subscriptions","organizations_url":"https://api.github.com/users/Dylan-Chapman/orgs","repos_url":"https://api.github.com/users/Dylan-Chapman/repos","events_url":"https://api.github.com/users/Dylan-Chapman/events{/privacy}","received_events_url":"https://api.github.com/users/Dylan-Chapman/received_events","type":"User","site_admin":false},"created_at":"2015-11-30T18:05:42Z","updated_at":"2015-11-30T18:05:42Z","body":"This gives a very strange output.\r\n\r\nInput:\r\n\r\n```css\r\n/* icons.css */\r\n@define-mixin icon $name, $content {\r\n    .$name:before {\r\n        content: $content;\r\n    }\r\n\r\n    %$name {\r\n        content: $content;\r\n    }\r\n}\r\n\r\n@mixin icon icon-add, \"\\e069\";\r\n@mixin icon icon-arrow-left, \"\\e200\";\r\n@mixin icon icon-arrow-right, \"\\e204\";\r\n```\r\n```css\r\n%icons {\r\n    @import \"components/icons.css\";\r\n}\r\n\r\n.test:before {\r\n    @extend %icons;\r\n    @extend %icon-add;\r\n}\r\n```\r\n\r\nOutput:\r\n```css\r\n.test:before .icon-add:before,.test:before .test:before {\r\n    content: \"\\e069\"\r\n}\r\n\r\n.test:before .icon-arrow-left:before {\r\n    content: \"\\e200\"\r\n}\r\n\r\n.test:before .icon-arrow-right:before {\r\n    content: \"\\e204\"\r\n}\r\n```\r\n\r\nDesired output:\r\n\r\n```css\r\n.test:before {\r\n    content: \"\\e069\"\r\n}\r\n```"}}