First off, I'd like to say that this is awesome. I can see the usage for it, and will very most likely be using it for the design of my wordpress dev blog.
And while the project is still sorta-early, I was looking at how it rendered, and noticed it creates a lot of <div> elements with inline style strings, within a container div. That's a pretty neat solution in order to make it compatible with as many browsers as possible and all that fun stuff.
However, I'm more concerned by how the shadow-dom's CSS is generated :
.cell:nth-of-type(1) {
background: #60569e;
width: 80%;
height: 80%;
--internal-cell-width: 80%;
--internal-cell-height: 80%;
background: #60569e;
width: 80%;
height: 80%;
--internal-cell-width: 80%;
--internal-cell-height: 80%;
}
.cell:nth-of-type(2) {
background: #60569e;
width: 80%;
height: 80%;
--internal-cell-width: 80%;
--internal-cell-height: 80%;
transform: rotate(45deg);
}
.cell:nth-of-type(3) {
background: #60569e;
width: 80%;
height: 80%;
--internal-cell-width: 80%;
--internal-cell-height: 80%;
}
.cell:nth-of-type(4) {
/* etc. */
}This is from using a simple @even formula, which I expected to generate instead like so :
.cell {
background: #60569e;
width: 80%;
height: 80%;
--internal-cell-width: 80%;
--internal-cell-height: 80%;
}
.cell:even {
transform: rotate(45deg);
}We both know is best in order to process the whole thing faster... or is it?
Is this due to a limitation in your implementation method? Or is it just not implemented yet? If the latter, I can understand, and I'd gladly help contribute for it.
Thanks, hope I wasn't rude or anything.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent