postcss-safe-namespace 1.0.1

package/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Matt Pocock 2024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,99 @@
+# postcss-safe-namespace
+
+A PostCSS plugin that namespaces CSS selectors by adding a prefix, designed to prevent style conflicts in microfrontend and multi app environments.
+
+## Installation
+
+```bash
+npm install postcss-safe-namespace
+```
+
+## Usage
+
+```js
+import postcss from "postcss";
+import safeNamespace from "postcss-safe-namespace";
+
+postcss([
+  safeNamespace({
+    prefix: ".my-prefix",
+  }),
+]);
+```
+
+Or via vite:
+
+```js
+// vite.config.js
+import { defineConfig } from "vite";
+import safeNamespace from "postcss-safe-namespace";
+
+export default defineConfig({
+  css: {
+    postcss: {
+      plugins: [
+        safeNamespace({
+          prefix: ".my-prefix",
+        }),
+      ],
+    },
+  },
+});
+```
+
+### Options
+
+- `prefix`: The prefix to add to CSS selectors
+
+## Example
+
+**Input:**
+
+```css
+.button {
+  color: blue;
+}
+
+#header {
+  background: red;
+}
+```
+
+**Output:**
+
+```css
+.my-prefix .button {
+  color: blue;
+}
+
+.my-prefix #header {
+  background: red;
+}
+```
+
+## Why build another one?
+
+Yes, there are already plugins that do this.
+
+Our app that runs inside a application shell alongside other apps. We needed to make sure our styles only affected our app, not the others.
+
+We tried existing plugins, but ran into problems:
+
+- Some didn't handle nested CSS (we use Vite and Tailwind)
+- Others broke CSS modules
+- We needed to run separate set of plugins for production builds
+
+So I made this one.
+
+### But wait, don't CSS modules solve this?
+
+They do! We also use Tailwind, which adds base styles. There's no "nice" way to scope those base selectors with CSS modules alone.
+
+### Isn't that against the point of Tailwind?
+
+Kind of, yeah. Tailwind classes are consistent everywhere. Different apps in our shell can use slightly different CSS variable values, which can cause the styles to clash again.
+
+## References
+
+- https://postcss.org/docs/writing-a-postcss-plugin
+- https://www.totaltypescript.com/how-to-create-an-npm-package

package/dist/index.cjs

@@ -0,0 +1,71 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  default: () => safeNamespace_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/safeNamespace.ts
+var import_postcss = require("postcss");
+var import_postcss_selector_parser = __toESM(require("postcss-selector-parser"), 1);
+var safeNamespace = (opts = {}) => {
+  const prefixSelector = opts.prefix || "";
+  return {
+    postcssPlugin: "safe-namespace",
+    Rule(rule) {
+      if (rule.parent && rule.parent.type === "rule") {
+        return;
+      }
+      if (rule.parent && rule.parent.type === "atrule") {
+        const atRule = rule.parent;
+        if (atRule.name === "keyframes") {
+          return;
+        }
+      }
+      rule.selector = (0, import_postcss_selector_parser.default)((selectors) => {
+        selectors.each((selector) => {
+          const firstNode = selector.first;
+          if (firstNode.value === ":root") {
+            firstNode.replaceWith(import_postcss_selector_parser.default.string({ value: prefixSelector }));
+          } else if (firstNode.value === "html") {
+            firstNode.replaceWith(import_postcss_selector_parser.default.string({ value: prefixSelector }));
+          } else {
+            selector.prepend(import_postcss_selector_parser.default.combinator({ value: " " }));
+            selector.prepend(import_postcss_selector_parser.default.string({ value: prefixSelector }));
+          }
+        });
+      }).processSync(rule.selector);
+    }
+  };
+};
+safeNamespace.postcss = true;
+var safeNamespace_default = safeNamespace;

package/dist/index.d.cts

@@ -0,0 +1,8 @@
+import { PluginCreator } from 'postcss';
+
+interface PrefixOptions {
+    prefix?: string;
+}
+declare const safeNamespace: PluginCreator<PrefixOptions>;
+
+export { safeNamespace as default };

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { PluginCreator } from 'postcss';
+
+interface PrefixOptions {
+    prefix?: string;
+}
+declare const safeNamespace: PluginCreator<PrefixOptions>;
+
+export { safeNamespace as default };

package/dist/index.js

@@ -0,0 +1,38 @@
+// src/safeNamespace.ts
+import "postcss";
+import parser from "postcss-selector-parser";
+var safeNamespace = (opts = {}) => {
+  const prefixSelector = opts.prefix || "";
+  return {
+    postcssPlugin: "safe-namespace",
+    Rule(rule) {
+      if (rule.parent && rule.parent.type === "rule") {
+        return;
+      }
+      if (rule.parent && rule.parent.type === "atrule") {
+        const atRule = rule.parent;
+        if (atRule.name === "keyframes") {
+          return;
+        }
+      }
+      rule.selector = parser((selectors) => {
+        selectors.each((selector) => {
+          const firstNode = selector.first;
+          if (firstNode.value === ":root") {
+            firstNode.replaceWith(parser.string({ value: prefixSelector }));
+          } else if (firstNode.value === "html") {
+            firstNode.replaceWith(parser.string({ value: prefixSelector }));
+          } else {
+            selector.prepend(parser.combinator({ value: " " }));
+            selector.prepend(parser.string({ value: prefixSelector }));
+          }
+        });
+      }).processSync(rule.selector);
+    }
+  };
+};
+safeNamespace.postcss = true;
+var safeNamespace_default = safeNamespace;
+export {
+  safeNamespace_default as default
+};

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "postcss-safe-namespace",
+  "version": "1.0.1",
+  "description": "A PostCSS plugin to safely namespace CSS selectors by adding a prefix.",
+  "keywords": [],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "homepage": "https://github.com/hendrikkao1/postcss-safe-namespace",
+  "bugs": {
+    "url": "https://github.com/hendrikkao1/postcss-safe-namespace/issues"
+  },
+  "author": "Hendrik Käo",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hendrikkao1/postcss-safe-namespace.git"
+  },
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "devDependencies": {
+    "@changesets/cli": "^2.29.8",
+    "@types/node": "^25.0.3",
+    "postcss": "^8.5.6",
+    "prettier": "^3.7.4",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^3.2.4"
+  },
+  "scripts": {
+    "build": "tsup",
+    "ci": "npm run build && npm run format:check && npm run lint && npm run test",
+    "lint": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest --watch",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "local-release": "npm run ci && changeset version && changeset publish"
+  },
+  "dependencies": {
+    "postcss-selector-parser": "^7.1.1"
+  },
+  "peerDependencies": {
+    "postcss": "^8.5.6"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}