Various tweaks and updates (#612)

* Duplicate svg color output, proper map-get()

* Move sass2json loader to pl webpack instead of design system webpack

* Add root kep to resolve-url-loader to allow processing of absolute path files

* Bring in optimize-css-assets-webpack-plugin to remove dupes in output css

* Reference image twig files in image/index.js to move to output dir during drupal:build

* Move images to root images folder in dist output, just like fonts

* Proper css map files on full build

* Enabling autoprefixer to add IE 11 prefixes for Grid Layout properties

* Enabling autoprefixer to add IE 11 prefixes for Grid Layout properties

* Better PostCSS handling, simpler webpack config.

* Update paths.images path

apps/node-pl/webpack.config.js

@@ -4,7 +4,9 @@
 
 // Library Imports
 const path = require('path');
+
 const { DefinePlugin } = require('webpack');
+const sassExportData = require('@theme-tools/sass-export-data');
 
 // Plugins
 const RunScriptOnFiletypeChange = require('../../tools/webpack/run-script-on-filetype-change');
@@ -29,6 +31,23 @@ const shared = {
   },
   module: {
     rules: [
+      {
+        test: /\.(sa|sc|c)ss$/,
+        use: [
+          {
+            loader: 'sass-loader',
+            options: {
+              // Used to generate JSON about variables like colors, fonts
+              functions: {
+                ...sassExportData({
+                  name: 'export_data',
+                  path: path.resolve(appConfig.APP_DESIGN_SYSTEM, '_data/'),
+                }),
+              },
+            },
+          },
+        ],
+      },
       // Non-standard assets on the dependency chain
       {
         test: /\.(yml|md)$/,

package.json

@@ -69,7 +69,6 @@
     "babel-loader": "^8.0.6",
     "cross-env": "^5.2.0",
     "css-loader": "^3.2.0",
-    "cssnano": "^4.1.10",
     "eslint": "^6.1.0",
     "eslint-config-airbnb-base": "^14.0.0",
     "eslint-config-prettier": "^6.0.0",
@@ -85,6 +84,7 @@
     "jest-vue-preprocessor": "^1.5.0",
     "mini-css-extract-plugin": "^0.7.0",
     "node-sass": "^4.12.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^1.18.2",

particle.js

@@ -8,6 +8,7 @@ const merge = require('webpack-merge');
 
 // Plugins:production
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 
 // Constants
 // NODE_ENV is set within all NPM scripts before running wepback, eg:
@@ -58,6 +59,15 @@ const cssModes = {
       ],
     },
     plugins: [
+      new OptimizeCSSAssetsPlugin({
+        // Ensure css map file output
+        cssProcessorOptions: {
+          map: {
+            inline: false,
+            annotation: true,
+          },
+        },
+      }),
       new MiniCssExtractPlugin({
         filename: '[name].styles.css',
         chunkFilename: '[id].css',

postcss.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: {
+    // Uses .browserslistrc to figure out which prefixes to add. CSS Grid has
+    // special considerations:
+    //   https://github.com/postcss/autoprefixer#does-autoprefixer-polyfill-grid-layout-for-ie
+    'postcss-preset-env': { autoprefixer: { grid: true } },
+  },
+};

source/default/_data/data.yml

@@ -11,6 +11,8 @@ pl: true
 BUILD_TARGET: pl
 paths:
   assets: '../../../assets'
+  images: '../../../assets/images'
+  fonts: '../../../assets/fonts'
 bodyClass: 'pl pl-loading'
 
 # Generic Starter Template Data

source/default/_patterns/00-protons/demo/welcome.twig

@@ -14,7 +14,7 @@
 
         {% set welcome_image = {
           variant: 'primary',
-          src: paths.assets ~ '/astrogoat.png',
+          src: paths.images ~ '/astrogoat.png',
           alt: 'A friendly goat wearing a space helmet. The Astrogoat!',
         } %}
 

source/default/_patterns/01-atoms/branding/demo/brandings.twig

@@ -23,7 +23,7 @@
       {% block column_2 %}
         {% include "@atoms/branding/_branding.twig" with {
           url: '#',
-          logo_img_src: paths.assets ~ '/logo.svg',
+          logo_img_src: paths.images ~ '/logo.svg',
           site_name: 'Particle',
           site_slogan: 'Site Slogan that Describes the Logo Above with Src SVG'
         } %}

source/default/_patterns/01-atoms/image/demo/images.md

@@ -5,7 +5,7 @@ Please note that image implementations may contain this or similar code:
 ```twig
 {% include "@atoms/_image.twig" with {
   image: {
-    src: paths.assets ~ '/logo.svg',
+    src: paths.images ~ '/logo.svg',
   }
 } %}
 ```

source/default/_patterns/01-atoms/image/demo/images.twig

@@ -21,22 +21,34 @@
     </div>
 
     <div class="picture-image-demo m-3">
-      <h2>Picture with Multiple Source</h2>
+      <h2>Picture with Multiple Sources</h2>
       <div>
         {% include '@atoms/image/_image.twig' with {
           image: image_picture_demo,
         } %}
       </div>
     </div>
 
+    <div class="direct-image-demo m-3">
+      <h2>Image using paths.images path</h2>
+      <div>
+        {% include '@atoms/image/_image.twig' with {
+          image: {
+            variant: 'primary',
+            src: paths.images ~'/astrogoat.png'
+          },
+        } %}
+      </div>
+    </div>
+
     <div class="background-image-demo m-3">
       <h2>Background Images</h2>
       <div class="row">
         <div class="col-lg-6">
           <h3>SVG</h3>
           {% set image_bg_logo_demo = {
             variant: 'bg',
-            src: paths.assets ~ '/logo.svg',
+            src: paths.images ~ '/logo.svg',
             alt: 'A friendly goat wearing a space helmet. The Astrogoat!',
           } %}
 
@@ -48,7 +60,7 @@
           <h3>PNG</h3>
           {% set image_bg_astrogoat_demo = {
             variant: 'bg',
-            src: paths.assets ~ '/astrogoat.png',
+            src: paths.images ~ '/astrogoat.png',
             alt: 'A friendly goat wearing a space helmet. The Astrogoat!',
           } %}
 

source/default/_patterns/01-atoms/image/demo/images.yml

@@ -1,3 +1,9 @@
+image_demo_block:
+  title: 'Image'
+  text:
+    lead: 'Image HTML patterns.'
+    summary: 'The image pattern includes variants to cover most image use cases, including background images and <code>picture</code>.'
+
 image_primary_demo:
   variant: 'primary'
   src: ''
@@ -12,9 +18,3 @@ image_picture_demo:
   style: ''
   srcset: ['https://via.placeholder.com/100', 'https://via.placeholder.com/200', 'https://via.placeholder.com/400']
   placeholder: false
-
-image_demo_block:
-  title: 'Image'
-  text:
-    lead: 'Image HTML patterns.'
-    summary: 'The image pattern includes variants to cover most image use cases, including background images and <code>picture</code>.'

source/default/_patterns/01-atoms/image/index.js

@@ -12,6 +12,10 @@ import './_image.scss';
 
 // Module template
 import './_image.twig';
+import './_image--bg.twig';
+import './_image--picture.twig';
+import './_image--placeholder.twig';
+import './_image--primary.twig';
 
 export const name = 'image';
 

source/default/_patterns/01-atoms/svg/_svg--icon.twig

@@ -22,6 +22,6 @@
 
 <div class="{{ svg_classes }}">
   <svg viewBox="0 0 500 500">
-    <use xlink:href="{{ paths.assets }}/spritemap.svg?cacheBuster={{ random() }}#sprite-{{ svgicon.svgname }}"></use>
+    <use xlink:href="{{ paths.images }}/spritemap.svg?cacheBuster={{ random() }}#sprite-{{ svgicon.svgname }}"></use>
   </svg>
 </div>

source/default/tokens/sass/non-printing/variables/_colors.scss

@@ -79,6 +79,6 @@ Color Aliases
 $color-aliases: (
   'pink': map-get($primary-colors, 'pink'),
   'goldenrod': map-get($primary-colors, 'goldenrod'),
-  'light': map_get($neutral-hues, 'lightest-gray'),
-  'dark': map_get($neutral-hues, 'darkest-gray'),
+  'light': map-get($neutral-hues, 'lightest-gray'),
+  'dark': map-get($neutral-hues, 'darkest-gray'),
 );

source/default/tokens/sass/printing/_printing.scss

@@ -26,7 +26,6 @@ are provided to this file via:
 
 // Utility Classes
 @import 'utilities/breakpoints';
-@import 'utilities/svg';
 
 // Custom CSS-generating output
 @import 'type';

source/default/webpack.config.js

@@ -3,7 +3,6 @@
  */
 const path = require('path');
 
-const sassExportData = require('@theme-tools/sass-export-data');
 const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin');
 
 const namespaces = require('./namespaces');
@@ -17,12 +16,6 @@ module.exports = {
           {
             loader: 'sass-loader',
             options: {
-              // Used to generate JSON about variables like colors, fonts
-              // @TODO: move to app/pl
-              functions: sassExportData({
-                name: 'export_data',
-                path: path.resolve(__dirname, '_data/'),
-              }),
               // ALL Sass partials will be provided with non-printing
               // variables, mixins, and functions
               data: '@import "~tokens/sass/non-printing/non-printing";',
@@ -46,6 +39,7 @@ module.exports = {
         },
       },
       output: {
+        filename: 'images/spritemap.svg',
         svg4everybody: true,
         svgo: true,
       },

webpack.particle.js

@@ -8,10 +8,6 @@
 // Library Imports
 const { ProgressPlugin, ProvidePlugin } = require('webpack');
 
-// Loaders
-const postcssPresetEnv = require('postcss-preset-env');
-const cssnano = require('cssnano');
-
 // Plugins
 const StyleLintPlugin = require('stylelint-webpack-plugin');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
@@ -59,20 +55,18 @@ module.exports = {
             },
           },
           {
+            // PostCSS config at ./postcss.config.js
             loader: 'postcss-loader',
             options: {
               sourceMap: true,
               ident: 'postcss',
-              plugins: () =>
-                NODE_ENV === 'development'
-                  ? [postcssPresetEnv()] // Light processing for dev
-                  : [postcssPresetEnv(), cssnano()], // Heavy processing for prod
             },
           },
           {
             loader: 'resolve-url-loader',
             options: {
               sourceMap: true,
+              root: '',
             },
           },
           {
@@ -103,7 +97,7 @@ module.exports = {
         test: /\.(png|jpg|gif|svg)$/,
         loader: 'file-loader',
         options: {
-          name: '[name].[ext]?[hash]',
+          name: 'images/[name].[ext]?[hash]',
         },
       },
       {
@@ -112,7 +106,7 @@ module.exports = {
           {
             loader: 'file-loader',
             options: {
-              name: 'fonts/[name].[ext]',
+              name: 'fonts/[name].[ext]?[hash]',
             },
           },
         ],