Étiquette : js

[Webpack Encore] Optimiser vos bundles CSS avec PurgeCSS et JS et le tree shaking

03/05/2021 / admin

Testé fonctionnel Webpack Encore v1.1.2 (tournant sous Webpack v5.34.0).

Utiliser PurgeCSS avec Webpack Encore

Source: blog de PHP Roberto – Integrating Purgecss with Symfony Encore (version PDF: phproberto.com-Integrating Purgecss with Symfony Encore).

Le tree shaking avec Webpack Encore

Quelques ressources en ligne:

Tree shaking (sur survivejs.com)

Oui, le tree shaking est activé par défaut en mode « production » dans Webpack Encore. C’est juste que la documentation officielle sur symfony.com oublie de le mentionner (grrr…)!

Vous pouvez effectuer le test qui est décrit ici (aka « le tree shaking dans Webpack Encore expliqué en 30 secondes ») pour vous en assurer.

Pour exemple, si vous avez les deux fichiers suivants:

// src/imports.js
export function testA() {
  console.log('Test A');
}

export function testB() {
  console.log('Test B');
}

// src/imports.js

export function testA() {

console.log('Test A');

}

export function testB() {

console.log('Test B');

}

// src/index.js (entry point)
import { testA } from './imports';

testA();

// src/index.js (entry point)

import { testA } from './imports';

testA();

Exécuter la commande yarn encore dev devrait générer quelque chose de similaire à ceci:

/***/ "./src/imports.js":
/*!************************!*\
  !*** ./src/imports.js ***!
  \************************/
/*! exports provided: testA, testB */
/*! exports used: testA */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony export (immutable) */ __webpack_exports__["a"] = testA;
/* unused harmony export testB */
function testA() {
  console.log('Test A');
}

function testB() {
  console.log('Test B');
}

/***/ }),

/***/ "./src/imports.js":

/*!************************!*\

!*** ./src/imports.js ***!

\************************/

/*! exports provided: testA, testB */

/*! exports used: testA */

/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";

/* harmony export (immutable) */ __webpack_exports__["a"] = testA;

/* unused harmony export testB */

function testA() {

console.log('Test A');

}

function testB() {

console.log('Test B');

}

/***/ }),

Cependant, en exécutant la commande yarn encore production le commentaire /* unused harmony export testB */ présent avec la précédente commande sera pris en compte par UglifyJs qui va en conséquence supprimer l’export en relation lors de la phase de minification. Dans ce cas, on ne devrait pas retrouver la chaîne de caractère « Test B » dans le fichier généré:

!function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/",t(t.s="lVK7")}({dxJD:function(e,t,n){"use strict";function r(){console.log("Test A")}t.a=r},lVK7:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n("dxJD");Object(r.a)()}});

Activer les commentaires `/* unused harmony export */` en développement avec le paramètre `config.optimization.usedExports = true;`

Ceci vous permettra de vérifier avec du code humainement lisible quels sont les parties de votre code qui ne sont pas exploitées et qui seront supprimées dans le bundle minifié de production.

Tout à la fin de votre fichier webpack.config.js:

[...]
;

// fetch the config, then modify it!
const config = Encore.getWebpackConfig();

config.optimization.usedExports = true;

// export the final config
module.exports = config;
// was:
// module.exports = Encore.getWebpackConfig();

[...]

;

// fetch the config, then modify it!

const config = Encore.getWebpackConfig();

config.optimization.usedExports = true;

// export the final config

module.exports = config;

// was:

// module.exports = Encore.getWebpackConfig();

Vous pouvez tout-à-fait laisser cette config activée. Elle ne portera pas préjudice au poids final de votre build de production.

[Webpack Encore] Résoudre les problèmes d’imports et de sous-imports de composants JS à l’utilisation de frameworks comme UiKit ou Foundation 6

10/03/2021 / admin

Note: vous pouvez vous référer à l’article: [Webpack Encore] Utiliser la méthode addAliases pour résoudre les problèmes de sous-imports de fichiers sass/scss à l’utilisation de frameworks comme UiKit ou Foundation 6 pour résoudre la même question côté CSS.

