{"id":13392974,"url":"https://github.com/simonsmith/suitcss-with-stylus","last_synced_at":"2025-08-19T00:10:01.814Z","repository":{"id":18627156,"uuid":"21833129","full_name":"simonsmith/suitcss-with-stylus","owner":"simonsmith","description":"SUIT CSS with Stylus and PostCSS","archived":false,"fork":false,"pushed_at":"2015-04-10T08:52:17.000Z","size":312,"stargazers_count":21,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-30T14:17:26.013Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CSS","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/simonsmith.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":"2014-07-14T19:46:18.000Z","updated_at":"2016-02-24T02:22:01.000Z","dependencies_parsed_at":"2022-09-13T01:00:48.539Z","dependency_job_id":null,"html_url":"https://github.com/simonsmith/suitcss-with-stylus","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/simonsmith/suitcss-with-stylus","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonsmith%2Fsuitcss-with-stylus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonsmith%2Fsuitcss-with-stylus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonsmith%2Fsuitcss-with-stylus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonsmith%2Fsuitcss-with-stylus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simonsmith","download_url":"https://codeload.github.com/simonsmith/suitcss-with-stylus/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonsmith%2Fsuitcss-with-stylus/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271078587,"owners_count":24695473,"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","status":"online","status_checked_at":"2025-08-18T02:00:08.743Z","response_time":89,"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-07-30T17:00:40.429Z","updated_at":"2025-08-19T00:10:01.746Z","avatar_url":"https://github.com/simonsmith.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"# SUIT CSS with Stylus \u0026 PostCSS\n\nThis is an example of writing SUIT components with Stylus and then using [gulp](http://gulpjs.com/) and [PostCSS](https://github.com/postcss/postcss) to handle the tooling\n\nBy combining SUIT with Stylus it allows things like functions and nesting to come back whilst also harnessing the tools that SUIT provides. On top of that there is an entire [ecosystem of PostCSS plugins](https://github.com/postcss/postcss#plugins) available for further processing.\n\n### Why Stylus?\n\nStylus plays nice with the `--` custom property prefix and also allows `@import` to be escaped with [`@css`](http://learnboost.github.io/stylus/docs/literal.html)\n\nThese are key features for working with the SUIT preprocessor. Plus it's really fast and allows minimal syntax\n\n### How it works\n\nUsing [gulp](gulpjs.com) the SUIT components (written as Stylus files) are compiled into CSS, linted with the SUIT conformance tool and then built with [postcss-import](https://github.com/postcss/postcss-import) and [cssnext](https://github.com/cssnext/cssnext). A single file is the result.\n\nAdditional plugins can be added easily.\n\n### Treating SUIT as a global\n\nIn this repo the dependencies of each component are listed as `@imports` so that `postcss-import` can work out the dependency tree.\n\nAn alternative to this is to treat SUIT as a global library. This works well and can reduce the hassle of ensuring each component requires the right dependencies.\n\nExample from `base.styl`:\n\n``` css\n@css {\n  @custom-media --xs-viewport (min-width: 30em);\n  @custom-media --sm-viewport (min-width: 48em);\n  @custom-media --md-viewport (min-width: 62em);\n  @custom-media --lg-viewport (min-width: 75em);\n\n  /**\n   * Use SUIT as a global\n   */\n  @import \"suitcss-base\";\n  @import \"suitcss-utils\";\n  @import \"suitcss-components\";\n}\n\n@require \"functions\"\n@require \"vars\"\n\n/**\n * More code here\n */\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonsmith%2Fsuitcss-with-stylus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimonsmith%2Fsuitcss-with-stylus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonsmith%2Fsuitcss-with-stylus/lists"}