TIP-820: Replace deprecated assetic bundle with less.js (#9576)

* Replace assetic with lessjs * Add styles script * Add plugin for fixing urls * Remove Assetic bundle * Update setup scripts to compile less * Add less lib * Reorganise webpack folder * Add watch and rebuild command * Add source map * Add watcher cli * Normalize index.less paths in compilation * Separate plugin for rewriting urls * Improve error output * Fix source map compilation * Add documentation to compile-less * Add dev argument for source map * Update upgrade readme * TIP-820: Cleanup * TIP-820: Cleanup
akeneo · Feb 19, 2019 · 720ac3e · 720ac3e
1 parent 2919bef
commit 720ac3e
Show file tree

Hide file tree

Showing 61 changed files with 500 additions and 1,742 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -42,11 +42,14 @@ jobs:
           name: Pim database installation
           command: docker-compose exec fpm bin/console --env=behat pim:install --force --clean
       - run:
-            name: Pim yarn dev installation
-            command: docker-compose run --rm node yarn run webpack-dev
+          name: Pim yarn less installation
+          command: docker-compose run --rm node yarn run less
       - run:
-            name: Pim yarn test installation
-            command: docker-compose run --rm node yarn run webpack-test
+          name: Pim yarn dev installation
+          command: docker-compose run --rm node yarn run webpack-dev
+      - run:
+          name: Pim yarn test installation
+          command: docker-compose run --rm node yarn run webpack-test
       - run:
             name: Change owner on project dir after installing when there is no cache
             command: sudo chmod -R 777 ../project

diff --git a/UPGRADE.md b/UPGRADE.md
@@ -79,7 +79,7 @@ To give you a quick overview of the changes made to a standard project, you can
     ```bash
     export PIM_DIR=/path/to/your/current/pim/installation
     ```
-    
+
     Then apply the changes:
 
     ```bash
@@ -104,11 +104,11 @@ To give you a quick overview of the changes made to a standard project, you can
     * The configuration file `app/config/security.yml` had somes changes:
 
         - ...
-    
+
     * The configuration file `app/config/pim_parameters.yml` had some changes:
 
         - ...
-    
+
     * The configuration file `app/config/security_test.yml` had some changes:
 
         - ...
@@ -123,9 +123,9 @@ To give you a quick overview of the changes made to a standard project, you can
     ```
 
     Or you can follow the detailed list of changes:
-    
+
         - ...
-    
+
 5. Update your **app/config/config_prod.yml**
 
     An easy way to update it is to copy/paste from the latest standard edition and add your custom changes.
@@ -136,9 +136,9 @@ To give you a quick overview of the changes made to a standard project, you can
     ```
 
     Or you can update the file with the following changes:
-    
+
     - ...
-        
+
 6. Update your **app/config/routing.yml**
 
     An easy way to update it is to copy/paste from the latest standard edition and add your custom changes.
@@ -152,33 +152,33 @@ To give you a quick overview of the changes made to a standard project, you can
 
     * The following route configurations have been removed:
         - `old_route`
-        
+
     * The following route configurations have been added:
-        
+
         v3.1:
         ```yaml
         route_name:
             resource: "@YOUR_NEW_BUNDLE/config/routing/routing.yml"
         ```
-        
+
     * The following route configurations have been updated:
-        
+
         - route_name
-        
+
         v3.0.x:
         ```yaml
         route_name:
             resource: "@YOUR_OLD_BUNDLE/config/routing/routing.yml"
         ```
-        
+
         to
-        
+
         v3.1:
         ```yaml
         route_name:
             resource: "@YOUR_NEW_BUNDLE/config/routing/routing.yml"
         ```
-    
+
 7. Update your **app/AppKernel.php**:
 
     An easy way to update it is to copy/paste from the latest standard edition and add your own bundles in the `registerProjectBundles` method.
@@ -210,39 +210,39 @@ Before updating the dependencies and migrating your data, please deactivate all
 11. Update your dependencies:
 
     The easiest way to update your `composer.json` is to copy/paste from the latest standard edition and add your custom dependencies.
-    
+
     ```bash
     cp composer.json $PIM_DIR/
     # then add your own dependencies
     ```
-    
+
     The easiest way to update your `package.json` is to copy/paste from the latest standard edition and add your custom dependencies.
-    
+
     ```bash
     cp package.json $PIM_DIR/
     # then add your own dependencies
     ```
-    
+
     Now we are ready to update the backend dependencies:
-    
+
     ```bash
     cd $PIM_DIR
     php -d memory_limit=3G composer update
     ```
-    
+
      **This step will copy the upgrades folder from `pim-community-dev/` to your Pim project root in order to migrate.**
     If you have custom code in your project, this step may raise errors in the "post-script" command.
     In this case, go to the chapter "Migrate your custom code" before running the database migration.
 
     And we also have to update the frontend dependencies:
-    
+
     ```bash
     yarn install
     ```
 
-12. Migrate your MySQL database: 
+12. Migrate your MySQL database:
 
-    Please, make sure the folder `upgrades/schema/` does not contain former migration files (from PIM 3.0 to 3.1 for instance), 
+    Please, make sure the folder `upgrades/schema/` does not contain former migration files (from PIM 3.0 to 3.1 for instance),
     otherwise the migration command will surely not work properly.
 
     ```bash
@@ -260,10 +260,34 @@ Before updating the dependencies and migrating your data, please deactivate all
     TO_FILL_WITH_NEW_SCRIPTS
     ```
 
-14. Then re-generate the PIM assets:
+14. Migrate your .less assets
+
+    If you have defined a Resources/config/assets.yml file in any of your bundles to import .less files, you must move these imports to a new file at Resources/public/less/index.less to import your styles instead.
+
+    For example
+
+    Before in `Resources/config/assets.yml`
+    ```yml
+        css:
+            lib:
+                - bundles/yourbundle/assets/less/styles.css
+                - bundles/yourbundle/assets/less/bundle.less
+    ```
+
+    After in `Resources/public/less/index.less`
+
+    ```less
+        @import (less) "./web/bundles/yourbundle/assets/less/styles.css";
+        @import "./web/bundles/yourbundle/assets/less/bundle.less";
+    ```
+
+    If you are importing a .css file, you must add `(less)` after the import, as above. If you only have .less files in your bundle's assets.yml, you can remove it.
+
+15. Then re-generate the PIM assets:
 
     ```bash
     bin/console pim:installer:assets --clean --env=prod
+    yarn run less
     yarn run webpack
     ```
 

diff --git a/app/AppKernel.php b/app/AppKernel.php
@@ -132,7 +132,6 @@ protected function getSymfonyBundles()
             new Doctrine\Bundle\DoctrineBundle\DoctrineBundle(),
             new Doctrine\Bundle\DoctrineCacheBundle\DoctrineCacheBundle(),
             new Sensio\Bundle\FrameworkExtraBundle\SensioFrameworkExtraBundle(),
-            new Symfony\Bundle\AsseticBundle\AsseticBundle(),
             new Symfony\Bundle\FrameworkBundle\FrameworkBundle(),
             new Symfony\Bundle\MonologBundle\MonologBundle(),
             new Symfony\Bundle\SecurityBundle\SecurityBundle(),
@@ -164,7 +163,6 @@ protected function getOroDependencies()
     protected function getOroBundles()
     {
         return [
-            new Oro\Bundle\AsseticBundle\OroAsseticBundle(),
             new Oro\Bundle\ConfigBundle\OroConfigBundle(),
             new Oro\Bundle\DataGridBundle\OroDataGridBundle(),
             new Oro\Bundle\FilterBundle\OroFilterBundle(),

diff --git a/app/config/config.yml b/app/config/config.yml
@@ -39,13 +39,6 @@ twig:
     globals:
         uservoice_key: "%uservoice_key%"
 
-# Assetic Configuration
-assetic:
-    debug:          "%kernel.debug%"
-    use_controller: false
-    filters:
-        cssrewrite: ~
-
 # Swiftmailer Configuration
 swiftmailer:
     transport:                "%mailer_transport%"

diff --git a/app/config/config_behat.yml b/app/config/config_behat.yml
@@ -29,9 +29,6 @@ monolog:
 swiftmailer:
     disable_delivery: true
 
-assetic:
-    use_controller: false
-
 pim_import_export:
     record_mails: true
 

diff --git a/app/config/config_dev.yml b/app/config/config_dev.yml
@@ -23,9 +23,5 @@ monolog:
             type:     console
             channels: ['!event', '!doctrine']
 
-oro_assetic:
-    css_debug:      ~
-    css_debug_all:  false
-
 swiftmailer:
     disable_delivery: true
diff --git a/app/config/config_prod.yml b/app/config/config_prod.yml
@@ -23,7 +23,3 @@ monolog:
             level: info
         console:
             type:  console
-
-oro_assetic:
-    css_debug:      ~
-    css_debug_all:  false
diff --git a/app/config/config_test.yml b/app/config/config_test.yml
@@ -18,9 +18,6 @@ web_profiler:
 swiftmailer:
     disable_delivery: true
 
-assetic:
-    use_controller: false
-
 parameters:
     max_products_category_removal: 20
     installer_data:       PimInstallerBundle:minimal

diff --git a/bin/docker/pim-front.sh b/bin/docker/pim-front.sh
@@ -4,5 +4,6 @@ docker-compose exec fpm rm -rf var/cache/*
 
 docker-compose exec fpm bin/console --env=prod pim:installer:assets --symlink --clean
 
+docker-compose run --rm node yarn run less
 docker-compose run --rm node yarn run webpack-dev
 docker-compose run --rm node yarn run webpack-test
diff --git a/bin/docker/pim-initialize.sh b/bin/docker/pim-initialize.sh
@@ -5,5 +5,6 @@ docker-compose exec fpm rm -rf var/cache/*
 docker-compose exec fpm bin/console --env=prod pim:install --force --symlink --clean
 docker-compose exec fpm bin/console --env=behat pim:installer:db
 
+docker-compose run --rm node yarn run less
 docker-compose run --rm node yarn run webpack-dev
 docker-compose run --rm node yarn run webpack-test
diff --git a/bin/pim-front.sh b/bin/pim-front.sh
@@ -5,5 +5,6 @@ rm -rf ./web/js
 rm -rf ./web/css
 bin/console --env=prod pim:installer:assets --symlink --clean
 
+yarn run less
 yarn run webpack-dev
 yarn run webpack-test
diff --git a/composer.json b/composer.json
@@ -50,8 +50,6 @@
         "friendsofsymfony/rest-bundle": "2.1.1",
         "gedmo/doctrine-extensions":"v2.4.26",
         "incenteev/composer-parameter-handler": "2.1.2",
-        "kriswallsmith/assetic": "1.4.0",
-        "leafo/lessphp": "0.5.0",
         "league/flysystem": "1.0.40",
         "league/flysystem-ziparchive": "1.0.3",
         "liip/imagine-bundle": "1.9.1",
@@ -63,7 +61,6 @@
         "sensio/distribution-bundle": "5.0.20",
         "sensio/framework-extra-bundle": "3.0.26",
         "sensio/generator-bundle": "3.1.6",
-        "symfony/assetic-bundle": "2.8.2",
         "symfony/monolog-bundle": "3.1.2",
         "symfony/swiftmailer-bundle": "3.0.3",
         "symfony/security-acl": "3.0.0",
@@ -102,7 +99,6 @@
         "oro/translation-bundle": "1.0-dev",
         "oro/navigation-bundle": "1.0-dev",
         "oro/security-bundle": "1.0-dev",
-        "oro/assetic-bundle": "1.0-dev",
         "oro/filter-bundle": "1.0-dev",
         "oro/config-bundle": "1.0-dev",
         "oro/user-bundle": "1.0-dev",

diff --git a/webpack/check-dependencies.js → frontend/build/check-dependencies.js b/webpack/check-dependencies.js → frontend/build/check-dependencies.js