Merge pull request nightscout#8582 from nightscout/dependabot/npm_and_yarn/postcss-8.5.26

build(deps): Update PostCSS to 8.5.28 with regression coverage

Author: AndyLow91

.github/workflows/main.yml

@@ -39,8 +39,8 @@ jobs:
 
       - name: Install dependencies
         run: npm install
-      - name: Validate brace-expansion dependency resolution
-        run: npm ls brace-expansion --all
+      - name: Validate dependency resolution
+        run: npm ls brace-expansion postcss --all
       - name: Run Tests
         run: npm run-script test-ci
       - name: Run client-core tests

CHANGELOG.md

@@ -6,6 +6,11 @@ All notable changes to cgm-remote-monitor are documented in this file.
 
 ### Fixed
 
+- **PostCSS:** Update to 8.5.28 and its required Nano ID 3.3.18 dependency.
+  This includes CSS parsing fixes and tighter restrictions on loading source
+  maps referenced by CSS. CI now checks stylesheet output, source-map
+  boundaries and sanitizer compatibility. No Nightscout configuration changes
+  are required.
 - **Dependency security:** Update all `brace-expansion` copies to the latest
   compatible releases (1.1.18, 2.1.4 and 5.0.9), including nested tooling
   dependencies. Keep overrides scoped by major version because older

package-lock.json

@@ -30,7 +30,7 @@
     "test": "env-cmd -f ./my.test.env mocha --timeout 5000 --require ./tests/hooks.js --exit ./tests/*.test.js",
     "test-single": "env-cmd -f ./my.test.env mocha --timeout 5000 --require ./tests/hooks.js --exit ./tests/$TEST.test.js",
     "test:core": "mocha --timeout 5000 --exit ./tests/client-core/**/*.test.js",
-    "test:dependencies": "npm ls brace-expansion --all && mocha --timeout 5000 --exit ./tests/dependency-brace-expansion.test.js",
+    "test:dependencies": "npm ls brace-expansion postcss --all && mocha --timeout 5000 --exit ./tests/dependency-*.test.js",
     "test-ci": "env-cmd -f ./tests/ci.test.env nyc --reporter=lcov --reporter=text-summary mocha --timeout 5000 --require ./tests/hooks.js --exit ./tests/*.test.js",
     "test:fast": "env-cmd -f ./my.test.env mocha --timeout 5000 --require ./tests/hooks.js --exit --reporter min ./tests/*.test.js",
     "test:unit": "env-cmd -f ./my.test.env mocha --timeout 5000 --require ./tests/hooks.js --exit --parallel --jobs 2 ./tests/{admintools,ar2,basalprofileplugin,bgnow,boluswizardpreview,bridge,bridge-connect-compat,cannulaage,careportal,cob,data.*,ddata,direction,env,errorcodes,expressextensions,hashauth,insulinage,iob,language,levels,loop,maker,mmconnect,mongo-pool-config,pluginbase,plugins,profile,profileeditor,pushover,query,sandbox,security,sensorage,settings,simplealarms,timeago,times,treatmentnotify,units,upbat,utils,verifyauth}.test.js",
@@ -185,7 +185,7 @@
     "node-forge": "1.4.0",
     "lodash": "4.18.1",
     "ip-address": "10.2.0",
-    "postcss": "8.5.14",
+    "postcss": "8.5.28",
     "qs": "6.15.1",
     "flatted": "3.4.2",
     "picomatch": "2.3.2",

package.json

