[FEATURE]: CSS supercharge for Google-Bot and robustness

[migbash]

Does a duplicate issue exist?

• I have searched the existing issues

🤔 Is feature request related to a problem? Please describe the problem.

Google-Bot (Mobile-Friendly Test) is failing due to unknown domain restrictions, but theorised to be due to the domain rating. Requires a solution to get the website visibility on Google and better Google Rating.

This issue proposes the necessary solutions to get this issue of type wontfix to be fixed.

In addition, it's outlined the steps, solutions, resources necessary to get this feature working.

📝 Feature Request Description

This feature aims to tackle the bug/wontfix issue(s):

• Load CSS and JS First, PRELOAD #1278
• 🔥 Google unable to index pages #1231

As explained previously in the latest issue #1278, trouble arises every-time the Google-Bot aims to access the Production version website, due to anomalies in Goggle-Bot and/or it's underlying domain rating categorisation.

---

🟩 Solution

By:

• Altering the bundle process to generate a single CSS chunk from all .svelte files, and,
• Supercharging the CSS to take the main role of handling the page layout components show/hide logic of different device viewports changes - moving it away from the current JS implementation.

We can guarantee the valid CSS and style is shown to the user, regardless of wether they have JS enabled or not, and thus solving the Google-Bot issue once and for all, as CSS can be dumped into a single file for the entire project.

---

📑 In detail

The implementation of the single CSS chunk dump for a sveltekit project has been tackled, a valid solution has been implemented, and stashed.

This feature focuses on the implementation of the CSS Supercharge, to move away from Js the logic of device viewport handling and layout change. Nothing else.

In this feature the following changes are expected:

1. CSS will be enriched with many more @media queries, and its inner block code, to show/hide specific sections of the component/page, depending on user device viewport and device width.

<style>

[...]

@media only screen and (min-width: 726px) 
{
  div#show-on-mobile
  {
    display: none;
  }

[...]

</style>

Note
This logic was not implemented from the start, due to the fact that it was simpler to manage viewport with JS and use variables to also trigger functions/logic for the svelte component when device viewport/width changed in some cases, where it was necessary to confirm user device before executing a function. This can now be solved with 2..

2. CSS will be enriched in some .svelte component, to adjust a unique CSS Variable depending on user device viewport/width. For example, as illustrated below:

📌 global.css

:root 
{
  --header-is-mobile: 'true';
}

📌 component-A.svelte

<style>

@media screen and (max-width: 520px) 
{
   :root 
   {
      /*
      ### NOTE:
      ### updates global variable, for target viewport/width 
      */
      --header-is-mobile: 'false';
   }
}

</style>

This change can then be picked up by the following code logic in JS (if JS is available on the browser, and page resources are correctly loaded).

📌 component-A.svelte

[...]

let value = 'true';

const styleObserver = new MutationObserver
(
  (mutations) => 
  {
    const currentValue = mutations[0].target.style.getPropertyValue('--var1');

    if (currentValue !== value) 
    {
      // ### NOTE:
      // ### The css-variable has changed
      value = currentValue;
    }
});

styleObserver.observe
(
  document.documentElement, 
 {
    attributes: true,
    attributeFilter: ['style'],
  }
);

[...]

---

Note
Please refer to the ➕ Further context and resources for links and sources to above code and further information.

➕ Further context and resources (cummulative)

📚 Resources

• 🔗 StackOverflow | Modify CSS Variables by Media Queries
• 🔗 Mozilla | MutationObserver
• 🔗 StackOverflow | Listen to css variable change
• 🔗 Google Community | Page Couldn't Load resources
• 🔗 StackOverflow | Bundle in Vite CSS + JS into a single file