Sources:

Module not found: Error: Can’t resolve ‘uikit-util’ #3399

Erreur: « ./node_modules/uikit/src/js/api/boot.js » contains a reference to the file « uikit-util ».

Utiliser la méthode addAliases() de Webpack Encore pour créer un alias vers le chemin de référence du fichier non trouvé dans node_modules. Dans le fichier webpack.config.js:

const path = require('path');

[...]

Encore
    .addAliases({
        'uikit-util': path.resolve(__dirname, './node_modules/uikit/src/js/util')
    })

[...]

const path = require('path');

[...]

Encore

.addAliases({

'uikit-util': path.resolve(__dirname, './node_modules/uikit/src/js/util')

})

[...]

Etendre la configuration de Webpack Encore pour faciliter la surchage et l’écrasement de fichiers JS

Home / Documentation / Frontend / Advanced Webpack Config (version 5.2)
Webpack – Resolve (webpack v5.26.3)

Dans le fichier webpack.config.js:

const Encore = require('@symfony/webpack-encore');

Encore
    // Ici, toute la config Webpack Encore...
;

// fetch the config, then modify it!
const config = Encore.getWebpackConfig();

// add an extension
config.resolve.modules = ['assets', 'node_modules'];
// console.log(config);

// export the final config
module.exports = config;
// was: module.exports = Encore.getWebpackConfig();

const Encore = require('@symfony/webpack-encore');

Encore

// Ici, toute la config Webpack Encore...

;

// fetch the config, then modify it!

const config = Encore.getWebpackConfig();

// add an extension

config.resolve.modules = ['assets', 'node_modules'];

// console.log(config);

// export the final config

module.exports = config;

// was: module.exports = Encore.getWebpackConfig();

Ici, Webpack va d’abord chercher le fichier JS dans le dossier assets. Si il ne le trouve pas, il va se rabattre sur le dossier node_modules.

Ajouter un console.log(config); vous permettra de visualiser la config au format JSON dans votre console.

Importer uniquement une sélection de modules issus d’un framework (et pas tout le framework)

Dans le fichier JS qui sert de point d’entrée à Webpack (dans mon exemple assets/app.js):

// UIkit
import UIkit from './uikit';

// components can be called from the imported UIkit reference
UIkit.notification('Hello world.');

// UIkit

import UIkit from './uikit';

// components can be called from the imported UIkit reference

UIkit.notification('Hello world.');

Dans le fichier JS qui sert à importer uniquement les modules voulus (dans mon exemple assets/uikit.js):

import UIkit from 'uikit/dist/js/uikit-core';
// import Countdown from 'uikit/dist/js/components/countdown';
// import Filter from 'uikit/dist/js/components/filter';
// import Lightbox from 'uikit/dist/js/components/lightbox';
// import LightboxPanel from 'uikit/dist/js/components/lightbox-panel';
import Notification from 'uikit/dist/js/components/notification';
// import Parallax from 'uikit/dist/js/components/parallax';
// import Slider from 'uikit/dist/js/components/slider';
// import SliderParallax from 'uikit/dist/js/components/slider-parallax';
// import Slideshow from 'uikit/dist/js/components/slideshow';
// import Sortable from 'uikit/dist/js/components/sortable';
import Tooltip from 'uikit/dist/js/components/tooltip';
// import Upload from 'uikit/dist/js/components/upload';

import Icons from 'uikit/dist/js/uikit-icons';

UIkit.use(Icons);

// UIkit.component('countdown', Countdown);
// UIkit.component('filter', Filter); // new
// UIkit.component('gridParallax', GridParallax);
// UIkit.component('lightbox', Lightbox);
// UIkit.component('lightboxPanel', LightboxPanel); // new
UIkit.component('notification', Notification);
// UIkit.component('parallax', Parallax);
// UIkit.component('slider', Slider); // new
// UIkit.component('sliderParallax', SliderParallax); // new
// UIkit.component('slideshow', Slideshow);
// UIkit.component('sortable', Sortable);
UIkit.component('tooltip', Tooltip);
// UIkit.component('upload', Upload);

