diff --git a/.eslintrc b/.eslintrc index e42f903a..40feac2e 100644 --- a/.eslintrc +++ b/.eslintrc @@ -7,10 +7,10 @@ }, "parserOptions": { "sourceType": "module", - "ecmaVersion": 8 + "ecmaVersion": "latest" }, "extends": [ - "eslint:recommended", + "eslint:recommended", "prettier", "plugin:prettier/recommended" ], diff --git a/build/css.mk b/build/css.mk index ef7e5511..b32a0a7f 100644 --- a/build/css.mk +++ b/build/css.mk @@ -16,8 +16,10 @@ dist/css/min/black-highlighter.min.css: src/css/black-highlighter.css $(BUILD_SO build/install.sh 644 $< dist/css/black-highlighter-imports.css bun postcss dist/css/black-highlighter-imports.css --config build --env development -o dist/css/black-highlighter.css bun postcss dist/css/black-highlighter-imports.css --config build --env production -o $@ + touch $@ dist/css/min/normalize.min.css: src/css/normalize.css $(BUILD_SOURCES) node_modules build/install.sh 644 $< dist/css/normalize.css bun postcss dist/css/normalize.css --config build --env development -r bun postcss dist/css/normalize.css --config build --env production -o $@ + touch $@ diff --git a/build/images.mk b/build/images.mk index ebc5942c..96c8937a 100644 --- a/build/images.mk +++ b/build/images.mk @@ -6,18 +6,18 @@ IMAGE_OPTIMIZE_SOURCES := $(wildcard src/img/*) IMAGE_OPTIMIZE_OUTPUTS := $(patsubst src/img/%,dist/img/%,$(IMAGE_OPTIMIZE_SOURCES)) # Images to copy -dist/img/page-toolbar-icons/%: src/img/page-toolbar-icons/% +dist/img/page-toolbar-icons/%: src/img/page-toolbar-icons/% $(IMAGE_COPY_SOURCES) build/install.sh 644 $< $@ -dist/img/text-editor-icons/%: src/img/text-editor-icons/% +dist/img/text-editor-icons/%: src/img/text-editor-icons/% $(IMAGE_COPY_SOURCES) build/install.sh 644 $< $@ -dist/img/social-icons/%: src/img/social-icons/% +dist/img/social-icons/%: src/img/social-icons/% $(IMAGE_COPY_SOURCES) build/install.sh 644 $< $@ # Images to optimize -dist/img/%.png: src/img/%.png node_modules +dist/img/%.png: src/img/%.png $(IMAGE_OPTIMIZE_SOURCES) node_modules bun svgo $< -o $@ -dist/img/%.svg: src/img/%.svg node_modules +dist/img/%.svg: src/img/%.svg $(IMAGE_OPTIMIZE_SOURCES) node_modules bun svgo $< -o $@ diff --git a/build/meta.mk b/build/meta.mk index f29a9a20..79a5932a 100644 --- a/build/meta.mk +++ b/build/meta.mk @@ -27,4 +27,3 @@ $(DIRECTORIES): # bun rules node_modules: package.json bun.lockb bun install - touch node_modules diff --git a/build/postcss.config.mjs b/build/postcss.config.mjs index f24df6bd..93e64465 100644 --- a/build/postcss.config.mjs +++ b/build/postcss.config.mjs @@ -1,28 +1,35 @@ import fs from "fs"; import path from "path"; -import globalData from "@csstools/postcss-global-data"; -import stylelint from "stylelint"; -import postcssImport from "postcss-import"; +import postcss from "postcss"; import postcssMixins from "postcss-mixins"; -import presetEnv from "postcss-preset-env"; -import autoprefixer from "autoprefixer"; -import url from "postcss-url"; -import csso from "postcss-csso"; +import stylelint from "stylelint"; +import postcssLightningcss from "postcss-lightningcss"; import reporter from "postcss-reporter"; -/* Disabling LightningCSS until its functionality is a little more robust -import lightningCSS from "postcss-lightningcss"; -*/ +import { bundle } from "lightningcss"; -export default (ctx) => { +const lightningcssBundle = (opts = {}) => { + return { + postcssPlugin: "lightningcss-bundle", + Once(root, { result }) { + const filename = opts.filename || result.opts.from; + const { code } = bundle({ + filename, + ...opts.lightningcssOptions + }); + + root.removeAll(); + const parsedCode = postcss.parse(code); + root.append(parsedCode); + } + }; +}; +export default (ctx) => { const nodeEnv = ctx.env; const dev = nodeEnv === "development"; - const browserslistpath = path.resolve(ctx.file.dirname, "../../.browserslistrc"); - const browserslist = fs.readFileSync(browserslistpath, "utf8").trim(); - const globalDataOptions = { - files: [ path.join( ctx.file.dirname,"/parts/root.css" ) ] - }; + const browserslistpath = path.resolve(ctx.file.dirname, "../../.browserslistrc"); + const browserslist = fs.readFileSync(browserslistpath, "utf8").trim(); const stylelintOptions = { configFile: path.join(ctx.cwd, "/.stylelintrc"), @@ -30,75 +37,35 @@ export default (ctx) => { }; const mixinOptions = { - mixinsDir: path.join( ctx.file.dirname,"/parts" ) - }; - - const presetEnvOptions = ({ - autoprefixer: false, - preserve: false, - browsers: browserslist, - features: { - "custom-properties": false, - "custom-media-queries": true, - "media-query-ranges": true, - "nesting-rules": true, - "has-pseudo-class": true, - "is-pseudo-class": false - } - }); - - const urlOptions = ({ - url: "rebase" - }); - - const fileImportOptions = { - plugins: [ - globalData(globalDataOptions), - presetEnv(presetEnvOptions), - url(urlOptions), - postcssMixins(mixinOptions), - autoprefixer - ] + mixinsDir: path.join(ctx.file.dirname, "/parts") }; - const cssoOptions = ({ - restructure: !dev, - forceMediaMerge: !dev, - sourceMap: true - }); + lightningcssBundle.postcss = true; - /* ============================== - LIGHTNING CSS DISABLED FOR NOW - ============================== - const lightningcssOptions = ({ - filename: path.join(ctx.file.dirname,"/",ctx.file.basename), + const lightningcssOptions = { browsers: browserslist, lightningcssOptions: { - projectRoot: path.join( ctx.file.dirname,"/parts" ), minify: !dev, sourceMap: true, - errorRecovery: false, + cssModules: false, drafts: { nesting: true, customMedia: true }, visitor: { - /* Assures relative URL links point to the correct files on /dist */ - /* Url(url) { - let urlArray = url.url.split("/").reverse(); - if (url.url.includes("../")) { - dev ? [ - url.url = `../${urlArray[1]}/${urlArray[0]}` - ] : [ - url.url = `../../${urlArray[1]}/${urlArray[0]}` - ]; + Url(url) { + if (!dev) { + url.url = url.url; + } else { + if (url.url.startsWith("../../")) { + url.url = url.url.replace("../../", "../"); + } } - return url; + return url; } } - } - }); - */ + }, + }; const reporterOptions = { formatter: input => { @@ -109,28 +76,14 @@ export default (ctx) => { let plugins = []; - switch(nodeEnv) { - /* - case "lightningcss": - plugins = [ - postcssImport(fileImportOptions), - lightningcss(lightningcssOptions), - reporter(reporterOptions) - ]; - break; - */ + switch (nodeEnv) { case "production": - plugins = [ - stylelint(stylelintOptions), - postcssImport(fileImportOptions), - csso(cssoOptions), - reporter(reporterOptions) - ]; - break; case "development": plugins = [ stylelint(stylelintOptions), - postcssImport(fileImportOptions), + lightningcssBundle(lightningcssOptions), + postcssMixins(mixinOptions), + postcssLightningcss(lightningcssOptions), reporter(reporterOptions) ]; break; @@ -139,7 +92,7 @@ export default (ctx) => { } return { - map: {inline: false}, + map: { inline: false }, plugins: plugins }; }; diff --git a/bun.lockb b/bun.lockb index 5ce40866..9f3b9efc 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 83752687..c63da5f3 100644 --- a/package.json +++ b/package.json @@ -18,16 +18,12 @@ "eslint": "^8.34.0", "eslint-config-prettier": "^9.0.0", "eslint-plugin-prettier": "^5.0.0", - "lightningcss": "^1.19.0", + "lightningcss": "^1.22.1", "postcss": "^8.4.21", "postcss-cli": "^11.0.0", "postcss-csso": "^6.0.1", - "postcss-import": "^16.0.0", "postcss-lightningcss": "^1.0.0", "postcss-mixins": "^9.0.4", - "postcss-preset-env": "^9.0.0", - "postcss-reporter": "^7.0.5", - "postcss-url": "^10.1.3", "prettier": "^3.0.0", "stylelint": "^16.0.2", "stylelint-config-property-sort-order-smacss": "^10.0.0",