Improved CSS workflows

[ghost]

I've been following this project for a month or so and plan to start building an actual app soon enough. There's a few things that have been bothering me with the CSS workflow however, I feel that it is just a little bit too magical and inflexible:

• In issue CSS-in-rs #27 it was discussed that there needs to be a way for CSS to be output as the programmer desires, and not necessarily as a single file.
• In issue Using strings for CSS in Rust is a poor experience. We should use tokens instead #17 a feature was requested to have inline CSS support directly in Rust using a macro.

I've started working on is a new crate that should support CSS Modules, you use it like this:

let css = include_css_module!("relative-path-to-file.css");

// Get an aliased version of .yourClassName that will not conflict:
css.get("yourClassName");

// Get the stylesheet containing aliased classes:
css.stylesheet;

I'd like to help resolve the issues here too. My next step will be to implement a css_module macro that allows defining CSS inline. I'd be interested in hearing any thoughts about what I'm working on, and perhaps what else I should include.

[chinedufn]

Totally agree that the CSS workflow in Percy is FAR from ergonomic just yet, so I'm super interested in anything, anywhere that pushes the Rust + CSS story forwards.

---

When it comes to styling I've come to think/accept that different people/teams have different philosophies. Some people just want to write it right next to the HTML. Some people want to import a CSS file. Some people want to just use classnames and keep their CSS separate.

So, my stance is that anything that is really good at what it's trying to do is 👍 .

If you nailed down something that felt super clean and ergonomic it'd be great for Percy to have an example in the examples directory that uses your crate to do styling.

---

In terms of any thoughts that I have - I haven't played with CSS modules too much so I don't have any implementation ideas off the top of my head. I'd need to take a closer look at the spec and try them out.

So my general thinking here would be... if it makes it dead easy to author CSS for your elements then it's totally something that Percy could either show an example of and/or depend on and re-export.

---

I've been following this project for a month or so and plan to start building an actual app soon enough.

That's super exciting! As more people build more things we'll be able to smooth out all of the warts and speed bumps and slowly but surely get to a point where things feel top notch.

If at any point you have questions, suggestions, feedback or advice please don't hesitate for a moment. I'm most interested in anyone that's trying to use Percy to make something since that's where all of the real world use case problems that we need to solve will come from.

[ghost]

So, my stance is that anything that is really good at what it's trying to do is +1 .

If you nailed down something that felt super clean and ergonomic it'd be great for Percy to have an example in the examples directory that uses your crate to do styling.

I am trying my best for sure, I am still new to Rust and some of the patterns still elude me. My preference is for total separation of logic, style and markup but I am trying to accommodate alternative ways of working.

Initially I started with a custom derive which would add a method for each class found in the CSS file:

#[derive(CssModule)]
#[css = "something.css"]
struct Styles;

However I was not comfortable with the fact that a proc_macro crate cannot currently have other exports, and also that this felt incomplete. This is why I went with simpler macros instead, because I could export the underlying structures and reuse them elsewhere to implement something more abstract.

My ideal solution would be to attach the CSS and HTML like this:

#[styles = "my_component.css"]
#[html = "my_component.hbs"]
struct MyComponent {
    hello: String,
}

my_component.css:

.myComponent {
    font-weight: bold;
}

my_component.hbs:

<p class="{{ styles.myComponent }}">{{ data.hello }}</p>

I'm not sure how well that can be made to fit in with Percy however, there are a lot of things between me and that goal.

So my general thinking here would be... if it makes it dead easy to author CSS for your elements then it's totally something that Percy could either show an example of and/or depend on and re-export.

Speaking of examples, I just added a bunch for various template systems, including one using virtual_dom_rs. It's very basic and not particularly exciting and I don't think it's particularly aesthetically pleasing.

If at any point you have questions, suggestions, feedback or advice please don't hesitate for a moment. I'm most interested in anyone that's trying to use Percy to make something since that's where all of the real world use case problems that we need to solve will come from.

Absolutely, I'll most probably start on it next week, hopefully then I can give you some useful feedback. The initial state of the app will be very limited, a few pages of content and a form, but after that I'll be adding API endpoints and then a desktop client. In case you're interested, it's called Rise Against Hatred.

[ghost]

I'm now working on a parser for a CSS "like" language, goal is to be fast, maintainable and support scoping while not necessarily being 100% compliant. Do you have any requirements I should consider?

[chinedufn]

Absolutely, I'll most probably start on it next week, hopefully then I can give you some useful feedback. The initial state of the app will be very limited, a few pages of content and a form, but after that I'll be adding API endpoints and then a desktop client. In case you're interested, it's called Rise Against Hatred.

Awesome!! I'm very excited!

Do you have any requirements I should consider?

Not just yet - once I see it I'd be happy to leave any thoughts that come to mind!

[ghost]

I've since tried multiple libraries parsers in order to achieve what I wanted, but as of now have been unable to. I sense a blog post about parsers coming up.

For the css modules crate I'll just implement a parser specific to that crate in Pest. It doesn't need the full CSS spec anyway.

[chinedufn]

Awesome I'm super super excited to see this!!