Skip to content

Commit

Permalink
100%
Browse files Browse the repository at this point in the history
  • Loading branch information
renatoi committed Mar 21, 2015
1 parent 5f284af commit 560e218
Show file tree
Hide file tree
Showing 2 changed files with 139 additions and 27 deletions.
55 changes: 34 additions & 21 deletions src/atomizer.js
View file
Expand Up @@ -218,7 +218,9 @@ Atomizer.prototype.getSyntax = function () {
var rulesKeys;
var mainSyntax;

if (!this.syntax) {
if (this.syntax) {
return this.syntax;
} else {
helpersKeys = Object.keys(this.helpersMap);
rulesKeys = Object.keys(this.rulesMap);

Expand Down Expand Up @@ -294,9 +296,9 @@ Atomizer.prototype.getSyntax = function () {
].join('');

this.syntax = XRegExp(syntax, 'g');
}

return this.syntax;
return this.syntax;
}
};

/**
Expand Down Expand Up @@ -457,6 +459,7 @@ Atomizer.prototype.getCss = function (classNames/*:string[]*/, config/*:Atomizer
// build declaration (iterate prop the value)
rule.properties.forEach(function (property) {
keywordRule.values.forEach(function (value) {
/* istanbul ignore else */
if (!treeo.declaration) {
treeo.declaration = {};
}
Expand Down Expand Up @@ -550,22 +553,34 @@ Atomizer.prototype.getCss = function (classNames/*:string[]*/, config/*:Atomizer

// helper rules doesn't have the same format as patterns
if (rule.type === 'helper') {
cssoHelpers = {};
cssoHelpers[className] = {};

if (breakPoint) {
cssoHelpers[className][breakPoint] = {};
}
if (rule.declaration) {
if (!rule.declaration) {
throw new Error('Declaration key is expected in a helper class. Helper class: ' + rule.prefix);
}

if (breakPoint) {
cssoHelpers[className][breakPoint] = rule.declaration;
} else {
cssoHelpers[className] = rule.declaration;
}

// we have params in declaration
if (treeo.params) {
treeo.params.forEach(function (param, index) {
// we have params in declaration
if (treeo.params) {
treeo.params.forEach(function (param, index) {
if (breakPoint) {
for (var prop in cssoHelpers[className][breakPoint]) {
cssoHelpers[className][breakPoint][prop] = cssoHelpers[className][breakPoint][prop].replace('$' + index, param);
}
} else {
for (var prop in cssoHelpers[className]) {
cssoHelpers[className][prop] = cssoHelpers[className][prop].replace('$' + index, param);
}
});
}
}
});
}
if (rule.rules) {
_.merge(csso, rule.rules);
Expand All @@ -587,17 +602,15 @@ Atomizer.prototype.getCss = function (classNames/*:string[]*/, config/*:Atomizer
}
// a custom class name not declared in the config might not have values
else if (treeo.value) {
if (rule.properties) {
rule.properties.forEach(function (property) {
var value = Atomizer.replaceConstants(treeo.value, options.rtl);
property = Atomizer.replaceConstants(property, options.rtl);
if (breakPoint) {
csso[className][breakPoint][property] = value;
} else {
csso[className][property] = value;
}
});
}
rule.properties.forEach(function (property) {
var value = Atomizer.replaceConstants(treeo.value, options.rtl);
property = Atomizer.replaceConstants(property, options.rtl);
if (breakPoint) {
csso[className][breakPoint][property] = value;
} else {
csso[className][property] = value;
}
});
}
}
});
Expand Down
111 changes: 105 additions & 6 deletions tests/atomizer.js
View file
Expand Up @@ -29,7 +29,8 @@ describe('Atomizer()', function () {
describe('findClassNames()', function () {
it('returns an array of valid atomic class names', function () {
var atomizer = new Atomizer();
var result = atomizer.findClassNames('<div class="P-55px H-100% test:h>Op-1:h test:test>Op-1"></div>');
// duplicate P-55px to make sure we get only one
var result = atomizer.findClassNames('<div class="P-55px P-55px H-100% test:h>Op-1:h test:test>Op-1"></div>');
var expected = ['P-55px', 'H-100%', 'test:h>Op-1:h'];
expect(result).to.deep.equal(expected);
});
Expand Down Expand Up @@ -74,9 +75,10 @@ describe('Atomizer()', function () {
properties: ['border']
}];
var atomizer = new Atomizer(null, rules);
var syntax = atomizer.getSyntax();
var result = atomizer.getSyntax();

expect(atomizer.syntax).to.equal(result);
expect(syntax).to.equal(result);
});
it('returns a new syntax if syntax has changed', function () {
var rules = [{
Expand All @@ -102,7 +104,7 @@ describe('Atomizer()', function () {
describe('getCss()', function () {
it ('returns css by reading an array of class names', function () {
var atomizer = new Atomizer();
var classNames = ['P-55px', 'H-100%', 'M-a', 'test:h>Op-1:h', 'Op-1', 'C-333', 'Mt-neg10px'];
var classNames = ['P-55px', 'H-100%', 'M-a', 'test:h>Op-1:h', 'test:h_Op-1:h', 'Op-1', 'C-333', 'Mt-neg10px'];
var expected = [
'.C-333 {',
' color: #333;',
Expand All @@ -116,7 +118,7 @@ describe('Atomizer()', function () {
'.Mt-neg10px {',
' margin-top: -10px;',
'}',
'.test:hover>.test\\:h\\>Op-1\\:h:hover, .Op-1 {',
'.test:hover>.test\\:h\\>Op-1\\:h:hover, .test:hover .test\\:h_Op-1\\:h:hover, .Op-1 {',
' opacity: 1;',
'}',
'.P-55px {',
Expand All @@ -126,6 +128,65 @@ describe('Atomizer()', function () {
var result = atomizer.getCss(classNames);
expect(result).to.equal(expected);
});
it ('returns expected css of a helper class', function () {
// set rules here so if helper change, we don't fail the test
var atomizer = new Atomizer(null, [
// params
{
type: 'helper',
name: 'Foo',
prefix: 'Foo',
declaration: {
'param0': '$0',
'param1': '$1'
},
rules: {
'rule': {
'foo': 'bar'
}
}
},
// empty
{
type: 'helper',
name: 'Bar',
prefix: 'Bar',
declaration: {
'bar': 'foo'
}
}
]);
var classNames = ['Foo(1,10px)', 'Bar()'];
var expected = [
'rule {',
' foo: bar;',
'}',
'.Foo\\(1\\,10px\\) {',
' param0: 1;',
' param1: 10px;',
'}',
'.Bar\\(\\) {',
' bar: foo;',
'}\n'
].join('\n');
var result = atomizer.getCss(classNames);
expect(result).to.equal(expected);
});
it ('throws if helper class doesn\'t have a declaration', function () {
expect(function() {
// set rules here so if helper change, we don't fail the test
var atomizer = new Atomizer(null, [
// empty
{
type: 'helper',
name: 'Bar',
prefix: 'Bar'
}
]);
var classNames = ['Bar()'];
atomizer.getCss(classNames);
}).to.throw();
});
it ('returns expected css by reading an array of class names in config only', function () {
var atomizer = new Atomizer();
var config = {
Expand Down Expand Up @@ -170,7 +231,39 @@ describe('Atomizer()', function () {
expect(result).to.equal(expected);
});
it ('returns expected css value with breakpoints', function () {
var atomizer = new Atomizer();
var atomizer = new Atomizer(null, [
{
type: 'pattern',
name: 'Display',
prefix: 'D-',
properties: ['display'],
rules: [
{suffix: 'n', values: ['none']}
]
},
{
type: 'pattern',
name: 'Padding (all edges)',
prefix: 'P-',
properties: ['padding']
},
{
type: 'helper',
name: 'Foo',
prefix: 'Foo',
declaration: {
foo: 'bar'
}
},
{
type: 'helper',
name: 'Bar',
prefix: 'Bar',
declaration: {
bar: '$0'
}
}
]);
var config = {
custom: {
"foo": "10px"
Expand All @@ -187,9 +280,15 @@ describe('Atomizer()', function () {
' .P-foo--sm {',
' padding: 10px;',
' }',
' .Foo\\(\\)--sm {',
' foo: bar;',
' }',
' .Bar\\(10px\\)--sm {',
' bar: 10px;',
' }',
'}\n'
].join('\n');
var result = atomizer.getCss(['D-n--sm', 'P-foo--sm'], config);
var result = atomizer.getCss(['D-n--sm', 'P-foo--sm', 'Foo()--sm', 'Bar(10px)--sm'], config);
expect(result).to.equal(expected);
});
it ('throws if breakpoints aren\'t valid', function () {
Expand Down

0 comments on commit 560e218

Please sign in to comment.