{"id":16189681,"url":"https://github.com/stuk/montage-compile-css-demo","last_synced_at":"2026-07-03T22:32:31.181Z","repository":{"id":66062857,"uuid":"11359774","full_name":"Stuk/montage-compile-css-demo","owner":"Stuk","description":"A proof of concept to show how CSS could be compiled in Montage","archived":false,"fork":false,"pushed_at":"2013-07-13T18:12:44.000Z","size":144,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-28T06:37:54.050Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Stuk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-07-12T03:44:47.000Z","updated_at":"2013-10-21T17:45:40.000Z","dependencies_parsed_at":"2023-02-19T21:55:22.436Z","dependency_job_id":null,"html_url":"https://github.com/Stuk/montage-compile-css-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Stuk/montage-compile-css-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Stuk%2Fmontage-compile-css-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Stuk%2Fmontage-compile-css-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Stuk%2Fmontage-compile-css-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Stuk%2Fmontage-compile-css-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Stuk","download_url":"https://codeload.github.com/Stuk/montage-compile-css-demo/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Stuk%2Fmontage-compile-css-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35104113,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-03T02:00:05.635Z","response_time":110,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-10-10T07:36:22.824Z","updated_at":"2026-07-03T22:32:31.133Z","avatar_url":"https://github.com/Stuk.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Compiled CSS in Montage\n\nA proof of concept to show how CSS could be compiled in Montage. Based on\n[rework](https://github.com/visionmedia/rework). It just uses the\nrework-vars plugin to add CSS variables (for example to define global\ncolours to be used throughout the app's CSS), although of course more\nplugins could be added.\n\nInteresting files:\n\n * [core/preprocessor.js](core/preprocessor.js)\n * [ui/thing.reel/thing.css](ui/thing.reel/thing.css)\n * [css-variables.json](css-variables.json)\n\nTry it out by cloning this repo and running `npm install` in the\ndirectory, and then visiting `index.html` through a web server.\n\n## Syntax\n\nWithin CSS you can use the syntax described by\n[rework-vars](https://github.com/visionmedia/rework-vars):\n\n```css\n:root {\n  var-header-color: #06c;\n  var-main-color: #c06;\n}\n\ndiv {\n  var-accent-background: linear-gradient(to top, var(main-color), white);\n}\n```\n\nor you can define global CSS variables in `css-variables.json`.\n\n## Known issues\n\n * URLS (`url(thing.png)`) are not rebased, and so will be broken.\n * This does not integrate with Mop and so even in production, the CSS will be\n   compiled at runtime.\n\n## Implementation\n\nUses the `applicationPrototype` property of the `package.json` to load a\ncustom application (`core/preprocessor[Application]`). This replaces\n`DocumentResources.prototype.addStyle` to inject compiled CSS text instead of\nloading the CSS file through a link tag.\n\nThis method is used because it's the earliest we can get into the Montage\necosystem. Any later and CSS from components in index.html would not get\ncompiled.\n\n### Patches to rework\n\nSome of the rework modules don't work in the browser, and so those are\ninjected by `core/preprocessor.js` so they are not loaded.\n\nSome of the modules use an `index.js` module, but don't specifiy a `main`\nproperty in the `package.json`, and so I have checked them in and patched them\nto include this property.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstuk%2Fmontage-compile-css-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstuk%2Fmontage-compile-css-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstuk%2Fmontage-compile-css-demo/lists"}