From a1191a0026fb505a0e0f19941f023238d0f7bf3d Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Fri, 21 Aug 2020 23:14:52 -0700 Subject: [PATCH] feat(clayui.com): Renames `gatsby-plugin-svg-compile-sprite` to `gatsby-plugin-clay-css-tasks` and use node-sass to compile atlas.scss and base.scss to the static directory chore(clayui.com): Add static/css to .gitignore, changes aren't informative since file is compressed --- clayui.com/.gitignore | 2 + clayui.com/gatsby-config.js | 7 +- .../clay-icon-aliases.js | 0 .../gatsby-node.js | 76 +++++++++++++------ .../gatsby-plugin-clay-css-tasks/package.json | 4 + .../package.json | 4 - clayui.com/static/css/.keep | 0 7 files changed, 63 insertions(+), 30 deletions(-) rename clayui.com/plugins/{gatsby-plugin-svg-compile-sprite => gatsby-plugin-clay-css-tasks}/clay-icon-aliases.js (100%) rename clayui.com/plugins/{gatsby-plugin-svg-compile-sprite => gatsby-plugin-clay-css-tasks}/gatsby-node.js (68%) create mode 100644 clayui.com/plugins/gatsby-plugin-clay-css-tasks/package.json delete mode 100644 clayui.com/plugins/gatsby-plugin-svg-compile-sprite/package.json create mode 100644 clayui.com/static/css/.keep diff --git a/clayui.com/.gitignore b/clayui.com/.gitignore index da3d72140c..0b09a804b8 100644 --- a/clayui.com/.gitignore +++ b/clayui.com/.gitignore @@ -59,4 +59,6 @@ typings/ .cache/ public +static/css/atlas.css +static/css/base.css yarn-error.log diff --git a/clayui.com/gatsby-config.js b/clayui.com/gatsby-config.js index 08566fd300..f5656828c4 100644 --- a/clayui.com/gatsby-config.js +++ b/clayui.com/gatsby-config.js @@ -16,16 +16,15 @@ module.exports = { 'gatsby-plugin-meta-redirect', { options: { + clay: clay.srcDir, srcDir: path.join(clay.srcDir, 'images', 'icons'), staticDir: path.join(__dirname, 'static'), }, - resolve: 'gatsby-plugin-svg-compile-sprite', + resolve: 'gatsby-plugin-clay-css-tasks', }, { options: { - includePaths: clay.includePaths.concat( - path.join(clay.includePaths[0], 'node_modules') - ), + includePaths: [clay.includePaths[0]], precision: 8, }, resolve: 'gatsby-plugin-sass', diff --git a/clayui.com/plugins/gatsby-plugin-svg-compile-sprite/clay-icon-aliases.js b/clayui.com/plugins/gatsby-plugin-clay-css-tasks/clay-icon-aliases.js similarity index 100% rename from clayui.com/plugins/gatsby-plugin-svg-compile-sprite/clay-icon-aliases.js rename to clayui.com/plugins/gatsby-plugin-clay-css-tasks/clay-icon-aliases.js diff --git a/clayui.com/plugins/gatsby-plugin-svg-compile-sprite/gatsby-node.js b/clayui.com/plugins/gatsby-plugin-clay-css-tasks/gatsby-node.js similarity index 68% rename from clayui.com/plugins/gatsby-plugin-svg-compile-sprite/gatsby-node.js rename to clayui.com/plugins/gatsby-plugin-clay-css-tasks/gatsby-node.js index 62d646563e..738a24173b 100644 --- a/clayui.com/plugins/gatsby-plugin-svg-compile-sprite/gatsby-node.js +++ b/clayui.com/plugins/gatsby-plugin-clay-css-tasks/gatsby-node.js @@ -3,16 +3,14 @@ * SPDX-License-Identifier: BSD-3-Clause */ -// Compiles SVG icons in directory `clay-css/src/images/icons` into -// `static/images/icons/icons.svg` spritemap. This also autogenerates -// `static/js/flags-autogenerated.json` and `static/js/icons-autogenerated.json` -// used for search in `icons.html`. - const fs = require('fs'); +const sass = require('node-sass'); const path = require('path'); const aliases = require('./clay-icon-aliases'); +// For autogenerated files in `/static/js` + const buildJson = (arr, aliasesMap) => { let json = '[\n'; @@ -41,6 +39,20 @@ const buildJson = (arr, aliasesMap) => { return json; }; +const compileSass = (options) => { + return sass.renderSync({ + file: options.file, + outputStyle: 'compressed', + sourceMap: true, + sourceMapContents: true, + }); +}; + +// Compiles SVG icons in directory `clay-css/src/images/icons` into +// `static/images/icons/icons.svg` spritemap. This also autogenerates +// `static/js/flags-autogenerated.json` and `static/js/icons-autogenerated.json` +// used for search in `icons.html`. + const generateFiles = (pluginOptions) => { const REGEX_FILE_EXT_SVG = /(?:flags-|\.svg$)/g; const REGEX_HTML_COMMENTS = /\n?/gs; @@ -105,33 +117,53 @@ const generateFiles = (pluginOptions) => { ); }; +// Compiles and writes `atlas.css` and `base.css` files to `/static/css/` + +const generateCSSFiles = (pluginOptions) => { + fs.writeFileSync( + path.join(pluginOptions.staticDir, 'css', 'atlas.css'), + compileSass({ + file: path.join(pluginOptions.clay, 'scss', 'atlas.scss'), + }).css.toString() + ); + + fs.writeFileSync( + path.join(pluginOptions.staticDir, 'css', 'base.css'), + compileSass({ + file: path.join(pluginOptions.clay, 'scss', 'base.scss'), + }).css.toString() + ); +}; + exports.onPostBootstrap = ({reporter}, pluginOptions) => { generateFiles(pluginOptions); reporter.info(`Compiling icons.svg finished`); + + generateCSSFiles(pluginOptions); + + reporter.info(`Compiling 'atlas.css' and 'base.css' finished!`); }; exports.onCreateDevServer = ({reporter}, pluginOptions) => { - const MESSAGE = `Compiling icons.svg finished: Refresh the page!`; + const watcher = require('chokidar').watch(pluginOptions.clay); - const watcher = require('chokidar').watch(pluginOptions.srcDir); + function modified(dir) { + if (dir.match(/clay-css\/src\/images\/icons/g)) { + generateFiles(pluginOptions); - watcher.on(`ready`, () => { - watcher - .on(`add`, () => { - generateFiles(pluginOptions); + reporter.info(`Compiling icons.svg finished: Refresh the page!`); + } else if (dir.match(/clay-css\/src\/scss/g)) { + generateCSSFiles(pluginOptions); - reporter.info(MESSAGE); - }) - .on(`change`, () => { - generateFiles(pluginOptions); - - reporter.info(MESSAGE); - }) - .on(`unlink`, () => { - generateFiles(pluginOptions); + reporter.info(`Compiling 'atlas.css' and 'base.css' finished!`); + } + } - reporter.info(MESSAGE); - }); + watcher.on(`ready`, () => { + watcher + .on(`add`, (path) => modified(path)) + .on(`change`, (path) => modified(path)) + .on(`unlink`, (path) => modified(path)); }); }; diff --git a/clayui.com/plugins/gatsby-plugin-clay-css-tasks/package.json b/clayui.com/plugins/gatsby-plugin-clay-css-tasks/package.json new file mode 100644 index 0000000000..0e254a43b6 --- /dev/null +++ b/clayui.com/plugins/gatsby-plugin-clay-css-tasks/package.json @@ -0,0 +1,4 @@ +{ + "name": "gatsby-plugin-clay-css-tasks", + "version": "0.0.1" +} diff --git a/clayui.com/plugins/gatsby-plugin-svg-compile-sprite/package.json b/clayui.com/plugins/gatsby-plugin-svg-compile-sprite/package.json deleted file mode 100644 index 2ec34850ca..0000000000 --- a/clayui.com/plugins/gatsby-plugin-svg-compile-sprite/package.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "gatsby-plugin-svg-compile-sprite", - "version": "0.0.1" -} diff --git a/clayui.com/static/css/.keep b/clayui.com/static/css/.keep new file mode 100644 index 0000000000..e69de29bb2