Specific media queries extract and store in a variable

I’m using gulp in an email generator. This generator is using Juice to manipulate a CSS file linked to the HTML file and will inline, clean, keep media queries in head, etc. to have a final HTML file without CSS file linked to it.

The issue I have is with dark mode. In email we are using the “normal” dark mode media query (@media (prefers-color-scheme: dark)) but also other declaration for specific mailing platform such as Outlook.

This specific declaration is in a <style> tag:

[data-ogsc] body { background-color: #2a2c2e !important; }
[data-ogsb] body { background-color: #2a2c2e !important; }

But, even though those are in my CSS file, Juice is stripping it.

Here is my task that does most of the job:

// tasks/juice.js
"use strict";


module.exports = function(gulp, $, fromRoot) {

    var juice = require('gulp-juice-concat');
    var removeUnused = require("gulp-email-remove-unused-css");

    gulp.task("juice", function(done) {
        gulp
            .src(fromRoot("dist") + "/*.html")
            .pipe(
                juice({
                    applyStyleTags: true,
                    applyLinkTags: true,
                    removeStyleTags: true,
                    preservePseudos: true,
                    preserveMediaQueries: true,
                    applyAttributesTableElements: true,
                    preserveImportant: true,
                    preserveFontFaces: true,
                    applyWidthAttributes: true
                })
            )
            .pipe(
                removeUnused({
                    whitelist: [
                        ".External*",
                        ".ReadMsgBody",
                        ".yshortcuts",
                        ".Mso*",
                        "#outlook",
                        "#preheader",
                        "#MessageViewBody",
                        "#body",
                        "u",
                        "[data-ogsc]",
                        "[data-ogsb]"
                    ],
                })
            )
    .pipe(gulp.dest(fromRoot("dist")));
    done();
    });

};

The idea I have in mind is to add a supplemental task to my npm run dist (after the juice that will extract the content of @media (prefers-color-scheme: dark), add relevant value and reinject that in the HTML file.

But I have not found any solution so far to do that.

My gulpfile.js look like this at the moment:

// gulpfile.js
'use strict';

const
    gulp = require('gulp'),
      fromRoot = require('../utils/from-root'),

      $ = require('gulp-load-plugins')({
        pattern: '*',
        config: '../../package.json',
        scope: ['dependencies', 'devDependencies', 'peerDependencies'],
        rename: {
          'lodash.assign': 'assign'
        }
      });


$.loadSubtasks('./tasks/**/*.js', $, fromRoot);

gulp.task('dist', gulp.series('clean:dist', 'sass:dist', 'src:dist', 'juice'));