Skip to content

Commit

Permalink
stop making png sprites
Browse files Browse the repository at this point in the history
  • Loading branch information
@sndrs
sndrs committed Oct 17, 2016
1 parent ea65e81 commit 6561f86
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 165 deletions.
2 changes: 0 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,8 +85,6 @@
"moment": "2.8.3",
"node-sass": "^3.8.0",
"perfectionist": "^2.1.3",
"phantom": "^2.1.8",
"phantomjs-prebuilt": "^2.1.7",
"pify": "^2.3.0",
"postcss": "^5.0.21",
"postcss-atomised": "^0.3.1",
Expand Down
132 changes: 19 additions & 113 deletions tools/sprites/spricon.js
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,15 @@
/*
* Spricon
*
* Sprite generator
*
*/
/* eslint-disable no-console */

const fs = require('fs');
const path = require('path');
const glob = require("glob");
const phantom = require('phantom');
const glob = require('glob');
const btoa = require('btoa');
const SVGO = require('svgo');
const mkdirp = require('mkdirp');
const svgo = new SVGO();

const configs = glob.sync('./*.json');

/**
* this is the meat of what happens:
*/

phantom.create().then(ph => {
const sprites = configs.map(configPath => {
console.info(`Running Spricon with ${configPath}`);

const config = require(configPath);
const imagePaths = glob.sync(`${config.src}/*.svg`);

return makeDest(config)
.then(getImages.bind(null, imagePaths))
.then(sortImages)
.then(files => generateSVGSass(config, files))
.then(files => generatePNGSass(config, files, ph))
.then(page => generatePNGSprite(config, page))
.catch(e => console.log(e));
});
Promise.all(sprites).then(() => {
ph.exit();
});
})

