first commit

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.`);
+    });
+  });
+};

core/scripts/css/check.js

@@ -0,0 +1,22 @@
+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(err);
+        process.exitCode = 1;
+        return;
+      }
+      if (code !== data.toString()) {
+        log(`'${filePath}' is not updated.`);
+        process.exitCode = 1;
+      }
+    });
+  });
+};

core/scripts/css/compile.js

@@ -0,0 +1,81 @@
+const log = require('./log');
+const fs = require('fs');
+const postcss = require('postcss');
+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 prettier = require('prettier');
+const removeUnwantedComments = require('./remove-unwanted-comments');
+
+module.exports = (filePath, callback) => {
+  // Transform the file.
+  fs.readFile(filePath, (err, css) => {
+    postcss([
+      postcssImport({
+        plugins: [
+          removeUnwantedComments,
+        ],
+      }),
+      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,
+        }
+      }),
+      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,
+          // Prevent converting PX to REM for icon styles. These files have been
+          // added to use the `postcssUrl` plugin, but aren't compatible with
+          // `postcssPixelsToRem`.
+          exclude: (filePath) => filePath.match(/core\/modules.*\.icons\..*\.pcss\.css$/)
+
+      }),
+      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(async result => {
+      const config = await prettier.resolveConfig(filePath);
+      return await prettier.format(result.css, config);
+    })
+    .then(callback)
+    .catch(error => {
+      log(error);
+      process.exitCode = 1;
+    });
+  });
+};

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}`);
+};

core/scripts/css/postcss-build.js

@@ -0,0 +1,46 @@
+/**
+ * @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.pcss.css and misc/drupal.init.pcss.css</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 { globSync } = 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 = (filePaths) => {
+  // Process all the found files.
+  let callback = changeOrAdded;
+  if (argv.check) {
+    callback = check;
+  }
+  filePaths.forEach(callback);
+};
+
+if (argv.file) {
+  processFiles([].concat(argv.file));
+}
+else {
+  processFiles(globSync(fileMatch, globOptions).sort());
+}
+process.exitCode = 0;

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

core/scripts/css/remove-unwanted-comments.js

@@ -0,0 +1,14 @@
+// On import, remove the comments, so they don't appear as useless comments at the top of the autogenerated css files.
+module.exports = opts => {
+  return {
+    postcssPlugin: 'remove-unwanted-comments',
+    Once(css) {
+      css.walk(node => {
+        if (node.type === 'comment') {
+          node.remove();
+        }
+      })
+    }
+  }
+}
+module.exports.postcss = true