如何使用 Perl 将文件中的 CSS 定义合并到内联样式属性中？

Question

许多电子邮件客户端不喜欢链接的 CSS 样式表，甚至不喜欢嵌入的 <style> 标记，而是希望 CSS 内联显示为所有标记的样式属性。

• 错误：<link rel=stylesheet type="text/css" href="/style.css">
• 错误：<style type="text/css">...</style>
• 作品：<h1 style="margin: 0">...</h1>

但是，这种内联样式属性方法管理起来很麻烦。

我找到了用于 Ruby 和 PHP 的工具，它们将 CSS 文件和一些单独的标记作为输入并返回合并结果 - 一个标记文件，所有 CSS 都转换为样式属性。

我正在寻找针对此问题的 Perl 解决方案，但我在 CPAN 上或通过 Google 搜索都没有找到。任何指针？或者，是否有 CPAN 模块可以组合起来达到相同的结果？

• 鲁比http://premailer.dialect.ca/
• PHP http://www.pelagodesign.com/sidecar/emogrifier/
• Perl ?

Answer 1

我不知道一个完整的、预先打包好的解决方案。

CSS::DOM 的 compute_style 与上面的 emogrifier 几乎相同。该模块与HTML::TokeParser 一起应该可以用来制作一些东西。

更新：这是一个错误的混搭：

#!/usr/bin/perl

use strict;
use warnings;

use CSS::DOM;
use File::Slurp;
use HTML::DOM;
use HTML::TokeParser;

die "convert html_file css_file" unless @ARGV == 2;
my ($html_file, $css_file) = @ARGV;

my $html_parser = HTML::TokeParser->new($html_file)
    or die "Cannot open '$html_file': $!";

my $sheet = CSS::DOM::parse( scalar read_file $css_file );

while ( my $token = $html_parser->get_token ) {
    my $type = $token->[0];
    my $text = $type eq 'T' ? $token->[1] : $token->[-1];
    if ( $type eq 'S' ) {
        unless ( skip( $token->[1] ) ) {
            $text = insert_computed_style($sheet, $token);
        }
    }
    print $text;
}

sub insert_computed_style {
    my ($sheet, $token) = @_;
    my ($tag, $attr, $attrseq) = @$token[1 .. 3];
    my $doc = HTML::DOM->new;

    my $element = $doc->createElement($tag);

    for my $attr_name ( @$attrseq ) {
        $element->setAttribute($attr_name, $attr->{$attr_name});
    }

    my $style = CSS::DOM::compute_style(
        element => $element, user_sheet => $sheet
    );

    my @attrseq = (style => grep { lc $_ ne 'style' } @$attrseq );
    $attr->{style} = $style->cssText;

    my $text .= join(" ",
        "<$tag",
        map{ qq/$_='$attr->{$_}'/ } @attrseq );
    $text .= '>';

    return $text;
}

sub skip {
    my ($tag) = @_;
    $tag = lc $tag;
    return 1 if $tag =~ /^(?:h(?:ead|tml)|link|meta|script|title)$/;
}

Answer 2

您可以使用 CPAN Perl 模块 CSS::Inliner https://metacpan.org/release/CSS-Inliner