/**
* these are the individual functions used above...
*/
Expand All @@ -58,7 +28,7 @@ const getImages = paths => Promise.all(
paths.map(file =>
new Promise((resolve, reject) => {
fs.readFile(file, { encoding: 'utf-8' }, (err, data) => {
if (err) { reject(err) };
if (err) { reject(err); }
svgo.optimize(data, result => {
resolve({
name: path.parse(file).name,
Expand All @@ -70,19 +40,6 @@ const getImages = paths => Promise.all(
)
);

// order by height, then width, then name
const sortImages = images => images.sort((a, b) => {
const aInfo = a.data.info;
const bInfo = b.data.info;
if (aInfo.height !== bInfo.height) {
return aInfo.height - bInfo.height;
} else if (aInfo.width !== bInfo.width) {
return bInfo.width - aInfo.width;
} else {
return a.name.localeCompare(b.name);
}
});

const generateSVGSass = (config, files) => {
const SVGSass = files.map(file => {
const {name, data: fileData} = file;
Expand All @@ -95,7 +52,7 @@ const generateSVGSass = (config, files) => {
.svg .i-${name} {
@extend %svg-i-${name} !optional;
}
`.replace(/ /g, '');
`.replace(/ {16}/g, '');
});
// create svg scss file
return new Promise((resolve, reject) => {
Expand All @@ -104,75 +61,24 @@ const generateSVGSass = (config, files) => {
@if ($svg-support) {
${SVGSass.join('').trim()}
}
`.trim().replace(/ /g, ''),
`.trim().replace(/ {16}/g, ''),
err => err ? reject(err) : resolve(files)
);
});
}
};

const generatePNGSass = (config, files, ph) => {
return ph.createPage()
.then(page => {
page.property('viewportSize', { width: 600, height: 1 });
page.property('content', '<html><body id="sprite" style="margin: 0" /></html>');
return page;
})
.then(page => {
return Promise.all(files.map(file => {
const {name, data: fileData} = file;
return page.evaluate(function (data) {
var iconContainer = document.createElement('div'), icon;
iconContainer.style.display = 'block';
iconContainer.style.float = 'left';
iconContainer.style.margin = '0 1px 1px 0'; // prevents sprite icons from leaking
iconContainer.innerHTML = data;
document.getElementById('sprite').appendChild(iconContainer);
icon = iconContainer.querySelector('svg');
return {
x: iconContainer.offsetLeft,
y: iconContainer.offsetTop,
width: Math.round(icon.getAttribute('width')),
height: Math.round(icon.getAttribute('height'))
};
}, fileData.data)
.then(props => {
// create png css rule
const {x, y, width, height} = props;
return `
%i-${name},
.i-${name} {
background-position: -${x}px -${y}px;
width: ${width}px;
height: ${height}px;
}
`.replace(/ /g, '');
});
}))
// create PNG scss file
.then(scss => {
return new Promise((resolve, reject) => {
fs.writeFile(
config.cssDest + config.cssPngName, scss.join('').trim(),
err => err ? reject(err) : resolve(page)
);
});
});
})
}
/**
* this is the meat of what happens:
*/

const generatePNGSprite = (config, page) => {
return page.evaluate(
function () {
var container = document.getElementById('sprite');
return {
width: container.offsetWidth,
height: container.offsetHeight
};
}
).then(size => {
page.property('viewportSize', size);
// create PNG sprite file
return page.render(`${config.imgDest}sprite.png`);
});
};
configs.map(configPath => {
console.info(`Running Spricon with ${configPath}`);

const config = require(configPath);
const imagePaths = glob.sync(`${config.src}/*.svg`);

return makeDest(config)
.then(getImages.bind(null, imagePaths))
.then(files => generateSVGSass(config, files))
.catch(e => console.log(e));
});
52 changes: 2 additions & 50 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,10 +282,6 @@ async@~0.2.10, async@~0.2.6:
version "0.2.10"
resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"

async@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/async/-/async-1.0.0.tgz#f8fc04ca3a13784ade9e1641af98578cfbd647a9"

async@0.1.15:
version "0.1.15"
resolved "https://registry.yarnpkg.com/async/-/async-0.1.15.tgz#2180eaca2cf2a6ca5280d41c0585bec9b3e49bd3"
Expand Down Expand Up @@ -1293,10 +1289,6 @@ colors@0.6.0-1:
version "0.6.0-1"
resolved "https://registry.yarnpkg.com/colors/-/colors-0.6.0-1.tgz#6dbb68ceb8bc60f2b313dcc5ce1599f06d19e67a"

colors@1.0.x:
version "1.0.3"
resolved "https://registry.yarnpkg.com/colors/-/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b"

combine-lists@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/combine-lists/-/combine-lists-1.0.1.tgz#458c07e09e0d900fc28b70a3fec2dacd1d2cb7f6"
Expand Down Expand Up @@ -1674,10 +1666,6 @@ custom-event@~1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.1.tgz#5d02a46850adf1b4a317946a3928fccb5bfd0425"

cycle@1.0.x:
version "1.0.3"
resolved "https://registry.yarnpkg.com/cycle/-/cycle-1.0.3.tgz#21e80b2be8580f98b468f379430662b046c34ad2"

d@^0.1.1, d@~0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/d/-/d-0.1.1.tgz#da184c535d18d8ee7ba2aa229b914009fae11309"
Expand Down Expand Up @@ -2423,10 +2411,6 @@ extsprintf@1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.0.2.tgz#e1080e0658e300b06294990cc70e1502235fd550"

eyes@0.1.x:
version "0.1.8"
resolved "https://registry.yarnpkg.com/eyes/-/eyes-0.1.8.tgz#62cf120234c683785d902348a800ef3e0cc20bc0"

fancy-log@^1.1.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/fancy-log/-/fancy-log-1.2.0.tgz#d5a51b53e9ab22ca07d558f2b67ae55fdb5fcbd8"
Expand Down Expand Up @@ -3918,7 +3902,7 @@ isobject@^2.0.0:
dependencies:
isarray "1.0.0"

isstream@~0.1.2, isstream@0.1.x:
isstream@~0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"

Expand Down Expand Up @@ -4256,10 +4240,6 @@ limiter@^1.0.5:
version "1.1.0"
resolved "https://registry.yarnpkg.com/limiter/-/limiter-1.1.0.tgz#6e2bd12ca3fcdaa11f224e2e53c896df3f08d913"

linerstream@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/linerstream/-/linerstream-0.1.4.tgz#5de7bf69faa2b0f9d85e8332099b70e419a845d5"

listr-silent-renderer@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/listr-silent-renderer/-/listr-silent-renderer-1.0.0.tgz#c097f02747d139f07852abe418a2d6e18c83f7ee"
Expand Down Expand Up @@ -5303,15 +5283,7 @@ perfectionist@^2.1.3:
vendors "^1.0.0"
write-file-stdout "0.0.2"

phantom@^2.1.8:
version "2.1.21"
resolved "https://registry.yarnpkg.com/phantom/-/phantom-2.1.21.tgz#76b7790ff62cf09fbe922ae844b9fb745ce8bb28"
dependencies:
linerstream "^0.1.4"
phantomjs-prebuilt "^2.1.4"
winston "^2.2.0"

phantomjs-prebuilt@^2.1.4, phantomjs-prebuilt@^2.1.7:
phantomjs-prebuilt@^2.1.7:
version "2.1.13"
resolved "https://registry.yarnpkg.com/phantomjs-prebuilt/-/phantomjs-prebuilt-2.1.13.tgz#66556ad9e965d893ca5a7dc9e763df7e8697f76d"
dependencies:
Expand Down Expand Up @@ -5339,10 +5311,6 @@ pinkie@^2.0.0:
version "2.0.4"
resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"

pkginfo@0.3.x:
version "0.3.1"
resolved "https://registry.yarnpkg.com/pkginfo/-/pkginfo-0.3.1.tgz#5b29f6a81f70717142e09e765bbeab97b4f81e21"

plur@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/plur/-/plur-1.0.0.tgz#db85c6814f5e5e5a3b49efc28d604fec62975156"
Expand Down Expand Up @@ -6572,10 +6540,6 @@ sshpk@^1.7.0:
jsbn "~0.1.0"
tweetnacl "~0.14.0"

stack-trace@0.0.x:
version "0.0.9"
resolved "https://registry.yarnpkg.com/stack-trace/-/stack-trace-0.0.9.tgz#a8f6eaeca90674c333e7c43953f275b451510695"

"statuses@>= 1.3.0 < 2", statuses@~1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.0.tgz#8e55758cb20e7682c1f4fce8dcab30bf01d1e07a"
Expand Down Expand Up @@ -7246,18 +7210,6 @@ window-size@0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"

winston@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/winston/-/winston-2.2.0.tgz#2c853dd87ab552a8e8485d72cbbf9a2286f029b7"
dependencies:
async "~1.0.0"
colors "1.0.x"
cycle "1.0.x"
eyes "0.1.x"
isstream "0.1.x"
pkginfo "0.3.x"
stack-trace "0.0.x"

wordwrap@^1.0.0, wordwrap@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
Expand Down

0 comments on commit 6561f86

Please sign in to comment.