From 0457144c94b4e6789599a233b8616106f8a81e12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomek=20W=C3=B3jcik?= Date: Thu, 10 Jan 2019 09:21:09 +0100 Subject: [PATCH] Bunch of tweaks and fixes. --- example/example.js | 14 ++++++++------ lib/scss.mustache | 2 +- lib/spritemaker.js | 19 +++++++++++-------- package.json | 5 ++--- test/spritemaker.spec.js | 15 +++++++-------- test/utils.js | 6 +++--- 6 files changed, 32 insertions(+), 29 deletions(-) diff --git a/example/example.js b/example/example.js index 144ad05..67c8710 100644 --- a/example/example.js +++ b/example/example.js @@ -1,16 +1,17 @@ +/*eslint no-console: ["error", { allow: ["log", "error"] }] */ /** * Copyright (c) 2019-present Tomek Wójcik - * + * * Permission 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: - * + * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. - * + * * THE 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 @@ -22,7 +23,8 @@ const {spritemaker} = require('../lib/spritemaker.js'); -spritemaker({ +console.log(spritemaker({ files: ['./icons/*.png'], - output: './output/' -}); + output: './output/', + urlPrefix: '../img' +})); diff --git a/lib/scss.mustache b/lib/scss.mustache index 1a8fe74..d879651 100644 --- a/lib/scss.mustache +++ b/lib/scss.mustache @@ -27,7 +27,7 @@ $sprite: ( ); @mixin use-sprite($name) { - background: transparent '{{& url}}' no-repeat; + background: transparent url('{{& url}}') no-repeat; background-position: map-get($sprite, $name); background-size: {{bounds.width}}px {{bounds.height}}px; } diff --git a/lib/spritemaker.js b/lib/spritemaker.js index 65d28f0..512a84a 100644 --- a/lib/spritemaker.js +++ b/lib/spritemaker.js @@ -1,16 +1,16 @@ /** * Copyright (c) 2019-present Tomek Wójcik - * + * * Permission 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: - * + * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. - * + * * THE 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 @@ -87,8 +87,8 @@ const spritemaker = (options) => { const hash = crypto.Hash('md5'); hash.update(outputImage.data); - const outputBasename = `sprite-${hash.digest('hex')}`; - const outputName = `${outputBasename}.png`; + const outputBasename = `sprite`; + const outputName = `${outputBasename}-${hash.digest('hex')}.png`; const outbutBuffer = PNG.sync.write(outputImage, { colorType: 6 }); @@ -99,16 +99,19 @@ const spritemaker = (options) => { const template = fs.readFileSync( path.resolve(__dirname, 'scss.mustache'), {encoding: 'utf-8'} ); - const outputURL = new URI(options.urlPrefix).path('/' + outputName); const context = { bounds: bounds, images: spriteMap, - url: outputURL.href() + url: path.join(options.urlPrefix, outputName) }; const scss = Mustache.render(template, context); + + const scssName = `${outputBasename}.scss`; fs.writeFileSync( - path.resolve(options.output, `${outputBasename}.scss`), scss + path.resolve(options.output, scssName), scss ); + + return [outputName, scssName]; }; module.exports = { diff --git a/package.json b/package.json index 16048c0..06feaf2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@bthlabs/sass-spritemaker", - "version": "1.0.1", + "version": "1.0.2", "description": "Convert a bunch of PNGs to a Sass spritemap.", "main": "./lib/spritemaker.js", "repository": { @@ -20,8 +20,7 @@ "dependencies": { "glob": "7.1.3", "mustache": "3.0.1", - "pngjs": "3.3.3", - "urijs": "1.19.1" + "pngjs": "3.3.3" }, "devDependencies": { "chai": "4.2.0", diff --git a/test/spritemaker.spec.js b/test/spritemaker.spec.js index de9a6c4..52ace67 100644 --- a/test/spritemaker.spec.js +++ b/test/spritemaker.spec.js @@ -1,16 +1,16 @@ /** * Copyright (c) 2019-present Tomek Wójcik - * + * * Permission 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: - * + * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. - * + * * THE 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 @@ -30,7 +30,6 @@ const {spritemaker} = require('../lib/spritemaker'); const {rmtree} = require('./utils'); const ICONS_PATH = path.resolve(__dirname, '..', 'example', 'icons', '*.png'); -const OUTPUT_NAME = 'sprite-4744971b12c28832638cc954dd787fa5'; describe('spritemaker', () => { let outputDir = null; @@ -49,16 +48,16 @@ describe('spritemaker', () => { }); it('should generate the sprite image', () => { - spritemaker(defaultOptions); + const result = spritemaker(defaultOptions); - const spritePath = path.join(outputDir, `${OUTPUT_NAME}.png`); + const spritePath = path.join(outputDir, result[0]); expect(fs.existsSync(spritePath)).to.equal(true); }); it('should generate the SCSS files', () => { - spritemaker(defaultOptions); + const result = spritemaker(defaultOptions); - const scssPath = path.join(outputDir, `${OUTPUT_NAME}.scss`); + const scssPath = path.join(outputDir, result[1]); expect(fs.existsSync(scssPath)).to.equal(true); }); }); diff --git a/test/utils.js b/test/utils.js index d8c80c2..0fa82fb 100644 --- a/test/utils.js +++ b/test/utils.js @@ -1,16 +1,16 @@ /** * Copyright (c) 2019-present Tomek Wójcik - * + * * Permission 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: - * + * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. - * + * * THE 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