<style> tag

[Sarctiann]

I didn't find an example of defining style for a component scope, is this possible?

I want to create components with scoped-style classes

[kkinder]

I looked into how Vue does that and it seems it basically parses out the css and then prefixes the class names to "scope" them. That seemed like an awful lot of work and code for a feature that (at least to me?) seemed niche.

What I have been doing is just using inline styles like this.

class MyComponent(Component):
    lg_style = "font-size: 200%"
    def populate(self):
        t.span("Hello", style=self.lg_style)

Admittedly that's not quite the same. I'd be open to other ideas? The issue is mostly that parsing css isn't easy in python. Especially micropython. 😬

[Sarctiann]

Yes, I think if PupPy can create css classes from a dict, it could prefix them before applying them. Then there would be no need to parse css, as it would be a one-way conversion. Finally, css files would still be the responsibility of the developer and not the framework.

In fact, you could start with something simple so you could create classes and then apply them via classes or class_name instead of using the inline version with style

and then you could move forward in a more convenient way similar to scss:

    ...
    def scoped_styles(self):
        return dict(
            container= dict(
                display= "flex",
                flex_direction= self.flex_dir
                _hover= dict(
                    background_color= "#AAFFFF"
                )
            )
        )

    def populate(self):
        with t.div(classes=[self.styles["container"]]):
            t.h1("Welcome to PuePy")
    ....

[kkinder]

Hmmm... You would miss out on some of the more powerful css selectors, as well as just being able to select on an element. Eg, suppose you just want all the buttons in your component to be bold, you can't do button { font-size: bold }.

I did have another thought, which is that we could pull in a JavaScript CSS parsing library. Or, I'm not sure how efficient this would be, but I think you could actually create a real style tag, add it to the DOM, pull out the object after the browser parses it, then delete the style tag. You would get "free" parsing, but that could cause a real performance problem.

I'm inclined to maybe add something you're suggesting as a "contrib" feature, or otherwise imply that it might change...

Any ideas on how to handle non-class styles (element styles, etc)?

[Sarctiann]

I would rather keep JS out of the party as much as possible personally. (Then PuePy consumers can do it on their own if they need it)

I'm not sure if I understand but I can paraphrase what I said before, I think it could be nice to have 3 ways to style everything:

POV style declaration:

• Regular css files (global)
• css classes generated inside the component (local scope)

  I only can think of using prefixes to achieve that

• with style directives (to pass to the inline style prop)

POV component declaration:

• classes | class_name (same as now) -> can get any global-declared css class or any "in-component" generated class

  something like:
  self.styles = {original_key: prefixed_key for original_key, prefixed_key in self._generate_scoped_styles()}

• style: string | dict -> the inline style directives.

Make sense?

[kkinder]

I'm not sure I understand this part

self.styles = {original_key: prefixed_key for original_key, prefixed_key in  self._generate_scoped_styles()}

Doesn't that just make the original dict?

[Sarctiann]

self.styles = {original_key: prefixed_key for original_key, prefixed_key in self._generate_scoped_styles()}

Sorry, that was just a "equality".

What I mean is that inside the component, you should generate a dictionary (say self.styles) containing the names we gave to the classes (in the scoped_styles() function) so that you can use it when passing the classes to the tags in the populate() function (similar to how it happens in css.modules)

But as I said in my last comment, this might not be necessary, since you could perhaps generate a unique "hashname" for the component, and then combine it with the selectors defined in scoped_styles() (I also left a couple of examples of that) and in that case, you could directly pass the names to the classes and class_name attributes.

[Neon22]

When I started using the ltk, I thought that having jquery as a dependence was possibly a backward step and I would rather have had a python only implementation. However, as I used it more, I came to understand that the jquery approach of standardising all access to just two methods was an advantage. Selectors were standardised, some pseudos added, which were very useful. Overall I think it was quite a good idea for the ltk to follow this approach. One day maybe we'll have a similar pyscript implementation. Pyweb may eventually achieve something like this.

I mention this ask you to consider that maybe there is a lib that you might consider that has already resolved an efficient implementation to solve this css issue.

