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
License
MIT
Last release
August 7, 2024
Activity (30 days)
0
Closed Issues
0
Open Issues
0
Merged PRs
0
Open PRs