@@ -0,0 +1,178 @@
+'use strict';
+
+// Filesystem paths are repository fixtures or files in a new temporary directory.
+/* eslint-disable security/detect-non-literal-fs-filename */
+
+const assert = require('assert');
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+const { createRequire } = require('module');
+const semver = require('semver');
+const postcss = require('postcss');
+const sanitizeHtml = require('sanitize-html');
+const lock = require('../package-lock.json');
+
+describe('PostCSS dependency regressions', function () {
+  it('installs the reviewed release for CSS loading and HTML sanitization', function () {
+    const copies = Object.entries(lock.packages).filter(([name]) => name.endsWith('/postcss'));
+    assert.ok(copies.length > 0);
+    copies.forEach(([name, entry]) => {
+      // These module paths come only from the committed lockfile.
+      // eslint-disable-next-line security/detect-non-literal-require
+      const installed = require(path.resolve(__dirname, '..', name, 'package.json'));
+      assert.strictEqual(installed.version, entry.version);
+      assert.ok(semver.satisfies(installed.version, '>=8.5.28 <9'));
+    });
+    for (const consumer of ['css-loader', 'sanitize-html']) {
+      const consumerRequire = createRequire(require.resolve(consumer));
+      const installed = consumerRequire('postcss/package.json');
+      // eslint-disable-next-line security/detect-non-literal-require
+      const parent = require(consumer + '/package.json');
+      assert.ok(semver.satisfies(installed.version, parent.dependencies.postcss));
+      assert.strictEqual(consumerRequire('postcss'), postcss);
+    }
+  });
+
+  const stylesheets = [
+    'static/css/drawer.css',
+    'static/css/dropdown.css',
+    'static/css/sgv.css',
+    'views/clockviews/clock-shared.css',
+    'views/clockviews/clock-config.css'
+  ];
+  stylesheets.forEach(file => {
+    it('preserves CSS and source-map content for ' + file, function () {
+      const from = path.resolve(__dirname, '..', file);
+      const css = fs.readFileSync(from, 'utf8');
+      const result = postcss([{ postcssPlugin: 'round-trip', Once() {} }]).process(css, {
+        from,
+        map: { inline: false, annotation: false }
+      });
+      assert.strictEqual(result.css, css);
+      assert.deepStrictEqual(result.map.toJSON().sourcesContent, [css]);
+    });
+  });
+
+  it('preserves harmless hash-prefixed comments and a leading BOM', function () {
+    const css = '\uFEFF/*# Nightscout theme */\n.widget { color: red }';
+    const result = postcss([{ postcssPlugin: 'round-trip', Once() {} }])
+      .process(css, { from: 'theme.css', map: false });
+    assert.strictEqual(result.css, css);
+    assert.strictEqual(postcss().process(css, { from: 'theme.css', map: false }).css, css);
+  });
+
+  it('keeps a custom property separate from an appended comment', function () {
+    const root = postcss.parse('.widget{--accent:red}');
+    root.first.append(postcss.comment({ text: 'theme' }));
+    const parsed = postcss.parse(root.toString());
+    assert.strictEqual(parsed.first.first.value, 'red');
+    assert.deepStrictEqual(parsed.first.nodes.map(node => node.type), ['decl', 'comment']);
+  });
+
+  it('preserves empty comma-list items without inventing whitespace items', function () {
+    assert.deepStrictEqual(postcss.list.comma('red,,blue,'), ['red', '', 'blue', '']);
+    assert.deepStrictEqual(postcss.list.space(' \t\r\n '), []);
+    assert.deepStrictEqual(postcss.list.comma('rgb(1, 2, 3), "a,b"'), ['rgb(1, 2, 3)', '"a,b"']);
+  });
+
+  it('visits inserted CSS rules consistently in sync and async processing', async function () {
+    function plugin(order) {
+      return {
+        postcssPlugin: 'unwrap-nested',
+        Rule(rule) {
+          order.push(rule.selector);
+          rule.each(child => {
+            if (child.type === 'rule') {
+              child.selector = rule.selector + ' ' + child.selector;
+              rule.after(child);
+            }
+          });
+        },
+        RootExit() { order.push('exit'); }
+      };
+    }
+    const syncOrder = [];
+    const asyncOrder = [];
+    const css = '.widget { .value { span {} } }';
+    const options = { from: 'theme.css', map: false };
+    const sync = postcss([plugin(syncOrder)]).process(css, options).css;
+    const asyncResult = await postcss([plugin(asyncOrder)]).process(css, options);
+    assert.strictEqual(asyncResult.css, sync);
+    assert.deepStrictEqual(asyncOrder, syncOrder);
+    const nestedVisit = syncOrder.indexOf('.widget .value span');
+    assert.ok(nestedVisit >= 0 && nestedVisit < syncOrder.indexOf('exit'));
+    assert.ok(sync.includes('.widget .value span'));
+  });
+
+  it('preserves formatting when a CSS AST is serialized and restored', function () {
+    const css = '.one {}\n.two {}\n\n.three {}\n';
+    const json = JSON.parse(JSON.stringify(postcss.parse(css).toJSON()));
+    assert.strictEqual(postcss.fromJSON(json).toString(), css);
+  });
+
+  it('prevents serialized AST properties from replacing the node prototype', function () {
+    const json = JSON.parse('{"type":"decl","prop":"color","value":"red","__proto__":{"hijacked":true}}');
+    const node = postcss.fromJSON(json);
+    assert.strictEqual(node.hijacked, undefined);
+    assert.strictEqual(node.toString(), 'color: red');
+  });
+
+  it('preserves permitted inline styles through sanitize-html', function () {
+    const result = sanitizeHtml('<p style="color: red; /* note */ font-weight: 700; position: fixed">note</p>', {
+      allowedTags: ['p'],
+      allowedAttributes: { p: ['style'] },
+      allowedStyles: { '*': { color: [/^red$/], 'font-weight': [/^700$/] } }
+    });
+    assert.strictEqual(result, '<p style="color:red;font-weight:700">note</p>');
+  });
+
+  it('preserves Nightscout note text while stripping styles and active markup', function () {
+    const purify = require('../lib/server/purifier')();
+    const note = { notes: '<p style="color:red" onclick="alert(1)">BG &lt; 70</p><script>alert(1)</script>' };
+    purify.purifyObject(note);
+    assert.deepStrictEqual(note, { notes: '<p>BG &lt; 70</p>' });
+    assert.strictEqual(purify.sanitizeString('Fish & Chips; BG < 70'), 'Fish & Chips; BG < 70');
+  });
+
+  describe('previous source-map boundaries', function () {
+    let directory;
+    let from;
+    const sourceMap = JSON.stringify({
+      version: 3, sources: ['theme.scss'], names: [], mappings: 'AAAA',
+      sourcesContent: ['.widget { color: red }']
+    });
+    function input(annotation, options = { from }) {
+      return postcss.parse('.widget { color: red }\n/*# sourceMappingURL=' + annotation + ' */', options).source.input;
+    }
+    before(function () {
+      directory = fs.mkdtempSync(path.join(os.tmpdir(), 'nightscout-postcss-'));
+      fs.mkdirSync(path.join(directory, 'css'));
+      from = path.join(directory, 'css', 'theme.css');
+      fs.writeFileSync(path.join(directory, 'css', 'theme.css.map'), sourceMap);
+      fs.writeFileSync(path.join(directory, 'outside.map'), sourceMap);
+    });
+    after(function () {
+      fs.rmSync(directory, { recursive: true, force: true });
+    });
+
+    it('loads a source map beside the stylesheet', function () {
+      assert.strictEqual(input('theme.css.map').map.text, sourceMap);
+    });
+    it('continues to accept inline and explicitly supplied maps', function () {
+      const inline = 'data:application/json;base64,' + Buffer.from(sourceMap).toString('base64');
+      assert.strictEqual(input(inline).map.text, sourceMap);
+      assert.strictEqual(input('ignored.map', { from, map: { prev: sourceMap } }).map.text, sourceMap);
+    });
+    it('ignores annotations outside the stylesheet directory', function () {
+      assert.strictEqual(input('../outside.map').map, undefined);
+    });
+    it('ignores file annotations when no source filename is provided', function () {
+      assert.strictEqual(input(path.join(directory, 'outside.map'), {}).map, undefined);
+    });
+    it('does not follow a source-map symlink outside the stylesheet directory', function () {
+      fs.symlinkSync(path.join(directory, 'outside.map'), path.join(directory, 'css', 'linked.map'), 'file');
+      assert.strictEqual(input('linked.map').map, undefined);
+    });
+  });
+});