Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Steve Holland
committed
Jul 11, 2017
1 parent
c63edbf
commit 08524ae
Showing
6 changed files
with
222 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,46 +1,24 @@ | ||
var lostGutter = require('./lost-vars-gutter'); | ||
var lostGutterLocal = require('./lost-vars-gutter-local'); | ||
|
||
module.exports = function lgGutter(css, settings) { | ||
var gutter = settings.gutter; | ||
var gutter, newValue; | ||
|
||
css.walkDecls( declaration => { | ||
if ( | ||
/(\$lost-gutter)/g.test(declaration.value) && | ||
!/(\$lost-gutter-local)/g.test(declaration.value) | ||
) { | ||
var newGlobalValue = declaration.value.replace(/(\$lost-gutter)/g, gutter); | ||
declaration.value = newGlobalValue; | ||
gutter = lostGutter(declaration, settings); | ||
|
||
newValue = declaration.value.replace(/(\$lost-gutter)/g, gutter); | ||
declaration.value = newValue; | ||
} | ||
if (/(\$lost-gutter-local)/g.test(declaration.value)) { | ||
var newLocalValue = gutter; | ||
declaration.parent.nodes.forEach( parentDeclaration => { | ||
var declarationArray = parentDeclaration.value.split(' '); | ||
|
||
if ( | ||
parentDeclaration.prop === 'lost-column' || | ||
parentDeclaration.prop === 'lost-waffle' || | ||
parentDeclaration.prop === 'lost-offset' | ||
) { | ||
if (declarationArray[2] !== undefined && declarationArray[2].search(/^\d/) !== -1) { | ||
newLocalValue = declarationArray[2]; | ||
} | ||
} else if ( | ||
parentDeclaration.prop === 'lost-center' || | ||
parentDeclaration.prop === 'lost-masonry-wrap' || | ||
parentDeclaration.prop === 'lost-masonry-column' || | ||
parentDeclaration.prop === 'lost-row' | ||
) { | ||
if (declarationArray[1] !== undefined && declarationArray[1].search(/^\d/) !== -1) { | ||
newLocalValue = declarationArray[1]; | ||
gutter = lostGutterLocal(declaration, settings); | ||
|
||
} | ||
} else if (parentDeclaration.prop === 'lost-column-gutter') { | ||
newLocalValue = parentDeclaration.value; | ||
} | ||
|
||
declaration.value = newLocalValue; | ||
}); | ||
|
||
newLocalValue = declaration.value.replace(/(\$lost-gutter-local)/g, gutter); | ||
declaration.value = newLocalValue; | ||
newValue = declaration.value.replace(/(\$lost-gutter-local)/g, gutter); | ||
declaration.value = newValue; | ||
} | ||
|
||
}); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
module.exports = function lostVarsGutterLocal(declaration, settings) { | ||
var newLocalValue = settings.gutter; | ||
|
||
declaration.parent.nodes.forEach( parentDeclaration => { | ||
var declarationArray = parentDeclaration.value.split(' '); | ||
|
||
if ( | ||
parentDeclaration.prop === 'lost-column' || | ||
parentDeclaration.prop === 'lost-waffle' || | ||
parentDeclaration.prop === 'lost-offset' | ||
) { | ||
if (declarationArray[2] !== undefined && declarationArray[2].search(/^\d/) !== -1) { | ||
newLocalValue = declarationArray[2]; | ||
} | ||
} else if ( | ||
parentDeclaration.prop === 'lost-center' || | ||
parentDeclaration.prop === 'lost-masonry-wrap' || | ||
parentDeclaration.prop === 'lost-masonry-column' || | ||
parentDeclaration.prop === 'lost-row' | ||
) { | ||
if (declarationArray[1] !== undefined && declarationArray[1].search(/^\d/) !== -1) { | ||
newLocalValue = declarationArray[1]; | ||
} | ||
} else if (parentDeclaration.prop === 'lost-column-gutter') { | ||
newLocalValue = parentDeclaration.value; | ||
} | ||
}); | ||
|
||
return newLocalValue; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
module.exports = function lostVarsGutter(declaration, settings) { | ||
return settings.gutter; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
var lostGutter = require('./lost-vars-gutter'); | ||
var lostGutterLocal = require('./lost-vars-gutter-local'); | ||
|
||
var variableFunctions = { | ||
'gutter': lostGutter, | ||
'gutter-local': lostGutterLocal | ||
}; | ||
|
||
module.exports = function lostVarsDecl(css, settings) { | ||
css.walkDecls(declaration => { | ||
var value = declaration.value, | ||
variables = [], | ||
re = /lost\-vars\(\s?['"]([\w\-]+)['"]\s?\)/gi, | ||
match = null; | ||
|
||
if(value.indexOf('lost-vars(') === -1) { | ||
return; | ||
} | ||
|
||
while ((match = re.exec(value)) !== null) { | ||
var variableFound = match[1].replace(/["']/g, ''); | ||
|
||
if(variables.indexOf(variableFound) === -1) { | ||
variables.push(variableFound); | ||
} | ||
} | ||
|
||
variables.forEach(variable => { | ||
var func = variableFunctions[variable]; | ||
|
||
if(typeof func !== 'function') { | ||
throw declaration.error(`lost-vars: variable '${variable}' is unknown.`); | ||
} | ||
|
||
var newValue = func(declaration, settings); | ||
var replaceRegex = new RegExp(`lost-vars\\(\s?['"]${variable}['"]\s?\\)`, 'gi'); | ||
|
||
value = value.replace(replaceRegex, newValue); | ||
}); | ||
|
||
declaration.value = value; | ||
}); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,132 @@ | ||
'use strict'; | ||
|
||
var check = require('./check'); | ||
var throws = require('./throws'); | ||
|
||
describe('lost-vars', function() { | ||
it('unknown variable', function() { | ||
throws( | ||
'a { margin: 0 0 lost-vars("randomvariablename"); }', | ||
'lost-vars: variable \'randomvariablename\' is unknown.' | ||
); | ||
}); | ||
|
||
it('matches multiple variables', function() { | ||
check( | ||
'div { margin: lost-vars(\'gutter\') lost-vars(\'gutter\'); padding: lost-vars(\'gutter-local\'); lost-offset: 1/3 3 100px;}', | ||
'div { margin: 30px 30px; padding: 100px; margin-left: calc(99.9% * (-1/3 * -1) - (100px - 100px * (-1/3 * -1)) + 100px) !important;}' | ||
); | ||
}); | ||
|
||
describe('gutter', function() { | ||
it('is replaced', function() { | ||
check( | ||
'a { margin: 0 0 lost-vars(\'gutter\'); }', | ||
'a { margin: 0 0 30px; }' | ||
); | ||
}); | ||
}); | ||
|
||
describe('gutter-local', () => { | ||
it('is replaced', () => { | ||
check( | ||
'div { padding: lost-vars(\'gutter-local\'); lost-column: 1/3; lost-column-gutter: 50px; }', | ||
'div { padding: 50px; width: calc(99.9% * 1/3 - (50px - 50px * 1/3)); }\n'+ | ||
'div:nth-child(1n) { float: left; margin-right: 50px; clear: none; }\n'+ | ||
'div:last-child { margin-right: 0; }\n'+ | ||
'div:nth-child(3n) { margin-right: 0; float: right; }\n'+ | ||
'div:nth-child(3n + 1) { clear: both; }' | ||
); | ||
check( | ||
'div { padding: lost-vars(\'gutter-local\'); lost-column: 1/3; lost-column-gutter: 0; }', | ||
'div { padding: 0; width: calc(99.9% * 1/3); }\n'+ | ||
'div:nth-child(1n) { float: left; margin-right: 0; clear: none; }\n'+ | ||
'div:last-child { margin-right: 0; }\n'+ | ||
'div:nth-child(3n) { margin-right: 0; float: right; }\n'+ | ||
'div:nth-child(3n + 1) { clear: both; }' | ||
); | ||
}); | ||
it('works on shortcut lost-column', () => { | ||
check( | ||
'div { padding: lost-vars(\'gutter-local\'); lost-column: 1/3 3 70px;}', | ||
'div { padding: 70px; width: calc(99.9% * 1/3 - (70px - 70px * 1/3));}\n'+ | ||
'div:nth-child(1n) { float: left; margin-right: 70px; clear: none;}\n'+ | ||
'div:last-child { margin-right: 0;}\n'+ | ||
'div:nth-child(3n) { margin-right: 0; float: right;}\n'+ | ||
'div:nth-child(3n + 1) { clear: both;}' | ||
); | ||
}); | ||
it('works on shortcut lost-waffle', () => { | ||
check( | ||
'div { padding: lost-vars(\'gutter-local\'); lost-waffle: 1/3 3 20px;}', | ||
'div { padding: 20px; width: calc(99.9% * 1/3 - (20px - 20px * 1/3)); height: calc(99.9% * 1/3 - (20px - 20px * 1/3));}\n'+ | ||
'div:nth-child(1n) { float: left; margin-right: 20px; margin-bottom: 20px; clear: none;}\n' + | ||
'div:last-child { margin-right: 0; margin-bottom: 0;}\n' + | ||
'div:nth-child(3n) { margin-right: 0;}\n' + | ||
'div:nth-child(3n + 1) { clear: both;}\n' + | ||
'div:nth-last-child(-n + 3) { margin-bottom: 0;}' | ||
); | ||
}); | ||
it('works on shortcut lost-offset', () => { | ||
check( | ||
'div { padding: lost-vars(\'gutter-local\'); lost-offset: 1/3 3 100px;}', | ||
'div { padding: 100px; margin-left: calc(99.9% * (-1/3 * -1) - (100px - 100px * (-1/3 * -1)) + 100px) !important;}' | ||
); | ||
}); | ||
it('works on shortcut lost-center', () => { | ||
check( | ||
'div { padding: lost-vars(\'gutter-local\'); lost-center: 400px 60px;}', | ||
'div { padding: 60px; max-width: 400px; margin-left: auto; margin-right: auto; padding-left: 60px; padding-right: 60px;}\n' + | ||
'div:before { content: \'\'; display: table;}\n' + | ||
'div:after { content: \'\'; display: table; clear: both;}' | ||
); | ||
}); | ||
it('works on shortcut lost-masonry-wrap', () => { | ||
check( | ||
'div { padding: lost-vars(\'gutter-local\'); lost-masonry-wrap: flex 60px;}', | ||
'div { padding: 60px; display: flex; flex-flow: row wrap; margin-left: -30px; margin-right: -30px;}' | ||
); | ||
}); | ||
it('works on shortcut lost-masonry-column', () => { | ||
check( | ||
'div { padding: lost-vars(\'gutter-local\'); lost-masonry-column: 1/3 15px;}', | ||
'div { padding: 15px; float: left; width: calc(99.9% * 1/3 - 15px); margin-left: 7.5px; margin-right: 7.5px;}' | ||
); | ||
}); | ||
it('works on shortcut lost-row', () => { | ||
check( | ||
'div { padding: lost-vars(\'gutter-local\'); lost-row: 1/3 70px;}', | ||
'div { padding: 70px; width: 100%; height: calc(99.9% * 1/3 - (70px - 70px * 1/3)); margin-bottom: 70px;}\n' + | ||
'div:last-child { margin-bottom: 0;}' | ||
); | ||
}); | ||
it('takes global if no local one is given', () => { | ||
check( | ||
'div { padding: lost-vars(\'gutter-local\'); lost-column: 1/3;}', | ||
'div { padding: 30px; width: calc(99.9% * 1/3 - (30px - 30px * 1/3));}\n' + | ||
'div:nth-child(1n) { float: left; margin-right: 30px; clear: none;}\n' + | ||
'div:last-child { margin-right: 0;}\n' + | ||
'div:nth-child(3n) { margin-right: 0; float: right;}\n' + | ||
'div:nth-child(3n + 1) { clear: both;}' | ||
); | ||
}); | ||
it('takes global if local one is invalid', () => { | ||
check( | ||
'div { padding: lost-vars(\'gutter-local\'); lost-row: 1/3 invalid;}', | ||
'div { padding: 30px; width: 100%; height: calc(99.9% * 1/3 - (30px - 30px * 1/3)); margin-bottom: 30px;}\n' + | ||
'div:last-child { margin-bottom: 0;}' | ||
); | ||
}); | ||
it('allows for multiple uses of the variable', () => { | ||
check( | ||
'div { padding: lost-vars(\'gutter-local\'); lost-column: 1/3 3 20px; margin-top: lost-vars(\'gutter-local\');}', | ||
'div { padding: 20px; width: calc(99.9% * 1/3 - (20px - 20px * 1/3)); margin-top: 20px;}\n' + | ||
'div:nth-child(1n) { float: left; margin-right: 20px; clear: none;}\n' + | ||
'div:last-child { margin-right: 0;}\n' + | ||
'div:nth-child(3n) { margin-right: 0; float: right;}\n' + | ||
'div:nth-child(3n + 1) { clear: both;}' | ||
); | ||
}); | ||
}); | ||
}); | ||
|