export default UIkit;

import UIkit from 'uikit/dist/js/uikit-core';

// import Countdown from 'uikit/dist/js/components/countdown';

// import Filter from 'uikit/dist/js/components/filter';

// import Lightbox from 'uikit/dist/js/components/lightbox';

// import LightboxPanel from 'uikit/dist/js/components/lightbox-panel';

import Notification from 'uikit/dist/js/components/notification';

// import Parallax from 'uikit/dist/js/components/parallax';

// import Slider from 'uikit/dist/js/components/slider';

// import SliderParallax from 'uikit/dist/js/components/slider-parallax';

// import Slideshow from 'uikit/dist/js/components/slideshow';

// import Sortable from 'uikit/dist/js/components/sortable';

import Tooltip from 'uikit/dist/js/components/tooltip';

// import Upload from 'uikit/dist/js/components/upload';

import Icons from 'uikit/dist/js/uikit-icons';

UIkit.use(Icons);

// UIkit.component('countdown', Countdown);

// UIkit.component('filter', Filter); // new

// UIkit.component('gridParallax', GridParallax);

// UIkit.component('lightbox', Lightbox);

// UIkit.component('lightboxPanel', LightboxPanel); // new

UIkit.component('notification', Notification);

// UIkit.component('parallax', Parallax);

// UIkit.component('slider', Slider); // new

// UIkit.component('sliderParallax', SliderParallax); // new

// UIkit.component('slideshow', Slideshow);

// UIkit.component('sortable', Sortable);

UIkit.component('tooltip', Tooltip);

// UIkit.component('upload', Upload);

export default UIkit;

Ici, j’importe uniquement les modules notification, tooltip et uikit-icons. Le fichier généré par webpack pour le front ne contiendra pas le code des autres modules du framework UIkit.

[Magento 2] Utiliser Knockout JS pour ajouter un message dans le minicart lorsque ce dernier est vide

29/01/2021 / admin

Dans le fichier de surcharge app/design/frontend///Magento_Checkout/web/template/minicart/content.html, immédiatement sous la condition:

<if args="getCartParam('cart_empty_message')">
    <p class="minicart empty text" text="getCartParam('cart_empty_message')"/>
    <div class="actions">
        <div class="secondary">
            <a class="action viewcart" data-bind="attr: {href: shoppingCartUrl}">
                <span translate="'View and Edit Cart'"/>
            </a>
        </div>
    </div>
</if>

</a>

</div>

</if>

…ajouter la nouvelle condition:

<ifnot args="getCartParam('cart_empty_message')">
    <p class="minicart empty text"
       translate="'Why not give a couple of our fresh arrivals a try ?'"
    />
    <div class="minicart-wrapper-bottom-actions">
        <a class="btn-plain btn-has-icon-right" data-bind="attr: {href: shoppingCartUrl}">
            <span translate="'Add some products'" />
            <svg viewbox="0 0 100 100" class="icon icon-shopping-basket">
                <use xlink:href="#icon-shopping-basket"></use>
            </svg>
        </a>
    </div>
</ifnot>

<p class="minicart empty text"

translate="'Why not give a couple of our fresh arrivals a try ?'"

</svg>

</a>

</div>

</ifnot>

[Magento 2] Etendre un composant JS natif

07/12/2020 / admin

Testé fonctionnel Magento 2.4. Source: Extending Magento 2 default JS components. Version PDF – inchoo.net-Extending Magento 2 default JS components.

Etendre le composant UI Tabs pour ajouter un effet de bordure animée sous les onglets:

app/design/frontend/MyVendor/mytheme/web/js/tabs-custom.js

