Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS Modules inspired by ReactJS #211

Open
Archmonger opened this issue Jan 11, 2024 · 2 comments · May be fixed by #227
Open

CSS Modules inspired by ReactJS #211

Archmonger opened this issue Jan 11, 2024 · 2 comments · May be fixed by #227

Comments

@Archmonger
Copy link
Contributor

Archmonger commented Jan 11, 2024

Current Situation

There is built-in method of directly tying a CSS file to a component

Proposed Actions


Design Idea: Apply in-line styles via Python cssselect

We could parse the CSS document using lxml.cssselect and potentially add the styles in-line. Would need to generate some sort of VDOM-LXML compatibility layer though. Maybe we store our VDOM as an attribute on each LXML node?


Design Idea: Apply in-line styles via Python homebrewed VDOM selector engine

It might be make sense (from a performance standpoint) to homebrew a VDOM-compatible CSS selection engine... There are a couple we can take inspiration from: vtree-select, cssauron. This would be a pretty large undertaking, and gets really tricky with all of the CSS level 3 selectors.


Design Idea: Leverage django_css

Add a css_module decorator that loads a stylesheet using django_css(..., only_once=True) (see here: #194).

By default, it will attempt to load the Django static file named <REACTPY_STYLESHEET_SUBDIR>/<COMPONENT_DOTTED_PATH>.css. But the user will be able to override the path using positional args.

Will need a settings.py configuration setting called REACTPY_STYLESHEET_SUBDIR. Additionally, it makes sense for a manual override to exist within the decorator css_module(subdir="...") for library maintainers to use.

This doesn't really "tie" a piece of CSS to a component. It only ties the load time together.


Design Idea: Apply in-line styles via JavaScript (client sided)

It's also possible for us to instead apply the inline styles client-sided, via some kind of JavaScript. There appears to be a package that does this.

This would be pretty janky in terms of loading behavior.

@Archmonger
Copy link
Contributor Author

Blocked on #194

@Archmonger
Copy link
Contributor Author

Archmonger commented Feb 1, 2024

Unmarking this as blocked, since a better approach is likely going to involve inline styles.

@Archmonger Archmonger linked a pull request Feb 10, 2024 that will close this issue
4 tasks
@Archmonger Archmonger changed the title css_module decorator ReactJS-style CSS Modules Jun 19, 2024
@Archmonger Archmonger changed the title ReactJS-style CSS Modules CSS Modules inspired by ReactJS Jun 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant