{"id":15112280,"url":"https://github.com/digitaledgeit/sass-composer","last_synced_at":"2025-10-23T05:31:09.119Z","repository":{"id":30863127,"uuid":"34420702","full_name":"digitaledgeit/sass-composer","owner":"digitaledgeit","description":"Compose CSS from SASS files using Node's algorithm to resolve `@import` statements. Plus more goodness.","archived":false,"fork":false,"pushed_at":"2016-05-11T06:54:55.000Z","size":99,"stargazers_count":4,"open_issues_count":10,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-05T09:10:03.940Z","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/digitaledgeit.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":"2015-04-22T22:59:20.000Z","updated_at":"2021-06-14T02:47:00.000Z","dependencies_parsed_at":"2022-09-26T16:20:28.793Z","dependency_job_id":null,"html_url":"https://github.com/digitaledgeit/sass-composer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitaledgeit%2Fsass-composer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitaledgeit%2Fsass-composer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitaledgeit%2Fsass-composer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitaledgeit%2Fsass-composer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/digitaledgeit","download_url":"https://codeload.github.com/digitaledgeit/sass-composer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237784776,"owners_count":19365926,"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-09-26T00:43:40.311Z","updated_at":"2025-10-23T05:31:08.789Z","avatar_url":"https://github.com/digitaledgeit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sass-composer\n\n[![Circle CI](https://circleci.com/gh/digitaledgeit/sass-composer.svg?style=svg)](https://circleci.com/gh/digitaledgeit/sass-composer) [![Coverage Status](https://coveralls.io/repos/digitaledgeit/sass-composer/badge.svg?branch=master\u0026service=github)](https://coveralls.io/github/digitaledgeit/sass-composer?branch=master)\n\nCompose CSS from SASS files using Node's algorithm to resolve `@import`s. Plus more goodness.\n\n####  Why not [component](https://github.com/componentjs/component) or [rework-npm](https://www.npmjs.com/package/rework-npm)?\n\nBecause `component` and `rework-npm` don't use SASS, and SASS makes it easy to keep your styles semantic and DRY.\n\n#### Why not [duo](http://duojs.org/), or [sassify](https://www.npmjs.com/package/sassify)?\n\nBecause with `duo` and `sassify` your SASS/SCSS/CSS can't use variables, functions, mixins or extend classes defined in one module from another module.\n\nBecause with `sassify` you must require your SASS in your JS files. `sass-composer` builds a separate CSS file.\n\n## Installation\n\n    npm install --save sass-composer\n\n## Usage\n\nWrite some SASS:\n\n```scss\n//import SASS/SCSS/CSS files from an external NPM module\n@import \"normalize\";\n@import \"sass-breakpoints\";\n\n//import SASS/SCSS/CSS files from the local NPM module\n@import \"./fonts\"\n\n//you can use the $__dirname and $__filename variables in each imported file\n\n//by default, assets url('./img/my-asset.png') will be copied into the destination directory\n\n//now go write some more SASS...\n@include breakpoint('xs') {\n  .foo { content: \"bar\" }\n}\n```\n\nCompose CSS using the CLI:\n\n    sass-composer index.scss -o index.css\n\nCompose CSS using the API:\n\n```js\nvar fs = require('fs');\nvar path = require('path');\nvar composer = require('sass-composer');\n\nvar input   = __dirname+'/index.scss';\nvar output  = __dirname+'/build/build.css';\n\ncomposer()\n  .entry(input)\n  .use(composer.plugins.url({dir: path.dirname(output), copy: true}))\n  .compose(function(err, css, stats) {\n    if (err) return console.error(err);\n    fs.writeFile(output, css, function() {\n      if (err) return console.error('Error writing file \"'+input+'\": \\n', err.message);\n      console.log('Composed \"'+path.basename(input)+'\" to \"'+path.basename(output)+'\".');\n    });\n  })\n;\n```\n\n## CLI\n\n    sass-composer \u003cfile\u003e [options]\n    \n- `\u003cfile\u003e` - The entry file (SASS/SCSS/CSS) \n- `-o` `--output` - The output path (optional)\n- `-w` `--watch` - Watch for changes to the input files and re-compose whenever a file is changed (optional)\n\n## API\n\n### Methods\n\n#### new Composer(options)\n\nCreate a new composer.\n\n#### .entry(file)\n\nSet the path of the entry file.\n\n#### .compose([callback]) : Stream\n\nCompose CSS from SASS.\n  \n#### .importer(fn)\n\nAdd an importer. \n\nThe importer function is called for each `@import` statement. It is passed:\n\n- a context object containing :\n    - the `.entry` filename, \n    - the `.parent` filename, \n    - the `.file` filename \n    - and optionally the file `.contents`\n- a `done` callback \n\nFor example: import files from `./bower_components/`\n\n```js\ncomposer.importer(function(ctx, done) {\n  var bower_path = './bower_components/'+ctx.file;\n  \n  //if the file already exists then leave it as-is\n  if (fs.existsSync(ctx.file)) {\n    done(null, ctx);\n  }\n    \n  //if the file exists in the bower_components directory then rewrite the filename\n  if (fs.existsSync(bower_path)) {\n    ctx.file = bower_path;\n    done(null, ctx);\n  } \n\n});\n```\n\n#### .function(dfn, fn)\n\nAdd a SASS function.\n\nFor example: return the sum of two numbers\n\n```js\ncomposer.function('sum($a, $b)', function(a, b) {\n  return this.types.Number(a.getValue()+b.getValue());\n});\n```\n\n#### .use(fn)\n\nUse a plugin. Plugins are simple functions and are called on composer instance. \n  \n## Importers\n\n### node\n\nResolve `@import`s according to Node's resolve algorithm. Will resolve SASS, SCSS and CSS files, their dependencies and dependencies of dependencies... you get the point.\n\n### once\n\nPrevent files from being imported multiple times. Waiting on a [node-sass bugfix](https://github.com/sass/node-sass/issues/894)\n\n### fs-loader\n\nLoad the file's contents.\n\n### pathname\n\nPrepend and append `$__dirname` and `$__dirname` variables to each file.\n\n## Functions\n\nNone as of yet. Go write one!\n  \n## Plugins\n  \n### url\n\nTransform URLs. \n\nThe default setting rewrites and copies URLs relative to the entry file e.g. `../img/logo.png` in  `./scss/_brand.scss` imported from `index.scss` gets re-written as `img/logo.png`.\n\nYou can write your own transforms to do whatever you want e.g. inline images using datauri, rewrite URLs to a CDN, append a cache busting string etc\n\n## Known issues\n\n- there is no check for different versions of the same module (in JS conflicts are prevented by wraping the modules in anonymous scopes - which do not exist in CSS)\n\n## TODO\n\n- Composer.watch() API\n- accept node-sass sass formatting options\n- sync and async importers, functions and URL processors\n- write way more tests\n- handling version conflicts?\n\n## License\n    \nThe MIT License (MIT)\n\nCopyright (c) 2015 James Newell\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdigitaledgeit%2Fsass-composer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdigitaledgeit%2Fsass-composer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdigitaledgeit%2Fsass-composer/lists"}