Skip to content

Instantly share code, notes, and snippets.

@jouni-kantola

jouni-kantola/.eleventy.js

Last active March 27, 2020 21:26
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jouni-kantola/481d87634f9455ead0397d3f01663036 to your computer and use it in GitHub Desktop.
Save jouni-kantola/481d87634f9455ead0397d3f01663036 to your computer and use it in GitHub Desktop.
Download ZIP
Inline styles from PostCSS with 11ty and Liquid
Raw
.eleventy.js
module.exports = eleventyConfig => {
/* ... */
eleventyConfig.addPairedShortcode("postcss", require("./shortcodes/postcss"));
/* ... */
}
Raw
layout.html
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
<style>
{% postcss %}
entry.css
{% endpostcss %}
{% if category %}
{% postcss %}
{{category}}.css
{% endpostcss %}
{% endif %}
</style>
<!-- ... -->
</html>
Raw
postcss.js
const path = require("path");
const postcss = require("postcss");
const fs = require("fs").promises;
module.exports = eleventyConfig => {
eleventyConfig.addPairedShortcode("postcss", async filename => {
const rawFilepath = path.join(
__dirname,
`../src/_includes/${filename.trim()}`
);
const code = await fs.readFile(rawFilepath);
return await postcss([
require("precss"),
require("postcss-import"),
require("postcss-custom-selectors"),
require("autoprefixer"),
require("cssnano")
])
.process(code, { from: rawFilepath })
.then(result => result.css);
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment