{"action":"closed","issue":{"url":"https://api.github.com/repos/systemjs/plugin-css/issues/30","labels_url":"https://api.github.com/repos/systemjs/plugin-css/issues/30/labels{/name}","comments_url":"https://api.github.com/repos/systemjs/plugin-css/issues/30/comments","events_url":"https://api.github.com/repos/systemjs/plugin-css/issues/30/events","html_url":"https://github.com/systemjs/plugin-css/issues/30","id":70188128,"number":30,"title":"A modular CSS proposal","user":{"login":"guybedford","id":598730,"avatar_url":"https://avatars.githubusercontent.com/u/598730?v=3","gravatar_id":"","url":"https://api.github.com/users/guybedford","html_url":"https://github.com/guybedford","followers_url":"https://api.github.com/users/guybedford/followers","following_url":"https://api.github.com/users/guybedford/following{/other_user}","gists_url":"https://api.github.com/users/guybedford/gists{/gist_id}","starred_url":"https://api.github.com/users/guybedford/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/guybedford/subscriptions","organizations_url":"https://api.github.com/users/guybedford/orgs","repos_url":"https://api.github.com/users/guybedford/repos","events_url":"https://api.github.com/users/guybedford/events{/privacy}","received_events_url":"https://api.github.com/users/guybedford/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":19,"created_at":"2015-04-22T17:29:47Z","updated_at":"2015-06-22T20:53:31Z","closed_at":"2015-06-22T20:53:30Z","body":"An idea..\r\n\r\ncomponent-style.mcss (modular css)\r\n```\r\n/* $ allows us to define \"CSS class name placeholders\" */\r\n${base} {\r\n  font-size: 16px;\r\n  color: #444;\r\n}\r\n${base} p {\r\n  font-size: 12px;\r\n}\r\n```\r\n\r\ncomponent.js\r\n```\r\nimport {base} from './component-style.mcss!';\r\n\r\n// etc for whatever framework we're in\r\nexport function render(opts) {\r\n  return `\r\n    <div class=\"${base}\">\r\n      <p>stuff</p>\r\n    </div>\r\n  `;\r\n}\r\n```\r\n\r\nThat is, the className of `base` is a dynamic name that is shared as an export of the CSS module, which itself then generates the CSS class names for us.\r\n\r\nSay in development, the className could be generated as `component-style-base-0`, with uniqueness managed, and then in production it could be reduced to `z2d` on build / bundle.\r\n\r\nIn this way we get around the biggest modularity hurdle in CSS - the global namespacing of classes.\r\n\r\nThe syntax may need revising, but it would be great to see something like this if anyone is keen on working on it please let me know!\r\n\r\nThe other cool thing is it could be done in a way that is backwards compatible with the CSS plugin here, in which case we could ship it in this default CSS plugin with jspm."}}