wires/hypnagaga_old
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

css and js as first-class citizens in Eleventy

Browse source
This commit is contained in:
madrilene 2022-12-13 12:38:08 +01:00
parent ef1721fe5a
commit 4081fa5cdf
6 changed files with 153 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
.eleventy.js
View file

@ -99,7 +99,12 @@ module.exports = eleventyConfig => {
'src/assets/images/favicon/*': '/'
});
// --------------------- Config -----------------------
// --------------------- Custom Template Languages ---------------------
eleventyConfig.addPlugin(require('./config/template-languages/css-config.js'));
eleventyConfig.addPlugin(require('./config/template-languages/js-config.js'));
// --------------------- general config -----------------------
return {
dir: {

35
config/template-languages/css-config.js Normal file
View file

@ -0,0 +1,35 @@
// CSS and JavaScript as first-class citizens in Eleventy: https://pepelsbey.dev/articles/eleventy-css-js/
const postcss = require('postcss');
const postcssImport = require('postcss-import');
const postcssImportExtGlob = require('postcss-import-ext-glob');
const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
module.exports = eleventyConfig => {
eleventyConfig.addTemplateFormats('css');
eleventyConfig.addExtension('css', {
outputFileExtension: 'css',
compile: async (content, path) => {
if (path !== './src/assets/css/global.css') {
return;
}
return async () => {
let output = await postcss([
postcssImportExtGlob,
postcssImport,
tailwindcss,
autoprefixer,
cssnano
]).process(content, {
from: path
});
return output.css;
};
}
});
};

28
config/template-languages/js-config.js Normal file
View file

@ -0,0 +1,28 @@
// CSS and JavaScript as first-class citizens in Eleventy: https://pepelsbey.dev/articles/eleventy-css-js/
const esbuild = require('esbuild');
module.exports = eleventyConfig => {
eleventyConfig.addTemplateFormats('js');
eleventyConfig.addExtension('js', {
outputFileExtension: 'js',
compile: async (content, path) => {
if (path !== './src/assets/scripts/app.js') {
return;
}
return async () => {
let output = await esbuild.build({
target: 'es2020',
entryPoints: [path],
minify: true,
bundle: true,
write: false
});
return output.outputFiles[0].text;
};
}
});
};

82
package-lock.json generated
View file

@ -20,6 +20,7 @@
"@11ty/eleventy-plugin-rss": "^1.2.0",
"@netlify/plugin-a11y": "^1.0.0-beta.1",
"@toycode/markdown-it-class": "^1.2.4",
"autoprefixer": "^10.4.13",
"clean-css": "^5.3.1",
"concurrently": "^7.4.0",
"cross-env": "^7.0.3",
@ -1018,6 +1019,39 @@
"resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
"integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ=="
},
"node_modules/autoprefixer": {
"version": "10.4.13",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz",
"integrity": "sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==",
"dev": true,
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/autoprefixer"
}
],
"dependencies": {
"browserslist": "^4.21.4",
"caniuse-lite": "^1.0.30001426",
"fraction.js": "^4.2.0",
"normalize-range": "^0.1.2",
"picocolors": "^1.0.0",
"postcss-value-parser": "^4.2.0"
},
"bin": {
"autoprefixer": "bin/autoprefixer"
},
"engines": {
"node": "^10 || ^12 || >=14"
},
"peerDependencies": {
"postcss": "^8.1.0"
}
},
"node_modules/axe-core": {
"version": "4.2.4",
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.2.4.tgz",
@ -2558,6 +2592,19 @@
"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
"integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
},
"node_modules/fraction.js": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
"integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
"dev": true,
"engines": {
"node": "*"
},
"funding": {
"type": "patreon",
"url": "https://www.patreon.com/infusion"
}
},
"node_modules/fs-constants": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
@ -4135,6 +4182,15 @@
"node": ">=0.10.0"
}
},
"node_modules/normalize-range": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
"integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/normalize-url": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
@ -7879,6 +7935,20 @@
"resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
"integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ=="
},
"autoprefixer": {
"version": "10.4.13",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz",
"integrity": "sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==",
"dev": true,
"requires": {
"browserslist": "^4.21.4",
"caniuse-lite": "^1.0.30001426",
"fraction.js": "^4.2.0",
"normalize-range": "^0.1.2",
"picocolors": "^1.0.0",
"postcss-value-parser": "^4.2.0"
}
},
"axe-core": {
"version": "4.2.4",
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.2.4.tgz",
@ -8989,6 +9059,12 @@
"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
"integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
},
"fraction.js": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
"integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
"dev": true
},
"fs-constants": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
@ -10139,6 +10215,12 @@
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
},
"normalize-range": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
"integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
"dev": true
},
"normalize-url": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",

5
package.json
View file

@ -8,12 +8,8 @@
"main": ".eleventy.js",
"scripts": {
"clean": "rimraf dist",
"dev:postcss": "postcss src/assets/css/global.css --o dist/assets/css/global.css --watch --verbose",
"dev:scripts": "esbuild src/assets/scripts/app.js --bundle --watch --outdir=dist/assets",
"dev:11ty": "eleventy --serve --watch",
"build:postcss": "NODE_ENV=production postcss src/assets/css/global.css -o dist/assets/css/global.css",
"build:11ty": "cross-env ELEVENTY_ENV=production eleventy",
"build:scripts": "esbuild src/assets/scripts/app.js --bundle --minify --outdir=dist/assets --platform=node --tree-shaking=true",
"start": "run-p dev:*",
"build": "run-s clean build:*"
},
@ -36,6 +32,7 @@
"@11ty/eleventy-plugin-rss": "^1.2.0",
"@netlify/plugin-a11y": "^1.0.0-beta.1",
"@toycode/markdown-it-class": "^1.2.4",
"autoprefixer": "^10.4.13",
"clean-css": "^5.3.1",
"concurrently": "^7.4.0",
"cross-env": "^7.0.3",

2
src/_layouts/base.njk
View file

@ -51,7 +51,7 @@
{% endif %}
<!-- defered js -->
<script type="module" src="/assets/app.js" defer></script>
<script type="module" src="/assets/scripts/app.js" defer></script>
<!-- everything else: meta tags, icons, open graph etc. -->
{% include "partials/meta-info.njk" %}