{"action":"created","issue":{"url":"https://api.github.com/repos/stylus/stylus/issues/2139","repository_url":"https://api.github.com/repos/stylus/stylus","labels_url":"https://api.github.com/repos/stylus/stylus/issues/2139/labels{/name}","comments_url":"https://api.github.com/repos/stylus/stylus/issues/2139/comments","events_url":"https://api.github.com/repos/stylus/stylus/issues/2139/events","html_url":"https://github.com/stylus/stylus/issues/2139","id":139698752,"number":2139,"title":"Reference @import? (variables and mixins only)","user":{"login":"thybzi","id":1572675,"avatar_url":"https://avatars.githubusercontent.com/u/1572675?v=3","gravatar_id":"","url":"https://api.github.com/users/thybzi","html_url":"https://github.com/thybzi","followers_url":"https://api.github.com/users/thybzi/followers","following_url":"https://api.github.com/users/thybzi/following{/other_user}","gists_url":"https://api.github.com/users/thybzi/gists{/gist_id}","starred_url":"https://api.github.com/users/thybzi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/thybzi/subscriptions","organizations_url":"https://api.github.com/users/thybzi/orgs","repos_url":"https://api.github.com/users/thybzi/repos","events_url":"https://api.github.com/users/thybzi/events{/privacy}","received_events_url":"https://api.github.com/users/thybzi/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/stylus/stylus/labels/t:%20Enhancement","name":"t: Enhancement","color":"c7def8"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2016-03-09T20:57:14Z","updated_at":"2016-03-10T11:07:46Z","closed_at":null,"body":"**TL;DR**: yes, what I want is something similar to [LESS reference import](http://lesscss.org/features/#import-options) to be implemented in Stylus\r\n\r\n**A long and boring story:**\r\n\r\nLet's say we have the following file structure:\r\n```\r\n|\r\n|-- main\r\n|    |-- button.styl\r\n|    |-- authform.styl\r\n|    `-- mypage.styl\r\n`-- main.styl\r\n```\r\n\r\n_main/button.styl_\r\n```styl\r\n// variables\r\n$button-height = 33px\r\n$button-rounding = 4px\r\n\r\n// mixins\r\nbutton_color($base-color)\r\n  background-color: $base-color\r\n  &:hover\r\n    background-color: darken($base-color, 20%)\r\n\r\n// styles\r\n.button\r\n  height: $button-height\r\n  border-radius: $button-rounding\r\n  color: white\r\n\r\n  .normal\r\n    button_color(#90091e)\r\n\r\n  .alternate\r\n    button_color(#bada55)\r\n```\r\n\r\n_main/authform.styl_\r\n```styl\r\n// variables\r\n$authform-pad = 5px\r\n$authform-height = $button-height + (2 * $authform-pad)\r\n\r\n// styles\r\n.authform\r\n  box-sizing: border-box\r\n  padding: $authform-pad\r\n  height: $authform-height\r\n```\r\n\r\n_main/mypage.styl_\r\n```styl\r\n// styles\r\n.mypage\r\n\r\n  header\r\n    height: $authform-height\r\n\r\n  .someblock .button\r\n    button_color(#906090)\r\n```\r\n\r\n_main.styl_\r\n```styl\r\n@import 'main/authform'\r\n@import 'main/button'\r\n@import 'main/mypage'\r\n```\r\n\r\n**initial state**\r\nTrying to compile `main.styl` gives obviously bad results such as ```height: $button-height10px;``` for authform etc.\r\n\r\n**@import**\r\nOk, so variables need to be already defined when used.\r\nSo, we add ```@import 'button'``` in the beginning of `authform.styl`, and both ```@import 'authform'``` and ```@import 'button'``` to `mypage.styl`\r\nNow, we have all styles compiled correctly, but all authform styles are repeated twice, and button styles are repeated three times.\r\n\r\n**@require**\r\nAs we may know, @require constructs prevent repeated imports, so we change all @import to @require. Yay, styles are no more repeated!\r\n\r\nBut... In output css, button styles come first, then authform styles, and then mypage styles.\r\nBut the order in `main.css` was: authform, button, mypage.\r\nThis order is broken because authform first imports button (and thus outputs its styles), and only after that outputs its own styles.\r\n\r\nIn this synthetic situation the order seems to be no object. But in real life, the styles order can be just _crucial_, whereas we cannot control it.\r\n\r\n**build with no button**\r\nNow let's create one more build which represents some page with authform but _without_ button (may it be the form has only input, but this form must have the same height)\r\n\r\n_main/otherpage.styl_\r\n```styl\r\n@require 'authform'\r\n\r\n.otherpage\r\n\r\n  .myblock\r\n    min-height: $authform-height\r\n```\r\n_nobutton.styl_\r\n```styl\r\n@require 'main/authform'\r\n@require 'main/otherpage'\r\n```\r\n\r\nCompiling `nobutton.styl`, we get _button styles which we didn't really need_ in this css build.\r\n\r\nThe only chance to avoid this is to _split every component file_ to at least two parts (\"styles\" file and \"vars+mixins\" file), and import them separately.\r\n\r\n**The solution that should be great**\r\nLESS has a very good approach for aforesaid problems solution: [reference import option](http://lesscss.org/features/#import-options) \r\n\r\nLet us have something similar in Stylus? May it be `@reference`, or `@use`, or `@refer`, or whatever, which would work as \"import only variables and mixins from the file, but don't output any styles\".\r\n\r\nThank you in advance!"},"comment":{"url":"https://api.github.com/repos/stylus/stylus/issues/comments/194793537","html_url":"https://github.com/stylus/stylus/issues/2139#issuecomment-194793537","issue_url":"https://api.github.com/repos/stylus/stylus/issues/2139","id":194793537,"user":{"login":"kizu","id":177485,"avatar_url":"https://avatars.githubusercontent.com/u/177485?v=3","gravatar_id":"","url":"https://api.github.com/users/kizu","html_url":"https://github.com/kizu","followers_url":"https://api.github.com/users/kizu/followers","following_url":"https://api.github.com/users/kizu/following{/other_user}","gists_url":"https://api.github.com/users/kizu/gists{/gist_id}","starred_url":"https://api.github.com/users/kizu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kizu/subscriptions","organizations_url":"https://api.github.com/users/kizu/orgs","repos_url":"https://api.github.com/users/kizu/repos","events_url":"https://api.github.com/users/kizu/events{/privacy}","received_events_url":"https://api.github.com/users/kizu/received_events","type":"User","site_admin":false},"created_at":"2016-03-10T11:07:46Z","updated_at":"2016-03-10T11:07:46Z","body":"Thanks for the issue, we have some plans on enhancing the `@import`/`@require` in Stylus, very close to what Less have, but with a slightly different syntax. Stay tuned! :)"}}