{"id":15484,"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.","status":"active","version":"8.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/stackcss/sheetify","tags":["javascript","modular","css","bundle","browserify","css-modules"],"install":[{"cmd":"npm install sheetify","lang":"bash","label":"npm"},{"cmd":"yarn add sheetify","lang":"bash","label":"yarn"},{"cmd":"pnpm add sheetify","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Sheetify is a Browserify transform, requiring Browserify to function as intended for bundling.","package":"browserify","optional":false}],"imports":[{"note":"The primary API for defining modular CSS in JavaScript files, which takes a tagged template literal or a path to an external CSS file/npm package. Sheetify is a CommonJS module, so `require` is the standard import mechanism. Direct ESM `import` is not natively supported without a transpilation step.","wrong":"import css from 'sheetify'","symbol":"css (inline/external)","correct":"const css = require('sheetify')"},{"note":"While `sheetify` provides a programmatic API, its most common 'import pattern' is as a Browserify transform. It's applied via the command line using the `-t` flag, integrating it directly into the Browserify bundling process. There is no separate module to `require` for the transform itself.","wrong":"import sheetify from 'browserify-sheetify-transform'","symbol":"SheetifyTransform (CLI)","correct":"browserify -t sheetify index.js > bundle.js"},{"note":"When consuming CSS from npm packages via Sheetify, the `css` function is used. Note that by default, CSS from npm packages is NOT namespaced by Sheetify, only local or inline CSS. The import mechanism for the `css` function itself remains `require`.","wrong":"import 'normalize.css'","symbol":"css (npm package)","correct":"const css = require('sheetify'); css('normalize.css')"}],"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."},"warnings":[{"fix":"Upgrade your Node.js environment to version 6 or higher. Consider using a Node.js version manager like `nvm` to manage multiple Node.js installations.","message":"Sheetify v8.0.0 and higher require Node.js version 6 or greater. Projects running on older Node.js versions will encounter compatibility issues.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"For external CSS that needs namespacing, consider wrapping its content within a tagged template literal or using a custom transform that applies namespacing logic.","message":"When importing CSS from external files or npm packages (e.g., `css('./my-file.css')` or `css('normalize.css')`), `sheetify` does NOT apply namespacing by default. Namespacing is primarily for CSS defined directly within tagged template literals.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For dynamic styling, you must use inline styles on the HTML elements or manipulate CSS properties directly via JavaScript after the initial render.","message":"Sheetify does not support dynamic CSS variables or values directly within its tagged template literals. The CSS it processes is static.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure `sheetify` is installed: `npm install sheetify --save-dev`. Verify your `browserify` command includes `-t sheetify` and that `index.js` correctly `require`s `sheetify`.","cause":"The `sheetify` package is not installed in the project's `node_modules`, or the Browserify command is incorrectly configured and cannot resolve it.","error":"Error: Cannot find module 'sheetify' from '<path>'"},{"fix":"Sheetify is a CommonJS module. Use `const css = require('sheetify')` instead of `import`. If targeting modern Node.js or browser ESM, ensure your build setup correctly transforms CommonJS `require` to ES `import` for dependencies.","cause":"Attempting to use ES module `import` syntax (`import css from 'sheetify'`) in a CommonJS context or without proper transpilation/bundler configuration for ES Modules.","error":"SyntaxError: Unexpected token import (or similar for ESM syntax)"}],"ecosystem":"npm"}