/
index.coffee
103 lines (82 loc) · 6.91 KB
/
index.coffee
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
gutil = require 'gulp-util' # gulp-util is used to created well-formed plugin errors
through = require 'through2'
File = require 'vinyl'
gulpShadowPlugin = (options={})->
stream = through.obj (file, enc, cb)->
if file.isStream()
@emit 'error', new gutil.PluginError PLUGIN_NAME, "Streams aren't supported"
return cb()
if file.isBuffer()
fileName = file.relative.split(".")[0]
# Options
options.cssDest ||= ""
options.jsDest ||= ""
options.cssNamespace ||= ""
options.cssRegex ||= []
options.jsRegex ||= []
namespace = "#{fileName}-svg "
uniqueStr = Date.now().toString(36)
@push getJavascriptFile file, fileName, options.jsDest, options.jsRegex, namespace, uniqueStr
@push getCssFile file, fileName, options.cssDest, options.cssRegex, namespace, uniqueStr
cb()
return stream
## -------------------------------------------------- ##
## HELPERS ##
## -------------------------------------------------- ##
makeFile = (data, file, subDir, fileName)->
new File
cwd: file.cwd
base: file.base
path: file.base + subDir + fileName
contents: new Buffer data
# # # # # ##### ##### ###### ### ###### #######
# # # # # # # # # # # # # # # # #
# # # # # # # # # # # # # # #
# # # # # # # ##### # ###### # ###### #
# # ####### # # ####### # # # # # # #
# # # # # # # # # # # # # # # # #
##### # # # # # ##### ##### # # ### # #
getJavascriptFile = (file, fileName, jsPath, regexAr, namespace, uniqueStr) ->
data = file.contents.toString()
data = data.replace /<\?xml.+/g, '' # Strip out the xml header
data = data.replace /<!-- Gen.+/g, '' # Strip out the Adobe Generator comment
data = data.replace /<!DOC.+/g, '' # Strip out the DOCTYPE
data = data.replace /<style[\s\S]*<\/style>/g, '' # Strip out the generated css
data = data.replace /(class="st[0-9]+)/g, "$1_#{uniqueStr}" # Add the unique string to all the classes generated by illustrator. ex : class="st0" -> class="st0_3vf9sW"
data = data.replace /(SVGID_[0-9]+_)/g, "$1#{uniqueStr}" # Add the unique string to all the gradients. ex : <linearGradient id="SVGID_1_" -> <linearGradient id="SVGID_1_3vf9sW"
data = data.replace /<text(.+?(class="(.+?)"|<tspan)+?(.+?<tspan.+?class="(.+?)"))/g, '<text class="$3 $5" $1' ; # illustrator does this weird thing with tspans.. grab the class and attach it to the text element
data = data.replace /<tspan.+?>(.+?)<\/tspan>/g, '$1' # Get rid of the tspans
data = data.replace /(<g id=".+)_x60_(.+?)x(.+?)"/g, '$1" data-size="$2x$3"' # When we generate the svg, we also record the width/height as : layername`10x10 replace that with : id="layername" data-size="10x10"
data = data.replace /_x5F_/g, '_' # Replace _x5F_'s with _'s (illustrator's character for underscore)
data = data.replace /id="(.+)?_x[23]E_(.+?)"/g, 'id="$1" class="$2" ' # id / class id>class1,class2,class3
data = data.replace /class="([a-z0-9\-_]+)"\s+class="([a-z0-9\-_]+)"/g, 'class="$1 $2"' # If there are multiple classes, concat them into one
data = data.replace /id=""/g, '' # Delete empty ids
data = data.replace /(<g id.+")/g, "$1 class=\"#{namespace}\"" # Delete empty ids
data = data.replace /_x2C_/g, ' ' # Replace all commas between class with spaces
data = data.replace /class="(.+)_[0-9]+_(.*)"/g, 'class="$1 $2"' # Strip out superfluous underscores illustrator adds to duplicate layer names, but keep the illustrator generated class
data = data.replace /\/>\s+/g, '/>' # remove superfluous spaces
data = data.replace /\n|\r/g, '' # Strip out all returns
data = data.replace /<svg.+?>([\s\S]*)<\/svg>/g, '$1' # Strip out svg tags
data = data.replace /([\s\S]*)/g, "var pxSvgIconString = pxSvgIconString || ''; pxSvgIconString+='$1';" # Save just the svgs
# data = data.replace /(<symbol[\s\S]*symbol>)([\s\S]*)/g, "var pxSymbolString = pxSymbolString || ''; pxSymbolString+='$1';\nvar pxSvgIconString = pxSvgIconString || ''; pxSvgIconString+='$2';" # Save the symbols and svgs
for regex in regexAr
data = data.replace regex.pattern, regex.replace
return makeFile data, file, jsPath, fileName + '.js'
#### #### ####
# # # #
# #### ####
# # #
# # # # # #
#### #### ####
getCssFile = (file, fileName, cssPath, regexAr, namespace, uniqueStr) ->
data = file.contents.toString()
data = data.replace /(\.st[0-9]+)/g, "$1_#{uniqueStr}" # Add the unique string to all classes generated by illustrator. ex: .st1 -> .st1_3vf9sW
data = data.replace /(SVGID_[0-9]+_)/g, "$1#{uniqueStr}" # Add the unique string to all the gradients. ex : fill: url(SVGID_1_) -> fill: url(SVGID_1_3vf9sW)
data = data.replace /(font-size:[0-9\.]+);/g, '$1px;' # Add px to the css font sizes
data = data.replace /[\s\S]*<style type="text\/css">([\s\S]*)<\/style>[\s\S]*/g, '$1' # Strip out everything but the css (reminder [\s\S]* is js multiline equivalent to .* )
data = data.replace /enable-background:new\s+;/g, '' # Remove the enable-background:new data illustrator uses
data = data.replace /\s+(\.[a-z0-9]+?{.+)/g, ".#{namespace}$1\n" # prefix the tags with the namespace and add a hard return
for regex in regexAr
data = data.replace regex.pattern, regex.replace
return makeFile data, file, cssPath, fileName + '.css'
module.exports = gulpShadowPlugin