Merge 35dd531c54 into 9b6799e2b8

UPGRADE-2.2.md

@@ -62,5 +62,25 @@ SYLIUS_TELEMETRY_SALT=your-custom-salt
 ## Translations
 
 1. The `TranslationLocaleProvider` now ensures that the default locale (configured as `locale` in `config/parameters.yaml`)
-   is always placed at the beginning of the returned locales array.  
+   is always placed at the beginning of the returned locales array.
    Other locales remain in the same order as returned by the repository.
+
+## Shop Bootstrap separation
+
+Bootstrap has been extracted into a separate webpack entry point (`bootstrap-entry`) with dedicated twig hooks:
+- `sylius_shop.base#stylesheets` > `bootstrap` (priority 100)
+- `sylius_shop.base#javascripts` > `bootstrap` (priority 100)
+
+This allows disabling Bootstrap entirely if you want to use a different CSS framework.
+
+**If you have overridden the `styles` hook** in `sylius_shop.base#stylesheets` and included Bootstrap there, it may now load twice. To fix this, either:
+- Remove Bootstrap from your custom `styles` hook, or
+- Disable the new `bootstrap` hook by setting `enabled: false`
+
+**To disable Bootstrap in webpack**, pass `includeBootstrap: false` to the config:
+
+```js
+const shopConfig = SyliusShop.getBaseWebpackConfig(path.resolve(__dirname), {
+    includeBootstrap: false
+});
+```

src/Sylius/Bundle/ShopBundle/Resources/assets/bootstrap-entry.js

@@ -0,0 +1,11 @@
+/*
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import './styles/bootstrap.scss';
+import './scripts/bootstrap';

src/Sylius/Bundle/ShopBundle/Resources/assets/entrypoint.js

@@ -9,7 +9,6 @@
 
 import './styles/main.scss';
 
-import './scripts/bootstrap';
 import './scripts/spotlight';
 
 const imagesContext = require.context('./images', true, /\.(jpg|jpeg|png|svg|gif|webp)$/);

src/Sylius/Bundle/ShopBundle/Resources/assets/styles/_buttons.scss

@@ -21,27 +21,22 @@
 }
 
 .btn-transparent {
-    @extend .btn-light;
-    background-color: transparent;
-    border-color: transparent;
-
-    &:hover {
-        background-color: $gray-100;
-        border-color: transparent;
-    }
-
-    &:focus {
-        background-color: transparent !important;
-        border-color: transparent !important;
-    }
-
-    &:active {
-        background-color: $gray-200 !important;
-        border-color: transparent !important;
-    }
+    --bs-btn-bg: transparent;
+    --bs-btn-border-color: transparent;
+    --bs-btn-hover-bg: #{$gray-100};
+    --bs-btn-hover-border-color: transparent;
+    --bs-btn-active-bg: #{$gray-200};
+    --bs-btn-active-border-color: transparent;
+    --bs-btn-focus-shadow-rgb: 0, 0, 0;
 }
 
 .btn-outline-gray {
-    @extend .btn-outline-dark;
-    --bs-btn-border-color: var(--bs-gray-400);
+    --bs-btn-color: #{$gray-800};
+    --bs-btn-border-color: #{$gray-400};
+    --bs-btn-hover-color: #fff;
+    --bs-btn-hover-bg: #{$gray-800};
+    --bs-btn-hover-border-color: #{$gray-800};
+    --bs-btn-active-color: #fff;
+    --bs-btn-active-bg: #{$gray-800};
+    --bs-btn-active-border-color: #{$gray-800};
 }

src/Sylius/Bundle/ShopBundle/Resources/assets/styles/_variables.scss

@@ -14,6 +14,7 @@ $enable-cssgrid: true;
 // Color system
 
 $primary: #22B99A;
+$danger: #dc3545;
 
 $gray-100: #f8f9fa;
 $gray-200: #e9ecef;
@@ -25,6 +26,8 @@ $gray-700: #495057;
 $gray-800: #343a40;
 $gray-900: #212529;
 
+$link-hover-color: $primary;
+
 // Body
 
 $body-color: $gray-900;

src/Sylius/Bundle/ShopBundle/Resources/assets/styles/bootstrap.scss

@@ -0,0 +1,11 @@
+/*
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+@import "variables";
+@import "bootstrap/scss/bootstrap";

src/Sylius/Bundle/ShopBundle/Resources/assets/styles/main.scss

@@ -8,11 +8,10 @@
  */
 
 @import "variables";
+@import "mixins/breakpoints";
 @import "mixins/text-truncate";
 @import "utils";
 
