Last active
September 28, 2023 12:43
-
-
Save pascalduez/247e564da1d388ac6fb2db72490a7a3a to your computer and use it in GitHub Desktop.
Eleventy stylesheets
.
├── .eleventy.js
├── package.json
├── postcss.config.js
├── _includes
│ ├── base.njk
│ └── index.css
└── index.md
"scripts": {
"serve": "NODE_ENV=development eleventy --serve",
"build": "NODE_ENV=production eleventy",
},
"devDependencies": {
"@11ty/eleventy": "^0.10.0",
"cssnano": "^4.1.10",
"postcss": "^7.0.27",
"postcss-load-config": "^2.1.0",
"postcss-preset-env": "^6.7.0",
}
module.exports = ({ env }) => ({
plugins: {
'postcss-preset-env': {},
...(env === 'production' && { cssnano: {} }),
},
});
const postcss = require('postcss');
const postcssrc = require('postcss-load-config');
module.exports = config => {
config.addNunjucksAsyncFilter('postcss', async (content, callback) => {
let { plugins, options } = await postcssrc();
let result = await postcss(plugins).process(content, options);
callback(null, result.css);
});
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
{% set css %}
{% include "index.css" %}
{% endset %}
<style>
{{ css | postcss | safe }}
</style>
</head>
<body>
{{ content | safe }}
</body>
</html>
---
layout: base
---
<h1>11ty stylesheets</h1>
- No fit for a large CSS codebase
- Triggers a full website build on every css change
- CSS processing get re-run for every output html file
- Triggers a full page reload
- No extra dependencies / builders etc.
- No extra HTTP request
- Might be handy for critical path CSS inlining
.
├── .eleventy.js
├── _includes
│ └── base.njk
├── index.md
├── main.11ty.js
├── package.json
├── postcss.config.js
└── styles
└── index.css
"scripts": {
"serve": "NODE_ENV=development eleventy --serve",
"build": "NODE_ENV=production eleventy",
},
"devDependencies": {
"@11ty/eleventy": "^0.10.0",
"cssnano": "^4.1.10",
"postcss": "^7.0.27",
"postcss-load-config": "^2.1.0",
"postcss-preset-env": "^6.7.0",
}
module.exports = ({ env }) => ({
plugins: {
'postcss-preset-env': {},
...(env === 'production' && { cssnano: {} }),
},
});
module.exports = config => {
config.addWatchTarget('styles/');
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/styles/main.css" />
</head>
<body>
{{ content | safe }}
</body>
</html>
const { readFile } = require('fs').promises;
const postcssrc = require('postcss-load-config');
const postcss = require('postcss');
exports.data = () => ({
permalink: 'styles/main.css',
eleventyExcludeFromCollections: true,
});
exports.render = async () => {
let { plugins, options } = await postcssrc();
let content = await readFile('styles/index.css');
let result = await postcss(plugins).process(content, options);
return result.css;
};
---
layout: base
---
<h1>11ty stylesheets</h1>
- Triggers a full website build on every css change
- Might triggers a full page reload (depending on setup)
- No extra dependencies / builders etc.
- Fit for a large CSS codebase
- CSS processing gets run only once
- Extensible
.
├── .eleventy.js
├── _includes
│ └── base.njk
├── index.md
├── package.json
├── postcss.config.js
└── styles
└── index.css
"scripts": {
"build:css": "postcss styles/index.css -o _site/styles/main.css --verbose",
"11ty:serve": "eleventy --serve",
"11ty:pack": "eleventy",
"serve": "NODE_ENV=development run-p 11ty:serve 'build:css --watch'",
"build": "NODE_ENV=production run-p 11ty:pack build:css"
},
"devDependencies": {
"@11ty/eleventy": "^0.10.0",
"cssnano": "^4.1.10",
"npm-run-all": "^4.1.5",
"postcss": "^7.0.27",
"postcss-cli": "^7.1.0",
"postcss-load-config": "^2.1.0",
"postcss-preset-env": "^6.7.0"
}
module.exports = ({ env }) => ({
plugins: {
'postcss-preset-env': {},
...(env === 'production' && { cssnano: {} }),
},
});
module.exports = config => {
config.setBrowserSyncConfig({
files: ['_site/styles'],
});
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/styles/main.css" />
</head>
<body>
{{ content | safe }}
</body>
</html>
---
layout: base
---
<h1>11ty stylesheets</h1>
- Adds a few building dependencies (postcss-cli, npm-run-all)
- Extensible
- CSS processing gets run only once
- Fit for a large CSS codebase
- Don't triggers a full website build on every css change
- True hot reload
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment