{"id":21352061,"url":"https://github.com/static-dev/spike-jss","last_synced_at":"2025-06-22T18:39:28.933Z","repository":{"id":57367476,"uuid":"92202625","full_name":"static-dev/spike-jss","owner":"static-dev","description":"Static and dynamic rendering for jss :raised_hands:","archived":false,"fork":false,"pushed_at":"2017-05-25T22:36:43.000Z","size":70,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-21T13:44:08.428Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/static-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"contributing.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-23T17:48:55.000Z","updated_at":"2017-05-23T18:36:11.000Z","dependencies_parsed_at":"2022-08-23T20:10:25.095Z","dependency_job_id":null,"html_url":"https://github.com/static-dev/spike-jss","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/static-dev/spike-jss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/static-dev%2Fspike-jss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/static-dev%2Fspike-jss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/static-dev%2Fspike-jss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/static-dev%2Fspike-jss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/static-dev","download_url":"https://codeload.github.com/static-dev/spike-jss/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/static-dev%2Fspike-jss/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261229184,"owners_count":23127565,"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":[],"created_at":"2024-11-22T03:12:26.046Z","updated_at":"2025-06-22T18:39:23.884Z","avatar_url":"https://github.com/static-dev.png","language":"JavaScript","readme":"# Spike JSS\n\n[![npm](https://img.shields.io/npm/v/spike-jss.svg?style=flat-square)](https://npmjs.com/package/spike-jss)\n[![tests](https://img.shields.io/travis/static-dev/spike-jss.svg?style=flat-square)](https://travis-ci.org/static-dev/spike-jss?branch=master)\n[![dependencies](https://img.shields.io/david/static-dev/spike-jss.svg?style=flat-square)](https://david-dm.org/static-dev/spike-jss)\n[![coverage](https://img.shields.io/codecov/c/github/static-dev/spike-jss.svg?style=flat-square)](https://codecov.io/gh/static-dev/spike-jss)\n\nA simple static render for jss.\n\n\u003e **Note:** This project is in early development, and versioning is a little different. [Read this](http://markup.im/#q4_cRZ1Q) for more details.\n\n### Installation\n\n`npm install spike-jss -S`\n\n### Usage\n\n```js\n// app.js\nconst jssPreset = require('jss-preset-default')\n\nnew Jss({\n  files: 'assets/jss/*.js',\n  output: 'css/main.css',\n  options: jssPreset()\n})\n```\n\nWith this config, you get your jss files processed and the stylesheet output to the path as specified. In order to access the classes, you will need to `require` or `import` the jss files into a component - they will be imported as a jss stylesheet by default. Here's an example with react:\n\n```js\nimport {classes} from '../jss/hero'\n\nexport default () =\u003e {\n  return (\u003cp className={classes.hello}\u003eHello world!\u003c/p\u003e)\n}\n```\n\nIf you need to use interactive styles through jss, the currently recommended method by jss is to [regenerate styles from your jss and remove the server-rendered styles](http://cssinjs.org/server-side-rendering/) rather than rehydrating existing styles. You can do this as you normally would in jss, and you can get your jss source by importing `rules` from the module.\n\n```js\nimport jss from 'jss'\nimport {rules} from '../jss/hero'\n\nexport default () =\u003e {\n  const sheet = jss.createStyleSheet(rules)\n  sheet.attach()\n  return (\u003cp className={sheet.classes.hello}\u003eHello world!\u003c/p\u003e)\n}\n```\n\n### Extractions \u0026 Critical CSS\n\n\u003e **NOTE:** This feature hasn't been built yet, but will be soon!\n\nThis plugin is built with the ability to extract critical css in any way you'd like, but it won't do it for you using phantomjs etc because everyone has a different size screen and as such this is a very imprecise method. You can do something like this to extract chunks of css:\n\n```js\n// app.js\nnew Jss({\n  files: 'assets/jss/*.js',\n  output: 'css/main.css',\n  extract: {\n    layout: 'assets/jss/critical/*.js'\n    index: ['assets/jss/hero.js', 'assets/jss/index-slider.js'],\n    about: 'assets/jss/special-about-component.js'\n  },\n  addDataTo: locals // optional\n})\n```\n\nYou can find the extracted css chunks on your locals object under `_extractedCss` followed by the key you used for the extraction chunk. So for example you might do this in your layout:\n\n```jade\nhtml\n  head\n    title My cool demo page\n    style {{ _extractedCss.layout }}\n    block css\n    script loadCss('/css/main.css')\n  body\n    nav\n      a(href='/') Home\n      a(href='/about') About\n    block content\n```\n\nAnd this in the index file (sugarml):\n\n```jade\nblock css\n  style {{ _extractedCss.index }}\nblock content\n  p hello world!\n```\n\nThis would ensure that only your critical css for each page is rendered in the head. For more details on critical CSS stuff, see [this article](https://www.smashingmagazine.com/2015/08/understanding-critical-css/). Also note that the perf gain from using critical css is *very* small and absolutely not worth it until you have exhausted all other performance optimizations, especially images and javascript.\n\n### License \u0026 Contributing\n\n- Details on the license [can be found here](LICENSE.md)\n- Details on running tests and contributing [can be found here](contributing.md)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstatic-dev%2Fspike-jss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstatic-dev%2Fspike-jss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstatic-dev%2Fspike-jss/lists"}