{"id":13432491,"url":"https://github.com/stackcss/sheetify","last_synced_at":"2025-04-12T23:30:01.849Z","repository":{"id":14013254,"uuid":"16714812","full_name":"stackcss/sheetify","owner":"stackcss","description":":sparkles: Modular CSS bundler for browserify","archived":false,"fork":false,"pushed_at":"2020-09-19T11:16:28.000Z","size":244,"stargazers_count":447,"open_issues_count":18,"forks_count":47,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-04-04T02:08:06.717Z","etag":null,"topics":["browserify","bundler","css"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stackcss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-02-11T01:02:24.000Z","updated_at":"2024-05-20T11:09:28.000Z","dependencies_parsed_at":"2022-06-26T06:39:01.580Z","dependency_job_id":null,"html_url":"https://github.com/stackcss/sheetify","commit_stats":null,"previous_names":[],"tags_count":58,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackcss%2Fsheetify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackcss%2Fsheetify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackcss%2Fsheetify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackcss%2Fsheetify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stackcss","download_url":"https://codeload.github.com/stackcss/sheetify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248647237,"owners_count":21139081,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browserify","bundler","css"],"created_at":"2024-07-31T02:01:12.319Z","updated_at":"2025-04-12T23:30:01.818Z","avatar_url":"https://github.com/stackcss.png","language":"JavaScript","readme":"# sheetify\n[![NPM version][npm-image]][npm-url]\n[![build status][travis-image]][travis-url]\n[![Test coverage][codecov-image]][codecov-url]\n[![Downloads][downloads-image]][downloads-url]\n[![js-standard-style][standard-image]][standard-url]\n\nModular CSS bundler for browserify. Works with [npm](http://npmjs.org/) modules\nlike [browserify](http://browserify.org/) does.\n\n## Features\n- __clarity:__ namespace CSS, no more need for naming schemes\n- __modularity:__ import and reuse CSS packages from npm\n- __extensibility:__ transform CSS using existing transforms, or write your own\n- __transparency:__ inline CSS in your views\n- __simplicity:__ tiny API surface and a minimal code base\n\n## Example\nGiven some inline CSS:\n```js\nconst css = require('sheetify')\nconst html = require('nanohtml')\n\nconst prefix = css`\n  :host \u003e h1 {\n    text-align: center;\n  }\n`\n\nconst tree = html`\n  \u003csection class=${prefix}\u003e\n    \u003ch1\u003eMy beautiful, centered title\u003c/h1\u003e\n  \u003c/section\u003e\n`\n\ndocument.body.appendChild(tree)\n```\n\nCompile with browserify using `-t sheetify`:\n```sh\n$ browserify -t sheetify index.js \u003e bundle.js\n```\n\nCSS classes are namespaced based on the content hash:\n```css\n._60ed23ec9f \u003e h1 {\n  text-align: center;\n}\n```\n\nAnd the rendered HTML includes the namespace:\n```html\n\u003csection class=\"_60ed23ec9f\"\u003e\n  \u003ch1\u003eMy beautiful, centered title\u003c/h1\u003e\n\u003c/section\u003e\n```\n\n## Styling host elements\nThe element that gets a prefix applied can be styled using the [`:host`\npseudoselector][1]:\n```js\nconst css = require('sheetify')\nconst html = require('nanohtml')\n\nconst prefix = css`\n  :host {\n    background-color: blue;\n  }\n\n  :host \u003e h1 {\n    text-decoration: underline;\n  }\n`\n\nconst tree = html`\n  \u003csection class=${prefix}\u003e\n    \u003ch1\u003eMy beautiful, centered title\u003c/h1\u003e\n  \u003c/section\u003e\n`\n\ndocument.body.appendChild(tree)\n```\n\nBy using `:host` we are able to provide styles for the parent element:\n\n```css\n._60ed23ec9f {\n  background-color: blue;\n}\n\n._60ed23ec9f \u003e h1 {\n  text-decoration: underline;\n}\n```\n\n```html\n\u003csection class=\"_60ed23ec9f\"\u003e\n  \u003ch1\u003eMy beautiful, centered title\u003c/h1\u003e\n\u003c/style\u003e\n```\n\n## Dynamic vs static\nSheetify is very good for namespacing static css assets in your javaScript code. Currently there is no support for dynamic variables within sheetify, however you could achieve this by setting the inline style property of an element.\n\n```js\nconst css = require('sheetify')\nconst html = require('nanohtml')\n\nconst sectionWidth = '100px';\nconst prefix = css`\n  :host {\n    background-color: blue;\n  }\n\n  :host \u003e h1 {\n    text-decoration: underline;\n  }\n`\n\nconst tree = html`\n  \u003csection class=${prefix} style=\"width:${sectionWidth}\"\u003e\n    \u003ch1\u003eMy beautiful, centered title\u003c/h1\u003e\n  \u003c/section\u003e\n`\n\ndocument.body.appendChild(tree)\n```\n\nShould you want to, you could even set dynamic variables in an object and do a rather complicated JSON.stringify with a replace on that object to turn it into a style for an element.\n\n```js\n\nconst dynamicStyles = {\n  width: global.window.innerWidth,\n  height: global.window.innerHeight,\n}\n\nlet dynamicStyleString = JSON.stringify(dynamicStyles)\n    .replace(/\\,/g,';')\n    .replace(/\\\"/g,'')\n    .replace(/\\{|\\}/g,'')\n\nconst tree = html`\n  \u003cdiv style=\"${dynamicStyleString}\"\u003e\n    \u003ch1\u003eMy beautiful, window width\u003c/h1\u003e\n  \u003c/div\u003e\n`\n```\n\n\n## External files\nTo include an external CSS file you can pass a path to sheetify as\n`sheetify('./my-file.css')`:\n```js\nconst css = require('sheetify')\nconst html = require('nanohtml')\n\nconst prefix = css('./my-styles.css')\n\nconst tree = html`\n  \u003csection class=${prefix}\u003e\n    \u003ch1\u003eMy beautiful, centered title\u003c/h1\u003e\n  \u003c/section\u003e\n`\n\ndocument.body.appendChild(tree)\n```\n\n## Use npm packages\nTo consume a package from npm that has `.css` file in its `main` or `style`\nfield:\n```js\nconst css = require('sheetify')\n\ncss('normalize.css')\n```\nPackages from npm will not be namespaced by default.\n\n## Write to separate file on disk\nTo write the compiled CSS to a separate file, rather than keep it in the\nbundle use [css-extract][2]:\n```sh\n$ browserify index.js \\\n  -t [ sheetify ] \\\n  -p [ css-extract -o bundle.css ] index.js \\\n  -o bundle.js\n```\n[css-extract][2] can also write to a stream from the JS api, look at the\ndocumentation to see how.\n\n## Transforms\nSheetify uses [transforms](#transforms) that take CSS and apply a transform.\nFor example include\n[sheetify-cssnext](https://github.com/sheetify/sheetify-cssnext) to support\nautoprefixing, variables and more:\n```js\nconst css = require('sheetify')\nconst html = require('nanohtml')\n\nconst prefix = css`\n  h1 {\n    transform: translate(0, 0);\n  }\n`\n\nconst tree = html`\n  \u003csection class=${prefix}\u003e\n    \u003ch1\u003eMy beautiful, centered title\u003c/h1\u003e\n  \u003c/section\u003e\n`\n\ndocument.body.appendChild(tree)\n```\n\nCompile with browserify using `-t [ sheetify -t sheetify-cssnext ]`:\n```sh\n$ browserify -t [ sheetify -t sheetify-cssnext ] index.js \u003e bundle.js\n```\n\nTransforms the CSS into:\n```css\nh1 {\n  -webkit-transform: translate(0, 0);\n          transform: translate(0, 0);\n}\n```\n\n## API\nBrowserify transforms accept either flags from the command line using\n[subargs](https://github.com/substack/subarg):\n```sh\n$ browserify -t [ sheetify -t sheetify-cssnext ] index.js \u003e bundle.js\n```\n\nOr the equivalent options by passing in a configuration object in the\nJavaScript API:\n```js\nconst browserify = require('browserify')\n\nconst b = browserify(path.join(__dirname, 'transform/source.js'))\nb.transform('sheetify', { transform: [ 'sheetify-cssnext' ] })\nb.bundle().pipe(process.stdout)\n```\n\nThe following options are available:\n```txt\nOptions:\n  -t, --transform    Consume a sheetify transform\n```\n\n## Installation\n```sh\n$ npm install sheetify\n```\n\n## See Also\n- [browserify](https://github.com/substack/node-browserify) - browser-side\n  require() the node.js way\n- [glslify](https://github.com/stackgl/glslify) - module system for GLSL\n  shaders\n- [hyperx](https://github.com/substack/hyperx) - transform inline HTML to JS\n- [bankai](https://github.com/yoshuawuyts/bankai) - DIY server middleware for\n  JS, CSS and HTML\n- [css-extract][2]: extract CSS from a browserify bundle\n\n## License\n[MIT](https://tldrlegal.com/license/mit-license)\n\n[npm-image]: https://img.shields.io/npm/v/sheetify.svg?style=flat-square\n[npm-url]: https://npmjs.org/package/sheetify\n[travis-image]: https://img.shields.io/travis/stackcss/sheetify/master.svg?style=flat-square\n[travis-url]: https://travis-ci.org/stackcss/sheetify\n[codecov-image]: https://img.shields.io/codecov/c/github/stackcss/sheetify/master.svg?style=flat-square\n[codecov-url]: https://codecov.io/github/stackcss/sheetify\n[downloads-image]: http://img.shields.io/npm/dm/sheetify.svg?style=flat-square\n[downloads-url]: https://npmjs.org/package/sheetify\n[standard-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square\n[standard-url]: https://github.com/feross/standard\n[1]: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/#toc-style-host\n[2]: https://github.com/stackcss/css-extract\n","funding_links":[],"categories":["JavaScript","Tools"],"sub_categories":["CSS bundlers"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstackcss%2Fsheetify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstackcss%2Fsheetify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstackcss%2Fsheetify/lists"}