{"action":"created","issue":{"url":"https://api.github.com/repos/postcss/postcss-mixins/issues/18","labels_url":"https://api.github.com/repos/postcss/postcss-mixins/issues/18/labels{/name}","comments_url":"https://api.github.com/repos/postcss/postcss-mixins/issues/18/comments","events_url":"https://api.github.com/repos/postcss/postcss-mixins/issues/18/events","html_url":"https://github.com/postcss/postcss-mixins/issues/18","id":95732532,"number":18,"title":"Support async mixins","user":{"login":"jedmao","id":1058243,"avatar_url":"https://avatars.githubusercontent.com/u/1058243?v=3","gravatar_id":"","url":"https://api.github.com/users/jedmao","html_url":"https://github.com/jedmao","followers_url":"https://api.github.com/users/jedmao/followers","following_url":"https://api.github.com/users/jedmao/following{/other_user}","gists_url":"https://api.github.com/users/jedmao/gists{/gist_id}","starred_url":"https://api.github.com/users/jedmao/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jedmao/subscriptions","organizations_url":"https://api.github.com/users/jedmao/orgs","repos_url":"https://api.github.com/users/jedmao/repos","events_url":"https://api.github.com/users/jedmao/events{/privacy}","received_events_url":"https://api.github.com/users/jedmao/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2015-07-17T19:58:56Z","updated_at":"2015-07-18T02:40:09Z","closed_at":"2015-07-18T00:46:25Z","body":"What do you think about supporting async mixins for mixins that return a promise? I think this would be excellent for a sprite mixin, for example, where some file I/O is required."},"comment":{"url":"https://api.github.com/repos/postcss/postcss-mixins/issues/comments/122474599","html_url":"https://github.com/postcss/postcss-mixins/issues/18#issuecomment-122474599","issue_url":"https://api.github.com/repos/postcss/postcss-mixins/issues/18","id":122474599,"user":{"login":"jedmao","id":1058243,"avatar_url":"https://avatars.githubusercontent.com/u/1058243?v=3","gravatar_id":"","url":"https://api.github.com/users/jedmao","html_url":"https://github.com/jedmao","followers_url":"https://api.github.com/users/jedmao/followers","following_url":"https://api.github.com/users/jedmao/following{/other_user}","gists_url":"https://api.github.com/users/jedmao/gists{/gist_id}","starred_url":"https://api.github.com/users/jedmao/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jedmao/subscriptions","organizations_url":"https://api.github.com/users/jedmao/orgs","repos_url":"https://api.github.com/users/jedmao/repos","events_url":"https://api.github.com/users/jedmao/events{/privacy}","received_events_url":"https://api.github.com/users/jedmao/received_events","type":"User","site_admin":false},"created_at":"2015-07-18T02:40:09Z","updated_at":"2015-07-18T02:40:09Z","body":"The sprite mixin is actually fairly simple. It's getting the sprite data INTO the mixin that's a bit challenging. Here's my sprite mixin:\r\n```js\r\nimport {\r\n    isUndefined\r\n} from 'lodash';\r\nimport {\r\n    func,\r\n    Obj,\r\n    Str\r\n} from 'tcomb';\r\n\r\nexport default function sprite(options) {\r\n\r\n    options = options || {};\r\n\r\n    if (!options.spriteData) {\r\n        throw new Error('missing option: spriteData');\r\n    }\r\n\r\n    return func([Obj, Str, Str], Obj)\r\n        .of((mixin, sheet, imageName) => {\r\n            let sheetData = options.spriteData[sheet];\r\n            if (isUndefined(sheetData)) {\r\n                throw new Error(`Sprite data not found for sheet: ${sheet}`);\r\n            }\r\n            let imageData = sheetData[imageName];\r\n            if (isUndefined(imageData)) {\r\n                throw new Error(`Sprite data not found for sheet: ${sheet}, image: ${imageName}`);\r\n            }\r\n            return {\r\n                'background-image': `url(../images/sprites/${imageData.image})`,\r\n                'background-position': [\r\n                    `${imageData.offset_x}px`,\r\n                    `${imageData.offset_y}px`\r\n                ].join(' '),\r\n                width: `${imageData.width}px`,\r\n                height: `${imageData.height}px`\r\n            };\r\n        }\r\n    );\r\n}\r\n```"}}