@gomeniucivan/ui 1.0.52 → 1.0.53

package/loader.js

@@ -0,0 +1,167 @@
+/**
+ * @gomeniucivan/ui webpack loader
+ *
+ * Automatically injects `{ path: '<relative-file-path>' }` into every
+ * `createStaticStyles()` and `createStyles()` call at build time.
+ *
+ * This enables the DebugObserver (when `isDebug` is enabled on ThemeProvider)
+ * to annotate `<style>` and DOM elements with `data-insp-path`, showing
+ * exactly which source file defined each CSS class.
+ *
+ * Usage in next.config.ts / webpack.config.js:
+ *
+ *   config.module.rules.push({
+ *     test: /\.tsx?$/,
+ *     enforce: 'pre',
+ *     exclude: /node_modules/,
+ *     use: [require.resolve('@gomeniucivan/ui/loader')],
+ *   });
+ *
+ * The loader computes paths relative to the repository root (two levels up
+ * from node_modules/@gomeniucivan/ui/). Override with the `rootDir` option:
+ *
+ *   use: [{ loader: require.resolve('@gomeniucivan/ui/loader'), options: { rootDir: __dirname } }],
+ */
+
+'use strict';
+
+const nodePath = require('path');
+
+/** Functions whose calls get a `{ path }` second argument injected. */
+const TARGET_FNS = ['createStaticStyles', 'createStyles'];
+const CALL_RE = new RegExp(`(?:${TARGET_FNS.join('|')})\\s*\\(`, 'g');
+
+/**
+ * Resolve the project root directory.
+ * - If the consumer passes `options.rootDir`, use that.
+ * - Otherwise walk up from the loader's own location until we leave
+ *   `node_modules` (works for both hoisted and nested installs).
+ * - Fallback: `process.cwd()`.
+ */
+function resolveRoot(loaderContext) {
+  const opts =
+    typeof loaderContext.getOptions === 'function' ? loaderContext.getOptions() : loaderContext.query || {};
+
+  if (opts.rootDir) return nodePath.resolve(opts.rootDir);
+
+  // Walk up from this file (inside node_modules/@gomeniucivan/ui/)
+  let dir = __dirname;
+  while (dir !== nodePath.dirname(dir)) {
+    if (nodePath.basename(dir) === 'node_modules') {
+      return nodePath.dirname(dir); // parent of node_modules
+    }
+    dir = nodePath.dirname(dir);
+  }
+
+  return process.cwd();
+}
+
+module.exports = function injectStylePathLoader(source) {
+  // Fast bail-out
+  if (!CALL_RE.test(source)) return source;
+  CALL_RE.lastIndex = 0;
+
+  const resourcePath = this.resourcePath.replace(/\\/g, '/');
+
+  // Skip the factory implementation files themselves
+  if (
+    (resourcePath.includes('createStaticStyles') || resourcePath.includes('createStyles')) &&
+    resourcePath.endsWith('index.ts')
+  ) {
+    return source;
+  }
+
+  const rootDir = resolveRoot(this);
+
+  // Relative path from project root, forward slashes, no extension
+  const filePath = nodePath
+    .relative(rootDir, this.resourcePath)
+    .replace(/\\/g, '/')
+    .replace(/\.\w+$/, '');
+
+  // Find every target function call
+  const positions = [];
+  let m;
+  while ((m = CALL_RE.exec(source)) !== null) {
+    // Skip if inside a comment
+    const lineStart = source.lastIndexOf('\n', m.index) + 1;
+    const lineText = source.slice(lineStart, m.index).trimStart();
+    if (lineText.startsWith('*') || lineText.startsWith('//')) continue;
+    positions.push(m.index + m[0].length); // right after opening `(`
+  }
+
+  if (positions.length === 0) return source;
+
+  // Process in reverse so indices don't shift
+  let result = source;
+  for (let ci = positions.length - 1; ci >= 0; ci--) {
+    const afterParen = positions[ci];
+
+    // Count parens to find matching close (skip strings and template literals)
+    let depth = 1;
+    let closeIdx = -1;
+    let inStr = false;
+    let strCh = '';
+    let inTpl = false;
+    let tplDepth = 0;
+
+    for (let i = afterParen; i < result.length; i++) {
+      const ch = result[i];
+      const prev = i > 0 ? result[i - 1] : '';
+
+      if (inStr) {
+        if (ch === strCh && prev !== '\\') inStr = false;
+        continue;
+      }
+      if (inTpl) {
+        if (ch === '`' && prev !== '\\') {
+          inTpl = false;
+          continue;
+        }
+        if (ch === '$' && result[i + 1] === '{') {
+          tplDepth++;
+          i++;
+          continue;
+        }
+        if (ch === '}' && tplDepth > 0) {
+          tplDepth--;
+          continue;
+        }
+        continue;
+      }
+      if (ch === '"' || ch === "'") {
+        inStr = true;
+        strCh = ch;
+        continue;
+      }
+      if (ch === '`') {
+        inTpl = true;
+        tplDepth = 0;
+        continue;
+      }
+      if (ch === '(') depth++;
+      if (ch === ')') {
+        depth--;
+        if (depth === 0) {
+          closeIdx = i;
+          break;
+        }
+      }
+    }
+
+    if (closeIdx === -1) continue;
+
+    // Skip if already has a path option
+    const inner = result.slice(afterParen, closeIdx);
+    if (inner.includes('path:')) continue;
+
+    const hasTrailingComma = /,\s*$/.test(inner);
+    const pathArg = hasTrailingComma
+      ? ` { path: '${filePath}' }`
+      : `, { path: '${filePath}' }`;
+
+    result = result.slice(0, closeIdx) + pathArg + result.slice(closeIdx);
+  }
+
+  return result;
+};

