Merge pull request roots#43 from strarsis/webpack5

[Sage 9] Update sage-installer to latest dependencies + webpack 5

composer.json

@@ -7,6 +7,8 @@
     "theme",
     "foundation",
     "bootstrap",
+    "bootstrap 4",
+    "bootstrap 5",
     "tachyons",
     "tailwindcss"
   ],

src/Console/Commands/PresetCommand.php

@@ -4,7 +4,8 @@
 
 use Illuminate\Filesystem\Filesystem;
 use InvalidArgumentException;
-use Roots\Sage\Installer\Presets\Bootstrap;
+use Roots\Sage\Installer\Presets\Bootstrap5;
+use Roots\Sage\Installer\Presets\Bootstrap4;
 use Roots\Sage\Installer\Presets\Bulma;
 use Roots\Sage\Installer\Presets\Foundation;
 use Roots\Sage\Installer\Presets\None;
@@ -120,7 +121,8 @@ protected function defaultPresets()
     {
         return [
             new None($this->root),
-            new Bootstrap($this->root),
+            new Bootstrap4($this->root),
+            new Bootstrap5($this->root),
             new Bulma($this->root),
             new Foundation($this->root),
             new Tachyons($this->root),

src/Presets/Bootstrap.php → src/Presets/Bootstrap4.php

@@ -2,13 +2,13 @@
 
 namespace Roots\Sage\Installer\Presets;
 
-class Bootstrap extends Preset
+class Bootstrap4 extends Preset
 {
     /** {@inheritdoc} */
     protected function updatePackagesArray(array $packages)
     {
-        $packages['dependencies']['bootstrap'] = 'v4.3.1';
-        $packages['dependencies']['popper.js'] = '^1.14.7';
+        $packages['dependencies']['bootstrap'] = 'v4.6.0';
+        $packages['dependencies']['popper.js'] = '^1.16.1';
         return $packages;
     }
 }

src/Presets/Bootstrap5.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace Roots\Sage\Installer\Presets;
+
+class Bootstrap5 extends Preset
+{
+    /** {@inheritdoc} */
+    protected function updatePackagesArray(array $packages)
+    {
+        $packages['dependencies']['bootstrap'] = 'v5.0.1';
+        $packages['dependencies']['@popperjs/core'] = '^2.9.2';
+        return $packages;
+    }
+}

src/Presets/Foundation.php

@@ -7,7 +7,7 @@ class Foundation extends Preset
     /** {@inheritdoc} */
     protected function updatePackagesArray(array $packages)
     {
-        $packages['dependencies']['foundation-sites'] = '~6.4';
+        $packages['dependencies']['foundation-sites'] = '~6.6.3';
         return $packages;
     }
 }

src/Presets/Tailwind.php

@@ -7,7 +7,7 @@ class Tailwind extends Preset
     /** {@inheritdoc} */
     protected function updatePackagesArray(array $packages)
     {
-        $packages['devDependencies']['tailwindcss'] = '^2.0.1';
+        $packages['devDependencies']['tailwindcss'] = '^2.0.2';
 
         return $packages;
     }

src/Presets/stubs/Bootstrap5/scripts/autoload/_bootstrap.js

@@ -0,0 +1,4 @@
+// `sage preset` installed this file automatically.
+// Running `sage preset` again could result in automatic deletion of this file.
+// Because of this, we do not recommend editing this file.
+import 'bootstrap';

src/Presets/stubs/Bootstrap5/styles/autoload/_bootstrap.scss

@@ -0,0 +1,4 @@
+// `sage preset` installed this file automatically.
+// Running `sage preset` again could result in automatic deletion of this file.
+// Because of this, we do not recommend editing this file.
+@import "~bootstrap/scss/bootstrap";

src/Presets/stubs/Bootstrap5/styles/common/_variables.scss

@@ -0,0 +1,8 @@
+// Note: Bootstrap 5 ships with its own default theme colors
+
+/*
+$theme-colors: (
+  primary: #525ddc,
+  secondary: #d1dc52,
+);
+*/

src/Presets/stubs/Bootstrap5/styles/components/_comments.scss

@@ -0,0 +1,23 @@
+.comment-list {
+  @extend .list-unstyled;
+}
+
+.comment-list ol {
+  list-style: none;
+}
+
+.comment-form p {
+  @extend .mb-3;
+}
+
+.comment-form input[type="text"],
+.comment-form input[type="email"],
+.comment-form input[type="url"],
+.comment-form textarea {
+  @extend .form-control;
+}
+
+.comment-form input[type="submit"] {
+  @extend .btn;
+  @extend .btn-secondary;
+}

src/Presets/stubs/Bootstrap5/styles/components/_forms.scss

@@ -0,0 +1,19 @@
+/** Search form */
+.search-form {
+  @extend .row;
+}
+
+.search-form label {
+  @extend .mb-3;
+
+  font-weight: normal;
+}
+
+.search-form .search-field {
+  @extend .form-control;
+}
+
+.search-form .search-submit {
+  @extend .btn;
+  @extend .btn-secondary;
+}

src/Presets/stubs/Bootstrap5/styles/components/_wp-classes.scss

@@ -0,0 +1,56 @@
+/**
+ * WordPress Generated Classes
+ * @see http://codex.wordpress.org/CSS#WordPress_Generated_Classes
+ */
+
+/** Media alignment */
+.alignnone {
+  margin-left: 0;
+  margin-right: 0;
+  max-width: 100%;
+  height: auto;
+}
+
+.aligncenter {
+  display: block;
+  margin: ($spacer / 2) auto;
+  height: auto;
+}
+
+.alignleft,
+.alignright {
+  margin-bottom: ($spacer / 2);
+  height: auto;
+}
+
+@include media-breakpoint-up(sm) {
+  .alignleft {
+    float: left;
+    margin-right: ($spacer / 2);
+  }
+
+  .alignright {
+    float: right;
+    margin-left: ($spacer / 2);
+  }
+}
+
+/** Captions */
+.wp-caption {
+  @extend .figure;
+}
+
+.wp-caption img {
+  @extend .figure-img;
+  @extend .img-fluid;
+}
+
+.wp-caption-text {
+  @extend .figure-caption;
+}
+
+/** Text meant only for screen readers */
+.screen-reader-text {
+  @extend .visually-hidden;
+  @extend .visually-hidden-focusable;
+}

src/Presets/stubs/Bootstrap5/styles/layouts/_header.scss

@@ -0,0 +1,7 @@
+.banner .nav li {
+  @extend .nav-item;
+}
+
+.banner .nav a {
+  @extend .nav-link;
+}

src/Presets/stubs/Bulma/styles/components/_wp-classes.scss

@@ -23,7 +23,7 @@
   height: auto;
 }
 
-+tablet() {
+@include tablet() {
   .alignleft {
     float: left;
     margin-right: ($spacer / 2);

src/Presets/stubs/Tailwind/build/postcss.config.js

@@ -0,0 +1,18 @@
+/* eslint-disable */
+
+module.exports = (api) => {
+
+  const cssnanoConfig = {
+    preset: ['default', { discardComments: { removeAll: true } }]
+  };
+
+  return {
+    parser: api.options.ctx.enabled.optimize ? 'postcss-safe-parser' : undefined,
+    plugins: {
+      tailwindcss: `${api.options.ctx.paths.assets}/styles/tailwind.config.js`,
+      autoprefixer: true,
+      cssnano: api.options.ctx.enabled.optimize ? cssnanoConfig : false,
+    },
+  };
+
+};

src/Transformations/ThemeHeaders.php

@@ -14,7 +14,7 @@ class ThemeHeaders
         'Name'        => 'Sage Starter Theme',
         'URI'         => 'https://roots.io/sage/',
         'Description' => 'Sage is a WordPress starter theme.',
-        'Version'     => '9.0.1',
+        'Version'     => '9.1.0',
         'Author'      => 'Roots',
         'Author URI'  => 'https://roots.io/'
     ];