@dinesh-gamage/react-scoped-css 2.0.0

package/dist/postcss/index.mjs

@@ -0,0 +1,83 @@
+// react-scoped-css v2 — https://github.com/dinesh-gamage/react-scoped-css
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/shared/hash.ts
+import { createHash } from "crypto";
+import fs from "fs";
+import path from "path";
+function findUpSync(filename, startDir) {
+  let dir = startDir;
+  while (true) {
+    const candidate = path.join(dir, filename);
+    if (fs.existsSync(candidate)) return candidate;
+    const parent = path.dirname(dir);
+    if (parent === dir) return void 0;
+    dir = parent;
+  }
+}
+function readPackageNameSync(pkgJsonPath) {
+  if (!pkgJsonPath) return "";
+  try {
+    const raw = fs.readFileSync(pkgJsonPath, "utf8");
+    const pkg = JSON.parse(raw);
+    return typeof pkg.name === "string" ? pkg.name : "";
+  } catch {
+    return "";
+  }
+}
+function generateHash(absoluteFilePath, salt, hashLength = 8) {
+  const pkgJsonPath = findUpSync("package.json", path.dirname(absoluteFilePath));
+  const projectRoot = pkgJsonPath ? path.dirname(pkgJsonPath) : process.cwd();
+  const relativeFilePath = path.relative(projectRoot, absoluteFilePath).replace(/\.[^./\\]+$/, "");
+  const effectiveSalt = salt ?? readPackageNameSync(pkgJsonPath);
+  return createHash("md5").update(relativeFilePath + effectiveSalt).digest("hex").slice(0, hashLength);
+}
+
+// src/shared/exclude.ts
+function isExcluded(className, excludePrefixes) {
+  if (excludePrefixes.length === 0) return false;
+  return excludePrefixes.some((prefix) => className.startsWith(prefix));
+}
+
+// src/postcss/index.ts
+var scssSyntax = __require("postcss-scss");
+var CLASS_SELECTOR_RE = /\.(-?[_a-zA-Z][_a-zA-Z0-9-]*)/g;
+var plugin = (opts = {}) => {
+  const { exclude = [], salt, hashLength = 8 } = opts;
+  return {
+    postcssPlugin: "react-scoped-css",
+    prepare(result) {
+      const filePath = result.opts.from;
+      if (!filePath || filePath.includes(".module.")) {
+        return {};
+      }
+      if (/\.s[ac]ss$/i.test(filePath) && !result.opts.syntax) {
+        result.opts.syntax = scssSyntax;
+      }
+      const hash = generateHash(filePath, salt, hashLength);
+      return {
+        Rule(rule) {
+          rule.selector = rule.selector.replace(
+            CLASS_SELECTOR_RE,
+            (match, className) => {
+              if (isExcluded(className, exclude)) return match;
+              return `.${className}-${hash}`;
+            }
+          );
+        }
+      };
+    }
+  };
+};
+plugin.postcss = true;
+var postcss_default = plugin;
+export {
+  postcss_default as default,
+  plugin as scopedCssPostcss
+};
+//# sourceMappingURL=index.mjs.map

