javascript Gulp CSS媒体查询内联

Posted 2021-05-04

const fs = require('fs');
const path = require('path');
const siphon = require('siphon-media-query');
const through = require('through2');

module.exports = (opts = {}) => {
  return through.obj((file, encoding, callback) => {
    if (file.isNull()) {
      return file;
    }

    if (file.isStream()) {
      throw new Error('Streaming not supported');
    }

    let contents = file.contents.toString();

    // find stylesheet nodes that match this pattern
    const matches = contents.match(/<link rel="stylesheet" type="text\/css" href=".*css\/.*.css">/g);
    // remove stylesheet nodes
    matches.forEach((match) => contents = contents.replace(match, ''));

    // get only styles nested in media queries
    const mqCss = matches
      // capture the uri path
      .map((match) => match.match(/href="(.*css\/.*.css)"/)[1])
      // read and parse for mqs in the file from the dist directory
      .map((cssPath) => siphon(fs.readFileSync(
        path.resolve(__dirname, 'dist', cssPath)).toString()
      ))
      // combine all css media queries
      .join('\n');

    // replace this comment with media query styles
    contents = contents.replace(/<!-- <style> -->/, `<style>${mqCss}</style>`);

    file.contents = new Buffer(contents);
    callback(null, file);
  });
}