fresh
fresh copied to clipboard
denoland
SCSS/SASS Compilers support?
Is there any way to use SCSS / SASS and to ship the bundled (compiled) css or is this against any principle of the framework?
I do like the approach of using tailwind, but I'm feeling a hole that (imho) might be addressed about styling elements in general without relying on tailwind.
I was coming here to add this issue 👍. As of now it may be best to just use a javascript object and import it as an inline style.
@briosheje I want to figure out a more complete styling solution for Fresh 1.1. The current twind support is pretty hacked on there, and not how I envision the end state of styling in Fresh to look. Hopefully soon :)
Hopefully it is a css parser. That way other tools that end up outputting css can be integrated.
@briosheje I want to figure out a more complete styling solution for Fresh 1.1. The current twind support is pretty hacked on there, and not how I envision the end state of styling in Fresh to look. Hopefully soon :)
I think this might be something to mention in the docs as well because you might end up light me being like "ok cool, now what's the logic behind the styling?" and end up not finding any reference about it. In fact, everything about the architecture is mentioned in the docs (including how the hydrate works, why the island and so on) but there is literally no mention about styling in general, perhaps an example of how to include a simple .css file would be even enough to address this, right now.
I was able to put a css file in the asset folder then link to it like this. Also worked for remote styles and anything a normal head tag would do.
Pure css and class names after that.
This should probably be added to a styling section of the docs.
I published a utility function https://deno.land/x/to_css/mod.ts which does exactly what @About7Sharks suggested... takes a plain JS object and converts it to a string to be used for inline styles. For my use case (a small portfolio site) having some base styles in <head> plus one-off inline styles sprinkled in works well and is preferable to using Tailwind. Looking forward to a more robust solution for larger sites & a section on styling in the docs at a later time 👍
https://www.npmjs.com/package/react-helmet may be a good repo to incorporate this sort of stuff.
I'm having trouble figuring out how to get css in the head. Does anyone have an example repo to look at? Thanks!
I'm having trouble figuring out how to get css in the head. Does anyone have an example repo to look at? Thanks!
Just check @About7Sharks post above, I've done the same and It world :)
I'm having trouble figuring out how to get css in the head. Does anyone have an example repo to look at? Thanks! @TS000 https://github.com/About7Sharks/freshblog/blob/main/routes/index.tsx
@TS000 I believe the official way is as below
https://github.com/denoland/fresh/discussions/307
cc: @About7Sharks @briosheje
@TS000 I believe the official way is as below
#307
cc: @About7Sharks @briosheje
I do understand that the "official way" is to include a css in the specified page, but I thing that such a framework should bring support or should at least compile / minify the css assets.
In other frameworks like next.js or similar a transpiler optimizes the bundle and takes care of bundling with the specified page just the necessary css (unless otherwise specified by the developer).
This is particularly necessary when you have a mixture of components, imagine an architecture where you have:
- Island components with custom CSS
- Routes with custom CSS
- PReact plain components with custom CSS.
It is kind of painful, imho, to manually include in each route the CSS that will be needed by a specific component in the DOM, this is something that in 2022 should probably be done by the framework itself (unless the opposite is specified in the docs, although it's something that imho should be addressed).
I do like fresh and how fresh handles many of the tasks, but in modern web development with complex web applications optimizing bundles is something that not every developer can (and should) do, hence my point.
I do understand that the "official way" is to include a css in the specified page, but I thing that such a framework should bring support or should at least compile / minify the css assets.
In other frameworks like next.js or similar a transpiler optimizes the bundle and takes care of bundling with the specified page just the necessary css (unless otherwise specified by the developer).
just to throw a small spanner in the works here, doesn't this directly conflict with this project's "No build step" approach..? 🤔
I do understand that the "official way" is to include a css in the specified page, but I thing that such a framework should bring support or should at least compile / minify the css assets. In other frameworks like next.js or similar a transpiler optimizes the bundle and takes care of bundling with the specified page just the necessary css (unless otherwise specified by the developer).
just to throw a small spanner in the works here, doesn't this directly conflict with this project's "No build step" approach..? 🤔
It does indeed, but a solution is still needed for this imho, otherwise the framework looks like a space ship from year 2900 but when you get to styling your components you feel like you are in 1999 :D.
I won't say transpiling or compiling anything is necessary, but being able to reference a css file to a component and automatically embed the css when the component is used might be a good tradeoff.
I was just about to give Fresh a try but I am pretty shocked there are absolutely no styles and all the examples are built without any styles just by use of Tailwind.
We need global styles, component styles, shadow dom, etc. with support for SCSS otherwise Fresh is absolutely useless. Unfortunately this is a dead end for me, back to Node and Nuxt :/
The "no build step" approach makes no sense IMO. Why waste time of a serverless function to render something JIT when it can get rendered AOT already?
For folks coming across this, yeah we're fully aware that we need more styling options, including SCSS. And we're aware that Tailwind isn't everyone's cup of tea. There are couple of problems/decisions to make before we can support more styling solutions in Fresh.
- Move more people to AOT builds - Good progress on this one
- Plugin API is missing lots of APIs to make this possible
- Open question of whether we should pre-transpile JS code in Deno or via some sort of bundler in Fresh. Both approaches would work and both have different tradeoffs.
Rest assured, I'm aware of these problems. My work so far has mostly focused on getting all the underlying building blocks in place so that we can tackle this. That said there is still a bit of work left to do so there is no ETA at the moment. But yeah we're definitely aware of this.
