rorschach

web/themes/custom/rorschach/scripts/css/changeOrAdded.js

@@ -0,0 +1,15 @@
+const fs = require('fs');
+const log = require('./log');
+const compile = require('./compile');
+
+module.exports = (filePath) => {
+  log(`'${filePath}' is being processed.`);
+  // Transform the file.
+  compile(filePath, function write(code) {
+    const fileName = filePath.slice(0, -9);
+    // Write the result to the filesystem.
+    fs.writeFile(`${fileName}.css`, code, () => {
+      log(`'${filePath}' is finished.`);
+    });
+  });
+};

web/themes/custom/rorschach/scripts/css/check.js

@@ -0,0 +1,23 @@
+const chalk = require('chalk');
+const fs = require('fs');
+const log = require('./log');
+const compile = require('./compile');
+
+module.exports = (filePath) => {
+  log(`'${filePath}' is being checked.`);
+  // Transform the file.
+  compile(filePath, function check(code) {
+    const fileName = filePath.slice(0, -9);
+    fs.readFile(`${fileName}.css`, function read(err, data) {
+      if (err) {
+        log(chalk.red(err));
+        process.exitCode = 1;
+        return;
+      }
+      if (code !== data.toString()) {
+        log(chalk.red(`'${filePath}' is not updated.`));
+        process.exitCode = 1;
+      }
+    });
+  });
+};

web/themes/custom/rorschach/scripts/css/compile.js

@@ -0,0 +1,95 @@
+const chalk = require('chalk');
+const log = require('./log');
+const fs = require('fs');
+const postcss = require('postcss');
+const postcssCalc = require("postcss-calc");
+const postcssImport = require('postcss-import');
+const postcssHeader = require('postcss-header');
+const postcssUrl = require('postcss-url');
+const postcssPresetEnv = require('postcss-preset-env');
+// cspell:ignore pxtorem
+const postcssPixelsToRem = require('postcss-pxtorem');
+const stylelint = require('stylelint');
+
+module.exports = (filePath, callback) => {
+  // Transform the file.
+  fs.readFile(filePath, (err, css) => {
+    postcss([
+      postcssImport({
+       plugins: [
+         // On import, remove the comments from variables.pcss.css so they don't
+         // appear as useless comments at the top files that import these
+         // variables.
+         postcss.plugin('remove-unwanted-comments-from-variables', (options) => {
+           return css => {
+             if (css.source.input.file.indexOf('variables.pcss.css') !== -1) {
+               css.walk(node => {
+                 if (node.type === 'comment') {
+                   node.remove();
+                 }
+               });
+             }
+           };
+         }),
+       ],
+      }),
+      postcssPresetEnv({
+        stage: 1,
+        preserve: false,
+        autoprefixer: {
+          cascade: false,
+          grid: 'no-autoplace',
+        },
+        features: {
+          'blank-pseudo-class': false,
+          'focus-visible-pseudo-class': false,
+          'focus-within-pseudo-class': false,
+          'has-pseudo-class': false,
+          'image-set-function': false,
+          'prefers-color-scheme-query': false,
+        }
+      }),
+      postcssCalc,
+      postcssPixelsToRem({
+          propList: [
+            '*',
+            '!background-position',
+            '!border',
+            '!border-width',
+            '!box-shadow',
+            '!border-top*',
+            '!border-right*',
+            '!border-bottom*',
+            '!border-left*',
+            '!border-start*',
+            '!border-end*',
+            '!outline*',
+          ],
+          mediaQuery: true,
+          minPixelValue: 3,
+      }),
+      postcssHeader({
+        header: `/*\n * DO NOT EDIT THIS FILE.\n * See the following change record for more information,\n * https://www.drupal.org/node/3084859\n * @preserve\n */\n`,
+      }),
+      postcssUrl({
+        filter: '**/*.svg',
+        url: 'inline',
+        optimizeSvgEncode: true,
+      })
+    ])
+    .process(css, { from: filePath })
+    .then(result => {
+      return stylelint.lint({
+        code: result.css,
+        fix: true
+      });
+    })
+    .then(result => {
+      callback(result.output);
+    })
+    .catch(error => {
+      log(chalk.red(error));
+      process.exitCode = 1;
+    });
+  });
+};

web/themes/custom/rorschach/scripts/css/log.js

@@ -0,0 +1,4 @@
+module.exports = (message) => {
+  // Logging human-readable timestamp.
+  console.log(`[${new Date().toTimeString().slice(0, 8)}] ${message}`);
+};

web/themes/custom/rorschach/scripts/css/postcss-build.js

@@ -0,0 +1,49 @@
+/**
+ * @file
+ *
+ * Provides the build:css command to compile *.pcss.css files to CSS.
+ *
+ * Run build:css with --file to only parse a specific file. Using the --check
+ * flag build:css can be run to check if files are compiled correctly.
+ * @example <caption>Only process misc/drupal.es6.js and misc/drupal.init.es6.js</caption
+ * yarn run build:css -- --file misc/drupal.pcss.css --file misc/drupal.init.pcss.css
+ * @example <caption>Check if all files have been compiled correctly</caption
+ * yarn run build:css -- --check
+ *
+ * @internal This file is part of the core CSS build process and is only
+ * designed to be used in that context.
+ */
+
+'use strict';
+
+const glob = require('glob');
+const argv = require('minimist')(process.argv.slice(2));
+const changeOrAdded = require('./changeOrAdded');
+const check = require('./check');
+const log = require('./log');
+
+// Match only on .pcss.css files.
+const fileMatch = './**/*.pcss.css';
+// Ignore everything in node_modules
+const globOptions = {
+  ignore: './node_modules/**'
+};
+const processFiles = (error, filePaths) => {
+  if (error) {
+    process.exitCode = 1;
+  }
+  // Process all the found files.
+  let callback = changeOrAdded;
+  if (argv.check) {
+    callback = check;
+  }
+  filePaths.forEach(callback);
+};
+
+if (argv.file) {
+  processFiles(null, [].concat(argv.file));
+}
+else {
+  glob(fileMatch, globOptions, processFiles);
+}
+process.exitCode = 0;

web/themes/custom/rorschach/scripts/css/postcss-watch.js

@@ -0,0 +1,43 @@
+/**
+ * @file
+ *
+ * Watch changes to *.pcss.css files and compile them to CSS during development.
+ *
+ * @internal This file is part of the core CSS build process and is only
+ * designed to be used in that context.
+ */
+
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const chokidar = require('chokidar');
+
+const changeOrAdded = require('./changeOrAdded');
+const log = require('./log');
+
+// Match only on .pcss.css files.
+const fileMatch = './**/*.pcss.css';
+// Ignore everything in node_modules
+const watcher = chokidar.watch(fileMatch, {
+  ignoreInitial: true,
+  ignored: './node_modules/**'
+});
+
+const unlinkHandler = (err) => {
+  if (err) {
+    log(err);
+  }
+};
+
+// Watch for filesystem changes.
+watcher
+  .on('add', changeOrAdded)
+  .on('change', changeOrAdded)
+  .on('unlink', (filePath) => {
+    const fileName = filePath.slice(0, -9);
+    fs.stat(`${fileName}.css`, () => {
+      fs.unlink(`${fileName}.css`, unlinkHandler);
+    });
+  })
+  .on('ready', () => log(`Watching '${fileMatch}' for changes.`));