{"id":21284920,"url":"https://github.com/tristanmatthias/wc-sass-render","last_synced_at":"2025-07-11T11:32:07.970Z","repository":{"id":32586736,"uuid":"136027423","full_name":"tristanMatthias/wc-sass-render","owner":"tristanMatthias","description":"Render Sass into importable TS/JS files for Web Components","archived":false,"fork":false,"pushed_at":"2023-05-09T19:04:52.000Z","size":450,"stargazers_count":33,"open_issues_count":5,"forks_count":9,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-07-05T06:07:29.894Z","etag":null,"topics":["cli","import","javascript","node","sass","template","typescript"],"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/tristanMatthias.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-04T13:14:58.000Z","updated_at":"2023-11-09T08:21:33.000Z","dependencies_parsed_at":"2024-06-18T17:07:47.161Z","dependency_job_id":"3f7987fc-de17-4a64-867c-9bef88492d17","html_url":"https://github.com/tristanMatthias/wc-sass-render","commit_stats":{"total_commits":54,"total_committers":5,"mean_commits":10.8,"dds":"0.31481481481481477","last_synced_commit":"405b47a6e06e8a5e7219f53a26b3c55722f85f3c"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/tristanMatthias/wc-sass-render","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tristanMatthias%2Fwc-sass-render","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tristanMatthias%2Fwc-sass-render/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tristanMatthias%2Fwc-sass-render/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tristanMatthias%2Fwc-sass-render/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tristanMatthias","download_url":"https://codeload.github.com/tristanMatthias/wc-sass-render/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tristanMatthias%2Fwc-sass-render/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264795387,"owners_count":23665227,"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":["cli","import","javascript","node","sass","template","typescript"],"created_at":"2024-11-21T11:17:33.328Z","updated_at":"2025-07-11T11:32:07.705Z","avatar_url":"https://github.com/tristanMatthias.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Component SASS Render\n\n[![npm](https://img.shields.io/npm/v/wc-sass-render.svg)](http://npmjs.com/package/wc-sass-render)\n[![Travis](https://img.shields.io/travis/tristanMatthias/wc-sass-render.svg)](https://travis-ci.org/tristanMatthias/wc-sass-render)\n[![Codecov](https://img.shields.io/codecov/c/github/codecov/example-python.svg)](https://codecov.io/gh/tristanMatthias/wc-sass-render)\n\nCompile Sass files to a [lit-html](https://github.com/Polymer/lit-html) style template to be imported by JS like [lit-element](https://github.com/Polymer/lit-element) .\n\n\n## Motivation\n\u003e This project was written by inspired by [Google's Material Web Component Sass Render](https://github.com/material-components/material-components-web-components/tree/master/packages/sass-render).\n\u003e I expanded this out to be non Material specific, and include libraries and recursive directory parsing.\n\nThis project exists to make your SASS modular, and importable by any style of Web Components you want to use.\n\n\n\n## Installation\n`yarn global add wc-sass-render`\nThis will install `sass-render` as a global CLI tool.\n\n\n## Usage \u0026 options\nFor a list of complete options, run `sass-render --help`\n\n**Simple usage**\nRenders a `./src/components/button-css.js` file\n```\nsass-render ./src/components/button.scss\n```\n\n**Compile directory**\nRenders all scss files in recursively in directory with a custom template\n```\nsass-render ./src/**/*.scss -t css-template.js\n```\n\n**Compile multiple files or directories**\nRenders all scss files in recursively in directory with a custom template\n```\nsass-render ./src/**/*.scss ./lib/component.scss -t css-template.js\n```\n\n**Watching**\nUse `-w` to watch for changes\n```\nsass-render ./src/**/*.scss -w\n```\nFiles will be outputted as `[name]-css.js`. EG: If file is `button.scss`, outputted file will be `button-css.js`.\n\n**Custom template**\nUse `-t` to specify the file you'd like to use as a template. `sass-render` will replace `\u003c% content %\u003e` in the file.\n```\nsass-render ./src/components/button-css.js -t css-template.js\n```\n\n**Expanded CSS**\nUse `-e` to enable expanded rendering of output CSS. Render SASS outputs CSS as 'compressed' by default, which may cause parsing errors for some projects.\n```\nsass-render ./src/components/button-css.js -t -e css-template.js\n```\n\n**Custom suffix**\nFiles will be outputted as `[name]-css.js`. EG: If file is `button.scss`, outputted file will be `button-css.js`. This can be changed with the `--suffix` option.\n\n**NOTE**: if you use a `-` (dash) in your suffix name, eg: `--suffix '-css.js'`, then quotation marks are needed around the suffix (to tell bash it's not another flag)\n\n**Import custom libraries**\nBy default, wc-sass-render will include the `node_modules` relative to the current directory. Passing the `-i` allows you to include custom directories. You can include multiple directories by comma separating them.\n\n```\nsass-render ./src/**/*.scss -i '../sass-lib/'\nsass-render ./src/**/*.scss -i '../sass-lib/, ../another-lib'\n```\n\n\n## Importing\nOnce your SASS files are converted into js/ts files, you can use them inside a library like `lit-element`:\n\n```js\nimport {html, LitElement} from '@polymer/lit-element';\nimport CSS from './button-css.js';\n\nexport default class Button extends LitElement {\n    _render() {\n        return html`\n            ${CSS}\n            \u003cbutton\u003e\u003cslot\u003eSubmit\u003c/slot\u003e\u003c/button\u003e\n        `;\n    }\n}\nwindow.customElements.define('my-button', Button);\n```\n\n\n## Custom template\nBy default, the template is:\n```js\nimport {html} from 'lit-element';\nexport default html`\u003cstyle\u003e\u003c% content %\u003e\u003c/style\u003e`;\n```\n\nThis can be overridden with the `-t` option to your own file. EG:\n```js\nmodule.exports.CSS = '\u003c% content %\u003e';\n```\n\n\n## Contributions\nAll pull requests and contributions are most welcome. Let's make the internet better!\n\n\n## Moving forward / TODO\n- [x] Watch command\n- [x] Add tests\n\n\n## Issues\nIf you find a bug, please file an issue on the issue tracker on GitHub.\n\n\n## Credits\nThe concept of `wc-sass-render` was originally created by Google.\nThis project is built and maintained by [Tristan Matthias](https://github.com/tristanMatthias).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftristanmatthias%2Fwc-sass-render","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftristanmatthias%2Fwc-sass-render","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftristanmatthias%2Fwc-sass-render/lists"}