@seyuna/postcss 0.0.1-dev.0

package/.github/workflows/release.yml

@@ -0,0 +1,130 @@
+name: Build, Release, and Publish
+
+on:
+  push:
+    branches:
+      - stable
+      - next
+      - dev
+  workflow_dispatch:
+
+permissions:
+  contents: write
+  id-token: write
+
+jobs:
+  build:
+    name: Build Plugin
+    runs-on: ubuntu-latest
+    outputs:
+      version: ${{ steps.version.outputs.version }}
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Read version from package.json
+        id: version
+        run: |
+          VERSION=$(node -p "require('./package.json').version")
+          echo "version=$VERSION" >> $GITHUB_OUTPUT
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build TypeScript
+        run: npm run build
+
+      - name: List dist contents before upload
+        run: ls -l dist
+
+      - name: Upload build artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: plugin-dist
+          path: dist
+
+  publish:
+    name: Publish to npm
+    runs-on: ubuntu-latest
+    needs: build
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org
+
+      - name: Download build artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: plugin-dist
+          path: dist
+
+      - name: Authenticate with npm
+        run: npm config set //registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}
+
+      - name: Determine npm tag
+        id: tag
+        run: |
+          BRANCH="${GITHUB_REF##*/}"
+          if [ "$BRANCH" = "main" ]; then
+            echo "tag=latest" >> $GITHUB_OUTPUT
+          else
+            echo "tag=$BRANCH" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Publish package
+        run: npm publish --access public --tag ${{ steps.tag.outputs.tag }}
+
+  release:
+    name: Create GitHub Release
+    runs-on: ubuntu-latest
+    needs: [build, publish]
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Download build artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: plugin-dist
+          path: dist
+
+      - name: Generate changelog
+        run: |
+          last_tag=$(git tag --sort=-creatordate | grep '^v' | grep -v "v${{ needs.build.outputs.version }}" | head -n 1)
+
+          if [ -z "$last_tag" ]; then
+            changelog=$(git log --merges --pretty=format:"* %s (%h)")
+          else
+            changelog=$(git log "$last_tag"..HEAD --merges --pretty=format:"* %s (%h)")
+          fi
+
+          {
+            echo "Automated release for version v${{ needs.build.outputs.version }}"
+            echo ""
+            echo "## Changes"
+            echo ""
+            echo "$changelog"
+          } > RELEASE_NOTES.md
+
+      - name: Create GitHub Release
+        run: |
+          gh release create "v${{ needs.build.outputs.version }}" \
+            dist/* \
+            --title "v${{ needs.build.outputs.version }}" \
+            --notes-file RELEASE_NOTES.md
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/dist/functions/color.d.ts

@@ -0,0 +1 @@
+export declare const cssVar: (name: string, fallback?: string) => string;

package/dist/functions/color.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cssVar = void 0;
+const cssVar = (name, fallback) => {
+    return fallback ? `var(--${name}, ${fallback})` : `var(--${name})`;
+};
+exports.cssVar = cssVar;

package/dist/functions/index.d.ts

@@ -0,0 +1,2 @@
+export type FnHandler = (...args: string[]) => string;
+export declare const functions: Record<string, FnHandler>;

package/dist/functions/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.functions = void 0;
+const color_1 = require("./color");
+const spacing_1 = require("./spacing");
+exports.functions = {
+    cssVar: color_1.cssVar,
+    spacing: spacing_1.spacing,
+};

package/dist/functions/spacing.d.ts

@@ -0,0 +1 @@
+export declare const spacing: (multiplier: string) => string;

package/dist/functions/spacing.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.spacing = void 0;
+const spacing = (multiplier) => {
+    const num = parseFloat(multiplier);
+    return `${num * 0.25}rem`;
+};
+exports.spacing = spacing;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { dynamicFunctionsPlugin as default } from "./plugin";
+export { functions } from "./functions";

package/dist/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.functions = exports.default = void 0;
+var plugin_1 = require("./plugin");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return plugin_1.dynamicFunctionsPlugin; } });
+var functions_1 = require("./functions");
+Object.defineProperty(exports, "functions", { enumerable: true, get: function () { return functions_1.functions; } });

package/dist/plugin.d.ts

@@ -0,0 +1,6 @@
+import { PluginCreator } from "postcss";
+interface PluginOptions {
+    functions?: Record<string, (...args: string[]) => string>;
+}
+export declare const dynamicFunctionsPlugin: PluginCreator<PluginOptions>;
+export {};

package/dist/plugin.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dynamicFunctionsPlugin = void 0;
+const functions_1 = require("./functions");
+const dynamicFunctionsPlugin = (opts = {}) => {
+    const fnMap = { ...functions_1.functions, ...opts.functions };
+    return {
+        postcssPlugin: "postcss-dynamic-functions",
+        Declaration(decl) {
+            let value = decl.value;
+            for (const fnName in fnMap) {
+                const regex = new RegExp(`${fnName}\\(([^)]*)\\)`, "g");
+                value = value.replace(regex, (_match, argsStr) => {
+                    const args = argsStr
+                        .split(",")
+                        .map((a) => a.trim().replace(/^['"]|['"]$/g, ""));
+                    return fnMap[fnName](...args);
+                });
+            }
+            decl.value = value;
+        },
+    };
+};
+exports.dynamicFunctionsPlugin = dynamicFunctionsPlugin;
+exports.dynamicFunctionsPlugin.postcss = true;

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@seyuna/postcss",
+  "version": "0.0.1-dev.0",
+  "description": "Seyuna UI's postcss plugin",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "prepare": "npm run build"
+  },
+  "keywords": [
+    "postcss",
+    "plugin",
+    "seyuna"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "postcss": "^8.5.6"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "typescript": "^5.0.0",
+    "postcss": "^8.5.6"
+  }
+}

package/src/functions/color.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cssVar = void 0;
+const cssVar = (name, fallback) => {
+    return fallback ? `var(--${name}, ${fallback})` : `var(--${name})`;
+};
+exports.cssVar = cssVar;

package/src/functions/color.ts

@@ -0,0 +1,3 @@
+export const cssVar = (name: string, fallback?: string) => {
+  return fallback ? `var(--${name}, ${fallback})` : `var(--${name})`;
+};

package/src/functions/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.functions = void 0;
+const color_1 = require("./color");
+const spacing_1 = require("./spacing");
+exports.functions = {
+    cssVar: color_1.cssVar,
+    spacing: spacing_1.spacing,
+};

package/src/functions/index.ts

@@ -0,0 +1,9 @@
+import { cssVar } from "./color";
+import { spacing } from "./spacing";
+
+export type FnHandler = (...args: string[]) => string;
+
+export const functions: Record<string, FnHandler> = {
+  cssVar,
+  spacing,
+};

package/src/functions/spacing.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.spacing = void 0;
+const spacing = (multiplier) => {
+    const num = parseFloat(multiplier);
+    return `${num * 0.25}rem`;
+};
+exports.spacing = spacing;

package/src/functions/spacing.ts

@@ -0,0 +1,4 @@
+export const spacing = (multiplier: string) => {
+  const num = parseFloat(multiplier);
+  return `${num * 0.25}rem`;
+};

package/src/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.functions = exports.default = void 0;
+var plugin_1 = require("./plugin");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return plugin_1.dynamicFunctionsPlugin; } });
+var functions_1 = require("./functions");
+Object.defineProperty(exports, "functions", { enumerable: true, get: function () { return functions_1.functions; } });

package/src/index.ts

@@ -0,0 +1,2 @@
+export { dynamicFunctionsPlugin as default } from "./plugin";
+export { functions } from "./functions";

package/src/plugin.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dynamicFunctionsPlugin = void 0;
+const functions_1 = require("./functions");
+const dynamicFunctionsPlugin = (opts = {}) => {
+    const fnMap = { ...functions_1.functions, ...opts.functions };
+    return {
+        postcssPlugin: "postcss-dynamic-functions",
+        Declaration(decl) {
+            let value = decl.value;
+            for (const fnName in fnMap) {
+                const regex = new RegExp(`${fnName}\\(([^)]*)\\)`, "g");
+                value = value.replace(regex, (_match, argsStr) => {
+                    const args = argsStr
+                        .split(",")
+                        .map((a) => a.trim().replace(/^['"]|['"]$/g, ""));
+                    return fnMap[fnName](...args);
+                });
+            }
+            decl.value = value;
+        },
+    };
+};
+exports.dynamicFunctionsPlugin = dynamicFunctionsPlugin;
+exports.dynamicFunctionsPlugin.postcss = true;

package/src/plugin.ts

@@ -0,0 +1,32 @@
+import { PluginCreator } from "postcss";
+import { functions } from "./functions";
+
+interface PluginOptions {
+  functions?: Record<string, (...args: string[]) => string>;
+}
+
+export const dynamicFunctionsPlugin: PluginCreator<PluginOptions> = (opts = {}) => {
+  const fnMap = { ...functions, ...opts.functions };
+
+  return {
+    postcssPlugin: "postcss-dynamic-functions",
+    Declaration(decl) {
+      let value = decl.value;
+
+      for (const fnName in fnMap) {
+        const regex = new RegExp(`${fnName}\\(([^)]*)\\)`, "g");
+
+        value = value.replace(regex, (_match, argsStr) => {
+          const args = argsStr
+            .split(",")
+            .map((a: string) => a.trim().replace(/^['"]|['"]$/g, ""));
+          return fnMap[fnName](...args);
+        });
+      }
+
+      decl.value = value;
+    },
+  };
+};
+
+dynamicFunctionsPlugin.postcss = true;

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "CommonJS",
+    "lib": ["ES2020"],
+    "declaration": true,
+    "outDir": "dist",
+    "strict": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts"]
+}