{"action":"created","issue":{"url":"https://api.github.com/repos/css-modules/css-modules/issues/23","labels_url":"https://api.github.com/repos/css-modules/css-modules/issues/23/labels{/name}","comments_url":"https://api.github.com/repos/css-modules/css-modules/issues/23/comments","events_url":"https://api.github.com/repos/css-modules/css-modules/issues/23/events","html_url":"https://github.com/css-modules/css-modules/issues/23","id":97839990,"number":23,"title":"Passing local classes to unknown children","user":{"login":"oliverbenns","id":1992355,"avatar_url":"https://avatars.githubusercontent.com/u/1992355?v=3","gravatar_id":"","url":"https://api.github.com/users/oliverbenns","html_url":"https://github.com/oliverbenns","followers_url":"https://api.github.com/users/oliverbenns/followers","following_url":"https://api.github.com/users/oliverbenns/following{/other_user}","gists_url":"https://api.github.com/users/oliverbenns/gists{/gist_id}","starred_url":"https://api.github.com/users/oliverbenns/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/oliverbenns/subscriptions","organizations_url":"https://api.github.com/users/oliverbenns/orgs","repos_url":"https://api.github.com/users/oliverbenns/repos","events_url":"https://api.github.com/users/oliverbenns/events{/privacy}","received_events_url":"https://api.github.com/users/oliverbenns/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-07-29T02:02:40Z","updated_at":"2015-08-04T13:54:53Z","closed_at":null,"body":"E.g.\r\n\r\n#### Knowing the children\r\nLike my comment [here](https://github.com/css-modules/css-modules/issues/21#issuecomment-121429234). This is great, we know the children, and can specify the button class and be done with it.\r\n```\r\nrender() {\r\n\treturn (\r\n\t\t<div className={ classes }>\r\n\t\t\t<h1 className={ styles.text }>{ this.props.label }</h1>\r\n\t\t\t<Button href={ this.props.button.href } className={ styles.button }>{ this.props.button.label }</Button>\r\n\t\t</div>\r\n\t);\r\n}\r\n```\r\n\r\n\r\n#### Not knowing the children\r\n\r\n- Children could be a button, but it could also be a dropdown etc ( `styles.dropdown` , `styles.button` )\r\n- They're not really 'states' of these components, as it's particular to the parent. E.g. adjusting some layout particular that only happens in this parent component.\r\n\r\nSo how could I go about solving this?\r\n\r\n```\r\nrender() {\r\n\treturn (\r\n\t\t<div className={ classes }>\r\n\t\t\t<h1 className={ styles.text }>{ this.props.label }</h1>\r\n\t\t\t{ this.props.children }\r\n\t\t</div>\r\n\t);\r\n}\r\n```\r\n"},"comment":{"url":"https://api.github.com/repos/css-modules/css-modules/issues/comments/127620994","html_url":"https://github.com/css-modules/css-modules/issues/23#issuecomment-127620994","issue_url":"https://api.github.com/repos/css-modules/css-modules/issues/23","id":127620994,"user":{"login":"serapath","id":1771897,"avatar_url":"https://avatars.githubusercontent.com/u/1771897?v=3","gravatar_id":"","url":"https://api.github.com/users/serapath","html_url":"https://github.com/serapath","followers_url":"https://api.github.com/users/serapath/followers","following_url":"https://api.github.com/users/serapath/following{/other_user}","gists_url":"https://api.github.com/users/serapath/gists{/gist_id}","starred_url":"https://api.github.com/users/serapath/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/serapath/subscriptions","organizations_url":"https://api.github.com/users/serapath/orgs","repos_url":"https://api.github.com/users/serapath/repos","events_url":"https://api.github.com/users/serapath/events{/privacy}","received_events_url":"https://api.github.com/users/serapath/received_events","type":"User","site_admin":false},"created_at":"2015-08-04T13:54:53Z","updated_at":"2015-08-04T13:54:53Z","body":"Hey, I'm not so sure i exactly grok what this is about, but I think I have a similar problem and just wanted to tell how I'm trying to solve it.\r\n\r\nI'm not using `css-modules` yet and I'm not using `jsx` yet.\r\n\r\nI'm using [atomify](http://github.com/atomify/atomify), thus the `html & js` is handled by browserify and the `css` is handled by `reworkcss` where `@import`s work like `require()`.\r\n\r\n**The way I try to solve what you seem to talk about is:**\r\n* For each child component the parent has a `child dom container` controlled by the parent\r\n* For each child component the parent can pass params to the child\r\n* For each child the parent can pass styling variables to the child\r\n* If the parent does not pass anything to the child, the child will use default values\r\nThe current approach might be a bit verbose and requires some manual discipline and also has some limitations, so i would like to switch to `css-modules` soon.\r\n\r\n**So what I currently do is:**\r\n\r\n## COMPONENT - HTML & JS\r\n#### Menu Component\r\n```html\r\n<!-- Menu.html -->\r\n<div class=\"Menu\">\r\n  <div class=\"Menu_title\"></div>\r\n  <div class=\"Menu__logo----Logo\"></div>\r\n  <div class=\"Menu__navigation---Navigation\"></div>\r\n</div>\r\n```\r\n```javascript\r\nvar Logo = require('logo')  // default logo component\r\nvar Navigation = require('navigation') // default navigation component\r\n\r\nvar template = require('./Menu.html')\r\nvar __ = document.createElement('div')\r\n\r\nmodule.exports = function Menu (dom, data, children) {\r\n  // DOM\r\n  var CONTAINER    = dom\r\n  var COMPONENT    = (__.innerHTML=template,__.childNodes[0])\r\n  var __title      = COMPONENT.querySelectorAll('.Menu__title')[0]\r\n  var __logo       = COMPONENT.querySelectorAll('.Menu__logo----Logo')[0]\r\n  var __navigation = COMPONENT.querySelectorAll('.Menu__navigation')[0]\r\n\r\n  // DATA\r\n  var titleData = data.title || 'Hello World'\r\n  var logoData = data.logo || {} // default \"Logo Component\" doesn't use data\r\n  var navigationData = data.navigation || {} // default \"Navigation Component\" takes JSON menu tree\r\n\r\n  // CHILDREN\r\n  var Logo__ = children.Logo || Logo\r\n  var Navigation__ = children.Navigation || Navigation\r\n\r\n  // INIT\r\n  // Menu Component\r\n  __title.innerHTML = titleData\r\n  // Children Components\r\n  var API_logo = Logo__(__logo, logoData /*, no children */)\r\n  var API_navigation = Navigation__(__navigation, navigationData, {/*none -> nav uses default*/})\r\n\r\n  // RENDER & RETURN API\r\n  CONTAINER.appendChild(COMPONENT)\r\n  var API = {/*\r\n    add methods to interact with menu from the console\r\n    feel free to expose 'API_logo' and/or 'API_navigation'\r\n  */}\r\n  return API\r\n}\r\n```\r\n#### Usage (of Menu Component)\r\n```javascript\r\nvar menu = require('menu')\r\nvar data = {\r\n  title: 'My Dummy Page',\r\n  logo: './logo.jpg',\r\n  navigation: {\r\n    home: '#home',\r\n    about: '#about',\r\n    /* ... */\r\n  }\r\n}\r\nvar children = undefined // use default menu children components\r\nmenu(document.body, data, children)\r\n```\r\n\r\n## COMPONENT - CSS\r\nThe styling is done in parallel using the `css` files for each component.\r\nBasically, each component specifies **a lot of variables** which can be \"passed in\" by the parent component, but if the parent component doesn't do so, it falls back to the **default values**\r\n\r\n#### Logo Component\r\n```css\r\n:root {\r\n  --Logo_width: 2px;\r\n  --Logo_color: white;\r\n  /* ... */\r\n  /* Customize Default Children */\r\n    /* -- component does not have any children components -- */\r\n}\r\n.Logo {\r\n /*... and use 'var(--Logo_width)' and 'var(Logo_color)' ... */\r\n}\r\n.Logo__image {\r\n /*... and use 'var(--Logo_width)' and 'var(--Logo_color)' ... */\r\n}\r\n/*... and use 'var(--Logo_width)' and 'var(--Logo_color)' ... */\r\n```\r\n#### Navigation Component\r\n```css\r\n:root {\r\n  --Navigation_padding: 5px;\r\n  --Navigation_borderActive: red;\r\n  /* ... */\r\n  /* Customize Default Children */\r\n    /* -- component does not have any children components -- */\r\n}\r\n.Navigation {\r\n /*... and use 'var(--Navigation_padding)' and 'var(--Navigation_borderActive)' ... */\r\n}\r\n.Logo__image {\r\n /*... and use 'var(--Navigation_padding)' and 'var(--Navigation_borderActive)' ... */\r\n}\r\n/*... and use 'var(--Navigation_padding)' and 'var(--Navigation_borderActive)' ... */\r\n```\r\n#### Menu Component\r\n```css\r\n@import  'logo'; /* default logo component */\r\n@import 'navigation'; /* default navigation component */\r\n\r\n:root {\r\n  --Menu_backgroundColor: blue;\r\n  --Menu_fontSize: 15px;\r\n  /* Customize Default Children */\r\n  --Logo_width: 100px;\r\n  --Logo_color: purple;\r\n  --Navigation_padding: 2px;\r\n  --Navigation_borderActive: yellow;\r\n}\r\n\r\n.Menu {\r\n  background-color: var(--Menu_backgroundColor)\r\n  font-size: var(--Menu_fontSize)\r\n  /* ... */\r\n}\r\n.Menu__title {\r\n  /* ... */\r\n}\r\n```\r\n\r\n#### USAGE (of Menu Component)\r\n```css\r\n@import `menu`;\r\n\r\nroot: {\r\n  /* THEME */\r\n  --ThemeColor1: red;\r\n  --ThemeColor2: yellow;\r\n  --ThemeFocusColor: green;\r\n  --ThemeSize: 20px;\r\n  --ThemeSpacing: 3px;\r\n  /* CUSTOMIZE STYLING */\r\n  --Menu_backgroundColor: var(--ThemeColor1);\r\n  --Menu_fontSize: 15px;\r\n  --Logo_width: var(--ThemeSpacing);\r\n  --Logo_color: var(--ThemeColor2);\r\n  --Navigation_padding: var(--ThemeSpacing);\r\n  --Navigation_borderActive: var(--ThemeFocusColor);\r\n}\r\n```\r\n"}}