feat: integrate two PostCSS plugins by default

README.md

@@ -8,6 +8,7 @@ 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
 - 🔌 [Supports env variables](#env-variables)
 - 🔍 Watch mode
 
@@ -82,6 +83,15 @@ 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.
+
 ### Env Variables
 
 kirbyup exposes env variables on the special `import.meta.env` object. Some built-in variables are available in all cases:

package.json

@@ -46,7 +46,9 @@
   "dependencies": {
     "cac": "^6.7.3",
     "chokidar": "^3.5.2",
-    "colorette": "^2.0.13",
+    "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",

src/env.d.ts

@@ -0,0 +1,2 @@
+declare module 'postcss-logical'
+declare module 'postcss-dir-pseudo-class'

src/index.ts

@@ -3,6 +3,8 @@ import { existsSync } from 'fs'
 import colors from 'colorette'
 import { build as viteBuild } from 'vite'
 import { createVuePlugin } from 'vite-plugin-vue2'
+import postcssLogical from 'postcss-logical'
+import postcssDirPseudoClass from 'postcss-dir-pseudo-class'
 import { handleError, PrettyError } from './errors'
 import { debouncePromise } from './utils'
 import { log } from './log'
@@ -40,6 +42,11 @@ export async function runViteBuild(options: NormalizedOptions) {
           }
         }
       },
+      css: {
+        postcss: {
+          plugins: [postcssLogical(), postcssDirPseudoClass()]
+        }
+      },
       envPrefix: ['VITE_', 'KIRBYUP_'],
       logLevel: 'warn'
     })

tests/index.test.ts

@@ -26,7 +26,7 @@ it('handles modules', async () => {
 it('handles css', async () => {
   const { output, outFiles, getFileContent } = await run({
     'src/input.js': `import './input.css'`,
-    'src/input.css': `body { margin: 0; }`
+    'src/input.css': `.foo { content: "bar"; }`
   })
 
   expect(output).toMatchInlineSnapshot(`
@@ -36,7 +36,7 @@ it('handles css', async () => {
 
   const css = await getFileContent('index.css')
   expect(css).toMatchInlineSnapshot(`
-    "body{margin:0}
+    ".foo{content:\\"bar\\"}
     "
   `)
 
@@ -83,6 +83,34 @@ it('supports custom env variables', async () => {
   `)
 })
 
+it('supports postcss plugins', async () => {
+  const { output, outFiles, getFileContent } = await run({
+    'src/input.js': `import './input.css'`,
+    'src/input.css': `
+      .foo { inset: logical 0 5px 10px; }
+      .bar:dir(rtl) { margin-right: 10px; }
+    `
+  })
+
+  expect(output).toMatchInlineSnapshot(`
+    "!function(){\\"use strict\\"}();
+    "
+  `)
+
+  const css = await getFileContent('index.css')
+  expect(css).toMatchInlineSnapshot(`
+    ".foo{top:0;left:5px;bottom:10px;right:5px}[dir=rtl] .bar{margin-right:10px}
+    "
+  `)
+
+  expect(outFiles).toMatchInlineSnapshot(`
+    Array [
+      "index.css",
+      "index.js",
+    ]
+  `)
+})
+
 it('builds panel plugins', async () => {
   const { output, outFiles } = await run({
     'src/input.js': `