Where are the GlobalStyles hide on the client side?

Widgets
1

Hi,

In the A12 Client, GlobalStyles is imported from “@com.mgmtp.a12.widgets/widgets-core/lib/theme/base/global-styles” and the global styles are defined there. When I look at the output of the HTML in the web devtools, there is a style tag in the head tag without any content:

<style data-styled="active" data-styled-version="5.3.11"></style>

Where are the styles defined in GlobalStyles hiding? The “base” class is in the root div, and GlobalStyles defines the styles for the “base” class. Theoretically, the styles for the “base” class should appear in the style tag, but the style tag is empty.

Are these styles rendered on the server side?

Kind regards

2

Hi from the Widgets team,

This behavior is expected when using styled-components (version 5.x and above).

Although you see an empty <style data-styled="active" ...></style> tag in the <head>, the styles defined in GlobalStyles are actually injected dynamically at runtime via JavaScript using the browser’s CSS Object Model (CSSOM) API. In other words:

  • styled-components inserts CSS rules directly into the browser’s stylesheet objects instead of injecting plain CSS text inside the <style> tag.
  • Consequently, the <style> tag may appear empty when inspected in the DevTools Elements panel.
  • Despite this, the styles are fully present in the browser’s memory and correctly applied to elements with the corresponding classes (such as .base class).

These styles are generated and applied during React’s client rendering process rather than on the server.

Kind regards

3

Yesterday I have tried to import GlobalStyles into storybook (which is an environment to develop components) without A12 Client due to project which I am working on. I think it is related to the compiler.

As the builder was default webpack builder, the style tag are filled with more than 8k styles which caused the whole site stucking. After I switched from webpack5 to vite builder, the style tag was then empty just like in A12 Client. Styled-components has by both compilers version 5.3.11.

I also see that A12 Client uses webpack, but it’s builder maybe something else than the default webpack builder in storybook, or A12 uses some plugins to accelerate the runtime performance.

But thanks to your answer! :slight_smile:

4

Hi @danting-misty-mist , with styled-components v5, a environement flag need to be set to ensure best performance: SC_DISABLE_SPEEDY: false
This is already included in A12 default setup.