first commit

web/core/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/core/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/core/scripts/css/compile.js

@@ -0,0 +1,40 @@
+const chalk = require('chalk');
+const log = require('./log');
+const fs = require('fs');
+const postcss = require('postcss');
+const postcssCustomProperties = require('postcss-custom-properties');
+const postcssCalc = require("postcss-calc");
+const postcssImport = require('postcss-import');
+const autoprefixer = require('autoprefixer');
+const postcssHeader = require('postcss-header');
+
+module.exports = (filePath, callback) => {
+  // Transform the file.
+  fs.readFile(filePath, (err, css) => {
+    postcss([
+      postcssImport(),
+      postcssCustomProperties({
+        // Remove converted properties from the generated code. This needs to be
+        // set to ensure that CSS minifiers don't remove the generated values.
+        preserve: false,
+      }),
+      postcssCalc,
+      autoprefixer({
+        // Output without visual cascade for more consistency with existing
+        // Drupal CSS.
+        cascade: false
+      }),
+      postcssHeader({
+        header: `/*\n * DO NOT EDIT THIS FILE.\n * See the following change record for more information,\n * https://www.drupal.org/node/2815083\n * @preserve\n */\n`,
+      }),
+    ])
+    .process(css, { from: filePath })
+    .then(result => {
+      callback(result.css);
+    })
+    .catch(error => {
+      log(chalk.red(error));
+      process.exitCode = 1;
+    });
+  });
+};

web/core/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/core/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/core/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.`));