{"_id":"@camilaprav/makelovenotwar","name":"@camilaprav/makelovenotwar","dist-tags":{"latest":"0.0.0"},"versions":{"0.0.0":{"name":"@camilaprav/makelovenotwar","version":"0.0.0","description":"PostCSS utility for per-element scoping of different CSS framework class names","type":"module","author":{"name":"Camila Prá"},"license":"ISC","bin":{"makelovenotwar":"makelovenotwar.js"},"dependencies":{"autoprefixer":"^10.4.21","commander":"^13.1.0","postcss":"^8.5.3","postcss-cli":"^11.0.1","postcss-selector-parser":"^7.1.0"},"_id":"@camilaprav/makelovenotwar@0.0.0","gitHead":"f3389014e85ae074bebba01ffa909767fe39136b","_nodeVersion":"23.11.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-03GvBQ1KrmSyt8gpMy/PcjmqVRqgNIkzQ5XNJeDOLxf5zomrsShJZqiXqYr9M6HkuqHwW0yOv0vDZRnA+Mq83g==","shasum":"3fd234d8a3086e6190342a3439ceeb6c7108ea66","tarball":"https://registry.npmjs.org/@camilaprav/makelovenotwar/-/makelovenotwar-0.0.0.tgz","fileCount":5,"unpackedSize":6300,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEEU9wlUqEhppUuTwJcMQjnAkXyO7dcFqDbFSbz3/birAiEAtep/+OQejdOk67WPn5ViZ1Jx4INYSSXEBllD4gBHlL4="}]},"_npmUser":{"name":"camilaprav","email":"camila@guiprav.com"},"directories":{},"maintainers":[{"name":"camilaprav","email":"camila@guiprav.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/makelovenotwar_0.0.0_1746494996154_0.4690177278373282"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-06T01:29:56.078Z","0.0.0":"2025-05-06T01:29:56.303Z","modified":"2025-05-06T01:29:56.579Z"},"maintainers":[{"name":"camilaprav","email":"camila@guiprav.com"}],"description":"PostCSS utility for per-element scoping of different CSS framework class names","author":{"name":"Camila Prá"},"license":"ISC","readme":"# 💘 Make Love Not War\n\nA PostCSS CLI tool and browser-side enabler that scopes CSS frameworks (like Tailwind, Bootstrap, and Bulma) to activate only when a specific class (e.g., `.tw`, `.bs`, `.bu`) is present on the same element. This enables per-element opt-in without global interference or class renaming.\n\n---\n\n## Why?\n\nWhen using multiple CSS frameworks on the same page, class name collisions (like `container`, `text-center`, etc.) are common. Tailwind offers a `prefix` option, but that requires rewriting every class and doesn’t help with framework interoperability.\n\n**This tool solves that by:**\n\n* Transforming selectors like `.text-red-500` into `.tw.text-red-500`, so Tailwind utilities only activate when `class=\"tw text-red-500\"` is present.\n* Allowing Bootstrap and Bulma to be processed similarly (e.g., with `.bs`, `.bu`), enabling all three to coexist cleanly.\n* Eliminating the need descendant wrappers (can still cause conflicts) or class name prefixing (too verbose).\n\n---\n\n## Features\n\n* 🔀 Namespace any CSS framework with a single opt-in class (e.g., `tw`, `bs`, `bu`)\n* 🧩 Keeps original class names intact\n* 📦 CLI tool for build-time processing\n* 🧪 Optional runtime support for Tailwind Play via MutationObserver workaround\n\n---\n\n## CLI Usage\n\nUse via `npx` with no installation required:\n\n```bash\nnpx @camilaprav/makelovenotwar <prefix> <input.css> [options]\n```\n\n### Arguments:\n\n* `<prefix>` – the class to use as a namespace (e.g., `bs` for Bootstrap)\n* `<input.css>` – path to the source CSS file\n\n### Options:\n\n* `-o, --output <file>` – specify output file (default: `stdout`)\n\n### What it does:\n\n* Rewrites selectors like `.box` → `.bu.box`.\n* Activates Bulma classes only when `class=\"bu\"` is present.\n\n### Example:\n\n```bash\nnpx @camilaprav/makelovenotwar bs bootstrap.css -o bootstrap-scoped.css\nnpx @camilaprav/makelovenotwar bu bulma.css -o bulma-scoped.css\n```\n\nThen in HTML:\n\n```html\n<link rel=\"stylesheet\" href=\"bootstrap-scoped.css\">\n<link rel=\"stylesheet\" href=\"bulma-scoped.css\">\n<div class=\"bs container mt-4\">Bootstrap</div>\n<div class=\"bu container is-primary\">Bulma</div>\n```\n\nThis enables **side-by-side usage** of multiple frameworks without class name collisions.\n\n---\n\n## Browser Usage (for Tailwind Play CDN)\n\nTo use this with a Tailwind Play environment where build-time processing isn’t available or is undesirable, inject the following scripts:\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<script type=\"module\" src=\"https://esm.sh/@camilaprav/makelovenotwar/tailwind-play.js\"></script>\n```\n\n### What it does:\n\n* Finds the inline `<style>` block with Tailwind utilities.\n* Rewrites selectors like `.text-red-500` → `.tw.text-red-500`.\n* Activates Tailwind utilities only when `class=\"tw\"` is present.\n\nTo prevent a flash of unstyled Tailwind content, add the `hidden` attribute to the body element. `tailwind-play.js` removes it automatically once patching is ready.\n","readmeFilename":"README.md","_rev":"1-9012ec42fdb48adf31ccc2049448504d"}