{"library":"scopedify","title":"Scopedify: Browserify CSS Scoping","description":"Scopedify is a CSS bundler designed specifically for the Browserify ecosystem, offering a solution for modular and scoped CSS. At version 1.1.1, released in 2016, and with no updates since, it is considered an abandoned project. It functions by transforming inline CSS or external `.css` files during the Browserify build process, applying unique attribute-based namespaces (e.g., `_scope_a68eaa6a`) to both CSS selectors and corresponding HTML elements. This mechanism aims to prevent style conflicts and pollution by isolating component-specific styles, conceptually similar to modern CSS Modules but tailored for Browserify. Key differentiators include its tight integration with Browserify transforms, support for nested and multiple scopes, and the ability to consume CSS from npm packages, albeit without default namespacing for those packages. Its reliance on Browserify and an older approach to CSS scoping means it is not directly compatible with contemporary bundlers like Webpack, Rollup, or Vite.","language":"javascript","status":"abandoned","last_verified":"Thu Apr 23","install":{"commands":["npm install scopedify"],"cli":null},"imports":["const css = require('scopedify')","const css = require('scopedify')('./my-styles.css')","browserify -t scopedify/transform index.js > bundle.js"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"const css = require('scopedify');\nconst html = require('bel'); // 'bel' is a common dependency for creating DOM elements in this ecosystem\n\n// Define inline CSS using a tagged template literal\nconst scope = css`\n  .base h1 {\n    text-align: center;\n    color: #333;\n    background-color: #f9f9f9;\n    padding: 15px;\n    border: 1px solid #ddd;\n    border-radius: 5px;\n  }\n\n  .base p {\n    font-size: 1.1em;\n    line-height: 1.6;\n    margin-top: 10px;\n  }\n\n  .highlight {\n    font-weight: bold;\n    color: #007bff;\n  }\n`;\n\n// Apply the scoped CSS to an HTML tree constructed with 'bel'\nconst tree = scope(html`\n  <section class='base highlight'>\n    <h1>My beautiful, centered title</h1>\n    <p>This paragraph is part of the <span class=\"highlight\">scoped section</span>. Its styles are isolated by Scopedify.</p>\n    <div>\n      <small>Additional content here also inherits the scope.</small>\n    </div>\n  </section>\n`);\n\n// Append the rendered HTML to the document body\ndocument.body.appendChild(tree);\n\n// To compile this with Browserify from the command line:\n// $ browserify -t scopedify/transform index.js > bundle.js\n// Then, include 'bundle.js' in your HTML file to see the effect.\n","lang":"javascript","description":"Demonstrates defining inline scoped CSS using tagged template literals and applying it to a 'bel' generated HTML tree, along with the necessary Browserify compilation command to process the transform.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}