Issue #2943967 by markcarver: Starterkits don't add framework assets properly

Author: markhalliwell

bootstrap.libraries.yml

@@ -5,13 +5,23 @@ attributes:
     - core/jquery
     - core/underscore
 
+# This is automatically extended with JavaScript and CSS for CDN based themes.
+# If sub-theme uses a starterkit like LESS or SASS, then it should extend this
+# library to add in the compiled CSS and JavaScript sources.
+framework:
+  css: {}
+  js: {}
+  dependencies:
+    - core/jquery
+
 drupal.bootstrap:
   js:
     js/drupal.bootstrap.js: {}
   dependencies:
     - core/jquery
     - core/drupal
     - core/drupalSettings
+    - bootstrap/framework
 
 # Create a library placeholder for livereload.
 # This is altered dynamically based on the set URL.

docs/Sub-Theming.md

@@ -40,7 +40,7 @@ Once you've selected one of the above starterkits, here's how to install it:
 5. Rename `./THEMENAME/THEMENAME.theme`.
 6. Open `./THEMENAME/THEMENAME.info.yml` and change the name, description and
    any other properties to suite your needs. Make sure to rename the library
-   name as well:  `- THEMENAME/global-styling`.
+   extension name as well:  `THEMENAME/framework`.
 7. Rename the sub-theme configuration files, located at:
    `./THEMENAME/config/install/THEMENAME.settings.yml` and
    `./THEMENAME/config/schema/THEMENAME.schema.yml`.

src/Plugin/Alter/LibraryInfo.php

@@ -47,12 +47,12 @@ public function alter(&$libraries, &$extension = NULL, &$context2 = NULL) {
       }
 
       // Merge the assets into the library info.
-      $libraries['theme'] = NestedArray::mergeDeepArray([$assets, $libraries['theme']], TRUE);
+      $libraries['framework'] = NestedArray::mergeDeepArray([$assets, $libraries['framework']], TRUE);
 
       // Add a specific version and theme CSS overrides file.
       // @todo This should be retrieved by the Provider API.
       $version = $this->theme->getSetting('cdn_' . $provider->getPluginId() . '_version') ?: Bootstrap::FRAMEWORK_VERSION;
-      $libraries['theme']['version'] = $version;
+      $libraries['framework']['version'] = $version;
       $provider_theme = $this->theme->getSetting('cdn_' . $provider->getPluginId() . '_theme') ?: 'bootstrap';
       $provider_theme = $provider_theme === 'bootstrap' || $provider_theme === 'bootstrap_theme' ? '' : "-$provider_theme";
 
@@ -68,7 +68,7 @@ public function alter(&$libraries, &$extension = NULL, &$context2 = NULL) {
           // it isn't added after any potential sub-theme's "theme" category.
           // There's no weight, so it will be added after the provider's assets.
           // @see https://www.drupal.org/node/2770613
-          $libraries['theme']['css']['base'][$overrides] = [];
+          $libraries['framework']['css']['base'][$overrides] = [];
           break;
         }
       }

src/Plugin/Provider/ProviderBase.php

@@ -70,7 +70,6 @@ public function getAssets($types = NULL) {
         $data = [
           'data' => $asset,
           'type' => 'external',
-          'weight' => -19.999,
         ];
         // CSS library assets use "SMACSS" categorization, assign it to "base".
         if ($type === 'css') {

starterkits/cdn/THEMENAME.libraries.yml

@@ -1,4 +1,4 @@
-global-styling:
+framework:
   css:
     theme:
       css/style.css: {}

starterkits/cdn/THEMENAME.starterkit.yml

@@ -19,5 +19,6 @@ regions:
   page_top: 'Page top'
   page_bottom: 'Page bottom'
 
-libraries:
-  - 'THEMENAME/global-styling'
+libraries-extend:
+  bootstrap/framework:
+    - THEMENAME/framework

starterkits/less/THEMENAME.libraries.yml

@@ -1,9 +1,7 @@
-global-styling:
+framework:
   css:
     theme:
       css/style.css: {}
-
-bootstrap-scripts:
   js:
     bootstrap/js/affix.js: {}
     bootstrap/js/alert.js: {}

starterkits/less/THEMENAME.starterkit.yml

@@ -19,6 +19,6 @@ regions:
   page_top: 'Page top'
   page_bottom: 'Page bottom'
 
-libraries:
-  - 'THEMENAME/global-styling'
-  - 'THEMENAME/bootstrap-scripts'
+libraries-extend:
+  bootstrap/framework:
+    - THEMENAME/framework

starterkits/sass/THEMENAME.libraries.yml

@@ -1,9 +1,7 @@
-global-styling:
+framework:
   css:
     theme:
       css/style.css: {}
-
-bootstrap-scripts:
   js:
     bootstrap/assets/javascripts/bootstrap/affix.js: {}
     bootstrap/assets/javascripts/bootstrap/alert.js: {}

starterkits/sass/THEMENAME.starterkit.yml

@@ -19,6 +19,6 @@ regions:
   page_top: 'Page top'
   page_bottom: 'Page bottom'
 
-libraries:
-  - 'THEMENAME/global-styling'
-  - 'THEMENAME/bootstrap-scripts'
+libraries-extend:
+  bootstrap/framework:
+    - THEMENAME/framework

starterkits/sass/css/style.css

@@ -0,0 +1,4 @@
+/**
+ * This file will be overwritten when the Bootstrap Framework source files
+ * are compiled using the SASS CSS pre-processor.
+ */