[kkinder]

I don't know what features of jquery ltk uses, but FWIW, you actually get a lot of what jquery offers in terms of querying with just document.querySelector. You can't do bulk mutations with it, or that kind of thing, but you can find any element by a jquery-like selector very quickly.

The need for us though ends up being a little different. PuePy doesn't do bulk mutations based on query selectors; it just redraws what it wants the DOM to be and tells Morphdom to figure out the difference. Thus, we don't really need anything like jquery.

[Sarctiann]

Hmmm... You would miss out on some of the more powerful css selectors, as well as just being able to select on an element. Eg, suppose you just want all the buttons in your component to be bold, you can't do button { font-size: bold }... (@kkinder)

We could solve this by generating a common "hash class name" and applying it to every tag that belongs to the component, i.e.

...
    def scoped_styles(self):
        return dict(
            _button= dict(
                border-radius= "5px",
            ),
            container= dict(
                display= "flex",
                flex_direction= self.flex_dir,
                _hover= dict(
                    background_color= "#AAFFFF",
                )
            )
        )

    def populate(self):
        with t.div(classes=[self.styles["container"]]):
            ...
...

Then in css

// generated CSS by the component

// These styles only apply to buttons with the component's unique class identifier
button.some_unique_class_component {
    border-radius: 5px;
}

// Then for the generated "container" class we might not need a new prefix
some_unique_class_component.container {
    display: flex;
    flex-direction: column;
}

some_unique_class_component.container:hover {
    background-color: #AAFFFF;
}

[kkinder]

Well, you'd have to apply a custom class to every element a class generates. Though maybe that's ok?

[kkinder]

It might be ok.

This morning I was tinkering a little with a syntax like this:

class Card(Component):
    ...
    class style:
        card = """
            margin: 1em;
            padding: 1em;
            background-color: #efefef;
            border: solid 2px #333;
        """

One issue is how to refer to these. Eg, this would be convenient:

class Card(Component):
    ...
    class style:
        scoped = True
        card = """
            margin: 1em;
            padding: 1em;
            background-color: #efefef;
            border: solid 2px #333;
        """
    default_classes = [style.card]

    def populate(self):
        t.div(classes=["foo", self.style.card])

[kkinder]

Here's what I came up with so far in a working prototype. My prototype is generating some imperfect css classes at runtime, but I think strongly this is the direction to take:

#
# These can be defined at a class level, or at a top-level
container_class = ScopedClass(
    padding="1em",
    margin="1em",
    border="solid 2px #333",
    background_color="#efefef",
)


@t.component()
class Message(Component):
    # Class-level ones are fine
    title_class = ScopedClass(
        color="#333",
        font_size="1.5em",
    )

    # You can use the ScopedClass instances directly
    default_classes = [container_class]

    def populate(self):
        # You can use the ScopedClass instances inside populate() too
        with t.h2(classes=[self.title_class]):
            t.h1("Title")

There are several benefits here:

1. It's extremely simple. The ScopedClass() (name might change) class just generates a class name based on its own id(), so it can be reused easily and just gets auto-inserted in the document css.
2. You can easily just create a styles python file with ScopedClass definitions to be used in multiple places, not just inside a class.
3. I like the syntax quite a bit.

What this doesn't solve is how you might apply a style to all buttons in a component. I'll give that some thought.

[Sarctiann]

It looks good to me 😀

[kkinder]

I haven't updated the docs yet, and the next couple of weekends I have family stuff, but I thought I'd let you know I merged this and pushed a release with it. In 0.4.5, you can see it in the components.py example here:

https://github.com/kkinder/puepy/blob/release/0.4.5/examples/tutorial/06_components/components.py

My general thinking is that the way the docs work needs to be redone a bit. This should be its own chapter, but I'll want to insert it somewhere and maybe rethink the flow of the whole tutorial so each chapter builds on the last a bit.

At any rate, if you upgrade to 0.4.5, you can try this out.

[Sarctiann]

Awesome! Thank you Ken!