{"id":16185197,"url":"https://github.com/davemo/grunt-datauri-variables","last_synced_at":"2025-07-01T04:34:09.910Z","repository":{"id":11564909,"uuid":"14052109","full_name":"davemo/grunt-datauri-variables","owner":"davemo","description":"Generates .scss datauri variables for .{png,gif,jpg} and .svg","archived":false,"fork":false,"pushed_at":"2021-11-20T00:41:26.000Z","size":1302,"stargazers_count":19,"open_issues_count":0,"forks_count":5,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-06-24T05:55:59.759Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"SCSS","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/davemo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE-MIT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-11-01T19:44:08.000Z","updated_at":"2024-12-03T12:31:26.000Z","dependencies_parsed_at":"2022-09-11T05:40:22.161Z","dependency_job_id":null,"html_url":"https://github.com/davemo/grunt-datauri-variables","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/davemo/grunt-datauri-variables","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davemo%2Fgrunt-datauri-variables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davemo%2Fgrunt-datauri-variables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davemo%2Fgrunt-datauri-variables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davemo%2Fgrunt-datauri-variables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davemo","download_url":"https://codeload.github.com/davemo/grunt-datauri-variables/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davemo%2Fgrunt-datauri-variables/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262898397,"owners_count":23381570,"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-10-10T07:13:45.177Z","updated_at":"2025-07-01T04:34:09.893Z","avatar_url":"https://github.com/davemo.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# grunt-datauri-variables\n\n[![Node.js CI](https://github.com/davemo/grunt-datauri-variables/actions/workflows/node.js.yml/badge.svg?branch=main)](https://github.com/davemo/grunt-datauri-variables/actions/workflows/node.js.yml)\n\n\u003e Generates .scss datauri variables for .{png,gif,jpg} and .svg\n\n## Intended Use\n\nTaking _small_ images and inlining base64 encoded versions of them in your stylesheets to avoid additional HTTP requests. This also allows you to eliminate image sprites from your workflow. We generate .scss variables so that users have the most flexible ability to integrate these base64 encoded images into their workflow; this also guarantees we won't unnecessarily bloat style sheets because .scss variables are not included in output `.css` by default.\n\n## Why would I use this?\n\nIf you need a very small task with limited dependencies this task is for you. If you want more robust options you may want to check out [grunticon](https://github.com/filamentgroup/grunticon).\n\n## Getting Started\nThis plugin requires Grunt `~1.4.1`\n\nIf you haven't used [Grunt](http://gruntjs.com/) before, be sure to check out the [Getting Started](http://gruntjs.com/getting-started) guide, as it explains how to create a [Gruntfile](http://gruntjs.com/sample-gruntfile) as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:\n\n```shell\nnpm install grunt-datauri-variables --save\n```\n\nOnce the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:\n\n```js\ngrunt.loadNpmTasks('grunt-datauri-variables');\n```\n\n## The \"datauri\" task\n\n### Overview\nIn your project's Gruntfile, add a section named `datauri` to the data object passed into `grunt.initConfig()`.\n\n```js\ngrunt.initConfig({\n  datauri: {\n    options: {\n      varPrefix: '', // defaults to `data-image-`\n      varSuffix: '', // defaults to empty string\n      colors: {      // a color mapping object that will map\n                     // files named with the following scheme\n                     // `truck.colors-red-green.svg` into separate datauri vars.\n        red: '#00ffff',\n        green: '#ff00ff'\n      }\n    },\n    your_target: {\n      files: {\n        \"generated/_datauri_variables.scss\": \"images/**/*.{png,jpg,gif,svg}\"\n      }\n    },\n  },\n})\n```\n\n### Sample Output\n\nGiven the configuration in the Overview section above, you can expect `grunt datauri` to output the following to `generated/_datauri_variables.scss` (lines truncated for brevity).\n\n```shell\ncat generated/_datauri_variables.scss\n\n$data-image-alert: \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...\";\n$data-image-blurry: \"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAA...\";\n$data-image-circle: \"data:image/gif;base64,R0lGODlhCwALAPEAAAAAA...\";\n$data-image-truck: \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj...\";\n$data-image-truck-red: \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj...\";\n$data-image-truck-green: \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj...\";\n```\n\n### Options\n\n#### options.varPrefix\nType: `string`\nDefault value: `data-image-`\n\nA prefix prepended to the .scss variable name for the image.\n\n#### optins.varSuffix\nType: `string`\nDefault value: ''\n\nA suffix appended to the .scss variable name for the image.\n\n#### options.colors\nType: `object`\nDefault value: undefined\n\nA map of color names and values to be used to auto generate color variants for flagged .svg files.\n\n#### options.useMap\nType: `string`\nDefault value: `false`\n\nWhen set, variables will be placed in to a [Sass map](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#maps) named by its value.\n\n## Running Specs\n\n* clone this repo\n* `npm install`\n* `grunt spec`\n\n## Contributing\nIn lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using [Grunt](http://gruntjs.com/).\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavemo%2Fgrunt-datauri-variables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavemo%2Fgrunt-datauri-variables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavemo%2Fgrunt-datauri-variables/lists"}