{"_id":"@benarnold/sass-asset-functions","_rev":"2-0ef0e46fdd94e84d748ffadd2c23b5eb","name":"@benarnold/sass-asset-functions","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@benarnold/sass-asset-functions","version":"0.1.0","description":"compass-style asset functions for dart-sass or other sass compilers","main":"index.js","scripts":{"test":"jest","lint":"eslint ."},"repository":{"type":"git","url":"git+https://github.com/localnerve/sass-asset-functions.git"},"keywords":["node","sass","dart-sass","assets","image","image-url","image-width","image-height","font-url","font-files"],"author":{"name":"Alex Grant","email":"alex@localnerve.com"},"maintainers":[{"name":"benarnold","email":"ben@benarnold.de"}],"license":"MIT","bugs":{"url":"https://github.com/localnerve/sass-asset-functions/issues"},"homepage":"https://github.com/localnerve/sass-asset-functions","dependencies":{"image-size":"^1.0.0","mime":"^2.5.2","sass":"^1.43.3"},"devDependencies":{"jest":"^27.3.1","eslint":"^8.0.1","node-sass":">= 3.2 < 5"},"engines":{"node":">= 10"},"gitHead":"3cfd079da7247d09ea24457738b33f7a76aac7d1","_id":"@benarnold/sass-asset-functions@0.1.0","_nodeVersion":"12.21.0","_npmVersion":"7.20.3","dist":{"integrity":"sha512-P/GeHfev5B8XLrusZXP37YvqkWaIcsX5UVaCPOB17QHs9ti3DkcK/TewEkY7LBdLwAHT571nx74pYOdIa/qRqw==","shasum":"a140b92f92283e1964923296c9f23c0cad646c76","tarball":"https://registry.npmjs.org/@benarnold/sass-asset-functions/-/sass-asset-functions-0.1.0.tgz","fileCount":36,"unpackedSize":485336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzHg6CRA9TVsSAnZWagAA6uQP/R9InqDwfVCTADbptEWp\nVe/sFqZvad7hWPMOnnjggr9guKnYDmF3TE9okiq1VHRg1tArHaisKOsxJYxL\nLqlx9WNKZcAz3FEC1mJSea7QVPtWWLCO3wBNLGswhxuE6vypLZ6P1ximzz2x\n8j3FH3rVeaj6rhdImsbOcbQapDAk5epvIpnnSQY9+Yas5omP5bQbRqwqDjim\nROmJzvhQnOhIA0fItJOk1ccQE4uqH4ywS7HI4me9rkxex6XS4XlI69rLDVyp\nUXwjLtbGSoxabjTdZ60n5zhSAkoCv7BpIKEjIKMp5qBUjgfs5LNWWMWH5M+x\nfue+4JLWUiFK+rx1pMJ+kv3iQrHE2DyUW8NOpGRyZfWkxS+o3aGi/PeHmgPo\nQ5wdgau5fKdYzfQsHGLoerVGcyynCMXi7UYdWz/zuzlkxPMcEZJdA5V2AjvX\ns62Jxbxk0fGAPb7kvrzeNVtEHRLJoawAZqCBRy3UO9D5EY6r02Ie/CNLwmdW\n+2K2QMTPRisgNDh3CATriDpX0C3kk+GUYMgH3NnNo7OEB1xaQajOSUWHcvIf\nskkehpXLGeiCNZ3fU7Oel/fUgBpVIPfT9iLU2KSHvsv34m/DUmz5obSa7KWT\nrPL+PtjYRj3d2Op7qH3/ATeusMPlG14kVzsDDBYxPVWbCrbgIaAbuuOqFZkf\nuczG\r\n=//j4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0cbj0rjmxms7uGrdte854sZTZEKzoIvOQjosAhNz9XwIhAMpwMtgQoqlbCSLWoS96wC8scU11rqd02GjazyL1HDhI"}]},"_npmUser":{"name":"benarnold","email":"ben@benarnold.de"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/sass-asset-functions_0.1.0_1634896355770_0.02954608952855242"},"_hasShrinkwrap":false}},"time":{"created":"2021-10-22T09:52:35.727Z","0.1.0":"2021-10-22T09:52:36.005Z","modified":"2022-04-04T18:21:38.753Z"},"maintainers":[{"name":"benarnold","email":"ben@benarnold.de"}],"description":"compass-style asset functions for dart-sass or other sass compilers","homepage":"https://github.com/localnerve/sass-asset-functions","keywords":["node","sass","dart-sass","assets","image","image-url","image-width","image-height","font-url","font-files"],"repository":{"type":"git","url":"git+https://github.com/localnerve/sass-asset-functions.git"},"author":{"name":"Alex Grant","email":"alex@localnerve.com"},"bugs":{"url":"https://github.com/localnerve/sass-asset-functions/issues"},"license":"MIT","readme":"# Sass Asset Functions\n\n> Supplies a set of functions to Sass that keep physical asset location details out of your source code. Also allows one to define a cache-busting policy or specify asset hosts by url.\n\n![Verify](https://github.com/localnerve/sass-asset-functions/workflows/Verify/badge.svg)\n[![npm version](https://badge.fury.io/js/%40localnerve%2Fsass-asset-functions.svg)](https://badge.fury.io/js/%40localnerve%2Fsass-asset-functions)\n\nThis module supplies functions to a Sass compiler which can be called from your Sass code.\nFor example, the `image-url` used here in place of `url` adds build-time configuration to resolve the file to the proper location as seen from the web:\n\n```css\n.some-selector {\n  background-image: image-url('cat.jpg');\n}\n```\n\n_**NB** Please note that the `functions` option of dart-sass/node-sass is still experimental (>= v3.0.0)._\n\n## Origin\n\nThis module provides some of the asset functions that came with [Compass](http://compass-style.org). Originally a fork of  [node-sass-asset-functions](https://github.com/fetch/node-sass-asset-functions) that was never merged.\n\n## Functions Exposed to Sass\n\n- `image-url($filename: null, $only_path: false)`\n- `image-width($filename: null)`\n- `image-height($filename: null)`\n- `font-url($filename: null, $only-path: false)`\n- `font-files($filenames...)`\n- `inline-image($filename: null, $mime-type: null)`\n\n## Usage\n\nBasic usage is as easy as setting the `functions` property:\n\n```js\nconst sass = require('sass');\nconst fiber = require('fibers');\nconst assetFunctions = require('@localnerve/sass-asset-functions');\n\nsass.render({\n  functions: assetFunctions(/* options */),\n  file: scss_filename,\n  fiber, // dart-sass async render performance detail\n  [, options..]\n}, function(err, result) { /*...*/ });\n```\n\n## Options\n\nAll options are optional.\n\n| name | type | description |\n| --- | --- | --- |\n| `sass` | Object | A reference to an alternate Sass compiler to use other than dart-sass (must expose `types`). Defaults to `undefined` and a dart-sass reference is used |\n| `images_path` | String | The build-time file path to images. Defaults to `public/images` |\n| `fonts_path` | String | The build-time file path to fonts. Defaults to `public/fonts` |\n| `http_images_path` | String | The path to images as seen from the web (nothing to do with http). Defaults to `/images` |\n| `http_fonts_path` | String | The path to images as seen from the web (nothing to do with http). Defaults to `/fonts` |\n| `asset_cache_buster` | Function | Signature (http_path, real_path, callback(new_url)). Supply to perform url transform for `image-url` or `font-url`, presumably for asset cache busting, but useful for any change to the url path (before fragment) |\n| `asset_host` | Function | Signature (http_path, callback(new_url)). Supply to perform url transform for `image-url` or `font-url`, presumably to define an asset host, but useful for any change to the url before the path |\n\n### Examples\n\nYou can specify the paths to your resources using the following options (shown with defaults):\n\n```js\n{\n  images_path: 'public/images', // local directory\n  fonts_path: 'public/fonts',\n  http_images_path: '/images', // web path\n  http_fonts_path: '/fonts'\n}\n```\n\nSo if your project images reside in `public/img` at build-time instead of `public/images`, you use it as follows:\n\n```js\nconst sass = require('sass');\nconst fiber = require('fibers');\nconst assetFunctions = require('@localnerve/sass-asset-functions');\n\nsass.render({\n  functions: assetFunctions({\n    images_path: 'public/img',\n    http_images_path: '/images'\n  }),\n  file: scss_filename,\n  fiber,\n  [, options..]\n}, function(err, result) { /*...*/ });\n```\n\n#### `sass`: Overriding the default compiler with Node-Sass\n\nExample using the node-sass compiler using the new option `sass`.\n\n```js\nconst sass = require('node-sass');\nconst assetFunctions = require('@localnerve/sass-asset-functions');\n\nsass.render({\n  functions: assetFunctions({ sass }),\n  file: scss_filename,\n  [, options..]\n}, function(err, result) { /*...*/ });\n```\n\n#### `asset_host`: a function which completes with a string used as asset host.\n\n```js\nsass.render({\n  functions: assetFunctions({\n    asset_host: function(http_path, done){\n      done('http://assets.example.com');\n      // or use the supplied path to calculate a host\n      done(`http://assets${http_path.length % 4}.example.com`);\n    }\n  }),\n  file: scss_filename,\n  fiber,\n  [, options..]\n}, function(err, result) { /*...*/ });\n```\n\n#### `asset_cache_buster`: a function to rewrite the asset path\n\nWhen this function returns a string, it's set as the query of the path. When returned an object, `path` and `query` will be used.\n\n```js\nsass.render({\n  functions: assetFunctions({\n    asset_cache_buster: function(http_path, real_path, done){\n      done('v=123');\n    }\n  }),\n  file: scss_filename,\n  fiber,\n  [, options..]\n}, function(err, result) { /*...*/ });\n```\n\n##### A more advanced example:\n\nHere we include the file's  hexdigest in the path, using the [`hexdigest`](https://github.com/koenpunt/node-hexdigest) module.\n\nFor example, `/images/myimage.png` would become `/images/myimage-8557f1c9b01dd6fd138ba203e6a953df6a222af3.png`.\n\n```js\nconst sass = require('sass');\nconst fiber = require('fibers');\nconst path = require('path');\nconst fs = require('fs');\nconst hexdigest = require('hexdigest');\nconst assetFunctions = require('@localnerve/sass-asset-functions');\n\nsass.render({\n  functions: assetFunctions({\n    asset_cache_buster: function(http_path, real_path, done){\n      hexdigest(real_path, 'sha1', function(err, digest) {\n        if (err) {\n          // an error occurred, maybe the file doesn't exist.\n          // Calling `done` without arguments will result in an unmodified path.\n          done();\n        } else {\n          const extname = path.extname(http_path);\n          const basename = path.basename(http_path, extname);\n          const new_name = `${basename}-${digest}${extname}`;\n          done({path: path.join(path.dirname(http_path), new_name), query: null});\n        }\n      });\n    }\n  }),\n  file: scss_filename,\n  fiber,\n  [, options..]\n}, function(err, result) { /*...*/ });\n```\n\n## Contributing\n\n1. Fork it\n2. Create your feature branch (`git checkout -b my-new-feature`)\n3. Commit your changes (`git commit -am 'Add some feature'`)\n4. Push to the branch (`git push origin my-new-feature`)\n5. Create new Pull Request\n","readmeFilename":"README.md"}