define([
        'jquery',
        'jquery-ui-modules/widget',
        'jquery-ui-modules/core',
        'mage/mage',
        'mage/collapsible'],
    function($){
        $.widget('custom.tabs', $.mage.tabs, {
            options: {
                indicator: false
            },
            _create: function () {
                // IF NO options ARE POSSIBLE:
                // if ( $(".items.has-indicator").length > 0 ){
                //     this._addIndicator();
                // }
                if (this.options.indicator) {
                    this._addIndicator();
                }
            },
            _addIndicator: function () {
                var $menu = $(".items.has-indicator"),
                    indicator = $('<span class="indicator"></span>');

                $menu.append(indicator);

                position_indicator($menu.find("li.current"));

                setTimeout(function(){indicator.css("opacity", 1);}, 500);
                $menu.find("li").mouseenter(function(){
                    position_indicator($(this));
                });
                $menu.find("li").mouseleave(function(){
                    position_indicator($menu.find("li.current"));
                });

                $(window).on('resize', function(){
                    position_indicator($menu.find("li.current"));
                });

                function position_indicator(ele){
                    var left   = ele.position().left,
                        width  = ele.outerWidth(),
                        top    = ele.position().top,
                        height = ele.outerHeight();

                    if(window.matchMedia("(max-width:890px)").matches){
                        indicator.stop().animate({
                            top: top,
                            height: height,
                            width: 3,
                            left: 0
                        });
                    }
                    else{
                        indicator.stop().animate({
                            left: left,
                            width: width,
                            height: 3,
                            top: "100%"
                        });
                    }
                }
            }
        });
        return $.custom.tabs;
    });

