{"action":"created","issue":{"url":"https://api.github.com/repos/leeoniya/domvm/issues/108","repository_url":"https://api.github.com/repos/leeoniya/domvm","labels_url":"https://api.github.com/repos/leeoniya/domvm/issues/108/labels{/name}","comments_url":"https://api.github.com/repos/leeoniya/domvm/issues/108/comments","events_url":"https://api.github.com/repos/leeoniya/domvm/issues/108/events","html_url":"https://github.com/leeoniya/domvm/issues/108","id":193378786,"number":108,"title":"view-scoped CSS via JSS","user":{"login":"leeoniya","id":43234,"avatar_url":"https://avatars.githubusercontent.com/u/43234?v=3","gravatar_id":"","url":"https://api.github.com/users/leeoniya","html_url":"https://github.com/leeoniya","followers_url":"https://api.github.com/users/leeoniya/followers","following_url":"https://api.github.com/users/leeoniya/following{/other_user}","gists_url":"https://api.github.com/users/leeoniya/gists{/gist_id}","starred_url":"https://api.github.com/users/leeoniya/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/leeoniya/subscriptions","organizations_url":"https://api.github.com/users/leeoniya/orgs","repos_url":"https://api.github.com/users/leeoniya/repos","events_url":"https://api.github.com/users/leeoniya/events{/privacy}","received_events_url":"https://api.github.com/users/leeoniya/received_events","type":"User","site_admin":false},"labels":[{"id":283321875,"url":"https://api.github.com/repos/leeoniya/domvm/labels/enhancement","name":"enhancement","color":"84b6eb","default":true},{"id":283321876,"url":"https://api.github.com/repos/leeoniya/domvm/labels/help%20wanted","name":"help wanted","color":"159818","default":true}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":9,"created_at":"2016-12-04T21:52:24Z","updated_at":"2016-12-06T10:52:57Z","closed_at":null,"body":"Now that view closures can return `{render: ...}` objects, we should evaluate offering the option of returning `{css: ...}` as part of the mix, possibly accepting a JSS-style [1] stylesheet definition. Each vm is already tagged with a globally unique sequential `.id`, so the styles can be prefixed to isolate/prevent leakage. Another option is to prefix the defs with the `function.name` of the the view closure. This means all views created using the same closure would by styled uniformly. In both cases the view's root nodes would need the generated prefixes auto-appended to their className.\r\n\r\nJSS pairs well with vdom/hyperscript style libs since it's js-assembled CSS, much like like js-assembled DOM.\r\n\r\nThis would make for a good isolated and high-ROI project if anyone wants to take charge, since it wouldn't require intricate familiarity with domvm's internals. 98% of it can live decoupled as an addon.\r\n\r\ncc @grumpi, @yosbelms, @lawrence-dol\r\n\r\n[1] https://github.com/cssinjs/jss"},"comment":{"url":"https://api.github.com/repos/leeoniya/domvm/issues/comments/265120042","html_url":"https://github.com/leeoniya/domvm/issues/108#issuecomment-265120042","issue_url":"https://api.github.com/repos/leeoniya/domvm/issues/108","id":265120042,"user":{"login":"grumpi","id":6594573,"avatar_url":"https://avatars.githubusercontent.com/u/6594573?v=3","gravatar_id":"","url":"https://api.github.com/users/grumpi","html_url":"https://github.com/grumpi","followers_url":"https://api.github.com/users/grumpi/followers","following_url":"https://api.github.com/users/grumpi/following{/other_user}","gists_url":"https://api.github.com/users/grumpi/gists{/gist_id}","starred_url":"https://api.github.com/users/grumpi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/grumpi/subscriptions","organizations_url":"https://api.github.com/users/grumpi/orgs","repos_url":"https://api.github.com/users/grumpi/repos","events_url":"https://api.github.com/users/grumpi/events{/privacy}","received_events_url":"https://api.github.com/users/grumpi/received_events","type":"User","site_admin":false},"created_at":"2016-12-06T10:52:57Z","updated_at":"2016-12-06T10:52:57Z","body":"Some observations I made about the default behavior of JSS:\r\n\r\n1. Defining \r\n```\r\nstyle1 = {\r\n    abc: {\r\n        background: 'red'\r\n    }\r\n}\r\n```\r\nand\r\n```\r\nstyle2 = {\r\n    abc: {\r\n        background: 'green'\r\n    }\r\n}\r\n```\r\nfollowed by attaching both style sheets results in something like this:\r\n```\r\n<style>\r\n.abc-4263465757 {\r\n    background: red;\r\n}\r\n</style>\r\n<style>\r\n.abc-045034767 {\r\n    background: green;\r\n}\r\n</style>\r\n```\r\nCool! In different JSS sheets, I can use the same identifier to mean different things and JSS takes care of generating css class names that don't collide. This seems convenient. \r\n\r\n2. Defining\r\n```\r\nstyle1 = {\r\n    abc: {\r\n        background: 'red'\r\n    },\r\n    def: {\r\n        background: 'yellow'\r\n    },\r\n}\r\n```\r\nand\r\n```\r\nstyle2 = {\r\n    abc: {\r\n        background: 'green'\r\n    },\r\n    def: {\r\n        background: 'yellow'\r\n    },\r\n}\r\n```\r\nfollowed by attaching both style sheets results in something like this:\r\n```\r\n<style>\r\n.abc-4263465757 {\r\n    background: red;\r\n}\r\n.def-3455768006 {\r\n    background: yellow;\r\n}\r\n</style>\r\n<style>\r\n.abc-045034767 {\r\n    background: green;\r\n}\r\n.def-3455768006 {\r\n    background: yellow;\r\n}\r\n</style>\r\n```\r\nNote how the resulting css class name for `def` is identical in both sheets. What's going on? It looks like JSS figured that since the styles are identical it should use the same css class name, or, conversely, if the styles are different, the class names generated by JSS will be different.\r\n\r\nFor most applications (e.g. those that have a fixed set of styles), this shouldn't matter, since, as long as the correct styles are applied, it doesn't matter whether the generated css class names are distinct between components.\r\n\r\nFor applications where styles change dynamically, it means that css class names do change when styles are modified (let's say some end user selects orange as their profile color and resultingly the sheets are regenerated). That means that we need to redraw the component after changing its JSS stylesheet so that the component is aware of the new css class names. In a use case with per-view-class JSS stylesheets this means redrawing all instances of the particular view. Doing a redraw in the rare case of modifying a stylesheet seems unproblematic to me.\r\n\r\nWhen letting JSS generate css class names, collisions with external CSS are unlikely but still possible. **Example:** the other side uses a different css-in-js solution that by chance happens to generate the same class name. This is very unlikely to happen, but prefixing would indeed help with solving the issue quickly when it occurs.\r\n\r\nIf we prefix, we might just as well not let JSS generate css class names at all. Prefixing takes care of disambiguating class names between components and third party code.\r\n\r\n----\r\n\r\nI think, if the addon architecture is flexible enough, there may not even be the need for domvm's code to explicitly talk about styles.\r\n\r\nIs there a simple way for addons to use hooks (specifically, mount hooks for the vm)? This may be related to the idea of a View base class that can be extended by addons.\r\n\r\nThen, we could do the same as the React-Jss plugin: 1) attach stylesheet on mount, 2) keep a reference counter to remember the number of mounted views of the particular class on the view class itself, 3) detach stylesheet when reference counter reaches zero.\r\n\r\n"}}
{"actor":{"display_login":"grumpi"}}