From ad1090648dbafb9d8635e41b592cc7e76fe499dc Mon Sep 17 00:00:00 2001 From: Christopher Bloom Date: Fri, 18 Oct 2019 09:52:54 -0700 Subject: [PATCH] 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 | 19 ++++++++++++++++++ package-lock.json | 20 +++++++++++++++++++ package.json | 2 +- particle.js | 10 ++++++++++ postcss.config.js | 8 ++++++++ source/default/_data/data.yml | 2 ++ .../_patterns/00-protons/demo/welcome.twig | 2 +- .../01-atoms/branding/demo/brandings.twig | 2 +- .../_patterns/01-atoms/image/demo/images.md | 2 +- .../_patterns/01-atoms/image/demo/images.twig | 18 ++++++++++++++--- .../_patterns/01-atoms/image/demo/images.yml | 12 +++++------ .../default/_patterns/01-atoms/image/index.js | 4 ++++ .../_patterns/01-atoms/svg/_svg--icon.twig | 2 +- .../sass/non-printing/variables/_colors.scss | 4 ++-- .../tokens/sass/printing/_printing.scss | 1 - .../tokens/sass/printing/utilities/_svg.scss | 16 --------------- source/default/webpack.config.js | 8 +------- webpack.particle.js | 14 ++++--------- 18 files changed, 96 insertions(+), 50 deletions(-) create mode 100644 postcss.config.js delete mode 100644 source/default/tokens/sass/printing/utilities/_svg.scss diff --git a/apps/node-pl/webpack.config.js b/apps/node-pl/webpack.config.js index c85359bb94..fef9989c50 100644 --- a/apps/node-pl/webpack.config.js +++ b/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)$/, diff --git a/package-lock.json b/package-lock.json index de19543e12..ed0babe94f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11840,6 +11840,16 @@ "integrity": "sha512-P+0a/gBzLgVlCnK8I7VcD0yuYJscmWn66wH9tlKsQnmVdg689tLEmziwB9PuazZYLkcm07fvWOKCJJqI55sD5Q==", "dev": true }, + "last-call-webpack-plugin": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz", + "integrity": "sha512-7KI2l2GIZa9p2spzPIVZBYyNKkN+e/SQPpnjlTiPhdbDW3F86tdKKELxKpzJ5sgU19wQWsACULZmpTPYHeWO5w==", + "dev": true, + "requires": { + "lodash": "^4.17.5", + "webpack-sources": "^1.1.0" + } + }, "latest-version": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-3.1.0.tgz", @@ -13641,6 +13651,16 @@ } } }, + "optimize-css-assets-webpack-plugin": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.3.tgz", + "integrity": "sha512-q9fbvCRS6EYtUKKSwI87qm2IxlyJK5b4dygW1rKUBT6mMDhdG5e5bZT63v6tnJR9F9FB/H5a0HTmtw+laUBxKA==", + "dev": true, + "requires": { + "cssnano": "^4.1.10", + "last-call-webpack-plugin": "^3.0.0" + } + }, "optionator": { "version": "0.8.2", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz", diff --git a/package.json b/package.json index 6e5c57c560..d6aceaf130 100644 --- a/package.json +++ b/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", diff --git a/particle.js b/particle.js index b3f294691c..081308c84a 100644 --- a/particle.js +++ b/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', diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000000..244868cad1 --- /dev/null +++ b/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 } }, + }, +}; diff --git a/source/default/_data/data.yml b/source/default/_data/data.yml index 69b89f6a66..bcd5c26160 100644 --- a/source/default/_data/data.yml +++ b/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 diff --git a/source/default/_patterns/00-protons/demo/welcome.twig b/source/default/_patterns/00-protons/demo/welcome.twig index fdc4b9f672..5b8e4a01d0 100644 --- a/source/default/_patterns/00-protons/demo/welcome.twig +++ b/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!', } %} diff --git a/source/default/_patterns/01-atoms/branding/demo/brandings.twig b/source/default/_patterns/01-atoms/branding/demo/brandings.twig index 8242eed107..3293d708c0 100644 --- a/source/default/_patterns/01-atoms/branding/demo/brandings.twig +++ b/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' } %} diff --git a/source/default/_patterns/01-atoms/image/demo/images.md b/source/default/_patterns/01-atoms/image/demo/images.md index addd387e62..8e5d13e0c5 100644 --- a/source/default/_patterns/01-atoms/image/demo/images.md +++ b/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', } } %} ``` diff --git a/source/default/_patterns/01-atoms/image/demo/images.twig b/source/default/_patterns/01-atoms/image/demo/images.twig index 026e8ca31b..39a11d72eb 100644 --- a/source/default/_patterns/01-atoms/image/demo/images.twig +++ b/source/default/_patterns/01-atoms/image/demo/images.twig @@ -21,7 +21,7 @@
-

