Skip to content

Fixes #179 #182

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
renatoi merged 1 commit into from
Apr 28, 2015
Merged

Fixes #179 #182

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 32 additions & 4 deletions src/atomizer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,7 +287,35 @@ Atomizer.prototype.parseConfig = function (config/*:AtomizerConfig*/, options/*:
}
}
if (value !== null) {
treeo.declarations[prop] = treeo.declarations[prop].replace('$' + index, value);
// value could be an object for custom classes with breakPoints
// e.g.
// 'custom': {
// 'P($gutter)': {
// default: '10px',
// sm: '12px',
// md: '14px',
// lg: '20px'
// }
// }
if (_.isObject(value)) {
Object.keys(value).forEach(function (bp) {
// don't continue if we can't find the breakPoint in the declaration
if (!config.hasOwnProperty('breakPoints') || !config.breakPoints.hasOwnProperty(bp)) {
return;
}
treeo.declarations[config.breakPoints[bp]] = {};
treeo.declarations[config.breakPoints[bp]][prop] = treeo.declarations[prop].replace('$' + index, value[bp]);
});
// handle default value in the custom class
if (!value.hasOwnProperty('default')) {
// default has not been passed, make sure we delete it
delete treeo.declarations[prop];
} else {
treeo.declarations[prop] = treeo.declarations[prop].replace('$' + index, value.default);
}
} else {
treeo.declarations[prop] = treeo.declarations[prop].replace('$' + index, value);
}
} else {
treeo.declarations = null;
}
Expand Down Expand Up @@ -359,9 +387,6 @@ Atomizer.prototype.getCss = function (config/*:AtomizerConfig*/, options/*:CSSOp
ie: false
}, options);

// make sense of the config
tree = this.parseConfig(config, options);

// validate config.breakPoints
if (config && config.breakPoints) {
if (!_.isObject(config.breakPoints)) {
Expand All @@ -379,6 +404,9 @@ Atomizer.prototype.getCss = function (config/*:AtomizerConfig*/, options/*:CSSOp
}
}

// make sense of the config
tree = this.parseConfig(config, options);

// write JSS
// start by iterating rules (we need to follow the order that the rules were declared)
this.rules.forEach(function (rule) {
Expand Down
68 changes: 68 additions & 0 deletions tests/atomizer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,74 @@ describe('Atomizer()', function () {
});
});
describe('getCss()', function () {
it ('returns expected css for custom classes with break points', function () {
// set rules here so if helper change, we don't fail the test
var atomizer = new Atomizer();
var config = {
breakPoints: {
sm: '@media screen and (min-width:700px)',
md: '@media screen and (min-width:999px)',
lg: '@media screen and (min-width:1200px)'
},
custom: {
'P($gutter)': {
default: '10px',
sm: '16px',
md: '20px',
lg: '24px'
}
},
classNames: ['P($gutter)']
};
var expected = [
'.P\\(\\$gutter\\) {',
' padding: 10px;',
'}',
'@media screen and (min-width:700px) {',
' .P\\(\\$gutter\\) {',
' padding: 16px;',
' }',
'}',
'@media screen and (min-width:999px) {',
' .P\\(\\$gutter\\) {',
' padding: 20px;',
' }',
'}',
'@media screen and (min-width:1200px) {',
' .P\\(\\$gutter\\) {',
' padding: 24px;',
' }',
'}\n'
].join('\n');
var result = atomizer.getCss(config, {ie: true});
expect(result).to.equal(expected);
});
it ('returns expected css for custom classes with break points with missing breakPoints', function () {
// set rules here so if helper change, we don't fail the test
var atomizer = new Atomizer();
var config = {
breakPoints: {
sm: '@media screen and (min-width:700px)'
},
custom: {
'P($gutter)': {
sm: '16px',
md: '20px',
lg: '24px'
}
},
classNames: ['P($gutter)']
};
var expected = [
'@media screen and (min-width:700px) {',
' .P\\(\\$gutter\\) {',
' padding: 16px;',
' }',
'}\n'
].join('\n');
var result = atomizer.getCss(config, {ie: true});
expect(result).to.equal(expected);
});
it ('returns css by reading an array of class names', function () {
var atomizer = new Atomizer();
var config = {
Expand Down