define([

'jquery',

'jquery-ui-modules/widget',

'jquery-ui-modules/core',

'mage/mage',

'mage/collapsible'],

function($){

$.widget('custom.tabs', $.mage.tabs, {

options: {

indicator: false

_create: function () {

// IF NO options ARE POSSIBLE:

// if ( $(".items.has-indicator").length > 0 ){

// this._addIndicator();

// }

if (this.options.indicator) {

this._addIndicator();

}

_addIndicator: function () {

var $menu = $(".items.has-indicator"),

indicator = $('<span class="indicator"></span>');

$menu.append(indicator);

position_indicator($menu.find("li.current"));

setTimeout(function(){indicator.css("opacity", 1);}, 500);

$menu.find("li").mouseenter(function(){

position_indicator($(this));

});

$menu.find("li").mouseleave(function(){

position_indicator($menu.find("li.current"));

});

$(window).on('resize', function(){

position_indicator($menu.find("li.current"));

});

function position_indicator(ele){

var left = ele.position().left,

width = ele.outerWidth(),

top = ele.position().top,

height = ele.outerHeight();

if(window.matchMedia("(max-width:890px)").matches){

indicator.stop().animate({

top: top,

height: height,

width: 3,

left: 0

});

}

else{

indicator.stop().animate({

left: left,

width: width,

height: 3,

top: "100%"

});

}

});

return $.custom.tabs;

});

app/design/frontend/MyVendor/mytheme/requirejs-config.js

var config = {
    map: {
        '*' : {
            'tabs': 'js/tabs-custom'
        }
    }
};

var config = {

map: {

'*' : {

'tabs': 'js/tabs-custom'

}

};

app/design/frontend/MyVendor/mytheme/Magento_Theme/templates/html/sections.phtml

<div class="section-items <?= $block->escapeHtmlAttr($groupCss) ?>-items"
     data-mage-init='{"tabs":{"openedState":"active","indicator":"true"}}'>

1 2	<div class="section-items <?= $block->escapeHtmlAttr($groupCss) ?>-items" data-mage-init='{"tabs":{"openedState":"active","indicator":"true"}}'>

app/design/frontend/MyVendor/mytheme/web/css/source/tabs.less

@tab-item-height: 50px;
@tab-item-border-width: 3px;

.items:not(.nav) {
    border-bottom: none 0;
    display: flex;
    .nav.item {
        margin: 0;
        display: flex;
        > a,
        &.current > strong {
            padding: 0 @tab-item-height / 2.25;
            position: relative;
            display: flex;
            align-items: center;
        }
        &.current > strong {
            font-weight: 500;
            &:hover {
                color: @red;
            }
        }
    }
    &.has-indicator {
        position: relative;
        .indicator{
            left: 0;
            height: 3px;
            position: absolute;
            bottom: 0;
            width: 0;
            opacity: 0;
            background: @red;
            overflow: visible !important;

            &:before{
                content:"";
                position: absolute;
                bottom: 0;
                background-color: @red;
            }
        }
    }
}



//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .items:not(.nav) {
        flex-direction: column;
        background: linear-gradient(90deg, @greyLight 0%, @greyLight @tab-item-border-width, transparent @tab-item-border-width, transparent 100%);
        .nav.item {
            height: @tab-item-height;
        }
        &.has-indicator {
            .indicator {
                &:before{
                    width: 13px;
                    height: 2px;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%) translateX(0);
                }
            }
        }
    }
}



//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .items:not(.nav) {
        flex-direction: row;
        background: linear-gradient(180deg, transparent 0%, transparent @tab-item-height, @greyLight @tab-item-height, @greyLight 100%);
        .nav.item {
            // total height: @tab-item-height + @tab-item-border-width;
            height: @tab-item-height + @tab-item-border-width;
        }
        &.has-indicator {
            .indicator {
                transform: translateY(-3px);
                &:before{
                    width: 2px;
                    height: 13px;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }
    }
}

@tab-item-height: 50px;

@tab-item-border-width: 3px;

.items:not(.nav) {

border-bottom: none 0;

display: flex;

.nav.item {

margin: 0;

display: flex;

> a,

&.current > strong {

padding: 0 @tab-item-height / 2.25;

position: relative;

display: flex;

align-items: center;

}

&.current > strong {

font-weight: 500;

&:hover {

color: @red;

}

&.has-indicator {

position: relative;

.indicator{

left: 0;

height: 3px;

position: absolute;

bottom: 0;

width: 0;

opacity: 0;

background: @red;

overflow: visible !important;

&:before{

content:"";

position: absolute;

bottom: 0;

background-color: @red;

}

// Mobile

// _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {

.items:not(.nav) {

flex-direction: column;

background: linear-gradient(90deg, @greyLight 0%, @greyLight @tab-item-border-width, transparent @tab-item-border-width, transparent 100%);

.nav.item {

height: @tab-item-height;

}

&.has-indicator {

.indicator {

&:before{

width: 13px;

height: 2px;

left: 0;

top: 50%;

transform: translateY(-50%) translateX(0);

}

// Desktop

// _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {

.items:not(.nav) {

flex-direction: row;

background: linear-gradient(180deg, transparent 0%, transparent @tab-item-height, @greyLight @tab-item-height, @greyLight 100%);

.nav.item {

// total height: @tab-item-height + @tab-item-border-width;

height: @tab-item-height + @tab-item-border-width;

}

&.has-indicator {

.indicator {

transform: translateY(-3px);

&:before{

width: 2px;

height: 13px;

left: 50%;

transform: translateX(-50%);

}

app/design/frontend/MyVendor/mytheme/Magento_Sales/layout/sales_order_info_links.xml et app/design/frontend/MyVendor/mytheme/Magento_Sales/layout/sales_order_guest_info_links.xml

<body>
    <referenceContainer name="content">
        <block class="Magento\Framework\View\Element\Html\Links" as="links" name="sales.order.info.links" before="-">
            <arguments>
                <argument name="css_class" xsi:type="string">items order-links has-indicator</argument>
            </arguments>

<body>

<argument name="css_class" xsi:type="string">items order-links has-indicator</argument>

</arguments>

[Magento 2] Etendre un mixin existant

26/10/2020 / admin

how to add methods to a javascript file by using mixins?. L’OP utilise un plug-in Amasty qui étend déjà du code standard via un mixin. Il souhaite ajouter des méthodes en étendant le mixin existant par un nouveau mixin.
Magento 2 DevDocs – JS Mixins

Etendre une extension de widget existante dans Magento 2 n’est pas possible. Il faut obligatoirement surcharger l’extension existante en déclarant l’extension initiale à false dans le fichier requirejs-config.js du module (pouvant être différent) qui contient la nouvelle extension:

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/view/shipping': {
                'Vendor_Module/js/new-widgetextension': true,
                'Vendor_Module/js/alreadyexisting-widgetextension': false
            }
        }
    }
};

var config = {

config: {

mixins: {

'Magento_Checkout/js/view/shipping': {

'Vendor_Module/js/new-widgetextension': true,

'Vendor_Module/js/alreadyexisting-widgetextension': false

}

};

Notes:

la bonne pratique consiste à placer les extensions de widgets dans des modules (app/code/...) plutôt que dans un thème.

[Magento 2] Comment inclure et utiliser un fichier JS custom placé dans un thème depuis un template PHTML avec data-mage-init

04/06/2020 / admin

C’est par ici: [Magento 2] Vérifier qu’un utilisateur client est connecté à son compte et afficher son prénom dans un template PHTML.

Voir aussi: [Magento 2] Comment inclure et utiliser un fichier JS custom avec requireJS.

[Magento 2] Comment inclure et utiliser un fichier JS custom avec requireJS

29/10/2019 / admin

Source: How to include and use custom js file with require js in magento2.

Source: Four Ways to Add JavaScript to Magento 2.

En-dehors d’un thème, en créant un module

Se référer à la documentation officielle de Magento 2 pour voir comment créer un nouveau module. Dans mon exemple, le vendor s’appelle Naked et le module s’appelle HelloWorld.

Dans app/code/Naked/HelloWorld/ créer une arborescence de dossiers et les trois fichiers suivants:

view/frontend/requirejs-config.js
view/frontend/web/js/hello-world.js
view/frontend/web/js/methods.js

view/frontend/requirejs-config.js

var config = {

    // You can also set the map property and define the prefixes for various modules.
    // In future, we can use these prefixes to connect the required JS modules in other modules.
    map: {
        '*': {
            helloWorld: 'Naked_HelloWorld/js/hello-world',
            methods: 'Naked_HelloWorld/js/methods',
        }
    },

    // In this case, the scripts we have connected will work on all pages of the module.
    // Usually, some third-party libraries are connected in this way.
    deps: [
        'Naked_HelloWorld/js/hello-world',
    ]
};

var config = {

// You can also set the map property and define the prefixes for various modules.

// In future, we can use these prefixes to connect the required JS modules in other modules.

map: {

'*': {

helloWorld: 'Naked_HelloWorld/js/hello-world',

methods: 'Naked_HelloWorld/js/methods',

}

// In this case, the scripts we have connected will work on all pages of the module.

// Usually, some third-party libraries are connected in this way.

deps: [

'Naked_HelloWorld/js/hello-world',

]

};

Les scripts déclarés sous la variable deps vont fonctionner immédiatement et sur toutes les pages du site. Inutile d’initialiser quoi que ce soit dans un fichier *.phtml.

view/frontend/web/js/hello-world.js

define(['jquery', 'methods'], function($, methods) {
    "use strict";

    console.log('hello world!');

    $('a.logo').on('click', function(e){
        e.preventDefault();
        methods.showAlert('Logo clicked!');
    });
});

define(['jquery', 'methods'], function($, methods) {

"use strict";

console.log('hello world!');

$('a.logo').on('click', function(e){

e.preventDefault();

methods.showAlert('Logo clicked!');

});

view/frontend/web/js/methods.js

define(['jquery'], function($) {

    var methods = {};

    methods.showAlert = function(arg) {
        alert(arg);
    }

    return methods;

});

define(['jquery'], function($) {

var methods = {};

methods.showAlert = function(arg) {

alert(arg);

}

return methods;

});

[javascript] Importer des breakpoints CSS

17/10/2019 / admin

Article de lullabot.com: Importing CSS Breakpoints Into JavaScript. Demo Codepen.

Version PDF pour la postérité.

Animation CSS et JS, ressources en ligne, astuces, bonnes pratiques

17/01/2018 / admin

ANIMISTA IS A PLACE WHERE YOU CAN PLAY WITH A COLLECTION OF PRE-MADE CSS ANIMATIONS, TWEAK THEM AND GET ONLY THOSE YOU WILL ACTUALLY USE.
Animate.css – A cross-browser library of CSS animations. As easy to use as an easy thing.
Motion UI – A Sass library for creating flexible CSS transitions and animations.

[Drupal 7] Les différentes techniques pour ajouter/supprimer des ressources CSS/JS

06/07/2017 / admin

Ressources généralistes sur le sujet :

Drupal 7: Taking control of CSS and JS aggregation

Supprimer les CSS Core :

Peut se faire par le biais du hook_css_alter via le fichier template.php du thème.

Attention: dans le cas ou certaines CSS sont déclarées comme étant des dépendances du module contrib, il ne faut pas déclarer le module contrib mais ce qui semblent être des sous-modules… (en commentaires dans l’exemple ci-dessous, les déclarations qui ne fonctionnent pas) :

    // unset($css[drupal_get_path('module', 'contrib').'/date/date_api/date.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/date/date_popup/themes/datepicker.1.7.css']);
    unset($css[drupal_get_path('module', 'date').'/date_api/date.css']);
    unset($css[drupal_get_path('module', 'date').'/date_popup/themes/datepicker.1.7.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/logintoboggan/logintoboggan.css']);
    unset($css[drupal_get_path('module', 'logintoboggan').'/logintoboggan.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/css/views.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/css/ckeditor.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/media/modules/media_wysiwyg/css/media_wysiwyg.base.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/admin_menu/admin_menu.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/admin_menu/admin_menu.uid1.css']);
    unset($css[drupal_get_path('module', 'views').'/css/views.css']);
    unset($css[drupal_get_path('module', 'ckeditor').'/css/ckeditor.css']);
    unset($css[drupal_get_path('module', 'media_wysiwyg').'/css/media_wysiwyg.base.css']);
    unset($css[drupal_get_path('module', 'admin_menu').'/admin_menu.css']);
    unset($css[drupal_get_path('module', 'admin_menu').'/admin_menu.uid1.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/css/ctools.css']);
    unset($css[drupal_get_path('module', 'ctools').'/css/ctools.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/adminimal_admin_menu/adminimal_admin_menu.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/adminimal_admin_menu/js/slicknav/slicknav.css']);
    unset($css[drupal_get_path('module', 'adminimal_admin_menu').'/adminimal_admin_menu.css']);
    unset($css[drupal_get_path('module', 'adminimal_admin_menu').'/js/slicknav/slicknav.css']);

// unset($css[drupal_get_path('module', 'contrib').'/date/date_api/date.css']);

// unset($css[drupal_get_path('module', 'contrib').'/date/date_popup/themes/datepicker.1.7.css']);

unset($css[drupal_get_path('module', 'date').'/date_api/date.css']);

unset($css[drupal_get_path('module', 'date').'/date_popup/themes/datepicker.1.7.css']);

// unset($css[drupal_get_path('module', 'contrib').'/logintoboggan/logintoboggan.css']);

unset($css[drupal_get_path('module', 'logintoboggan').'/logintoboggan.css']);

// unset($css[drupal_get_path('module', 'contrib').'/css/views.css']);

// unset($css[drupal_get_path('module', 'contrib').'/css/ckeditor.css']);

// unset($css[drupal_get_path('module', 'contrib').'/media/modules/media_wysiwyg/css/media_wysiwyg.base.css']);

// unset($css[drupal_get_path('module', 'contrib').'/admin_menu/admin_menu.css']);

// unset($css[drupal_get_path('module', 'contrib').'/admin_menu/admin_menu.uid1.css']);

unset($css[drupal_get_path('module', 'views').'/css/views.css']);

unset($css[drupal_get_path('module', 'ckeditor').'/css/ckeditor.css']);

unset($css[drupal_get_path('module', 'media_wysiwyg').'/css/media_wysiwyg.base.css']);

unset($css[drupal_get_path('module', 'admin_menu').'/admin_menu.css']);

unset($css[drupal_get_path('module', 'admin_menu').'/admin_menu.uid1.css']);

// unset($css[drupal_get_path('module', 'contrib').'/css/ctools.css']);

unset($css[drupal_get_path('module', 'ctools').'/css/ctools.css']);

// unset($css[drupal_get_path('module', 'contrib').'/adminimal_admin_menu/adminimal_admin_menu.css']);

// unset($css[drupal_get_path('module', 'contrib').'/adminimal_admin_menu/js/slicknav/slicknav.css']);

unset($css[drupal_get_path('module', 'adminimal_admin_menu').'/adminimal_admin_menu.css']);

unset($css[drupal_get_path('module', 'adminimal_admin_menu').'/js/slicknav/slicknav.css']);

…ce qui nous donne au propre :

function my_theme_css_alter(&$css)
{
    /**
    * Drupal Tutorial: Remove System CSS and JS files
    * https://www.jnorton.co.uk/drupal-tutorial-remove-system-css-js-files
    */
    unset($css[drupal_get_path('module', 'system').'/system.base.css']);
    unset($css[drupal_get_path('module', 'system').'/system.menus.css']);
    unset($css[drupal_get_path('module', 'system').'/system.messages.css']);
    unset($css[drupal_get_path('module', 'system').'/system.theme.css']);
    
    unset($css[drupal_get_path('module', 'contextual').'/contextual.css']);

    unset($css[drupal_get_path('module', 'comment').'/comment.css']);
    unset($css[drupal_get_path('module', 'date').'/date_api/date.css']);
    unset($css[drupal_get_path('module', 'date').'/date_popup/themes/datepicker.1.7.css']);
    unset($css[drupal_get_path('module', 'field').'/theme/field.css']);
    unset($css[drupal_get_path('module', 'logintoboggan').'/logintoboggan.css']);
    unset($css[drupal_get_path('module', 'node').'/node.css']);
    unset($css[drupal_get_path('module', 'search').'/search.css']);
    unset($css[drupal_get_path('module', 'user').'/user.css']);
    unset($css[drupal_get_path('module', 'views').'/css/views.css']);
    unset($css[drupal_get_path('module', 'ckeditor').'/css/ckeditor.css']);
    unset($css[drupal_get_path('module', 'media_wysiwyg').'/css/media_wysiwyg.base.css']);
    unset($css[drupal_get_path('module', 'admin_menu').'/admin_menu.css']);
    unset($css[drupal_get_path('module', 'admin_menu').'/admin_menu.uid1.css']);

    unset($css[drupal_get_path('module', 'ctools').'/css/ctools.css']);
    unset($css[drupal_get_path('module', 'adminimal_admin_menu').'/adminimal_admin_menu.css']);
    unset($css[drupal_get_path('module', 'adminimal_admin_menu').'/js/slicknav/slicknav.css']);
}

function my_theme_css_alter(&$css)

{

/**

* Drupal Tutorial: Remove System CSS and JS files

* https://www.jnorton.co.uk/drupal-tutorial-remove-system-css-js-files

unset($css[drupal_get_path('module', 'system').'/system.base.css']);

unset($css[drupal_get_path('module', 'system').'/system.menus.css']);

unset($css[drupal_get_path('module', 'system').'/system.messages.css']);

unset($css[drupal_get_path('module', 'system').'/system.theme.css']);

unset($css[drupal_get_path('module', 'contextual').'/contextual.css']);

unset($css[drupal_get_path('module', 'comment').'/comment.css']);

unset($css[drupal_get_path('module', 'date').'/date_api/date.css']);

unset($css[drupal_get_path('module', 'date').'/date_popup/themes/datepicker.1.7.css']);

unset($css[drupal_get_path('module', 'field').'/theme/field.css']);

unset($css[drupal_get_path('module', 'logintoboggan').'/logintoboggan.css']);

unset($css[drupal_get_path('module', 'node').'/node.css']);

unset($css[drupal_get_path('module', 'search').'/search.css']);

unset($css[drupal_get_path('module', 'user').'/user.css']);