feat(clayui.com): Renames gatsby-plugin-svg-compile-sprite to `gats…

…by-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

@@ -59,4 +59,6 @@ typings/
 
 .cache/
 public
+static/css/atlas.css
+static/css/base.css
 yarn-error.log

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',

clayui.com/plugins/gatsby-plugin-svg-compile-sprite/gatsby-node.js → 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));
 	});
 };

clayui.com/plugins/gatsby-plugin-clay-css-tasks/package.json

@@ -0,0 +1,4 @@
+{
+	"name": "gatsby-plugin-clay-css-tasks",
+	"version": "0.0.1"
+}