{"action":"created","issue":{"url":"https://api.github.com/repos/MadLittleMods/postcss-css-variables/issues/4","labels_url":"https://api.github.com/repos/MadLittleMods/postcss-css-variables/issues/4/labels{/name}","comments_url":"https://api.github.com/repos/MadLittleMods/postcss-css-variables/issues/4/comments","events_url":"https://api.github.com/repos/MadLittleMods/postcss-css-variables/issues/4/events","html_url":"https://github.com/MadLittleMods/postcss-css-variables/issues/4","id":73208322,"number":4,"title":"Please clearly show in the README the limitation / bugs it can create","user":{"login":"MoOx","id":157534,"avatar_url":"https://avatars.githubusercontent.com/u/157534?v=3","gravatar_id":"","url":"https://api.github.com/users/MoOx","html_url":"https://github.com/MoOx","followers_url":"https://api.github.com/users/MoOx/followers","following_url":"https://api.github.com/users/MoOx/following{/other_user}","gists_url":"https://api.github.com/users/MoOx/gists{/gist_id}","starred_url":"https://api.github.com/users/MoOx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/MoOx/subscriptions","organizations_url":"https://api.github.com/users/MoOx/orgs","repos_url":"https://api.github.com/users/MoOx/repos","events_url":"https://api.github.com/users/MoOx/events{/privacy}","received_events_url":"https://api.github.com/users/MoOx/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":5,"created_at":"2015-05-05T04:51:29Z","updated_at":"2015-05-06T14:12:11Z","closed_at":null,"body":"Currently you use a title like \r\n\r\n\r\n```css\r\n.root {\r\n  --text-color: red;\r\n}\r\n\r\n.component {\r\n  --text-color: blue;\r\n}\r\n\r\n.component .header {\r\n  color: var(--text-color);\r\n}\r\n\r\n.component .text {\r\n  --text-color: green;\r\n  color: var(--text-color);\r\n}\r\n```\r\n\r\nWith the current html, this is completlly wrong\r\n\r\n```html\r\n<div class=\"component\">\r\n  Black\r\n  <div class=\"header\">\r\n    Blue\r\n    <div class=\"text\">\r\n      Green\r\n      <div class=\"header\">Green</div>\r\n    </div>\r\n  </div>\r\n</div>\r\n```\r\n\r\nSee native result on firefox http://jsbin.com/tireneluxo/1/edit?html,css,output\r\n\r\nYour output give a completly different result \r\n\r\nhttp://jsbin.com/zacakilamo/1/edit?html,css,output\r\n\r\nIt's unexpected according to what I can read in the readme https://github.com/MadLittleMods/postcss-css-variables#using-cascading-variables-the-var-notation\r\n\r\n> Using Cascading Variables: the var() notation\r\n> ...\r\n>-  No limitation on what scope CSS variables can be declared or used (:root or wherever)\r\n\r\n>   - Proper value substition based on explicit DOM/structure traversal\r\n\r\nSo it's totally unclear."},"comment":{"url":"https://api.github.com/repos/MadLittleMods/postcss-css-variables/issues/comments/99480394","html_url":"https://github.com/MadLittleMods/postcss-css-variables/issues/4#issuecomment-99480394","issue_url":"https://api.github.com/repos/MadLittleMods/postcss-css-variables/issues/4","id":99480394,"user":{"login":"MadLittleMods","id":558581,"avatar_url":"https://avatars.githubusercontent.com/u/558581?v=3","gravatar_id":"","url":"https://api.github.com/users/MadLittleMods","html_url":"https://github.com/MadLittleMods","followers_url":"https://api.github.com/users/MadLittleMods/followers","following_url":"https://api.github.com/users/MadLittleMods/following{/other_user}","gists_url":"https://api.github.com/users/MadLittleMods/gists{/gist_id}","starred_url":"https://api.github.com/users/MadLittleMods/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/MadLittleMods/subscriptions","organizations_url":"https://api.github.com/users/MadLittleMods/orgs","repos_url":"https://api.github.com/users/MadLittleMods/repos","events_url":"https://api.github.com/users/MadLittleMods/events{/privacy}","received_events_url":"https://api.github.com/users/MadLittleMods/received_events","type":"User","site_admin":false},"created_at":"2015-05-06T14:12:11Z","updated_at":"2015-05-06T14:12:11Z","body":"@MoOxI think what you are wanting would be in the minority of what people actually want/expect. I realize the CSS custom properties spec would make it your way which does make sense, but definitely not in terms of this plugin as no nesting structure was provided for us to work from.\r\n\r\n**If I was nesting a component over and over, I would expect it it look the same as it went down.**\r\n\r\n---\r\n\r\nMaybe a better solution to your problem would be to use `currentColor` for any nested components.\r\n\r\n```\r\n/* ... */\r\n\r\n.header .header {\r\n\tcolor: currrentColor;\r\n}\r\n```"}}