phase2 · illepic · Aug 30, 2018 · Aug 30, 2018 · Aug 30, 2018 · Aug 30, 2018
diff --git a/apps/pl/scss/_scss2json.scss b/apps/pl/scss/_scss2json.scss
@@ -1,10 +1,4 @@
-/* Sass Variables to Map to JSON */
-
-// Import Everything from Base.
-// This includes Bootstrap
-@import '../../../source/_patterns/00-protons/variables';
-// Import the map of available custom svg icons.
-@import '../../../source/_patterns/01-atoms/svgicon/scss/_icons-generated';
+// Sass Variables to Map to JSON
 
 // Customized Sass Mapping
 // Pulled from Bootstrap's _variables.scss

diff --git a/source/_patterns/00-protons/_base.scss b/source/_patterns/00-protons/_base.scss
@@ -11,7 +11,9 @@
 /// This guarantees both de-duplication and existence of required, generated CSS.
 ///
 
-@import 'variables';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
 
 // Bootstrap CSS-generating output
 @import '~bootstrap/scss/root';

diff --git a/source/_patterns/00-protons/_variables.scss b/source/_patterns/00-protons/_variables.scss
@@ -1,20 +1,20 @@
-///
-/// Global VARIABLES and HELPERS
-///
-/// Place global config here like Bootstrap's _variables.scss.
-/// This kind of config is often required prior to importing any libraries (ie Bootstrap Sass), and
-/// does not produce any CSS, just variables and maps.
-///
-/// All .scss files NEED TO INCLUDE this file as the top import to ensure consistent settings.
-/// Particle does not glob Sass! Because there is no printing CSS output in this file, webpack will
-/// safely squash any duplication.
-///
-/// @example
-/// ```scss
-/// @import '../../00-protons/variables';
-/// ```
-/// This guarantees every component is styled with the same presets.
-///
+//
+// Global VARIABLES and HELPERS
+//
+// Place global config here like Bootstrap's _variables.scss.
+// This kind of config is often required prior to importing any libraries
+// (ie Bootstrap Sass), and does not produce any CSS, just variables and maps.
+//
+// This file is provided AUTOMATICALLY to every .scss file on the dependency
+// chain via the configuration of the sass-loader within webpack.particle.dev.js.
+// In other words, every .scss within Particle has `@import 00-protons/variables`
+// silently injected into the first line.
+//
+// As long as everything within this files DOES NOT PRINT CSS, there will be
+// no duplicated output. Again, for the people in the back:
+//
+// THIS FILE CONTAINS ONLY NON-PRINTING SASS, LIKE VARIABLES, MIXINS, & FUNCTIONS
+//
 
 // Custom non-printing tools
 @import 'non-printing/functions';
