{"id":19824580,"url":"https://github.com/m4thieulavoie/sass-to-string","last_synced_at":"2025-10-08T15:52:23.793Z","repository":{"id":37069049,"uuid":"254708778","full_name":"m4thieulavoie/sass-to-string","owner":"m4thieulavoie","description":"webpack loader that transform your SCSS file in a javascript string","archived":false,"fork":false,"pushed_at":"2025-10-03T21:04:25.000Z","size":1849,"stargazers_count":21,"open_issues_count":21,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-03T23:17:29.768Z","etag":null,"topics":["sass","scss","typescript","webcomponents","webpack","webpack-loader"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/m4thieulavoie.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":"github.com/sponsors/m4thieulavoie/ buymeacoffee.com/mathieulavoie"}},"created_at":"2020-04-10T18:37:02.000Z","updated_at":"2024-09-20T09:19:35.000Z","dependencies_parsed_at":"2024-01-17T12:13:50.410Z","dependency_job_id":"f91e9e27-2008-426b-9af4-f5f0c6805db8","html_url":"https://github.com/m4thieulavoie/sass-to-string","commit_stats":{"total_commits":549,"total_committers":8,"mean_commits":68.625,"dds":0.3005464480874317,"last_synced_commit":"daac0cea10c8262787c4043c1197e90f2cca2902"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/m4thieulavoie/sass-to-string","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m4thieulavoie%2Fsass-to-string","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m4thieulavoie%2Fsass-to-string/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m4thieulavoie%2Fsass-to-string/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m4thieulavoie%2Fsass-to-string/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/m4thieulavoie","download_url":"https://codeload.github.com/m4thieulavoie/sass-to-string/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m4thieulavoie%2Fsass-to-string/sbom","scorecard":{"id":499985,"data":{"date":"2025-08-11","repo":{"name":"github.com/m4thieulavoie/sass-to-string","commit":"daac0cea10c8262787c4043c1197e90f2cca2902"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":0,"reason":"Found 0/2 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 28 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"25 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh","Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-19T21:34:43.996Z","repository_id":37069049,"created_at":"2025-08-19T21:34:43.996Z","updated_at":"2025-08-19T21:34:43.996Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278972328,"owners_count":26078017,"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-10-08T02:00:06.501Z","response_time":56,"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":["sass","scss","typescript","webcomponents","webpack","webpack-loader"],"created_at":"2024-11-12T11:04:45.082Z","updated_at":"2025-10-08T15:52:23.777Z","avatar_url":"https://github.com/m4thieulavoie.png","language":"JavaScript","funding_links":["github.com/sponsors/m4thieulavoie/ buymeacoffee.com/mathieulavoie"],"categories":[],"sub_categories":[],"readme":"# sass-to-string\n\n[![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com/)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![npm version](https://badge.fury.io/js/sass-to-string.svg)](https://www.npmjs.com/package/sass-to-string)\n[![Downloads](https://img.shields.io/npm/dm/sass-to-string.svg)](https://www.npmjs.com/package/sass-to-string)\n[![CircleCI](https://circleci.com/gh/circleci/circleci-docs.svg?style=shield)](https://circleci.com/gh/m4thieulavoie/sass-to-string)\n\n`sass-to-string` is a set of helper tools that allow your Web application to leverage SASS files as JavaScript strings so you can use them the way you want afterwards. This is especially useful for Web Components that need to inject their stylesheets directly in the template.\n\n`sass-to-string` provides two different approaches\n\n- A Webpack loader that transforms SASS files to native JavaScript strings\n- A `sass-to-string` command that transforms your `scss` files to a native JavaScript string at build time\n\n## Installation\n\nFirst install the module with your favorite loader\n\n```bash\n# With NPM\nnpm install sass-to-string --save-dev\n# With Yarn\nyarn install sass-to-string -D\n```\n\n## Webpack loader\n\n### Usage\n\nIn your `webpack.config.js`, add the following rule.\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.styles.scss$/,\n        exclude: /node_modules/,\n        use: [\n          \"sass-to-string\",\n          {\n            loader: \"sass-loader\",\n            options: {\n              sassOptions: {\n                outputStyle: \"compressed\",\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n#### Already have a SASS config?\n\nChances are you already have a SASS config in your webpack config and the above code just broke it. To fix this, add `.styles.scss` in the `exclude` of the rule.\n\nSee the **exclude** part in the following example\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n          // Your new shiny sass-to-string config\n      },\n      {\n        test: /\\.(scss|css)$/,\n        // Excluding the `.styles.scss` extension\n        exclude: [/\\.styles.scss$/, /node_modules/],\n        use: [\n          \"style-loader\",\n          MiniCssExtractPlugin.loader,\n          \"css-loader\",\n          {\n            loader: \"sass-loader\",\n          },\n        ],\n      },\n    ];\n  }\n}\n```\n\n#### The fun part : use it in your module!\n\nNow that Webpack is configured, you can access your compiled SCSS code in a JS module.\n\nSay we have this SCSS\n\n```scss\nsection {\n  p {\n    font-family: \"Comic Sans MS\";\n  }\n}\n```\n\n`sass-loader` will resolve it to this value:\n\n```css\nsection p {\n  font-family: \"Comic Sans MS\";\n}\n```\n\nAwesome! Not let's pull this in a `tractor.js` javascript module\n\n```js\nimport styles from \"./tractor.styles.scss\";\n\n// Outputs : section p{font-family:\"Comic Sans MS\"}\nconsole.log(styles);\n```\n\n#### Use it with your web components!\n\nThe motivation behind this package was to be able to use SASS inside Web Components. Here's an example of doing such\n\n```ts\nimport styles from \"./tractor.styles.scss\";\n\nclass TractorViewer extends HTMLElement {\n  constructor() {\n    super();\n\n    const style = document.createElement(\"style\");\n    // styles equals \"section p{font-family:\"Comic Sans MS\"}\"\n    style.textContent = styles;\n\n    const shadowRoot = this.attachShadow({ mode: \"open\" });\n    shadowRoot.appendChild(style);\n  }\n}\n```\n\n### Peer dependencies\n\nNote that this module needs `webpack` and the magic from `sass-loader` in order to do its job properly\n\n### Typescript typings\n\nIf you face typings errors in your IDE, add this line to your local typings file\n\n```ts\nimport \"sass-to-string/index\";\n\n// Any other type declarations you might have\n```\n\nIt should solve the IDE error\n\n## Build command\n\nWe also expose a `sass-to-string` command that will transform your SASS files in a JavaScript string. Here's a quick example.\n\nPretend you have this SCSS file called `demo.styles.scss`\n\n```scss\nbody {\n  p {\n    color: red;\n  }\n}\n```\n\nAnd this JavaScript import statement alongside\n\n```js\nimport styles from \"./demo.styles.scss\";\n```\n\nWhen running the command, it'll create a `demo.styles.scss.js` file in the right directory under `dist`.\n\n```js\nconst styles = `body p {\n  color: red;\n}`;\nexport default styles;\n```\n\nAs you guessed it, you can run it alongside `tsc` a fully working app using SASS and _only_ bundled with Typescript.\n\nHere's an example on how you could run a `build` command in your `package.json`\n\n```json\n{\n  \"scripts\": {\n    ...\n    \"build\": \"tsc \u0026\u0026 sass-to-string\"\n  }\n}\n```\n\n### Options\n\nYou can also provide some command options to `sass-to-string` like such\n\n```json\n{\n  \"scripts\": {\n    ...\n    \"build\": \"sass-to-string --dist=lib\"\n  }\n}\n```\n\nIf you prefer, you can also create a `.sass-to-string.js` file at the root of your project\n\n```js\nmodule.exports = {\n  dist: \"lib\",\n  // Replaces bootstrap imports by resolving node_modules\n  prepare: (scss) =\u003e\n    scss.replace(/@import \"bootstrap/g, `@import \"node_modules/bootstrap`),\n};\n```\n\n#### List of options\n\n| Option    |  Default value   | Description                                                                              |\n| --------- | :--------------: | ---------------------------------------------------------------------------------------- |\n| `dist`    |      `dist`      | Name of the directory to copy the newly created files                                    |\n| `src`     |      `src`       | Name of the directory to look for files                                                  |\n| `verbose` |     `\u003cnull\u003e`     | If you want `sass-to-string` to be verbose                                               |\n| `prepare` | `(scss) =\u003e scss` | JavaScript function that receives the SASS content, and returns a modified version of it |\n\n### Peer dependencies\n\nNote that this module requires a `peerDependency` on `fs-extra` and `sass` in order to work properly\n\n# Like this package?\n\nOf course you do! Thinking and coding this package implied quite a lot of coffee. If you want, you can [buy me one](https://buymeacoff.ee/mathieulavoie)! ☕️\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm4thieulavoie%2Fsass-to-string","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fm4thieulavoie%2Fsass-to-string","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm4thieulavoie%2Fsass-to-string/lists"}