3. 🧱 Generating Inline CSS: Advanced Options

This section covers the advanced settings of the JaJuMa Hyvä Inline CSS extension that give you granular control over the CSS generation process.
These tools are crucial for handling dynamic content, managing third-party styles, and optimizing the caching strategy for maximum efficiency.

3.1 📜 Manual Safe List: Protecting Dynamic Classes

The Manual Safe List is the most direct way to solve the problem of missing styles for dynamic content - content loaded or modified by JavaScript after the initial HTML has been delivered (e.g., sliders, pop-ups).

Why it matters:
This feature gives you precise control to protect critical classes that are added to the DOM by JavaScript.
By adding them to the safe list, you guarantee they will be included in the final inline stylesheet, preventing any "flash of unstyled content" for your interactive components.

How to use it:
Enter the CSS class names into the text field, separated by a single space.
Do not include the leading dot (.).

• Example:
  A common use case is for JavaScript-powered sliders.
  The default configuration includes classes for the popular glider.js library:
  glider glider-track glider-slide drag draggable glider-dots

💡 Pro Tip:
To find which classes to add, use your browser's developer tools.
Inspect an interactive element (like an active slider) on your storefront and observe the classes that are added to the HTML when you interact with it.
Any class that appears dynamically and is not present on the initial page load is a candidate for the Safe List.

3.2 📄 Additional Files to Scan: For Complex Components

For more complex components, the Additional Files to Scan setting offers a more powerful and developer-friendly alternative to the Manual Safe List.

Why it matters:
Instead of listing individual class names, you can tell the extension to scan the source files of your components
(.phtml or .js) directly.
This is a more robust and maintainable approach.
When you update your component's code, the extension will automatically pick up any new classes during its next scan, without requiring you to manually update the configuration.

How to use it:
Enter the paths to the relevant files, with one file path per line.
The paths should be relative to your Magento root directory.

• Example:
  app/design/frontend/Vendor/theme/Magento_Theme/templates/custom-slider.phtml
app/design/frontend/Vendor/theme/web/js/alpine-component.js

3.3 🧰 Including Additional CSS Sources

Collect All CSS Files:
A common issue in Magento is that third-party modules add their own, separate render-blocking CSS files.
Enabling this option empowers the extension to actively find these additional stylesheets on the page, merge them into the main generation process, and include their necessary styles in the final inline block.
This is crucial for taming third-party CSS bloat and ensuring a unified, fast frontend.

3.4 🧮 Fine-Tuning the Caching Strategy

Classes Excluded From Hashing:
The extension uses hash values to identify pages that use the same collection of styles, allowing it to reuse a cached CSS block for multiple pages.
To make this work efficiently, classes that make styles unique on many pages (like product or category-specific classes) should be excluded from the hash calculation.
By default, the extension excludes classes that start with 'category' or 'product', contain uppercase letters, or have multiple numeric characters.
You can add your own patterns here (separated by a space) if you have custom classes that make pages unique (e.g., classes based on SKU).

3.5 📞 Need Help?

Still have questions or need help with your setup? Our expert team is here to assist.
Please don't hesitate to contact our support team for personalized assistance.