package/next-plugin.js

@@ -0,0 +1,53 @@
+/**
+ * @gomeniucivan/ui Next.js plugin
+ *
+ * Wraps your Next.js config to automatically inject style debug paths.
+ * This is OPTIONAL — in dev mode (localhost), paths are auto-detected
+ * at runtime without any build config. Use this plugin for production
+ * builds or when you want guaranteed path accuracy.
+ *
+ * Usage in next.config.ts:
+ *
+ *   import withStyleDebug from '@gomeniucivan/ui/next-plugin';
+ *   export default withStyleDebug({ ...yourConfig });
+ *
+ * Or in next.config.js:
+ *
+ *   const withStyleDebug = require('@gomeniucivan/ui/next-plugin');
+ *   module.exports = withStyleDebug({ ...yourConfig });
+ */
+
+'use strict';
+
+const path = require('path');
+
+function withStyleDebug(nextConfig = {}) {
+  const userWebpack = nextConfig.webpack;
+
+  return {
+    ...nextConfig,
+    webpack: (config, options) => {
+      // Add the style path injection loader
+      config.module.rules.push({
+        test: /\.tsx?$/,
+        enforce: 'pre',
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: require.resolve('./loader.js'),
+          },
+        ],
+      });
+
+      // Chain with user's webpack config if present
+      if (typeof userWebpack === 'function') {
+        return userWebpack(config, options);
+      }
+
+      return config;
+    },
+  };
+}
+
+module.exports = withStyleDebug;
+module.exports.default = withStyleDebug;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gomeniucivan/ui",
-  "version": "1.0.52",
+  "version": "1.0.53",
   "private": false,
   "sideEffects": [
     "**/*.css"
@@ -11,13 +11,17 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.js",
       "default": "./dist/index.js"
-    }
+    },
+    "./loader": "./loader.js",
+    "./next-plugin": "./next-plugin.js"
   },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "loader.js",
+    "next-plugin.js"
   ],
   "scripts": {
     "build": "tsup",
@@ -52,7 +56,12 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/css": "^11.11.2",
     "@emotion/is-prop-valid": "^1.4.0",
+    "@emotion/react": "^11.11.4",
+    "@emotion/serialize": "^1.1.3",
+    "@emotion/utils": "^1.2.1",
     "@floating-ui/react": "^0.27.17",
     "@giscus/react": "^3.1.0",
     "@mdx-js/mdx": "^3.1.1",
@@ -63,7 +72,6 @@
     "@shikijs/transformers": "^3.22.0",
     "@splinetool/runtime": "0.9.526",
     "ahooks": "^3.9.6",
-    "antd-style": "^4.1.0",
     "chroma-js": "^3.2.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -134,7 +142,6 @@
     "@types/uuid": "^11.0.0",
     "@vitest/coverage-v8": "^3.2.4",
     "antd": "^6.2.3",
-    "babel-plugin-antd-style": "^1.0.4",
     "cheerio": "^1.2.0",
     "clean-package": "^2.2.0",
     "commitlint": "^19.8.1",