package/dist/postcss/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shared/hash.ts","../../src/shared/exclude.ts","../../src/postcss/index.ts"],"sourcesContent":["import { createHash } from 'crypto';\nimport fs from 'fs';\nimport path from 'path';\n\n/** Walk up from `dir` looking for `filename`. Returns the first match or undefined. */\nfunction findUpSync(filename: string, startDir: string): string | undefined {\n    let dir = startDir;\n    while (true) {\n        const candidate = path.join(dir, filename);\n        if (fs.existsSync(candidate)) return candidate;\n        const parent = path.dirname(dir);\n        if (parent === dir) return undefined; // reached filesystem root\n        dir = parent;\n    }\n}\n\nfunction readPackageNameSync(pkgJsonPath: string | undefined): string {\n    if (!pkgJsonPath) return '';\n    try {\n        const raw = fs.readFileSync(pkgJsonPath, 'utf8');\n        const pkg = JSON.parse(raw) as { name?: string };\n        return typeof pkg.name === 'string' ? pkg.name : '';\n    } catch {\n        return '';\n    }\n}\n\n/**\n * Generate a stable 8-char hex hash for a source file.\n *\n * Uses the file's path relative to the nearest package.json root so the hash\n * is identical on every developer machine and in CI, regardless of where the\n * repo is cloned.\n *\n * @param absoluteFilePath  Absolute path to the source file being processed.\n * @param salt              Override the default salt (package.json \"name\").\n *                          Pass an explicit value to guarantee global uniqueness\n *                          across monorepos or multi-app deployments.\n * @param hashLength        Number of hex characters to use (default: 8).\n */\nexport function generateHash(\n    absoluteFilePath: string,\n    salt?: string,\n    hashLength = 8,\n): string {\n    const pkgJsonPath = findUpSync('package.json', path.dirname(absoluteFilePath));\n    const projectRoot = pkgJsonPath ? path.dirname(pkgJsonPath) : process.cwd();\n    // Strip extension so Card.tsx and Card.scss produce the same hash.\n    // A component's scope identity is its path without extension.\n    const relativeFilePath = path.relative(projectRoot, absoluteFilePath).replace(/\\.[^./\\\\]+$/, '');\n\n    const effectiveSalt = salt ?? readPackageNameSync(pkgJsonPath);\n\n    return createHash('md5')\n        .update(relativeFilePath + effectiveSalt)\n        .digest('hex')\n        .slice(0, hashLength);\n}\n","/**\n * Returns true if className should be left unscoped.\n *\n * A class is excluded when its string value starts with any of the configured\n * prefixes. This is the intended behaviour for component-library overrides:\n * `exclude: ['uxp-', 'global-']` leaves `uxp-button` and `global-header`\n * untouched while scoping everything else.\n */\nexport function isExcluded(className: string, excludePrefixes: string[]): boolean {\n    if (excludePrefixes.length === 0) return false;\n    return excludePrefixes.some(prefix => className.startsWith(prefix));\n}\n","import type { PluginCreator, Syntax } from 'postcss';\nimport { generateHash } from '../shared/hash';\nimport { isExcluded } from '../shared/exclude';\nimport type { ScopedCssOptions } from '../shared/options';\n\n// postcss-scss is a bundled dependency — use it automatically for .scss/.sass files\n// eslint-disable-next-line @typescript-eslint/no-require-imports\nconst scssSyntax: Syntax = require('postcss-scss');\n\n// Matches a CSS class selector token: .foo, .foo-bar, ._private, etc.\n// Captures the class name without the leading dot.\nconst CLASS_SELECTOR_RE = /\\.(-?[_a-zA-Z][_a-zA-Z0-9-]*)/g;\n\n/**\n * PostCSS plugin — appends `-{hash}` to every class selector in the file,\n * unless the class name starts with an excluded prefix.\n *\n * Files whose path contains `.module.` are skipped entirely — they are already\n * handled by CSS Modules and must not be double-processed.\n *\n * Usage (postcss.config.js):\n *   const { scopedCssPostcss } = require('react-scoped-css/postcss');\n *   module.exports = { plugins: [scopedCssPostcss({ exclude: ['uxp-'] })] };\n */\nconst plugin: PluginCreator<ScopedCssOptions> = (opts: ScopedCssOptions = {}) => {\n    const { exclude = [], salt, hashLength = 8 } = opts;\n\n    return {\n        postcssPlugin: 'react-scoped-css',\n\n        prepare(result) {\n            const filePath = result.opts.from;\n\n            // Skip CSS Modules files — they are already scoped.\n            if (!filePath || filePath.includes('.module.')) {\n                return {};\n            }\n\n            // Apply SCSS syntax automatically for .scss/.sass files.\n            // This allows users to run postcss-loader without a separate syntax config.\n            if (/\\.s[ac]ss$/i.test(filePath) && !result.opts.syntax) {\n                result.opts.syntax = scssSyntax;\n            }\n\n            const hash = generateHash(filePath, salt, hashLength);\n\n            return {\n                Rule(rule) {\n                    rule.selector = rule.selector.replace(\n                        CLASS_SELECTOR_RE,\n                        (match, className: string) => {\n                            if (isExcluded(className, exclude)) return match;\n                            return `.${className}-${hash}`;\n                        },\n                    );\n                },\n            };\n        },\n    };\n};\n\nplugin.postcss = true;\n\nexport { plugin as scopedCssPostcss };\nexport default plugin;\n"],"mappings":";;;;;;;;;AAAA,SAAS,kBAAkB;AAC3B,OAAO,QAAQ;AACf,OAAO,UAAU;AAGjB,SAAS,WAAW,UAAkB,UAAsC;AACxE,MAAI,MAAM;AACV,SAAO,MAAM;AACT,UAAM,YAAY,KAAK,KAAK,KAAK,QAAQ;AACzC,QAAI,GAAG,WAAW,SAAS,EAAG,QAAO;AACrC,UAAM,SAAS,KAAK,QAAQ,GAAG;AAC/B,QAAI,WAAW,IAAK,QAAO;AAC3B,UAAM;AAAA,EACV;AACJ;AAEA,SAAS,oBAAoB,aAAyC;AAClE,MAAI,CAAC,YAAa,QAAO;AACzB,MAAI;AACA,UAAM,MAAM,GAAG,aAAa,aAAa,MAAM;AAC/C,UAAM,MAAM,KAAK,MAAM,GAAG;AAC1B,WAAO,OAAO,IAAI,SAAS,WAAW,IAAI,OAAO;AAAA,EACrD,QAAQ;AACJ,WAAO;AAAA,EACX;AACJ;AAeO,SAAS,aACZ,kBACA,MACA,aAAa,GACP;AACN,QAAM,cAAc,WAAW,gBAAgB,KAAK,QAAQ,gBAAgB,CAAC;AAC7E,QAAM,cAAc,cAAc,KAAK,QAAQ,WAAW,IAAI,QAAQ,IAAI;AAG1E,QAAM,mBAAmB,KAAK,SAAS,aAAa,gBAAgB,EAAE,QAAQ,eAAe,EAAE;AAE/F,QAAM,gBAAgB,QAAQ,oBAAoB,WAAW;AAE7D,SAAO,WAAW,KAAK,EAClB,OAAO,mBAAmB,aAAa,EACvC,OAAO,KAAK,EACZ,MAAM,GAAG,UAAU;AAC5B;;;ACjDO,SAAS,WAAW,WAAmB,iBAAoC;AAC9E,MAAI,gBAAgB,WAAW,EAAG,QAAO;AACzC,SAAO,gBAAgB,KAAK,YAAU,UAAU,WAAW,MAAM,CAAC;AACtE;;;ACJA,IAAM,aAAqB,UAAQ,cAAc;AAIjD,IAAM,oBAAoB;AAa1B,IAAM,SAA0C,CAAC,OAAyB,CAAC,MAAM;AAC7E,QAAM,EAAE,UAAU,CAAC,GAAG,MAAM,aAAa,EAAE,IAAI;AAE/C,SAAO;AAAA,IACH,eAAe;AAAA,IAEf,QAAQ,QAAQ;AACZ,YAAM,WAAW,OAAO,KAAK;AAG7B,UAAI,CAAC,YAAY,SAAS,SAAS,UAAU,GAAG;AAC5C,eAAO,CAAC;AAAA,MACZ;AAIA,UAAI,cAAc,KAAK,QAAQ,KAAK,CAAC,OAAO,KAAK,QAAQ;AACrD,eAAO,KAAK,SAAS;AAAA,MACzB;AAEA,YAAM,OAAO,aAAa,UAAU,MAAM,UAAU;AAEpD,aAAO;AAAA,QACH,KAAK,MAAM;AACP,eAAK,WAAW,KAAK,SAAS;AAAA,YAC1B;AAAA,YACA,CAAC,OAAO,cAAsB;AAC1B,kBAAI,WAAW,WAAW,OAAO,EAAG,QAAO;AAC3C,qBAAO,IAAI,SAAS,IAAI,IAAI;AAAA,YAChC;AAAA,UACJ;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ;AACJ;AAEA,OAAO,UAAU;AAGjB,IAAO,kBAAQ;","names":[]}

package/package.json

@@ -0,0 +1,102 @@
+{
+  "name": "@dinesh-gamage/react-scoped-css",
+  "version": "2.0.0",
+  "description": "Zero-code-change CSS scoping for React — no className renames, no new syntax",
+  "license": "MIT",
+  "author": "dinesh-gamage",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dinesh-gamage/react-scoped-css.git"
+  },
+  "keywords": [
+    "react",
+    "css",
+    "scoped css",
+    "babel plugin",
+    "postcss plugin",
+    "css modules",
+    "scoped styles",
+    "vite",
+    "webpack",
+    "nextjs"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./babel": {
+      "types": "./dist/babel/index.d.ts",
+      "import": "./dist/babel/index.mjs",
+      "require": "./dist/babel/index.js"
+    },
+    "./postcss": {
+      "types": "./dist/postcss/index.d.ts",
+      "import": "./dist/postcss/index.mjs",
+      "require": "./dist/postcss/index.js"
+    },
+    "./vite": {
+      "types": "./dist/adapters/vite.d.ts",
+      "import": "./dist/adapters/vite.mjs",
+      "require": "./dist/adapters/vite.js"
+    },
+    "./next": {
+      "types": "./dist/adapters/next.d.ts",
+      "import": "./dist/adapters/next.mjs",
+      "require": "./dist/adapters/next.js"
+    },
+    "./webpack": {
+      "types": "./dist/adapters/webpack.d.ts",
+      "import": "./dist/adapters/webpack.mjs",
+      "require": "./dist/adapters/webpack.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "bin": {
+    "react-scoped-css": "./dist/cli/init.js"
+  },
+  "files": [
+    "dist/**/*"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "build:watch": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "lint": "tsc --noEmit",
+    "prepublishOnly": "npm run lint && npm run test && npm run build"
+  },
+  "dependencies": {
+    "postcss-scss": "^4.0.9"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.0",
+    "@babel/generator": "^7.24.0",
+    "@babel/parser": "^7.24.0",
+    "@babel/traverse": "^7.24.0",
+    "@babel/types": "^7.24.0",
+    "@types/babel__core": "^7.20.5",
+    "@types/babel__traverse": "^7.20.5",
+    "@types/node": "^20.0.0",
+    "postcss": "^8.4.38",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0",
+    "vitest": "^1.4.0"
+  },
+  "peerDependencies": {
+    "@babel/core": ">=7.0.0",
+    "postcss": ">=8.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@babel/core": {
+      "optional": true
+    },
+    "postcss": {
+      "optional": true
+    }
+  }
+}