Magento – How to disable merged CSS and JS

I just did the following and the problem was solved:

bin/magento setup:upgrade

bin/magento indexer:reindex

bin/magento deploy:mode:set production -s

# Here was the secret: run the di:compile after production
bin/magento setup:di:compile  

bin/magento setup:static-content:deploy

In order to achieve this I had to create a plugin for the admin area only and change the methods that read the settings.

Even if you have the possibility to choose different values on default and store view levels, the class that reads these settings values is not using the correct store code, and always using the store view level value.

The solution is to create a module, and add a di.xml for adminhtml area to forcely use the desired settings. The core class responsible for this is Magento\Framework\View\Asset\Config

Let's make a plugin for that:

1. Create the module along with registration.php and etc/module.xml files

2. Create the adminhtml di.xml file

app/code/NameSpace/ModuleName/etc/adminhtml/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Framework\View\Asset\Config">
        <plugin name="mergeminify_asset_config" type="NameSpace\ModuleName\Plugin\View\Asset\Config" />
    </type>
</config>

3. Create the plugin class app/code/[NameSpace]/[ModuleName]/Plugin/View/Asset/Config.php

with the following content:

use Magento\Store\Model\ScopeInterface;
use Magento\Framework\App\Config\ScopeConfigInterface;
use Magento\Framework\App\State;

class Config
{
    protected $_registry;
    /**
     * XML path for CSS files merge configuration
     */
    const XML_PATH_MERGE_CSS_FILES = 'dev/css/merge_css_files';

    /**
     * XML path for JavaScript files merge configuration
     */
    const XML_PATH_MERGE_JS_FILES = 'dev/js/merge_files';

    /**
     * XML path for asset minification adapter configuration
     */
    const XML_PATH_JS_BUNDLING = 'dev/js/enable_js_bundling';

    /**
     * XML path for HTML minification configuration
     */
    const XML_PATH_MINIFICATION_HTML = 'dev/template/minify_html';

    /**
     * @var ScopeConfigInterface
     */
    protected $scopeConfig;

    public function __construct(
        \Magento\Framework\Registry $registry,
        ScopeConfigInterface $scopeConfig
    ) {
        $this->_registry = $registry;
        $this->scopeConfig = $scopeConfig;
    }

    /**
     * Check whether merging of CSS files is on
     *
     * @return bool
     */
    public function afterisMergeCssFiles()
    {
        return (bool)$this->scopeConfig->isSetFlag(
            self::XML_PATH_MERGE_CSS_FILES,
            ScopeInterface::SCOPE_STORE,
            0 // Force default value
        );
    }

    /**
     * Check whether bundling of JavScript files is on
     *
     * @return bool
     */
    public function afterisBundlingJsFiles()
    {
        return (bool)$this->scopeConfig->isSetFlag(
            self::XML_PATH_JS_BUNDLING,
            ScopeInterface::SCOPE_STORE,
            0 // Force default value
        );
    }

    /**
     * Check whether merging of JavScript files is on
     *
     * @return bool
     */
    public function afterisMergeJsFiles()
    {
        return (bool)$this->scopeConfig->isSetFlag(
            self::XML_PATH_MERGE_JS_FILES,
            ScopeInterface::SCOPE_STORE,
            0 // Force default value
        );
    }

    /**
     * Check whether minify of HTML is on
     *
     * @return bool
     */
    public function afterisMinifyHtml()
    {
        return (bool)$this->scopeConfig->isSetFlag(
            self::XML_PATH_MINIFICATION_HTML,
            ScopeInterface::SCOPE_STORE,
            0 // Force default value
        );
    }
}

This way the backend will always use the default value and the frontend will use the store view value