enovatedesign / craft-style-inliner
Inline & critical CSS tags for email templates in twig.
Installs: 50 525
Dependents: 0
Suggesters: 0
Security: 0
Stars: 7
Watchers: 6
Forks: 2
Open Issues: 1
Type:craft-plugin
Requires
- php: ^8.2.0
- craftcms/cms: ^5.0
- enshrined/svg-sanitize: ^0.16.0
- guzzlehttp/guzzle: ^7.2.0
- tijsverkoyen/css-to-inline-styles: ^2.2.7
README
A Twig tag for inlining styles in a template.
Requirements
This plugin requires Craft CMS 4.0.2 or later.
Installation
To install this plugin, follow these instructions.
- Open your terminal and go to your Craft project:
cd /path/to/project
- Tell Composer to require the plugin:
composer require enovatedesign/craft-style-inliner
- In the Control Panel, go to Settings → Plugins and click the “Install” button for Style Inliner.
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.
You can also switch critical CSS on and off entirely for each environment:
/config/style-inliner.php
<?php return [ 'criticalCss' => true, 'criticalPrefix' => '@webroot/resources/', ];