Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Add path suffix.
Combine source and target paths into a path suffix for easier
organization.

Processing a source path of 'images/header/buttons' with a target path
of 'images/generated/scaled', would result in
'images/generated/scaled/header/buttons'
  • Loading branch information
Simen Brekken committed Nov 14, 2012
1 parent 90ecaf2 commit 3247895
Show file tree
Hide file tree
Showing 6 changed files with 37 additions and 8 deletions.
26 changes: 19 additions & 7 deletions lib/retina.js
Expand Up @@ -13,6 +13,19 @@ var isRetinaRule = function(rule) {
return rule.media && ~rule.media.indexOf(retinaQuery);
};

var combinePaths = function(a, b) {
var segmentsA = a.split(path.sep);
var segmentsB = b.split(path.sep);

return segmentsA.concat(segmentsB.reduce(function(segments, segment, index) {
if (segmentsA[index] !== segment) {
segments.push(segment);
}

return segments;
}, [])).join(path.sep);
};

var findBackgrounds = function(rules) {
var visit = function(rules, backgrounds, media) {
rules.forEach(function(rule) {
Expand Down Expand Up @@ -94,15 +107,10 @@ var createMissingRetinaRules = function(backgrounds, retinaBackgrounds, sourcePa
};

var createResizedBackgrounds = function(retinaBackgrounds, sourcePath, targetPath) {
var generatedPath = path.join(sourcePath, targetPath);
var generatedExists;

return retinaBackgrounds.reduce(function(resizedBackgrounds, retinaBackground) {
var background = retinaBackground.background;

if (!fs.existsSync(path.join(sourcePath, background.url))) {
var url = path.join(targetPath, path.basename(background.url));

var image = new Canvas.Image();
image.src = path.join(sourcePath, retinaBackground.url);

Expand All @@ -113,8 +121,12 @@ var createResizedBackgrounds = function(retinaBackgrounds, sourcePath, targetPat
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0, width, height);

if (!generatedExists) {
generatedExists = !fs.existsSync(generatedPath) && mkdirp(generatedPath);
var combinedPath = combinePaths(targetPath, path.dirname(background.url));
var generatedPath = path.join(sourcePath, combinedPath);
var url = path.join(combinedPath, path.basename(background.url));

if (!fs.existsSync(generatedPath)) {
mkdirp(generatedPath);
}

fs.writeFileSync(path.join(sourcePath, url), canvas.toBuffer());
Expand Down
2 changes: 1 addition & 1 deletion package.json
Expand Up @@ -3,7 +3,7 @@
"description": "CSS based image scaler",
"author": "Simen Brekken <simen@unfold.no>",
"keywords": ["image", "retina", "scale", "css"],
"version": "0.0.2",
"version": "0.0.3",
"license": "MIT",
"bin": {
"retina": "./bin/retina"
Expand Down
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions test/fixtures/path-suffix.css
@@ -0,0 +1,3 @@
.circle {
background: url(images/sprites/light-green-circle.png) no-repeat;
}
10 changes: 10 additions & 0 deletions test/fixtures/path-suffix.out.css
@@ -0,0 +1,10 @@
.circle {
background: url(images/generated/scaled/sprites/light-green-circle.png) no-repeat
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
.circle {
background-image: url(images/sprites/light-green-circle@2x.png);
background-size: 24px auto
}
}
4 changes: 4 additions & 0 deletions test/retina.js
Expand Up @@ -32,4 +32,8 @@ describe('retina', function() {
scaled.src = 'test/fixtures/images/generated/scaled/light-blue-circle.png';
scaled.width.should.equal(original.width / 2);
});

it('should use existing path suffix', function() {
retina(fixture('path-suffix'), fixturePath, targetPath).should.equal(fixture('path-suffix.out'));
});
});

0 comments on commit 3247895

Please sign in to comment.