特定媒体查询提取并存储在变量中

Question

我在电子邮件生成器中使用 gulp。该生成器使用 Juice 来操作链接到 HTML 文件的 CSS 文件，并将内联、清理、将媒体查询保留在头部等，以获得最终的 HTML 文件，而无需链接到它的 CSS 文件。

我遇到的问题是黑暗模式。在电子邮件中，我们使用“正常”暗模式媒体查询 (

@media (prefers-color-scheme: dark)

)，但也使用针对特定邮件平台（例如 Outlook）的其他声明。

此特定声明位于

<style>

标签中：

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

但是，即使这些在我的 CSS 文件中，Juice 也会将其剥离。

这是我完成大部分工作的任务：

// 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();
    });

};

我的想法是向我的

npm run dist

添加一个补充任务（在提取

@media (prefers-color-scheme: dark)

内容的果汁之后，添加相关值并将其重新注入 HTML 文件中。

但到目前为止我还没有找到任何解决方案。

我的 gulpfile.js 目前看起来像这样：

// 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'));

Answer 1

尝试这样：

'use strict';

const gulp = require('gulp');
const fromRoot = require('../utils/from-root');
const $ = 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', 'extract-dark-mode-css'));

gulp.task('extract-dark-mode-css', function(done) {
    const cheerio = require('cheerio');
    const fs = require('fs');

    // Define a function to extract and manipulate CSS inside @media (prefers-color-scheme: dark)
    function extractAndManipulateDarkModeCSS(filePath) {
        const html = fs.readFileSync(filePath, 'utf8');
        const $ = cheerio.load(html);

        // Extract and manipulate the CSS within the media query
        $('style').each(function() {
            const styleContent = $(this).html();
            if (styleContent.includes('@media (prefers-color-scheme: dark)')) {
                // Modify the CSS content as needed
                const modifiedCSS = styleContent.replace(/body\s*{/g, '[data-ogsc] body, [data-ogsb] body {');
                // Replace the original CSS with the modified version
                $(this).html(modifiedCSS);
            }
        });

        // Save the modified HTML back to the file
        fs.writeFileSync(filePath, $.html(), 'utf8');
    }

    // Process all HTML files in the 'dist' directory
    gulp.src(fromRoot('dist') + '/*.html')
        .on('data', (file) => {
            extractAndManipulateDarkModeCSS(file.path);
        })
        .on('end', done);
});