Telerik
/
dss
зеркало из https://github.com/telerik/dss.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Merge pull request #31 from darcyclarke/develop 

Fixed markup, sass, scss and less parsing
This commit is contained in:
Darcy Clarke 2013-03-14 20:18:33 -07:00
Родитель 275e2b6413 da45522be0
Коммит d292863e5a
7 изменённых файлов: 294 добавлений и 199 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

67
example/bar.css
Просмотреть файл

@ -1,67 +0,0 @@
/**
* @name Button
* @description Your standard form button.
*
* @state :hover - Highlights when hovering.
* @state :disabled - Dims the button when disabled.
* @state .primary - Indicates button is the primary action.
* @state .smaller - A smaller button
*
* @link http:://google.com
*
* @version 3.1.0
* @link http://shapechanger.mycafecommerce.com/images/fc474a0165/cache/images/fc474a0165/site/products/proportion/ridiculously%20amazing%20day_w370_h352/ridiculously%20amazing%20day_09130255.jpg
*
* @markup
* <button>This is a button</button>
*/
button {
padding: 5px 15px;
line-height: normal;
font-family: "Helvetica Neue", Helvetica;
font-size: 12px;
font-weight: bold;
color: #666;
text-shadow: 0 1px rgba(255, 255, 255, 0.9);
border-radius: 3px;
border: 1px solid #ddd;
border-bottom-color: #bbb;
background: #f5f5f5;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='$start', endColorstr='$end');
background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
background: -moz-linear-gradient(top, #f5f5f5, #e5e5e5);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
cursor: pointer;
}
/**
* @name Anchor Tag
* @description Your standard link tag.
*
* @state :hover - Background changes when hovering.
* @state .active - Highlights link when active.
*
* @markup
* <a href="#">This is a link</a>
*/
a {
text-decoration: none;
color: red;
padding: 10px;
display: inline-block;
background: #efefef;
bored-radius: 5px;
}
/** Hover */
a:hover {
background: #cccccc;
}
/** Active */
a:active,
a.active {
background: green;
}

39
example/foo.css
Просмотреть файл

@ -1,4 +1,3 @@
/**
* @name Button
* @description Your standard form button.
@ -7,11 +6,10 @@
* @state :disabled - Dims the button when disabled.
* @state .primary - Indicates button is the primary action.
* @state .smaller - A smaller button
*
*
* @markup
* <button>This is a button</button>
*/
button {
padding: 5px 15px;
line-height: normal;
@ -31,41 +29,6 @@ button {
cursor: pointer;
}
/** Primary */
button.primary, button.primary:hover {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
border-color: #74bb5a;
border-bottom-color: #509338;
background: #8add6d;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='$start', endColorstr='$end');
background: -webkit-gradient(linear, left top, left bottom, from(#8add6d), to(#60b044));
background: -moz-linear-gradient(top, #8add6d, #60b044);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
/** Smaller */
button.smaller {
font-size: 11px;
padding: 4px 7px;
}
/** Hover */
button:hover {
color: #337797;
background: #f0f7fa;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='$start', endColorstr='$end');
background: -webkit-gradient(linear, left top, left bottom, from(#f0f7fa), to(#d8eaf2));
background: -moz-linear-gradient(top, #f0f7fa, #d8eaf2);
border-color: #cbe3ee;
border-bottom-color: #97c7dd;
}
/** Disabled */
button:disabled {
opacity: 0.5;
}
/**
* @name Anchor Tag
* @description Your standard link tag.

60
example/foo.less Normal file
Просмотреть файл

@ -0,0 +1,60 @@
//
// @name Button
// @description Your standard form button.
//
// @state :hover - Highlights when hovering.
// @state :disabled - Dims the button when disabled.
// @state .primary - Indicates button is the primary action.
// @state .smaller - A smaller button
//
// @markup
// <button>This is a button</button>
//
button {
padding: 5px 15px;
line-height: normal;
font-family: "Helvetica Neue", Helvetica;
font-size: 12px;
font-weight: bold;
color: #666;
text-shadow: 0 1px rgba(255, 255, 255, 0.9);
border-radius: 3px;
border: 1px solid #ddd;
border-bottom-color: #bbb;
background: #f5f5f5;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='$start', endColorstr='$end');
background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
background: -moz-linear-gradient(top, #f5f5f5, #e5e5e5);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
cursor: pointer;
}
//
// @name Anchor Tag
// @description Your standard link tag.
//
// @state :hover - Background changes when hovering.
// @state .active - Highlights link when active.
//
// @markup
// <a href="#">This is a link</a>
//
a {
text-decoration: none;
color: red;
padding: 10px;
display: inline-block;
background: #efefef;
bored-radius: 5px;
}
// Hover
a:hover {
background: #cccccc;
}
// Active
a:active,
a.active {
background: green;
}

60
example/foo.sass Normal file
Просмотреть файл

@ -0,0 +1,60 @@
//
// @name Button
// @description Your standard form button.
//
// @state :hover - Highlights when hovering.
// @state :disabled - Dims the button when disabled.
// @state .primary - Indicates button is the primary action.
// @state .smaller - A smaller button
//
// @markup
// <button>This is a button</button>
//
button {
padding: 5px 15px;
line-height: normal;
font-family: "Helvetica Neue", Helvetica;
font-size: 12px;
font-weight: bold;
color: #666;
text-shadow: 0 1px rgba(255, 255, 255, 0.9);
border-radius: 3px;
border: 1px solid #ddd;
border-bottom-color: #bbb;
background: #f5f5f5;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='$start', endColorstr='$end');
background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
background: -moz-linear-gradient(top, #f5f5f5, #e5e5e5);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
cursor: pointer;
}
//
// @name Anchor Tag
// @description Your standard link tag.
//
// @state :hover - Background changes when hovering.
// @state .active - Highlights link when active.
//
// @markup
// <a href="#">This is a link</a>
//
a {
text-decoration: none;
color: red;
padding: 10px;
display: inline-block;
background: #efefef;
bored-radius: 5px;
}
// Hover
a:hover {
background: #cccccc;
}
// Active
a:active,
a.active {
background: green;
}

60
example/foo.scss Normal file
Просмотреть файл

@ -0,0 +1,60 @@
//
// @name Button
// @description Your standard form button.
//
// @state :hover - Highlights when hovering.
// @state :disabled - Dims the button when disabled.
// @state .primary - Indicates button is the primary action.
// @state .smaller - A smaller button
//
// @markup
// <button>This is a button</button>
//
button {
padding: 5px 15px;
line-height: normal;
font-family: "Helvetica Neue", Helvetica;
font-size: 12px;
font-weight: bold;
color: #666;
text-shadow: 0 1px rgba(255, 255, 255, 0.9);
border-radius: 3px;
border: 1px solid #ddd;
border-bottom-color: #bbb;
background: #f5f5f5;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='$start', endColorstr='$end');
background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
background: -moz-linear-gradient(top, #f5f5f5, #e5e5e5);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
cursor: pointer;
}
//
// @name Anchor Tag
// @description Your standard link tag.
//
// @state :hover - Background changes when hovering.
// @state .active - Highlights link when active.
//
// @markup
// <a href="#">This is a link</a>
//
a {
text-decoration: none;
color: red;
padding: 10px;
display: inline-block;
background: #efefef;
bored-radius: 5px;
}
// Hover
a:hover {
background: #cccccc;
}
// Active
a:active,
a.active {
background: green;
}

203
tasks/DSS.js
Просмотреть файл

@ -87,24 +87,19 @@ module.exports = function(grunt) {
};
/*
* Check if object is empty
* Check the size of an object
*
* @param (Object) The object to check if it's empty
* @param (Object) The object to check
* @return (Boolean) The result of the test
*/
_dss.isEmpty = function(obj){
if (obj === null || obj === undefined)
return true;
if (obj.length && obj.length > 0)
return false;
if (obj.length === 0)
return true;
_dss.size = function(obj){
var size = 0;
for(var key in obj){
if(Object.prototype.hasOwnProperty.call(obj, key))
return false;
size++;
}
return true;
}
return size;
};
/*
* Iterate over an object
@ -155,6 +150,44 @@ module.exports = function(grunt) {
return str.replace(/\s{2,}/g, def);
};
/*
* Normalizes the comment block to ignore any consistent preceding
* whitespace. Consistent means the same amount of whitespace on every line
* of the comment block. Also strips any whitespace at the start and end of
* the whole block.
*
* @param (String) Text block
* @return (String) A cleaned up text block
*/
_dss.normalize = function(text_block){
if(options.preserve_whitespace)
return text_block;
// Strip out any preceding [whitespace]* that occur on every line. Not
// the smartest, but I wonder if I care.
text_block = text_block.replace(/^(\s*\*+)/, '');
// Strip consistent indenting by measuring first line's whitespace
var indent_size = false;
var unindented = (function(lines){
return lines.map(function(line){
var preceding_whitespace = line.match(/^\s*/)[0].length;
if(!indent_size)
indent_size = preceding_whitespace;
if(line == ''){
return '';
} else if(indent_size <= preceding_whitespace && indent_size > 0){
return line.slice(indent_size, (line.length - 1));
} else {
return line;
}
}).join("\n");
})(text_block.split("\n"));
return _dss.trim(text_block);
};
/*
* Takes a file and extracts comments from it.
*
@ -172,6 +205,7 @@ module.exports = function(grunt) {
current_block = '',
inside_single_line_block = false,
inside_multi_line_block = false,
last_line = '',
start = "{start}",
end = "{/end}",
_parsed = false,
@ -190,23 +224,27 @@ module.exports = function(grunt) {
* @param (String) line to parse/check
* @return (Boolean) result of parsing
*/
var parser = function(block, lineNum, lines, line){
var parts = line.replace(/.*@/, ''),
i = parts.indexOf(' '),
var parser = function(temp, line, block, file){
var indexer = function(str, find){
return (str.indexOf(find) > 0) ? str.indexOf(find) : false;
},
parts = line.replace(/.*@/, ''),
i = indexer(parts, ' ') || indexer(parts, '\n') || indexer(parts, '\r') || parts.length,
name = _dss.trim(parts.substr(0, i)),
description = _dss.trim(parts.substr(i)),
variable = _dss.parsers[name];
variable = _dss.parsers[name],
index = block.indexOf(line);
line = {};
line[name] = (variable) ? variable.apply(null, [lineNum, description, lines]) : '';
line[name] = (variable) ? variable.apply(null, [index, description, block, file]) : '';
if(block[name]){
if(!_dss.isArray(block[name]))
block[name] = [ block[name] ];
block[name].push(line[name]);
if(temp[name]){
if(!_dss.isArray(temp[name]))
temp[name] = [ temp[name] ];
temp[name].push(line[name]);
} else {
block = _dss.extend(block, line);
temp = _dss.extend(temp, line);
}
return block;
return temp;
};
/*
@ -270,44 +308,6 @@ module.exports = function(grunt) {
return cleaned.replace(/\*\//, '');
};
/*
* Normalizes the comment block to ignore any consistent preceding
* whitespace. Consistent means the same amount of whitespace on every line
* of the comment block. Also strips any whitespace at the start and end of
* the whole block.
*
* @param (String) Text block
* @return (String) A cleaned up text block
*/
var normalize = function(text_block){
if(options.preserve_whitespace)
return text_block;
// Strip out any preceding [whitespace]* that occur on every line. Not
// the smartest, but I wonder if I care.
text_block = text_block.replace(/^(\s*\*+)/, '');
// Strip consistent indenting by measuring first line's whitespace
var indent_size = false;
var unindented = (function(lines){
return lines.map(function(line){
var preceding_whitespace = line.match(/^\s*/)[0].length;
if(!indent_size)
indent_size = preceding_whitespace;
if(line == ''){
return '';
} else if(indent_size <= preceding_whitespace && indent_size > 0){
return line.slice(indent_size, (line.length - 1));
} else {
return line;
}
}).join("\n");
})(text_block.split("\n"));
return _dss.trim(text_block);
};
lines = lines + '';
lines.split(/\n/).forEach(function(line){
@ -318,7 +318,7 @@ module.exports = function(grunt) {
if(single_line_comment(line)){
parsed = parse_single_line(line);
if(inside_single_line_block){
current_block += start + parsed + end;
current_block += '\n' + parsed;
} else {
current_block = parsed;
inside_single_line_block = true;
@ -326,13 +326,10 @@ module.exports = function(grunt) {
}
// Parse multi-line comments
if(start_multi_line_comment(line)){
current_block += start;
}
if(start_multi_line_comment(line) || inside_multi_line_block){
parsed = parse_multi_line(line);
if(inside_multi_line_block){
current_block += parsed;
current_block += '\n' + parsed;
} else {
current_block += parsed;
inside_multi_line_block = true;
@ -342,41 +339,45 @@ module.exports = function(grunt) {
// End a multi-line block
if(end_multi_line_comment(line)){
inside_multi_line_block = false;
current_block += end;
}
// Store current block if done
if(!single_line_comment(line) || !inside_multi_line_block){
if(!single_line_comment(line) && !inside_multi_line_block){
if(current_block){
_blocks.push(current_block);
_blocks.push(_dss.normalize(current_block));
}
inside_single_line_block = false;
current_block = '';
last_line = '';
}
});
// Done first pass
_parsed = true;
// Create new blocks with custom parsing
_parsed = true;
_blocks.forEach(function(block, index){
_blocks.forEach(function(block){
// Detect if we're done
var check = block.match(end, 'gi');
// Remove extra whitespace
block = block.split('\n').filter(function(line){
return (_dss.trim(_dss.normalize(line)));
}).join('\n');
// Detect if we need to add to temporary array
block = normalize(block);
if(_dss.detect(block))
temp = parser(temp, index, lines, block);
// Push into blocks if we're done
if(check){
if(!_dss.isEmpty(temp))
blocks.push(temp);
temp = {};
}
});
// Split block into lines
block.split('\n').forEach(function(line){
if(_dss.detect(line))
temp = parser(temp, _dss.normalize(line), block, lines);
});
// Push to blocks if object isn't empty
if(_dss.size(temp))
blocks.push(temp);
temp = {};
});
// Execute callback with filename and blocks
callback({ file: options.file, blocks: blocks });
};
@ -454,17 +455,17 @@ module.exports = function(grunt) {
});
// Describe parsing a name
dss.parser('name', function(i, line, block){
dss.parser('name', function(i, line, block, file){
return line;
});
// Describe parsing a description
dss.parser('description', function(i, line, block){
dss.parser('description', function(i, line, block, file){
return line;
});
// Describe parsing a state
dss.parser('state', function(i, line, block){
dss.parser('state', function(i, line, block, file){
var state = line.split('-');
return {
name: (state[0]) ? dss.trim(state[0].replace('.', ' ').replace(':', ' pseudo-class-')) : '',
@ -473,11 +474,29 @@ module.exports = function(grunt) {
});
// Describe parsing markup
dss.parser('markup', function(i, line, block){
var markup = block.splice(i, block.length).join('');
dss.parser('markup', function(i, line, block, file){
var markup = block.split('').splice(i, block.length).join('');
markup = (function(markup){
var ret = [];
markup.split('\n').forEach(function(line){
var pattern = '*',
index = line.indexOf(pattern);
if(index > 0 && index < 10)
line = line.split('').splice((index + pattern.length), line.length).join('');
line = dss.trim(line);
if(line && line != '@markup')
ret.push(line);
});
return ret.join('');
})(markup);
return {
example: markup,
escaped: String(markup).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
escaped: markup.replace(/</g, '&lt;').replace(/>/g, '&gt;')
};
});

4
template/index.mustache
Просмотреть файл

@ -48,7 +48,7 @@
{{#markup}}
<div class="example">
{{example}}
{{{example}}}
</div>
{{/markup}}
@ -63,7 +63,7 @@
{{#markup}}
<pre class="markup">
{{markup.escaped}}
{{{markup.escaped}}}
</pre>
{{/markup}}