These are chat archives for canjs/canjs

14th
Nov 2018
Gregg Roemhildt
@roemhildtg
Nov 14 2018 00:09
Hi guys, I've got a side project I've dabbled with in the past and would like to try integrating more tightly with Canjs. Its using Openlayers - a sort of observable mapping library. It has these observable list-like objects called collections, and I'm having issues getting it to work with canjs templates for of, each, etc.
Can anyone lend any tips? Here's the main file where I am adding canjs symbols to the list-like element: https://github.com/roemhildtg/can-ol-symbol/blob/master/lib/assignCanListSymbols.js
There's also a basic demo that can be ran with steal/http-server here: https://github.com/roemhildtg/can-ol-symbol/blob/master/index.html
nmingneau
@nmingneau
Nov 14 2018 07:36
Hi, can someone please help me with this issue in edge? https://codepen.io/nmingneau/pen/PxWPLm?editors=1010 It seems to be a bug in can.js but i'm unable to fix it in a reasonable timeframe.
nmingneau
@nmingneau
Nov 14 2018 08:52
I made an issue: canjs/can-construct#68
Viktor Busko
@Lighttree
Nov 14 2018 10:22
Guys maybe someone use some technique for CSS encapsulation in CanJS ? As far as I know CanJS componenents can't encapsulate styles (not sure about DoneJS).
For now I can see only "CSS Modules" as possible technique.
Gregg Roemhildt
@roemhildtg
Nov 14 2018 13:45

I typically use less, and I wrap each compoennt's styles in something like this:

component-name {
    .child-classname { ...}
}

So the output css is always

component-name .child-classname {}
Viktor Busko
@Lighttree
Nov 14 2018 16:34

Well this is not true encapsulation, such issue we can handle using something like BEM.

I'm talking about different thing:
Imagine you have page with two components componentA and componentB, both of them use component custom-button, but in componentA we have button v1 and in componentB button v2 they both may have same CSS class names and this is valid, but the code inside might be different. As result in stylesheet we will have custom-button twice with different styles.

Currently we solve this by putting all shared styles as peerDependencies for host app. So its like app where you use custom-button decides which version it will use and injects only one version of any stylesheet. But this adds some field to make mistakes, if you publish something incorrectly.