[FR] Load all module yamls in /local/bubble

[StaleLoafOfBread]

Today (v2.5.0-beta.5) it only loads bubble-modules.yaml in /local/bubble. This will lead to a bloated yaml file which is difficult to manage as the number of modules increases.

I think this is the line that needs updating

Bubble-Card/src/tools/style-utils.js

Lines 14 to 18 in ada9f29

	stylesYAML = loadYAML([
	"/local/bubble/bubble-modules.yaml",
	"/hacsfiles/Bubble-Card/bubble-modules.yaml",
	"/local/community/Bubble-Card/bubble-modules.yaml",
	]);

[Clooos]

Hi! I personally fold my lines for better readability, but this could be an additional option for anyone who want to classify these differently.

Thank you for the idea! I will try to implement that for the next (and hopefully last) beta 🤞

[StaleLoafOfBread]

I can make a separate post, possibly a bug report is most appropriate but thought I'd mention it here as this is about modules being loaded. The default module only gets loaded if the modules property is missing or if default is listed in it. I think it should have its own enable_default_module bool that assumes true if not defined. I keep forgetting to add default when defining via yaml (well js because custom strategy).

I am also curious, it seems module code is applied after the card's local styles. Is that the intended behavior? I would assume that a card's local settings would get applied last (and therefore take priority as far as CSS is concerned) because you are purposely customizing this specific card.

Happy to turn both of these in bug reports for tracking purposes if you'd like.

[Clooos]

Thank you for the feedback. I've just added support for this in the bubble-modules.yaml:

default:
    !include default.yaml

This will import the config from /local/bubble/default.yaml. This is probably the best approach, and that match the Home Assistant YAML possibilities.

For the folder name, HACS can't write folders/files directly in the local path, so I'm not concerned about a conflict possibility, I will let it this way to not add a breaking change for the beta users.

Edit: And for the default key, there is no good way to add a global boolean into custom cards, I really think that my approach is the best one.

And all custom styles/templates/modules are handled in a separate style element at a higher level, I'm not sure to understand what you mean by that.

[StaleLoafOfBread]

And all custom styles/templates/modules are handled in a separate style element at a higher level, I'm not sure to understand what you mean by that.

In the below example, I would expect that the icons be

• white (nothing special applied)
• red (due to module)
• blue (due to card's styles attribute overriding the module)
• blue (due to card's styles attribute)

But instead it is:

• white (nothing special applied)
• red (due to module)
• red(due to module overriding card's styles attribute)
• blue (due to card's styles attribute)

In css if a style is redefined (assuming same selector criteria) then the last definition is used. So in this case, the card must be applying the definitions from the styles attribute and then appending on the modules. I would expect that any styles placed into a card would override any modules because that code was written specifically for that card as opposed to a generically written module. I can see a use case where a module is nearly what someone wants then uses styles to tweak it into perfection.

Checking in the HTML, I can see the styles are in the styles from the card then module

Apologies if my terminology is off, I do not often use CSS.

Module Code:

default:
  name: Default
  description: Empty and enabled by default. Move your styles/templates here to apply them to all cards.
  code: |
    ha-icon,
    .icon {
        color: red;
    }

Dashboard Code:

type: grid
cards:
  - type: custom:bubble-card
    card_type: separator
    modules: []
    button_type: name
    name: No modules nor styles
    icon: mdi:home-assistant
  - type: custom:bubble-card
    card_type: separator
    modules:
      - default
    button_type: name
    name: Only has "default" module
    icon: mdi:home-assistant
  - type: custom:bubble-card
    card_type: separator
    modules:
      - default
    button_type: name
    name: Has default module and card specific style
    icon: mdi:home-assistant
    styles: |2
          ha-icon,
          .icon {
              color: blue;
          }
  - type: custom:bubble-card
    card_type: separator
    modules: []
    button_type: name
    name: Only has card specific style
    icon: mdi:home-assistant
    styles: |2
          ha-icon,
          .icon {
              color: blue;
          }

Though this is getting away from the original request of this discussion. Happy to create a new thread to track this if its a change you're open to.

[StaleLoafOfBread]

I also just tested if the order in which the modules are listed matter. They apply as I would expect, aligned with how CSS works, such that the last definition takes priority.

type: grid
cards:
  - type: custom:bubble-card
    card_type: separator
    modules:
      - yellow
      - purple
    button_type: name
    name: Yellow then purple
    icon: mdi:home-assistant
  - type: custom:bubble-card
    card_type: separator
    modules:
      - purple
      - yellow
    button_type: name
    name: Purple then yellow
    icon: mdi:home-assistant

yellow:
  name: yellow
  description: yellow
  code: |
    ha-icon,
    .icon {
        color: yellow;
    }

purple:
  name: purple
  description: purple
  code: |
    ha-icon,
    .icon {
        color: purple;
    }

[StaleLoafOfBread]

Actually, I made a PR for this. Lets discuss there :) #1290