Implimenting StyleX in hugo?

support
1

Hi there,

How to use StyleX in Hugo? SO it doesn’t break on Hugo upgrades.

Thanks

2

No idea. I don’t even know what it is, and when I search for it, I get a ton of information about a German office supplier. Not sure if that can be used in Hugo, though.

3
1 Like
4

Hi @chrillek

StyleX is a JavaScript library for defining styles, similar to tailwind css and other such frameworks.

wondering if someone have any directions on how to implement it in Hugo?

Thanks

5

In that case, you have to load the library with a script element in a partial and add code to initialize and use it. Nothing special or related to Hugo, i think.

1 Like
6

I am sorry @chrillek why you always jump in a conversation if you have no idea what StyleX is why bother, bothering others?

i have a quick look in the community post + my previous post and realise you never actually provide any helpful response and simply just jump in without any valuable response.

Take a break mate.

8

@chrillek is right.
Hugo is JS framework agnostic.
So implementing it is up to you and not Hugo related. Like css features.

3 Likes
9

StyleX is only for Component-based JS frameworks. Hugo uses string templates and is not a component-based framework, so StyleX is not a good fit.

1 Like
10

thanks @nmn for clarifying this so if i want to replace the tailwind css with stylex in hugo it is not going to work, correct?

11

hi @divinerites

2 years ago i had the same issue with tailwindcss, but thanks to some hugo experts who made a very easy to follow guides on use of tailwind in hugo:

So the reason i am here now is that while styleX similar to tailwindcss is a separate tool the complications to use those tools in Hugo sometime are not easy to figure out. Tailwind for example in nextjs with all the required tools is a simple command npm install -D tailwindcss postcss autoprefixer but in hugo was not that straight forward and took very long time until some people figureout how to properly integrate it in hugo.

So i am hoping to get similar expert feedback on the use of StyleX in hugo there might be some work around.

Thanks

1 Like
12

is this a good or terrible example of using such tools in Hugo?

<!-- layouts/index.html -->

{{ $styles := (dict "container" (dict "padding" "20px" "background-color" "lightblue")) }}

<div style='{{ index $styles "container" }}'>
  <h1>Hello, Hugo!</h1>
</div>
13

I don’t see any relation to an external JS framework at all. You simply (try to) add inline styles to an HTML element.

Inline styles are a bad idea (not to mention px-sized dimensions). And they are a bad idea everywhere, inside and outside of Hugo.

14

Hi @chrillek

This is not about inline or external css, the code was provided as an example to ask how the stylex classes can be used in hugo?

Stylex produce random classes such as 423432432 or 234343242 instead of the usuall button or card etc.

Thanks

15

Since Hugo templates are not Javascript files, making StyleX work will be quite challenging. StyleX is a compiler that takes in Javascript files.

Further, StyleX is designed for component frameworks, and I’m not sure you’d get much value using it on a static content website built with Hugo. Traditional CSS should work fine in such scenarios.

1 Like
16

How did it feel to commit 475K lines of code?

17

Hi @vhscom

Not sure, but if I understood your comment you are saying you have made a large contribution in styleX is this correct? DO you see it a good fit with Hugo?

I currently use tailwind which is also similar, Any solutions on this that you can recommend.

Thanks

18

Other than the fact they are both used for styling html I see no similarites, they are conceptually very different.

Fwiw, I agree completely with @chrillek inline styles (as in the example you gave) are a terrible idea. In my opinion styled components, with scoped styles, are also a terrible idea; you miss out on all the best features of css.

I think @vhscom might have been suggesting that adding tons of bloat to your code base in order to avoid writing css might be a bit silly, you could just write css instead.

1 Like