Is it possible to add variants to an element that doesn't declare any?

[michaellenaghan]

I would like to add a readable variant to container, like this:

  readable: {
    maxWidth: "50rem",
  },

so that I can do this:

  <div class="container is-readable">
    ...
  </div>

I've seen how preset-ice and preset-mustard declare variants for alerts, badges and buttons. But they can do that because the alert, badge and button elements declare those kinds of variants in advance.

Is it possible to add variants to an element that doesn't declare any in advance?

(Of course, it would be easy to just add the class. I kind of see this as an opportunity to learn something about how the framework works, though.)

[jmjuanes]

You are right, only alert, badge, button and spinner can generate additional variants automatically using the extra keys defined in its configuration (see the table in https://siimple.xyz/elements).

Instead of just adding the class, you can use the layout.container field of the configuration to extend the container element with the styles and modifiers that you need. Your example can be easily generated with the following configuration:

export default {
    // ...other configuration
    layout: {
        container: {
            // ...other container styles
            "&.is-readable": {
                maxWidth: "50rem",
            },
        },
    },
};

The & parent selector works like in SASS (https://sass-lang.com/documentation/style-rules/parent-selector), so in this case will select the container class.

I have created a playground with this example.

[michaellenaghan]

Ah, interesting, thank you!