Module Setting Custom CSS/JS

Hey team,

Module Custom CSS JS are not getting carried to the app where module is getting embedded.

I.e. custom css to extend width of dropdown for navigation in module, renders correctly.
Previewing said module works correctly.
Embedding module in a different app, width is not carried through.

1 Like

Agreed!

This is a very odd implementation choice. @stefancvrkotic, I had to drop my module css styles in the global css space. "Settings" -> "Advanced" -> "Preloaded CSS"

One of the annoying details you'll have to content with is that the class names for elements in a module will not be the same when you're editing the module directly, compared to when they are imported into an app. When imported, the imported module name is prepended to the class name of the components contained within.

I have to have a global css style that looks like this,

#primaryNavigation1\:\:primaryNavigation1--0_0--trigger,  // this style applies to modules imported into an app
#primaryNavigation1--0_0--trigger { // this style applies when editing the module directly
...
}

What's unfortunate about this implementation is that it requires imported modules have a consistent name across all importing apps, e.g. primaryNavigation1.

Another unfortunate detail is that the class names in edit and preview are not guaranteed to be identical :grimacing:. I ran into an issue where I was trying to style the primary nav icons to use custom graphics, I attempted to use an attribute selector [aria-label='foo'] to correctly match the item with the icon, but the aria-label's are not available in preview mode.

It seems like a reasonable ask to not pollute the global css with module specific styles, and those styles will be included into apps so the user isn't concerned with the importing app's configuration.