author css styles in a sass-compatible nested format

[leeoniya]

would help with theming

see what css variables can be pulled out to :root.

probably compile with

https://github.com/thysultan/stylis.js or https://github.com.cnpmjs.org/cristianbote/goober#extractcsstarget

create final css in /dist

export uncompiled styles from es6 source to allow consumers of lib to use their own css processors.

[danyalejandro]

If you're going the SASS route, please consider adding some comments for new users, even a simple name for a code block makes the code so much easier to navigate.

It will also make migration easier for those of us that already have a theme working.

[leeoniya]

the change will just be that /src/css.js will be something like

export const css = `
.uplot {
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }
}
...
`;

and there will be a compiled /dist/uPlot.css produced from this file.

the only impact on end users will be that they'll need to change to using /dist/uPlot.css rather than the current /src/uPlot.css.

actually, i should just move the css file there preemptively.

[danyalejandro]

Want me to give this a try? I already have uplot styles loaded as scss in my project anyways

[leeoniya]

sure!

i'm interested in the smallest dep/lib that can compile nested scss/less syntax to css. so if you can test how stylis or goober do on this task, that would be great. or any other micro lib you know of that can do this. with goober you may run into https://github.com/cristianbote/goober/pull/47, and i'd be open to forking and using it with that applied, if necessary. although if stylis.js or something else works out of the box, then that's probably the better route.

aside: i personally prefer writing everything in JS and compiling via https://github.com/cssobj/cssobj & https://github.com/cssobj/cssobj-plugin-gencss, but i don't think this will be as flexible for external themers,

[danyalejandro]

For now I have the scss attached, it reflects the HTML structure which makes it easier to theme the lib.

On your aside, I'm currently struggling with theming Material UI in React which relies on JS styles, and for someone who just wants to use a lib and move on with his life, it's frustrating having to read an API to CSS-theme something.

I'll post an update after a couple tests, and do a pull request if you like everything uPlot.txt

.

[leeoniya]

On your aside, I'm currently struggling with theming Material UI in React which relies on JS styles, and for someone who just wants to use a lib and move on with his life, it's frustrating having to read an API to CSS-theme something.

just to be clear, what i'm talking about is authoring static stylesheets in JS, not something like Styled Components.

i hate having to remember how to do loops, variables, "mixins" and all the other junk in SASS when i can easily just use javascript to compose my stylesheet, and use regular ES modules for imports and re-use. you can see what i do here to generate the static stylesheets:

https://github.com/leeoniya/flecks/blob/master/src/flecks.js

https://github.com/leeoniya/flecks/blob/b5245efd9b2a0059e72fc4037064d680934aefd5/cli.js#L30-L44

in any case, uPlot's simple css does not need much more than correct nesting support.

[danyalejandro]

Ah! I see, yes, that could be useful. Would you be open to just migrating uPlot's styles to a scss format and adding node-sass to package.json to compile the dist css file? Check the sass I attached, no loops or anything complicated in there (tried to make it simple & readable, it will get minified anyways).

[leeoniya]

Would you be open to just migrating uPlot's styles to a scss format

yes.

it reflects the HTML structure which makes it easier to theme the lib.

but it also bloats the css by adding a .wrap and/or .plot prefix to many things that can just be under .uplot. e.g. .uplot .select.off becomes .uplot .wrap .plot .select.off.

i want to leave some flexibility for myself to tweak the html structure in the future, so please aim to write scss that compiles to the same output as the existing css file. any changes to it should be done as separate proposals/issues.

and adding node-sass to package.json to compile the dist css file

no. node-sass is 15.5MB [1]. goober is 1k. stylis.js is 3k.

please get this scss compiling with a micro-lib.

[1] https://packagephobia.now.sh/result?p=node-sass

[danyalejandro]

stylis compiles this sass to perfection, I think you could use it.

I get what you mean on flexibility, but well-written SASS is very maintainable, changes to your HTML structure would hardly require changes to SASS. Perhaps you could give it some thought after you settle on an HTML structure.

I have removed most of the rigid wrapping in the attached file, leaving only that which made sense thinking of future changes. I'll leave it here in case you find some use for it. uPlot.txt

[silverwind]

node-sass is 15.5MB

node-sass is an abomination. I recommend dart-sass.

[leeoniya]

stylis.js is 3k. i tested their v4 branch and it works well.

[silverwind]

Yeah, use whatever you like. I just thought to chime in before someone makes a mistake using node-sass. Me personally, I can live without preprocessors since the advent of CSS custom properties.

[leeoniya]

now that axes, ticks & labels are drawn on canvas and a lot of css is gone, i'm not certain that what remains justifies an additional compiling indirection (no matter how small).