-@import "bootstrap/scss/bootstrap";
-
 @import "base";
 @import "accordion";
 @import "buttons";

src/Sylius/Bundle/ShopBundle/Resources/assets/styles/mixins/_breakpoints.scss

@@ -0,0 +1,67 @@
+/*
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+$grid-breakpoints: (
+    xs: 0,
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    xl: 1200px,
+    xxl: 1400px,
+) !default;
+
+@function breakpoint-min($name) {
+    $min: map-get($grid-breakpoints, $name);
+    @return if($min != 0, $min, null);
+}
+
+@function breakpoint-max($name) {
+    $max: map-get($grid-breakpoints, $name);
+    @return if($max and $max > 0, $max - .02, null);
+}
+
+@mixin media-breakpoint-up($name) {
+    $min: breakpoint-min($name);
+    @if $min {
+        @media (min-width: $min) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+@mixin media-breakpoint-down($name) {
+    $max: breakpoint-max($name);
+    @if $max {
+        @media (max-width: $max) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+@mixin media-breakpoint-between($lower, $upper) {
+    $min: breakpoint-min($lower);
+    $max: breakpoint-max($upper);
+    @if $min and $max {
+        @media (min-width: $min) and (max-width: $max) {
+            @content;
+        }
+    } @else if $min {
+        @include media-breakpoint-up($lower) {
+            @content;
+        }
+    } @else if $max {
+        @include media-breakpoint-down($upper) {
+            @content;
+        }
+    }
+}

src/Sylius/Bundle/ShopBundle/Resources/config/app/twig_hooks/base.yaml

@@ -4,18 +4,24 @@ sylius_twig_hooks:
             defaults:
                 template: '@SyliusShop/shared/layout/base/body_classes/defaults.html.twig'
                 priority: 0
-                
+
         'sylius_shop.base#metatags':
             metatags:
                 template: '@SyliusShop/shared/layout/base/metatags.html.twig'
                 priority: 0
-        
+
         'sylius_shop.base#stylesheets':
+            bootstrap:
+                template: '@SyliusShop/shared/layout/base/styles/bootstrap.html.twig'
+                priority: 100
             styles:
                 template: '@SyliusShop/shared/layout/base/styles.html.twig'
                 priority: 0
 
         'sylius_shop.base#javascripts':
+            bootstrap:
+                template: '@SyliusShop/shared/layout/base/scripts/bootstrap.html.twig'
+                priority: 100
             scripts:
                 template: '@SyliusShop/shared/layout/base/scripts.html.twig'
                 priority: 0

src/Sylius/Bundle/ShopBundle/index.js

@@ -15,10 +15,15 @@ class SyliusShop {
      * Provide a light Webpack configuration for Sylius Admin
      * All the stimulus stuff should be handled by the app.shop entrypoint
      */
-    static getBaseWebpackConfig(rootDir) {
+    static getBaseWebpackConfig(rootDir, options = {}) {
+        const { includeBootstrap = true } = options;
+
         this._prepareWebpackConfig(rootDir);
-        Encore
-            .addEntry('shop-entry', path.resolve(__dirname, 'Resources/assets/entrypoint.js'));
+
+        if (includeBootstrap) {
+            Encore.addEntry('bootstrap-entry', path.resolve(__dirname, 'Resources/assets/bootstrap-entry.js'));
+        }
+        Encore.addEntry('shop-entry', path.resolve(__dirname, 'Resources/assets/entrypoint.js'));
 
         const shopConfig = Encore.getWebpackConfig();
 
@@ -39,6 +44,7 @@ class SyliusShop {
         this._prepareWebpackConfig(rootDir);
         // For a ready-to-use Stimulus bridge. Should be used only for sylius/sylius tests
         Encore
+            .addEntry('bootstrap-entry', path.resolve(__dirname, 'Resources/assets/bootstrap-entry.js'))
             .addEntry('shop-entry', path.resolve(__dirname, 'Resources/assets/app.js'))
             .enableStimulusBridge(path.resolve(__dirname, 'Resources/assets/controllers.json'));
         const shopConfig = Encore.getWebpackConfig();

src/Sylius/Bundle/ShopBundle/templates/shared/layout/base/scripts/bootstrap.html.twig

@@ -0,0 +1 @@
+{{ encore_entry_script_tags('bootstrap-entry', null, 'shop') }}

src/Sylius/Bundle/ShopBundle/templates/shared/layout/base/styles/bootstrap.html.twig

@@ -0,0 +1 @@
+{{ encore_entry_link_tags('bootstrap-entry', null, 'shop') }}