Inserting CSS

[code3z]

Advanced JS Some JS modders insert CSS via JS. There is already an example of this in “Installing Mods.” I can do this one.

[code3z]

@tiosgz How do I add myself as the assignee?

[ghost]

Advanced JS

I would consider it more ‘tips & tricks’.

Don’t forget to include the upsides & downsides.

[ghost]

How do I add myself as the assignee?

You don’t.

[code3z]

upsides & downsides.

Do you have any to share now, so I can put them in the first version?

[ghost]

+ It’s all in one file
- The CSS is harder to customize
- It can make the mod harder to orient in

[code3z]

👍

in addition, the code is a bit harder to write and must be minified.

[ghost]

must be minified.

Who said that?

[code3z]

Doesn’t it need to be in one line, unless you use special escape characters?

[ghost]

The backtick string is nothing special. You just have to be careful about chars that have special meaning, but that’s for all forms (another downside)

[code3z]

I haven’t done this before, but isn’t a backtick required on every line?

[ghost]

Nope.

const css = `
  body {
    background: blue;
  }
`; // => "\n  body {\n    background: blue;\n  }\n"
`${4 + 2}`; // => "6"
`\${4 + 2}`; // => "${4 + 2}"

[code3z]

Oh, good. I guess I’ve never had to do this before. I can add this link to the guide: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

I’m thinking that using the template expression should not be encouraged over CSS variables, what do you think?

Or I guess the CSS variable could be controlled by an expression, that is fine. Like,

:root {
      —var : ${var}
}

[ghost]

I can add this link to the guide: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

I don’t see why 🤷

I’m thinking that using the template expression should not be encouraged over CSS variables, what do you think?

Or I guess the CSS variable could be controlled by an expression, that is fine. Like,

:root {
      —var : ${var}
}

Depends on the situation. Sometimes CSS vars are even the only possible way. If you’re gonna add some config, --var: ${config_option} is good; otherwise you can just keep it only in CSS. Also, --var, not -var.

[code3z]

--var, not -var.

I’m on mobile, it autocorrects everything.

I can add this link to the guide: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

I don’t see why 🤷

Well, so the user can see more about this kind of variable.

[ghost]

Well, so the user can see more about this kind of variable.

Do as you like.

[luetage]

Come on code3z. You can’t write guides concerning Javascript knowing nothing about the language. What’s the point when you need every little piece of information from someone else? I also don’t see it as useful writing a section about inserting CSS in Javascript. That’s basic knowledge (which shouldn’t be part of a modding guide) and you don’t even need it when modding Vivaldi, because CSS is really easy to run native through experiments. Requesting closure of the issue. I’m gonna look at the other open issues too when I have time. Time shouldn’t be wasted on information that’s available form professional sources.

[code3z]

Time shouldn’t be wasted on information that’s available form professional sources.

There are definitely going to be things in the guide that are available from other places, but they don't address modding specifically and aren't in one place.

The CSS-in-JS is meant for small amounts of CSS where asking people to install two files doesn't make sense.

[code3z]

- It can make the mod harder to orient in

What do you mean by this? Harder to read / debug the code?

[code3z]

I would consider it more ‘tips & tricks’.

So what folder structure?