> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weltpixel.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How LESS / CSS Generation works in Pearl Theme & Magento [developer corner]

## Why LESS/CSS generation is needed
**Short answer:** performance & best practice.

Pearl Theme offers many admin options for functionality, layout, and design. Instead of piling overrides on top of Magento’s CSS (the Magento 1 way), Pearl **reuses Magento variables** and **generates LESS dynamically** from your admin settings so it can be merged with Magento’s own LESS **before** CSS is built. This avoids duplicate CSS and keeps output lean.

---

## 1) LESS generation in Pearl Theme

Some modules ship static LESS, while others **regenerate** LESS when options change.

**CLI command:** `php bin/magento weltpixel:less:generate`

**Modules covered:**
* `WeltPixel_FrontendOptions`
* `WeltPixel_CustomFooter`
* `WeltPixel_CustomHeader`
* `WeltPixel_CategoryPage`
* `WeltPixel_ProductPage`
* `WeltPixel_DesignElements`

**Ways to trigger LESS generation**
1. **SSH/CLI:** run `php bin/magento weltpixel:less:generate`
2. **Save module settings in Admin:** saving options for one of the modules above regenerates LESS for that module only (via system config observers).
3. **Cache Management:** click **Re-Generate Pearl Theme LESS/CSS**.

**Store-view specific LESS files created**
* Category Page: `view/frontend/web/css/weltpixel_category_store_STORECODE.less`
* Product Page: `view/frontend/web/css/weltpixel_product_store_STORECODE.less` and `view/frontend/web/css/source/_module.less`
* Custom Header: `view/frontend/web/css/weltpixel_custom_header_STORECODE.less`
* Custom Footer: `view/frontend/web/css/weltpixel_custom_footer_STORECODE.less`
* Frontend Options:  
  `view/frontend/web/css/source/module/_store_STORECODE_extend.less` and `view/frontend/web/css/source/_extend.less`

**Notes**
* Product Page’s extra `_module.less` handles layout options (e.g., moving tabs); files are prefixed internally to target the correct store view only.
* Frontend Options previously acted globally; now `_extend.less` is parsed per store view so settings don’t overwrite each other.
* In multi-store setups Magento’s deploy path is like `/pub/static/versionXXXX/frontend/Pearl/weltpixel_custom/LOCALE/css/styles-l.css` (theme + locale). If multiple store views share the same theme and locale, use **different child theme names or different locales**. See: *How to use Pearl Theme on multiple store views* (inline link): https://support.weltpixel.com/hc/en-us/articles/115003645074-How-to-use-Pearl-Theme-on-multiple-store-views-Important-update-install-instructions
* LESS inclusion is wired via a plugin on `Magento\Framework\View\Page\Config\Reader\Head`.
* To add your own module into the LESS generation, implement the observer used on admin save and register it in `di.xml` inside the **generationContainer** argument. Example:

<type name="WeltPixel\Command\Console\Command\GenerateLessCommand">
  <arguments>
    <argument name="generationContainer" xsi:type="array">
      <item name="WeltPixel_CategoryPage" xsi:type="object">
        WeltPixel\CategoryPage\Observer\CategoryPageEditActionControllerSaveObserver
      </item>
    </argument>
  </arguments>
</type>

---

## 2) CSS generation in Pearl Theme

**CLI command (store-specific):** `php bin/magento weltpixel:css:generate --store=STORECODE`

* Works **only** for Pearl Theme and Pearl child themes.
* Requires the **store code**; if Pearl isn’t active for that store, you’ll get an error.

**What happens under the hood (GenerateCss → processContent)**
1. Deletes preprocessed LESS related to Magento and Pearl from `var/view_preprocessed`.
2. Rebuilds CSS for the target store view and writes **temporary** files `styles-l-temp.css` and `styles-m-temp.css` that import the base `styles-l.less` and `styles-m.less`. These avoid downtime while the final CSS is compiling.
3. Applies gzip compression and/or minification if enabled.

---

## When to regenerate

* After switching to **Production Mode**, run `weltpixel:css:generate --store=...` for every store view that uses Pearl (or use **Cache Management → Re-Generate Pearl Theme LESS/CSS**).
* In **Developer Mode**, after changing admin options for any of the modules listed above, run the LESS/CSS regeneration so changes appear on the frontend.

---

## Quick command recap (safe to copy)

* Generate LESS for all relevant modules: `php bin/magento weltpixel:less:generate`  
* Generate CSS for a store view: `php bin/magento weltpixel:css:generate --store=YOUR_STORE_CODE`

---

By following this workflow you keep CSS output optimal, store-view specific, and consistent across deployments.