Skip to content

Commit

Permalink
Stylus: Rewrote the component entirely
Browse files Browse the repository at this point in the history
  • Loading branch information
Golmote committed Sep 1, 2015
1 parent 1446700 commit 7729728
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 68 deletions.
153 changes: 97 additions & 56 deletions components/prism-stylus.js
Original file line number Diff line number Diff line change
@@ -1,61 +1,102 @@
Prism.languages.stylus = {
'comment': {
pattern: /(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,
lookbehind: true
},
'keyword': /(px|r?em|ex|ch|vw|vh|vmin|vmax|deg|grad|rad|turn|m?s|k?Hz|dpi|dppx|dpcm)\b|\b(is|defined|not|isnt|and|or|unless|for|in)\b/g,
'atrule': /@[\w-]+(?=\s+\S+)/gi,
'url': /url\((["']?).*?\1\)/gi,
'variable': /^\s*([\w-]+)(?=\s*[+-\\]?=)/gm,
'string': /("|')(\\\n|\\?.)*?\1/g,
'important': /\B!important\b/gi,
'hexcode': /#[\da-f]{3,6}/gi,
'entity': /\\[\da-f]{1,8}/gi,
'number': /\d+\.?\d*%?/g,
'selector': [
{
pattern: /::?(after|before|first-letter|first-line|selection)/g,
alias: 'pseudo-element'
},{
pattern: /:(?:active|checked|disabled|empty|enabled|first-child|first-of-type|focus|hover|in-range|invalid|lang|last-child|last-of-type|link|not|nth-child|nth-last-child|nth-last-of-type|nth-of-type|only-of-type|only-child|optional|out-of-range|read-only|read-write|required|root|target|valid|visited)(?:\(.*\))?/g,
alias:'pseudo-class'
},{
pattern: /\[[\w-]+?\s*[*~$^|=]?(?:=\s*\S+)?\]/g,
(function (Prism) {
var inside = {
'url': /url\((["']?).*?\1\)/i,
'string': /("|')(?:[^\\\r\n]|\\(?:\r\n|[\s\S]))*?\1/,
'interpolation': null, // See below
'func': null, // See below
'important': /\B!(?:important|optional)\b/i,
'keyword': {
pattern: /(^|\s+)(?:(?:if|else|for|return|unless)(?=\s+|$)|@[\w-]+)/,
lookbehind: true
},
'hexcode': /#[\da-f]{3,6}/i,
'number': /\b\d+(?:\.\d+)?%?/,
'boolean': /\b(?:true|false)\b/,
'operator': [
// We want non-word chars around "-" because it is
// accepted in property names.
/~|[+!\/%<>?=]=?|[-:]=|\*[*=]?|\.+|&&|\|\||\B-\B|\b(?:and|in|is(?: a| defined| not|nt)?|not|or)\b/
],
'punctuation': /[{}()\[\];:,]/
};

inside['interpolation'] = {
pattern: /\{[^\r\n}:]+\}/,
alias: 'variable',
inside: Prism.util.clone(inside)
};
inside['func'] = {
pattern: /[\w-]+\([^)]*\).*/,
inside: {
'function': /^[^(]+/,
rest: Prism.util.clone(inside)
}
};

Prism.languages.stylus = {
'comment': {
pattern: /(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*)/,
lookbehind: true
},
'atrule-declaration': {
pattern: /(^\s*)@.+/m,
lookbehind: true,
inside: {
"attr-name":
{
pattern: /(\[)([\w-]+)(?=\s*[*~$^|=]{0,2})/g,
lookbehind: true
},
"punctuation": /\[|\]/g,
"operator": /[*~$^|=]/g,
"attr-value": {
pattern: /\S+/
},
},
alias: 'attr'
'atrule': /^@[\w-]+/,
rest: inside
}
},
{
pattern: /\.[a-z-]+/i,
alias: 'class'
'variable-declaration': {
pattern: /(^[ \t]*)[\w$-]+\s*.?=[ \t]*(?:(?:\{[^}]*\}|.+)|$)/m,
lookbehind: true,
inside: {
'variable': /^\S+/,
rest: inside
}
},
{
pattern: /#[a-z-]+/i,
alias: 'id'

'statement': {
pattern: /(^[ \t]*)(?:if|else|for|return|unless)[ \t]+.+/m,
lookbehind: true,
inside: {
keyword: /^\S+/,
rest: inside
}
},
{
pattern: /\b(html|head|title|base|link|meta|style|script|noscript|template|body|section|nav|article|aside|h[1-6]|header|footer|address|main|p|hr|pre|blockquote|ol|ul|li|dl|dt|dd|figure|figcaption|div|a|em|strong|small|s|cite|q|dfn|abbr|data|time|code|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|dbo|span|br|wbr|ins|del|image|iframe|embed|object|param|video|audio|source|track|canvas|map|area|sv|math|table|caption|colgroup|col|tbody|thead|tfoot|tr|td|th|form|fieldset|legeng|label|input|button|select|datalist|optgroup|option|textarea|keygen|output|progress|meter|details|summary|menuitem|menu)\b/g,
alias: 'tag'

// A property/value pair cannot end with a comma or a brace
// It cannot have indented content unless it ended with a semicolon
'property-declaration': {
pattern: /((?:^|\{)([ \t]*))(?:[\w-]|\{[^}\r\n]+\})+(?:\s*:\s*|[ \t]+)[^{\r\n]*(?:;|[^{\r\n,](?=$)(?!(\r?\n|\r)(?:\{|\2[ \t]+)))/m,
lookbehind: true,
inside: {
'property': {
pattern: /^[^\s:]+/,
inside: {
'interpolation': inside.interpolation
}
},
rest: inside
}
},
],
'property': [
/^\s*([a-z-]+)(?=\s+[\w\W]+|\s*:)(?!\s*\{|\r?\n)/mig,
{
pattern: /(\(\s*)([a-z-]+)(?=\s*:)/ig,
lookbehind: true
}
],
'function': /[-a-z0-9]+(?=\()/ig,
'punctuation': /[\{\};:]/g,
'operator': /[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|~|\^|%/g
}



// A selector can contain parentheses only as part of a pseudo-element
// It can span multiple lines.
// It must end with a comma or an accolade or have indented content.
'selector': {
pattern: /(^[ \t]*)(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\))?|\{[^}\r\n]+\})+)(?:(?:\r?\n|\r)(?:\1(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\))?|\{[^}\r\n]+\})+)))*(?:,$|\{|(?=(?:\r?\n|\r)(?:\{|\1[ \t]+)))/m,
lookbehind: true,
inside: {
'interpolation': inside.interpolation,
'punctuation': /[{},]/
}
},

'func': inside.func,
'string': inside.string,
'interpolation': inside.interpolation,
'punctuation': /[{}()\[\];:.]/
};
}(Prism));
2 changes: 1 addition & 1 deletion components/prism-stylus.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 3 additions & 7 deletions examples/prism-stylus.html
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ <h2>Full Example</h2>
body
font: 12px Helvetica, Arial, sans-serif

a.link > button#test, input[type=button], a:after()
a.link > button#test, input[type=button], a:after
-webkit-border-radius: 5px
-moz-border-radius: 5px
border-radius: 5px
Expand Down Expand Up @@ -81,9 +81,5 @@ <h2>Known failures</h2>
If a failure is listed here, it doesn’t mean it will never be fixed. This is more of a “known bugs” list, just with a certain type of bug.
</p>

<h3>Incorrect highlighting when tags like literals are used inside a string</h3>
<pre><code>add(a, b)
if a is a 'unit' and b is a 'unit'
a + b
else
(error 'a and b must be units!')</code></pre>
<h3>Comment-like substrings</h3>
<pre><code>"foo // bar";</code></pre>
10 changes: 6 additions & 4 deletions tests/languages/stylus+jade/stylus_inclusion.test
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,12 @@
[
["filter-stylus", [
["filter-name", ":stylus"],
["variable", "\r\n font-size"],
["operator", "="],
["number", "14"],
["keyword", "px"]
["variable-declaration", [
["variable", "font-size"],
["operator", "="],
["number", "14"],
"px"
]]
]]
]

Expand Down

0 comments on commit 7729728

Please sign in to comment.