Picture with Multiple Source

+

Picture with Multiple Sources

{% include '@atoms/image/_image.twig' with { image: image_picture_demo, @@ -29,6 +29,18 @@
+
+

Image using paths.images path

+
+ {% include '@atoms/image/_image.twig' with { + image: { + variant: 'primary', + src: paths.images ~'/astrogoat.png' + }, + } %} +
+
+

Background Images

@@ -36,7 +48,7 @@

SVG

{% 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 @@

PNG

{% 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!', } %} diff --git a/source/default/_patterns/01-atoms/image/demo/images.yml b/source/default/_patterns/01-atoms/image/demo/images.yml index 17938a73e0..bb037f4331 100644 --- a/source/default/_patterns/01-atoms/image/demo/images.yml +++ b/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 picture.' + 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 picture.' diff --git a/source/default/_patterns/01-atoms/image/index.js b/source/default/_patterns/01-atoms/image/index.js index 1b8530c4ce..2edaa1e56e 100644 --- a/source/default/_patterns/01-atoms/image/index.js +++ b/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'; diff --git a/source/default/_patterns/01-atoms/svg/_svg--icon.twig b/source/default/_patterns/01-atoms/svg/_svg--icon.twig index 85c0f9f545..41c4826179 100644 --- a/source/default/_patterns/01-atoms/svg/_svg--icon.twig +++ b/source/default/_patterns/01-atoms/svg/_svg--icon.twig @@ -22,6 +22,6 @@
- +
diff --git a/source/default/tokens/sass/non-printing/variables/_colors.scss b/source/default/tokens/sass/non-printing/variables/_colors.scss index 06bf06d09c..5f4ebe08c2 100644 --- a/source/default/tokens/sass/non-printing/variables/_colors.scss +++ b/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'), ); diff --git a/source/default/tokens/sass/printing/_printing.scss b/source/default/tokens/sass/printing/_printing.scss index a2015a96ce..5698b84100 100644 --- a/source/default/tokens/sass/printing/_printing.scss +++ b/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'; diff --git a/source/default/tokens/sass/printing/utilities/_svg.scss b/source/default/tokens/sass/printing/utilities/_svg.scss deleted file mode 100644 index 7cffa48d8f..0000000000 --- a/source/default/tokens/sass/printing/utilities/_svg.scss +++ /dev/null @@ -1,16 +0,0 @@ -// Loop over every SVG and create a CSS class for it -@each $icon in $svgicons { - .icon--#{$icon} { - @include sprite(#{$icon}); - display: inline-block; - height: rem-calc(40px); - width: rem-calc(40px); - } -} - -// Loop over every theme-color and create a CSS class to colorize it -@each $color in map_keys($theme-colors) { - .color-fill--#{$color} { - color: theme-color(#{$color}); - } -} diff --git a/source/default/webpack.config.js b/source/default/webpack.config.js index 14a05eaff3..2becf60057 100644 --- a/source/default/webpack.config.js +++ b/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, }, diff --git a/webpack.particle.js b/webpack.particle.js index b5c6b54c24..671ec1aec5 100644 --- a/webpack.particle.js +++ b/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]', }, }, ],