{"library":"sheetify","title":"Sheetify CSS Bundler","description":"Sheetify is a modular CSS bundler designed primarily for use with Browserify. It allows developers to import and namespace CSS directly within JavaScript files, treating CSS as a first-class module similar to how JavaScript modules are handled via npm. The current stable version is 8.0.0. While not following a strict frequent release cadence, it receives updates for dependency maintenance and feature enhancements. Key differentiators include its ability to automatically namespace CSS classes based on content hashes, eliminating the need for complex BEM-like naming schemes, and its extensibility through transforms. It enables importing CSS packages from npm, inlining CSS directly into views for transparency, and offers a minimal API surface. It specifically targets client-side bundling workflows where Browserify is the primary tool for module resolution and bundling.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install sheetify"],"cli":null},"imports":["const css = require('sheetify')","browserify -t sheetify index.js > bundle.js","const css = require('sheetify'); css('normalize.css')"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"const css = require('sheetify');\nconst html = require('nanohtml'); // Example: nanohtml is a common pairing for DOM manipulation\n\n// Define inline CSS using sheetify's tagged template literal\nconst prefix = css`\n  :host {\n    background-color: #f0f0f0;\n    padding: 20px;\n    border-radius: 8px;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n  }\n  :host > h1 {\n    text-align: center;\n    color: #333;\n    font-family: sans-serif;\n  }\n  :host > p {\n    color: #666;\n    text-align: justify;\n  }\n`;\n\n// Create HTML using nanohtml, applying the namespaced CSS class\nconst tree = html`\n  <section class=${prefix}>\n    <h1>My Modular Section</h1>\n    <p>This paragraph demonstrates how Sheetify namespaces CSS rules to prevent global style conflicts. The styles defined above are scoped to this section element.</p>\n  </section>\n`;\n\n// Append the generated HTML to the document body\ndocument.body.appendChild(tree);\n\n// To run this example:\n// 1. Install dependencies: npm install sheetify nanohtml browserify\n// 2. Save the code above as `index.js`.\n// 3. Run the Browserify command: browserify -t sheetify index.js -o bundle.js\n// 4. Create an `index.html` file with: <script src=\"bundle.js\"></script> and open in browser.","lang":"javascript","description":"This example demonstrates how to use `sheetify` with Browserify to namespace inline CSS defined using tagged template literals and append the resulting HTML to the document body, including setup instructions.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}