Usage

Inline CSS

Use the {% inlinecss %}{% endinlinecss %} tag pair in your templates.

Input:

{% inlinecss %}
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            h1 { color: red }
        </style>
    </head>
    <body>
        <h1>Hello, world!</h1>
    </body>
</html>
{% endinlinecss %}

Output:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style type="text/css">
            h1 { color:red }
        </style>
    </head>
    <body>
        <h1 style="color: red;">Hello, world!</h1>
    </body>
</html>

Critical CSS

You can inline entire local CSS files in to the <head> of a document with the {% criticalcss %} twig tag.

{% extends "_layout.twig" %}

{% criticalcss 'home' %}

The .css extension is added automatically. By default the plugin prefixes the @webroot/ alias, but this can be configured in a config file:

/config/style-inliner.php

<?php

return [
    'criticalPrefix' => '@webroot/resources/',
];
Installation Instructions

To install this plugin, copy the command above to your terminal.

Reviews

This plugin doesn't have any reviews.

Active Installs
684
Version
3.1.0
License
MIT
Compatibility
Craft 3, Craft 4, Craft 5
Last release
August 7, 2024
Activity (30 days)
0
Closed Issues
0
Open Issues
0
Merged PRs
0
Open PRs