Browse Source

Bunch of tweaks and fixes.

Tomek Wójcik 8 months ago
parent
commit
0457144c94
6 changed files with 32 additions and 29 deletions
  1. 8 6
      example/example.js
  2. 1 1
      lib/scss.mustache
  3. 11 8
      lib/spritemaker.js
  4. 2 3
      package.json
  5. 7 8
      test/spritemaker.spec.js
  6. 3 3
      test/utils.js

+ 8 - 6
example/example.js

@@ -1,16 +1,17 @@
+/*eslint no-console: ["error", { allow: ["log", "error"] }] */
 /**
  * Copyright (c) 2019-present Tomek Wójcik <contact@bthlabs.pl>
- * 
+ *
  * 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'
+}));

+ 1 - 1
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;
 }

+ 11 - 8
lib/spritemaker.js

@@ -1,16 +1,16 @@
 /**
  * Copyright (c) 2019-present Tomek Wójcik <contact@bthlabs.pl>
- * 
+ *
  * 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 = {

+ 2 - 3
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",

+ 7 - 8
test/spritemaker.spec.js

@@ -1,16 +1,16 @@
 /**
  * Copyright (c) 2019-present Tomek Wójcik <contact@bthlabs.pl>
- * 
+ *
  * 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);
   });
 });

+ 3 - 3
test/utils.js

@@ -1,16 +1,16 @@
 /**
  * Copyright (c) 2019-present Tomek Wójcik <contact@bthlabs.pl>
- * 
+ *
  * 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