kirbyup 0.12.0 → 0.14.1

package/README.md

@@ -8,6 +8,8 @@ The fastest and leanest way to bundle your Kirby Panel plugins. No configuration
 
 - 🍂 Lightweight, robust and tested
 - ⚡️ Fast compilation with Vite/esbuild
+- 🎒 [PostCSS transforms](#postcss-transforms) for RTL support & more
+- 🧭 [`~/` Path resolve alias](#path-resolve-alias)
 - 🔌 [Supports env variables](#env-variables)
 - 🔍 Watch mode
 
@@ -82,6 +84,31 @@ kirbyup src/index.js
 
 The final panel plugin will be bundled, minified, and written into the current directory as `./index.js`.
 
+## Built-in Features
+
+### PostCSS Transforms
+
+The Kirby Panel uses PostCSS plugins to transform CSS syntax related logical properties and RTL language support. You can embrace the same functionality within your Panel plugins. The following PostCSS plugins are integrated into kirbyup as well:
+
+- [postcss-logical](https://github.com/csstools/postcss-logical) lets you use logical, rather than physical, direction and dimension mappings in CSS, following the [CSS Logical Properties and Values](https://drafts.csswg.org/css-logical/) specification.
+- [postcss-dir-pseudo-class](https://github.com/csstools/postcss-dir-pseudo-class) lets you style by directionality using the `:dir()` pseudo-class in CSS, following the [Selectors](https://www.w3.org/TR/selectors-4/#the-dir-pseudo) specification. It gives you the same syntax Kirby uses for full compatibility with RTL localizations of the Panel.
+
+### Path Resolve Alias
+
+Import certain modules more easily by using the `~/` path alias. It will resolve to the directory of your input file, for example `src` when building `kirbyup src/index.js`.
+
+Now, given a deeply nested component, instead of using relative paths when importing like so:
+
+```js
+import someUtility from '../../utils';
+```
+
+You can use the alias:
+
+```js
+import someUtility from '~/utils';
+```
+
 ### Env Variables
 
 kirbyup exposes env variables on the special `import.meta.env` object. Some built-in variables are available in all cases:

package/dist/cli.js

@@ -56,22 +56,22 @@ var name, version;
 var init_package = __esm({
   "package.json"() {
     name = "kirbyup";
-    version = "0.12.0";
+    version = "0.14.1";
   }
 });
 
 // src/errors.ts
 function handleError(error) {
   if (error instanceof PrettyError) {
-    console.error(import_nanocolors.default.red(error.message));
+    console.error(import_colorette.default.red(error.message));
   }
   process.exitCode = 1;
 }
-var import_nanocolors, PrettyError;
+var import_colorette, PrettyError;
 var init_errors = __esm({
   "src/errors.ts"() {
     init_cjs_shims();
-    import_nanocolors = __toModule(require("nanocolors"));
+    import_colorette = __toModule(require("colorette"));
     PrettyError = class extends Error {
       constructor(message) {
         super(message);
@@ -121,8 +121,8 @@ var init_utils = __esm({
 function log(message, type = "info") {
   var _a;
   const content = [
-    import_nanocolors2.default.gray(`[${name}]`),
-    import_nanocolors2.default[(_a = colorMap.get(type)) != null ? _a : "white"](message)
+    import_colorette2.default.gray(`[${name}]`),
+    import_colorette2.default[(_a = colorMap.get(type)) != null ? _a : "white"](message)
   ];
   if (type === "error") {
     console.error(...content);
@@ -130,11 +130,11 @@ function log(message, type = "info") {
     console.log(...content);
   }
 }
-var import_nanocolors2, colorMap;
+var import_colorette2, colorMap;
 var init_log = __esm({
   "src/log.ts"() {
     init_cjs_shims();
-    import_nanocolors2 = __toModule(require("nanocolors"));
+    import_colorette2 = __toModule(require("colorette"));
     init_package();
     colorMap = new Map([
       ["info", "yellow"],
@@ -154,20 +154,20 @@ async function runViteBuild(options) {
   var _a;
   let result;
   const mode = options.watch ? "development" : "production";
-  const outDir = (_a = options.outDir) != null ? _a : process.cwd();
+  const currentDir = process.cwd();
   try {
     result = await (0, import_vite.build)({
       mode,
       plugins: [(0, import_vite_plugin_vue2.createVuePlugin)()],
       build: {
         lib: {
-          entry: (0, import_path.resolve)(outDir, options.entry),
+          entry: (0, import_path.resolve)(currentDir, options.entry),
           formats: ["iife"],
           name: "kirbyupExport",
           fileName: () => "index.js"
         },
         minify: mode === "production" && "terser",
-        outDir,
+        outDir: (_a = options.outDir) != null ? _a : currentDir,
         emptyOutDir: false,
         rollupOptions: {
           external: ["vue"],
@@ -179,6 +179,16 @@ async function runViteBuild(options) {
           }
         }
       },
+      resolve: {
+        alias: {
+          "~/": `${(0, import_path.resolve)(currentDir, (0, import_path.dirname)(options.entry))}/`
+        }
+      },
+      css: {
+        postcss: {
+          plugins: [(0, import_postcss_logical.default)(), (0, import_postcss_dir_pseudo_class.default)()]
+        }
+      },
       envPrefix: ["VITE_", "KIRBYUP_"],
       logLevel: "warn"
     });
@@ -215,22 +225,24 @@ async function build(_options) {
       ignored
     });
     watcher.on("all", async (type, file) => {
-      log(`${type} ${import_nanocolors3.default.gray(file)}`);
+      log(`${type} ${import_colorette3.default.gray(file)}`);
       debouncedBuild();
     });
   };
   await runViteBuild(options);
   startWatcher();
 }
-var import_path, import_fs, import_nanocolors3, import_vite, import_vite_plugin_vue2, normalizeOptions;
+var import_path, import_fs, import_colorette3, import_vite, import_vite_plugin_vue2, import_postcss_logical, import_postcss_dir_pseudo_class, normalizeOptions;
 var init_src = __esm({
   "src/index.ts"() {
     init_cjs_shims();
     import_path = __toModule(require("path"));
     import_fs = __toModule(require("fs"));
-    import_nanocolors3 = __toModule(require("nanocolors"));
+    import_colorette3 = __toModule(require("colorette"));
     import_vite = __toModule(require("vite"));
     import_vite_plugin_vue2 = __toModule(require("vite-plugin-vue2"));
+    import_postcss_logical = __toModule(require("postcss-logical"));
+    import_postcss_dir_pseudo_class = __toModule(require("postcss-dir-pseudo-class"));
     init_errors();
     init_utils();
     init_log();

package/dist/index.js

@@ -37,12 +37,14 @@ var importMetaUrlShim = typeof document === "undefined" ? new (require("url")).U
 // src/index.ts
 var import_path = __toModule(require("path"));
 var import_fs = __toModule(require("fs"));
-var import_nanocolors3 = __toModule(require("nanocolors"));
+var import_colorette3 = __toModule(require("colorette"));
 var import_vite = __toModule(require("vite"));
 var import_vite_plugin_vue2 = __toModule(require("vite-plugin-vue2"));
+var import_postcss_logical = __toModule(require("postcss-logical"));
+var import_postcss_dir_pseudo_class = __toModule(require("postcss-dir-pseudo-class"));
 
 // src/errors.ts
-var import_nanocolors = __toModule(require("nanocolors"));
+var import_colorette = __toModule(require("colorette"));
 var PrettyError = class extends Error {
   constructor(message) {
     super(message);
@@ -56,7 +58,7 @@ var PrettyError = class extends Error {
 };
 function handleError(error) {
   if (error instanceof PrettyError) {
-    console.error(import_nanocolors.default.red(error.message));
+    console.error(import_colorette.default.red(error.message));
   }
   process.exitCode = 1;
 }
@@ -88,11 +90,11 @@ function debouncePromise(fn, delay, onError) {
 }
 
 // src/log.ts
-var import_nanocolors2 = __toModule(require("nanocolors"));
+var import_colorette2 = __toModule(require("colorette"));
 
 // package.json
 var name = "kirbyup";
-var version = "0.12.0";
+var version = "0.14.1";
 
 // src/log.ts
 var colorMap = new Map([
@@ -103,8 +105,8 @@ var colorMap = new Map([
 function log(message, type = "info") {
   var _a;
   const content = [
-    import_nanocolors2.default.gray(`[${name}]`),
-    import_nanocolors2.default[(_a = colorMap.get(type)) != null ? _a : "white"](message)
+    import_colorette2.default.gray(`[${name}]`),
+    import_colorette2.default[(_a = colorMap.get(type)) != null ? _a : "white"](message)
   ];
   if (type === "error") {
     console.error(...content);
@@ -118,20 +120,20 @@ async function runViteBuild(options) {
   var _a;
   let result;
   const mode = options.watch ? "development" : "production";
-  const outDir = (_a = options.outDir) != null ? _a : process.cwd();
+  const currentDir = process.cwd();
   try {
     result = await (0, import_vite.build)({
       mode,
       plugins: [(0, import_vite_plugin_vue2.createVuePlugin)()],
       build: {
         lib: {
-          entry: (0, import_path.resolve)(outDir, options.entry),
+          entry: (0, import_path.resolve)(currentDir, options.entry),
           formats: ["iife"],
           name: "kirbyupExport",
           fileName: () => "index.js"
         },
         minify: mode === "production" && "terser",
-        outDir,
+        outDir: (_a = options.outDir) != null ? _a : currentDir,
         emptyOutDir: false,
         rollupOptions: {
           external: ["vue"],
@@ -143,6 +145,16 @@ async function runViteBuild(options) {
           }
         }
       },
+      resolve: {
+        alias: {
+          "~/": `${(0, import_path.resolve)(currentDir, (0, import_path.dirname)(options.entry))}/`
+        }
+      },
+      css: {
+        postcss: {
+          plugins: [(0, import_postcss_logical.default)(), (0, import_postcss_dir_pseudo_class.default)()]
+        }
+      },
       envPrefix: ["VITE_", "KIRBYUP_"],
       logLevel: "warn"
     });
@@ -188,7 +200,7 @@ async function build(_options) {
       ignored
     });
     watcher.on("all", async (type, file) => {
-      log(`${type} ${import_nanocolors3.default.gray(file)}`);
+      log(`${type} ${import_colorette3.default.gray(file)}`);
       debouncedBuild();
     });
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kirbyup",
-  "version": "0.12.0",
+  "version": "0.14.1",
   "description": "Zero-config bundler for Kirby Panel plugins",
   "files": [
     "dist"
@@ -11,8 +11,8 @@
   },
   "types": "dist/index.d.ts",
   "engines": {
-    "node": ">=12",
-    "npm": ">=7"
+    "node": ">=14",
+    "npm": ">=6"
   },
   "repository": {
     "type": "git",
@@ -46,11 +46,14 @@
   "dependencies": {
     "cac": "^6.7.3",
     "chokidar": "^3.5.2",
-    "nanocolors": "^0.2.12",
+    "colorette": "^2.0.14",
+    "postcss-dir-pseudo-class": "^6.0.0",
+    "postcss-logical": "^5.0.0",
     "sass": "^1.42.1",
     "vite": "^2.6.2",
     "vite-plugin-vue2": "^1.8.2",
-    "vue": "^2.6.14"
+    "vue": "^2.6.14",
+    "vue-template-compiler": "^2.6.14"
   },
   "devDependencies": {
     "@types/fs-extra": "^9.0.13",
@@ -60,13 +63,13 @@
     "execa": "^5.1.1",
     "fast-glob": "^3.2.7",
     "fs-extra": "^10.0.0",
+    "husky": "^7.0.2",
     "jest": "^27.2.4",
     "prettier": "^2.4.1",
     "prompts": "^2.4.1",
     "ts-essentials": "^9.0.0",
     "ts-jest": "^27.0.5",
     "tsup": "^5.2.1",
-    "typescript": "^4.4.3",
-    "husky": "^7.0.2"
+    "typescript": "^4.4.3"
   }
 }