@@ -40,7 +40,7 @@ $spacing: (
 // @import 'non-printing/project-specific-mixins'
 
 // Generated SVG icons and sprite mixins
-@import '../01-atoms/svgicon/scss/_icons-generated.scss';
+@import '01-atoms/svgicon/scss/_icons-generated';
 
 // Font Awesome tools
 @import '~font-awesome/scss/variables';

diff --git a/source/_patterns/00-protons/printing/_forms.scss b/source/_patterns/00-protons/printing/_forms.scss
@@ -1,4 +1,6 @@
-@import '../variables';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
 
 // Bootstrap override variables go here.
 // See available vars in ~bootstrap/scss/_variables.scss, i.e.

diff --git a/source/_patterns/00-protons/printing/_html-elements.scss b/source/_patterns/00-protons/printing/_html-elements.scss
@@ -1,4 +1,6 @@
-@import '../variables';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
 
 // Use this file for any global layout rules you want applied after
 // Bootstrap's Reboot does it's thing, but don't necessarily fit into

diff --git a/source/_patterns/00-protons/printing/_tables.scss b/source/_patterns/00-protons/printing/_tables.scss
@@ -1,4 +1,6 @@
-@import '../variables';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
 
 // Bootstrap override variables go here.
 // See available vars in ~bootstrap/scss/_variables.scss, i.e.

diff --git a/source/_patterns/00-protons/printing/_transitions.scss b/source/_patterns/00-protons/printing/_transitions.scss
@@ -1,4 +1,6 @@
-@import '../variables';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
 
 // Bootstrap override variables go here.
 // See available vars in ~bootstrap/scss/_variables.scss, i.e.

diff --git a/source/_patterns/00-protons/printing/_type.scss b/source/_patterns/00-protons/printing/_type.scss
@@ -1,4 +1,6 @@
-@import '../variables';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
 
 // Bootstrap override variables go here.
 // See available vars in ~bootstrap/scss/_variables.scss, i.e.

diff --git a/source/_patterns/01-atoms/alert/_alert.scss b/source/_patterns/01-atoms/alert/_alert.scss
@@ -1,5 +1,6 @@
-// All component Sass needs non-printing base config
-@import '../../00-protons/variables';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
 
 // To change default bootstrap alert variables, SEE ~bootstrap/scss/variables
 // Add bootstrap variables here

diff --git a/source/_patterns/01-atoms/badge/_badge.scss b/source/_patterns/01-atoms/badge/_badge.scss
@@ -1,4 +1,6 @@
-@import '../../00-protons/variables';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
 
 // To change default bootstrap list-item variables,
 // copy from ~bootstrap/scss/variables to here

diff --git a/source/_patterns/01-atoms/branding/_branding.scss b/source/_patterns/01-atoms/branding/_branding.scss
@@ -1,5 +1,6 @@
-// All component Sass needs non-printing base config
-@import '../../00-protons/variables';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
 
 // To change default bootstrap card variables, SEE ~bootstrap/scss/variables
 // Add bootstrap variables here

diff --git a/source/_patterns/01-atoms/breadcrumb/_breadcrumb.scss b/source/_patterns/01-atoms/breadcrumb/_breadcrumb.scss
@@ -1,5 +1,6 @@
-// All component Sass needs non-printing base config
-@import '../../00-protons/variables';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
 
 // To change default bootstrap breadcrumb variables, SEE ~bootstrap/scss/variables
 // Add bootstrap variables here

diff --git a/source/_patterns/01-atoms/button/_button.scss b/source/_patterns/01-atoms/button/_button.scss
@@ -1,4 +1,6 @@
-@import '../../00-protons/variables';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
 
 // To change default bootstrap card variables,
 // copy from ~bootstrap/scss/variables to here

diff --git a/source/_patterns/01-atoms/dropdown/_dropdown.scss b/source/_patterns/01-atoms/dropdown/_dropdown.scss
@@ -1,4 +1,6 @@
-@import '../../00-protons/variables';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
 
 // To change default bootstrap nav variables,
 // copy from ~bootstrap/scss/variables to here

diff --git a/source/_patterns/01-atoms/grid/_grid.scss b/source/_patterns/01-atoms/grid/_grid.scss
@@ -1,4 +1,10 @@
-@import '../../00-protons/variables';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
+
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
 
 // Bootstrap override variables go here.
 // See available vars in ~bootstrap/scss/_variables.scss

diff --git a/source/_patterns/01-atoms/image/_image.scss b/source/_patterns/01-atoms/image/_image.scss
@@ -1,4 +1,6 @@
-@import '../../00-protons/variables';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
 
 // Override any Bootstrap image vars here
 @import '~bootstrap/scss/images';

diff --git a/source/_patterns/01-atoms/list-group/_list-group.scss b/source/_patterns/01-atoms/list-group/_list-group.scss
@@ -1,4 +1,6 @@
-@import '../../00-protons/variables';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
 
 // To change default bootstrap list-item variables,
 // copy from ~bootstrap/scss/variables to here

diff --git a/source/_patterns/01-atoms/svgicon/_svgicon.scss b/source/_patterns/01-atoms/svgicon/_svgicon.scss
@@ -1,6 +1,11 @@
-// All component Sass needs non-printing base config
-@import '../../00-protons/variables';
-@import './scss/_icons-generated';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
+
+// Note!
+// ./scss/_icons-generated is automatically made available because
+// 00-protons/variables is provided to every scss file and _icons-generated
+// is @import'd within 00-protons/variables
 
 // Default styles to maintain inline-block functionality
 // since the SVG is wrapped in a div

diff --git a/source/_patterns/01-atoms/svgicon/demo/_svgicon-demo.scss b/source/_patterns/01-atoms/svgicon/demo/_svgicon-demo.scss
@@ -1,5 +1,6 @@
-// All component Sass needs non-printing base config
-@import '../../../00-protons/variables';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
 
 .svgicon-demo--particle-mixin {
   @include sprite('person');

diff --git a/source/_patterns/02-molecules/card/_card.scss b/source/_patterns/02-molecules/card/_card.scss
@@ -1,10 +1,12 @@
-// All component Sass needs non-printing base config
-@import '../../00-protons/variables';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
 
-// To change default bootstrap card variables, SEE ~bootstrap/scss/variables
-// Add bootstrap variables here
+// To change default Bootstrap card variables, see ~bootstrap/scss/variables
+// and then add Bootstrap variables here
 $card-border-width: 1px;
 
+// Then import the Bootstrap component styles
 @import '~bootstrap/scss/card';
 
 // Add custom code here

diff --git a/source/_patterns/02-molecules/carousel/_carousel.scss b/source/_patterns/02-molecules/carousel/_carousel.scss
@@ -1,5 +1,6 @@
-// All component Sass needs non-printing base config
-@import '../../00-protons/variables';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
 
 // To change default bootstrap carousel variables, SEE ~bootstrap/scss/variables
 // Add bootstrap variables here

diff --git a/source/_patterns/02-molecules/example-widget/_example-widget.scss b/source/_patterns/02-molecules/example-widget/_example-widget.scss
@@ -1,5 +1,6 @@
-// All component Sass needs non-printing base config
-@import '../../00-protons/variables';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
 
 .example-widget {
 }
diff --git a/source/_patterns/02-molecules/jumbotron/_jumbotron.scss b/source/_patterns/02-molecules/jumbotron/_jumbotron.scss
@@ -1,5 +1,6 @@
-// All component Sass needs non-printing base config
-@import '../../00-protons/variables';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
 
 // To change default bootstrap jumbotron variables, SEE ~bootstrap/scss/variables
 // Add bootstrap variables here

diff --git a/source/_patterns/02-molecules/nav/_nav.scss b/source/_patterns/02-molecules/nav/_nav.scss
@@ -1,4 +1,6 @@
-@import '../../00-protons/variables';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
 
 // To change default bootstrap nav variables,
 // copy from ~bootstrap/scss/variables to here

diff --git a/source/_patterns/02-molecules/pagination/_pagination.scss b/source/_patterns/02-molecules/pagination/_pagination.scss
@@ -1,5 +1,6 @@
-// All component Sass needs non-printing base config
-@import '../../00-protons/variables';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
 
 // To change default bootstrap variables, SEE ~bootstrap/scss/variables
 // Add bootstrap variables here

diff --git a/source/_patterns/03-organisms/accordion/_accordion.scss b/source/_patterns/03-organisms/accordion/_accordion.scss
@@ -1,5 +1,6 @@
-// All component Sass needs non-printing base config
-@import '../../00-protons/variables';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
 
 // Accordion contains both Bootstrap Card and Collapse.
 // To change default bootstrap variables, SEE ~bootstrap/scss/variables

diff --git a/source/_patterns/03-organisms/article/_article.scss b/source/_patterns/03-organisms/article/_article.scss
@@ -1,4 +1,5 @@
-// All component Sass needs non-printing base config
-@import '../../00-protons/variables';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
 
 // Add custom code here
diff --git a/source/_patterns/03-organisms/footer/_footer.scss b/source/_patterns/03-organisms/footer/_footer.scss
@@ -1,5 +1,6 @@
-// All component Sass needs non-printing base config
-@import '../../00-protons/variables';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
 
 .footer {
 }
diff --git a/source/_patterns/03-organisms/navbar/_navbar.scss b/source/_patterns/03-organisms/navbar/_navbar.scss
@@ -1,4 +1,6 @@
-@import '../../00-protons/variables';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
 
 // To change default bootstrap navbar variables,
 // copy from ~bootstrap/scss/variables to here

diff --git a/source/_patterns/04-templates/basic-page/_basic-page.scss b/source/_patterns/04-templates/basic-page/_basic-page.scss
@@ -1,5 +1,6 @@
-// All component Sass needs non-printing base config
-@import '../../00-protons/variables';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
 
 .basic-page {
   @include full-width();

diff --git a/tools/new-component/templates/_pattern.scss b/tools/new-component/templates/_pattern.scss
@@ -1,5 +1,6 @@
-// All component Sass needs non-printing base config
-@import '../../00-protons/variables';
+// The non-printing variables, functions, and mixins of 00-protons/variables
+// are provided to this file via:
+// webpack.particle.dev.js: sass-loader.data|includePaths
 
 .<%= name %> {
 }
diff --git a/webpack.particle.dev.js b/webpack.particle.dev.js
@@ -54,7 +54,17 @@ module.exports = {
           { loader: 'resolve-url-loader' },
           {
             loader: 'sass-loader',
-            options: { sourceMap: true, functions: sassExportData },
+            options: {
+              // ALL Sass partials should be provided with non-printing
+              // variables, mixins, and functions
+              data: '@import "00-protons/variables";',
+              // Enable Sass to import other components via, eg:
+              // `@import 01-atoms/thing/thing`
+              includePaths: [path.resolve(__dirname, './source/_patterns')],
+              // Used to generate JSON about variables like colors, fonts
+              functions: sassExportData,
+              sourceMap: true,
+            },
           },
         ],
       },

diff --git a/webpack.particle.prod.js b/webpack.particle.prod.js
@@ -46,7 +46,17 @@ const prod = {
             { loader: 'resolve-url-loader' },
             {
               loader: 'sass-loader',
-              options: { sourceMap: true, functions: sassExportData },
+              options: {
+                // ALL Sass partials should be provided with non-printing
+                // variables, mixins, and functions
+                data: '@import "00-protons/variables";',
+                // Enable Sass to import other components via, eg:
+                // `@import 01-atoms/thing/thing`
+                includePaths: [path.resolve(__dirname, './source/_patterns')],
+                // Used to generate JSON about variables like colors, fonts
+                functions: sassExportData,
+                sourceMap: true,
+              },
             },
           ],
         }),