{"id":18226926,"url":"https://github.com/sliptype/snabbdom-typestyle","last_synced_at":"2025-04-03T09:30:28.348Z","repository":{"id":57364501,"uuid":"135933717","full_name":"sliptype/snabbdom-typestyle","owner":"sliptype","description":"💎 Maintainable, scalable, and elegant styling with Snabbdom + TypeStyle","archived":false,"fork":false,"pushed_at":"2018-08-06T19:44:27.000Z","size":92,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-02-22T23:05:54.177Z","etag":null,"topics":["css-in-js","cyclejs","snabbdom"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/sliptype.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":"2018-06-03T19:25:06.000Z","updated_at":"2019-05-29T12:47:14.000Z","dependencies_parsed_at":"2022-09-13T21:11:15.744Z","dependency_job_id":null,"html_url":"https://github.com/sliptype/snabbdom-typestyle","commit_stats":null,"previous_names":["sklingler93/snabbdom-typestyle"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sliptype%2Fsnabbdom-typestyle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sliptype%2Fsnabbdom-typestyle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sliptype%2Fsnabbdom-typestyle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sliptype%2Fsnabbdom-typestyle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sliptype","download_url":"https://codeload.github.com/sliptype/snabbdom-typestyle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246975980,"owners_count":20862997,"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":["css-in-js","cyclejs","snabbdom"],"created_at":"2024-11-04T05:04:04.903Z","updated_at":"2025-04-03T09:30:28.060Z","avatar_url":"https://github.com/sliptype.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Snabbdom TypeStyle\n\n[![npm](https://img.shields.io/npm/v/snabbdom-typestyle.svg)](https://www.npmjs.com/package/snabbdom-typestyle) [![CircleCI](https://img.shields.io/circleci/project/github/sliptype/snabbdom-typestyle.svg)](https://circleci.com/gh/sliptype/snabbdom-typestyle) [![Code Climate](https://img.shields.io/codeclimate/maintainability/sliptype/snabbdom-typestyle.svg)](https://codeclimate.com/github/sliptype/snabbdom-typestyle) [![Code Climate](https://img.shields.io/codeclimate/coverage/sliptype/snabbdom-typestyle.svg)](https://codeclimate.com/github/sliptype/snabbdom-typestyle)  [![license](https://img.shields.io/github/license/sliptype/snabbdom-typestyle.svg)](https://github.com/sliptype/snabbdom-typestyle/blob/master/LICENSE)\n\nMaintainable, scalable, and elegant styling with [Snabbdom](https://github.com/snabbdom/snabbdom) + [TypeStyle](https://github.com/typestyle/typestyle)\n* All the power and benefits of [TypeStyle](https://github.com/typestyle/typestyle)\n* Internal handling of classname mapping\n* Server-side rendering support\n\n## Installation\n\n```bash\nnpm install snabbdom-typestyle\n```\n\n## Usage\n\nSimply pass `css` to your [Snabbdom](https://github.com/snabbdom/snabbdom) virtual node!\n\n```js\n  import { Style } from 'snabbdom-typestyle';\n\n  function view() {\n\n      const buttonStyle: Style = {\n          color: 'blue'\n      };\n\n      return (\n          \u003cbutton css={ buttonStyle }\u003e\n              My Button\n          \u003c/button\u003e\n      );\n  }\n```\nThe **CssModule** is essentially a wrapper around [TypeStyle style](https://typestyle.github.io/#/core/-style-) and can be passed either a single `NestedCssProperties` or an array of `NestedCssProperties` (or `Style`, which is an alias provided by [snabbdom-typestyle](https://github.com/sliptype/snabbdom-typestyle)).\n\nMake sure to pass the **CssModule** *before* the **ClassModule** when initializing [Snabbdom](https://github.com/snabbdom/snabbdom).\n\n```js\n  import { init } from 'snabbdom';\n  import CssModule from 'snabbdom-typestyle';\n  import ClassModule from 'snabbdom/modules/class';\n\n  const modules = [\n    CssModule,\n    ClassModule\n  ];\n\n  const patch = init(modules);\n```\n\nOr, if you are using [Cycle.js](https://github.com/cyclejs/cyclejs) pass `modules` in the options of `makeDOMdriver`.\n```js\nrun(main, { DOM: makeDOMDriver('#root', { modules }) });\n```\n\nFor examples, take a look at [this fork](https://github.com/sliptype/todomvc-cycle) of the Cycle.js Todo-MVC implementation which uses [snabbdom-typestyle](https://github.com/sliptype/snabbdom-typestyle).\n\n## Server-side Rendering\nTo use `snabbdom-typestyle` in a server-side rendered environment, initialize [Snabbdom](https://github.com/snabbdom/snabbdom) with the `serverSideCssModule`.\n\n```js\nimport { serverSideCssModule, collectStyles } from 'snabbdom-typestyle';\nimport modulesForHTML from 'snabbdom-to-html/modules';\nimport { h } from 'snabbdom';\n\nconst modules = [\n  serverSideCssModule,\n  modulesForHTML.class\n];\n\nconst patch = init(modules);\n```\n\nWhen you are rendering your html, you can grab the styles via `collectStyles(node: VNode): String`.\n\n```js\nh('style#styles', collectStyles(vtree));\n```\n\nThen, on the client-side, pass a selector for the style element rendered by the server to `makeClientSideCssModule(styleElementSelector: string | undefined)`. \n\nDoing this avoids duplication of the style element when the application is hydrated.\n\n```js\nimport { makeClientSideCssModule } from 'snabbdom-typestyle';\nimport ClassModule from 'snabbdom/modules/class';\n\nconst modules = [\n  makeClientSideCssModule('#styles'),\n  ClassModule\n];\n```\n\nTake a look at the [Cycle.js example here](https://github.com/sklingler93/cyclejs/tree/master/examples/advanced/isomorphic)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsliptype%2Fsnabbdom-typestyle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsliptype%2Fsnabbdom-typestyle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsliptype%2Fsnabbdom-typestyle/lists"}