graphite-sass 0.4.1 → 0.5.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +24 -59
- data/lib/graphite.rb +4 -177
- data/lib/graphite/importer.rb +207 -0
- data/lib/graphite/monkeypatch.rb +19 -0
- data/lib/graphite/version.rb +4 -0
- metadata +18 -31
- data/stylesheets/_graphite.scss +0 -170
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: d6dfdf2ba17c3ce27f5996b96139007e09168240
|
4
|
+
data.tar.gz: 53479525087dbf9bb1b462e34a73388e517d6b00
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 92025a770a52d24183e45870a7cebe407bbc9ec4bd3fe16c0acf42f4aadbfd36763b43838c6de227fe7bf8797e183a30b2f9d81c7065848eeaf591e6ff43f58a
|
7
|
+
data.tar.gz: cb5636454adcb5cb6fe7dc379a396b0b05f578910cce74aee27d5260722c5f044b3dc3023eb320387641e25dc0b37e3a6d6e44145bb750290909836a8fdddd20
|
data/README.md
CHANGED
@@ -1,16 +1,16 @@
|
|
1
1
|
# Graphite [![Gem Version](https://badge.fury.io/rb/graphite-sass.svg)](http://badge.fury.io/rb/graphite-sass)
|
2
2
|
|
3
|
-
Graphite
|
3
|
+
Graphite allows you to import fonts into your stylesheet in a syntax similar to Google Fonts. Quick and simple.
|
4
4
|
|
5
5
|
## Requirements
|
6
6
|
|
7
|
-
* Sass `~> 3.
|
7
|
+
* Sass `~> 3.2.0`
|
8
8
|
|
9
9
|
## Installation
|
10
10
|
|
11
11
|
1. `gem install graphite-sass` / `bower install graphite-sass`
|
12
12
|
2. Add `require "graphite"` to your `config.rb`
|
13
|
-
3. Import into your stylesheet with `@import "graphite"
|
13
|
+
3. Import into your stylesheet with `@import "graphite"`
|
14
14
|
|
15
15
|
## Documentation
|
16
16
|
|
@@ -39,87 +39,56 @@ In order for Graphite to successfully import your fonts, please follow this conv
|
|
39
39
|
|
40
40
|
> ###### name: \<string\>
|
41
41
|
> ###### weight: \<100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900\>
|
42
|
-
> ###### style: \<normal | italic\>
|
42
|
+
> ###### style: \<normal | italic\> (defaults to normal if blank)
|
43
43
|
> ###### extension: \<woff | woff2 | ttf | eot | svg | otf\>
|
44
44
|
|
45
45
|
#### name-weight-style.extension
|
46
46
|
|
47
47
|
Example,
|
48
|
-
`helvetica-neue-400-italic.woff`, `helvetica-neue-400-normal.ttf`, `helvetica-neue-100
|
49
|
-
|
50
|
-
### Configuration
|
51
|
-
|
52
|
-
These global variables can be changed according to your needs.
|
53
|
-
|
54
|
-
```scss
|
55
|
-
// Filename seperator
|
56
|
-
// ----
|
57
|
-
$graphite_seperator: "-" !global;
|
58
|
-
|
59
|
-
// Prepend directory path
|
60
|
-
// ----
|
61
|
-
$graphite_chdir: ".." !global;
|
62
|
-
```
|
63
|
-
|
64
|
-
`$graphite_seperator` is used for the filename in the output file path. When the font gets parsed within Graphite and outputted into the `url(...)`,
|
65
|
-
it will use this seperator variable for you guessed it, seperating the variabiles within your font's filename when rebuilding the parsed font's name.
|
66
|
-
`$graphite_chdir` is used in the output file path to your font folder _from_ your stylesheet folder. For example, the path `url("../fonts/helvetica[...]")`
|
67
|
-
has the `$graphite_chdir` variable (`".."`) placed at the beginning of the path. You can edit these variables according to your project needs, though these are
|
68
|
-
the recommended settings.
|
48
|
+
`helvetica-neue-400-italic.woff`, `helvetica-neue-400-normal.ttf`, `helvetica-neue-100.svg`
|
69
49
|
|
70
50
|
### Usage
|
71
51
|
|
72
52
|
```scss
|
73
|
-
|
74
|
-
|
75
|
-
// @param $dir [string] : directory to import fonts
|
76
|
-
// @param $legacy-ie [bool] : support legacy ie
|
77
|
-
// ----
|
78
|
-
// @return $fonts [map] : imports fonts from $dir and creates
|
79
|
-
// a $var for each font family containing [string] name
|
80
|
-
|
81
|
-
@include graphite("/fonts", true);
|
53
|
+
@import "fonts/lato?styles=200,700,200-italic,700-italic";
|
54
|
+
@import "fonts/helvetica-neue?styles=500";
|
82
55
|
```
|
83
56
|
|
84
|
-
Graphite will also create a local Sass variable for each font-family, so with the example above we would have a `$helvetica-neue: "helvetica-neue"` variable to use within the stylesheet, such as for a font stack. Graphite does not handle creating font stacks; that is left up to you. Graphite will import the correct filetypes for each font-family. This check is run on a family-to-family basis, and not a font-to-font basis; be sure to include the same filetypes for each font in your font-family folder to avoid any 404 request errors.
|
85
|
-
|
86
57
|
### Output
|
87
58
|
|
88
59
|
The output is similar to what Google Fonts does with their CSS. All fonts share the same font-family, and each fonts style and weight is assigned appropriately.
|
89
60
|
|
90
61
|
```scss
|
91
|
-
$helvetica-neue: "helvetica-neue";
|
92
|
-
|
93
62
|
@font-face {
|
94
|
-
font-family: "
|
63
|
+
font-family: "lato";
|
95
64
|
font-weight: 200;
|
96
|
-
font-style:
|
97
|
-
src: url("
|
98
|
-
src: url("../fonts/helvetica-neue/helvetica-neue-200-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/helvetica-neue/helvetica-neue-200-italic.woff") format("woff"), url("../fonts/helvetica-neue/helvetica-neue-200-italic.ttf") format("truetype"), url("../fonts/helvetica-neue/helvetica-neue-200-italic.svg#helvetica-neue") format("svg");
|
65
|
+
font-style: normal;
|
66
|
+
src: url("fonts/lato/lato-200.ttf") format("truetype");
|
99
67
|
}
|
100
|
-
|
101
68
|
@font-face {
|
102
|
-
font-family: "
|
103
|
-
font-weight:
|
69
|
+
font-family: "lato";
|
70
|
+
font-weight: 700;
|
104
71
|
font-style: normal;
|
105
|
-
src: url("
|
106
|
-
src: url("../fonts/helvetica-neue/helvetica-neue-200-normal.eot?#iefix") format("embedded-opentype"), url("../fonts/helvetica-neue/helvetica-neue-200-normal.woff") format("woff"), url("../fonts/helvetica-neue/helvetica-neue-200-normal.ttf") format("truetype"), url("../fonts/helvetica-neue/helvetica-neue-200-normal.svg#helvetica-neue") format("svg");
|
72
|
+
src: url("fonts/lato/lato-700.ttf") format("truetype");
|
107
73
|
}
|
108
|
-
|
109
74
|
@font-face {
|
110
|
-
font-family: "
|
75
|
+
font-family: "lato";
|
76
|
+
font-weight: 200;
|
77
|
+
font-style: italic;
|
78
|
+
src: url("fonts/lato/lato-200-italic.ttf") format("truetype");
|
79
|
+
}
|
80
|
+
@font-face {
|
81
|
+
font-family: "lato";
|
111
82
|
font-weight: 700;
|
112
83
|
font-style: italic;
|
113
|
-
src: url("
|
114
|
-
src: url("../fonts/helvetica-neue/helvetica-neue-700-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/helvetica-neue/helvetica-neue-700-italic.woff") format("woff"), url("../fonts/helvetica-neue/helvetica-neue-700-italic.ttf") format("truetype"), url("../fonts/helvetica-neue/helvetica-neue-700-italic.svg#helvetica-neue") format("svg");
|
84
|
+
src: url("fonts/lato/lato-700-italic.ttf") format("truetype");
|
115
85
|
}
|
116
|
-
|
117
86
|
@font-face {
|
118
87
|
font-family: "helvetica-neue";
|
119
|
-
font-weight:
|
88
|
+
font-weight: 500;
|
120
89
|
font-style: normal;
|
121
|
-
src: url("
|
122
|
-
src: url("
|
90
|
+
src: url("fonts/helvetica-neue/helvetica-neue-500.eot");
|
91
|
+
src: url("fonts/helvetica-neue/helvetica-neue-500.eot?#iefix") format("embedded-opentype"), url("fonts/helvetica-neue/helvetica-neue-500.woff") format("woff"), url("fonts/helvetica-neue/helvetica-neue-500.ttf") format("truetype"), url("fonts/helvetica-neue/helvetica-neue-500.svg#helvetica-neue") format("svg");
|
123
92
|
}
|
124
93
|
```
|
125
94
|
|
@@ -127,10 +96,6 @@ $helvetica-neue: "helvetica-neue";
|
|
127
96
|
|
128
97
|
[Ezekiel Gabrielse](http://ezekielg.com)
|
129
98
|
|
130
|
-
## Credits
|
131
|
-
|
132
|
-
[Scott Davis, for creating Sassy Hash](https://github.com/scottdavis/sassy_hash)
|
133
|
-
|
134
99
|
## License
|
135
100
|
|
136
101
|
Graphite is available under the [MIT](http://opensource.org/licenses/MIT) license.
|
data/lib/graphite.rb
CHANGED
@@ -1,5 +1,7 @@
|
|
1
1
|
require 'sass'
|
2
|
-
|
2
|
+
require_relative "graphite/version"
|
3
|
+
require_relative "graphite/importer"
|
4
|
+
require_relative "graphite/monkeypatch"
|
3
5
|
|
4
6
|
base_directory = File.expand_path(File.join(File.dirname(__FILE__), '..'))
|
5
7
|
graphite_stylesheets_path = File.join(base_directory, 'stylesheets')
|
@@ -11,180 +13,5 @@ else
|
|
11
13
|
end
|
12
14
|
|
13
15
|
module Graphite
|
14
|
-
|
15
|
-
DATE = "2014-08-18"
|
16
|
-
end
|
17
|
-
|
18
|
-
# Graphite : import fonts from font_dir into map
|
19
|
-
# ----------------------------------------------------------------------------------------------------
|
20
|
-
# @param font_dir [string] : path to top-level font directory
|
21
|
-
# @param legacy_ie [bool] : support legacy versions of ie
|
22
|
-
# @param debug [bool] : print debug information
|
23
|
-
# ----------------------------------------------------------------------------------------------------
|
24
|
-
# @return map of fonts, variable for each font
|
25
|
-
|
26
|
-
module Sass::Script::Functions
|
27
|
-
def graphite(font_dir, legacy_ie, debug)
|
28
|
-
|
29
|
-
def opts(value)
|
30
|
-
value.options = options
|
31
|
-
value
|
32
|
-
end
|
33
|
-
|
34
|
-
# Set Sass variable to environment
|
35
|
-
def set_sass_var(literal, name = literal)
|
36
|
-
environment.global_env.set_var("#{name}", Sass::Script::Value::String.new(literal))
|
37
|
-
end
|
38
|
-
|
39
|
-
# Get weights and styles for passed font
|
40
|
-
def font_has_weights?(font)
|
41
|
-
# Keep hash of weights found
|
42
|
-
weights = {}
|
43
|
-
# Valid weights
|
44
|
-
valid_weights = ["100", "200", "300", "400", "500", "600", "700", "800", "900"]
|
45
|
-
# valid styles
|
46
|
-
valid_styles = ["normal", "italic"]
|
47
|
-
# Get weights for font
|
48
|
-
valid_weights.each do | weight |
|
49
|
-
# Check filename for weight
|
50
|
-
if font.include?(weight)
|
51
|
-
# Get styles for weight
|
52
|
-
styles = []
|
53
|
-
# Check filename for style
|
54
|
-
valid_styles.each do | style |
|
55
|
-
# Save to styles
|
56
|
-
styles << style if font.include?(style)
|
57
|
-
end
|
58
|
-
# Keep hash of each weight
|
59
|
-
w = {
|
60
|
-
weight => {
|
61
|
-
"styles" => styles
|
62
|
-
}
|
63
|
-
}
|
64
|
-
# Merge weight into weights hash
|
65
|
-
weights.merge!(w)
|
66
|
-
end
|
67
|
-
end
|
68
|
-
# Return weights
|
69
|
-
return weights
|
70
|
-
end
|
71
|
-
|
72
|
-
# Add style to passed weight
|
73
|
-
def set_font_style(font, style)
|
74
|
-
font.merge!(style) do | k, o, n |
|
75
|
-
# Merge styles
|
76
|
-
if o.is_a?(Hash)
|
77
|
-
# Get key => value of old map
|
78
|
-
o.each do | key, value |
|
79
|
-
# Does new map have key?
|
80
|
-
if n.has_key?(key)
|
81
|
-
# Then concat values
|
82
|
-
n.each do | k, v |
|
83
|
-
value.concat(v)
|
84
|
-
end
|
85
|
-
end
|
86
|
-
end
|
87
|
-
end
|
88
|
-
end
|
89
|
-
end
|
90
|
-
|
91
|
-
# Check if passed dir has fonts
|
92
|
-
def dir_has_fonts?(dir, debug)
|
93
|
-
# Keep hash of all fonts found
|
94
|
-
fonts = {}
|
95
|
-
# Valid font extensions
|
96
|
-
valid_extensions = ["eot", "otf", "woff2", "woff", "ttf", "svg"]
|
97
|
-
|
98
|
-
if File.exists?(dir)
|
99
|
-
# Print debug
|
100
|
-
puts "Fonts directory found: #{dir}" if debug
|
101
|
-
# Change dir to font_dir
|
102
|
-
Dir.chdir(dir) do
|
103
|
-
# Search each dir
|
104
|
-
Dir.glob("**/") do | d |
|
105
|
-
# Check if dir has fonts
|
106
|
-
Dir.chdir(d) do
|
107
|
-
path = d
|
108
|
-
# Clean up font name
|
109
|
-
family = d.delete("/")
|
110
|
-
# Print debug
|
111
|
-
puts "Font family found: #{family}" if debug
|
112
|
-
# Get matched extensions
|
113
|
-
extensions = []
|
114
|
-
# Get matched weights and styles
|
115
|
-
variations = {}
|
116
|
-
# Check dir for matching extensions
|
117
|
-
valid_extensions.each do | ext |
|
118
|
-
Dir.glob("*.#{ext}") do | filename |
|
119
|
-
puts "Font found: #{filename}" if debug
|
120
|
-
# Check if filename has weights
|
121
|
-
w = font_has_weights?(filename.to_s)
|
122
|
-
# Merge weights and styles
|
123
|
-
set_font_style(variations, w)
|
124
|
-
# Save extensions that don't already exist
|
125
|
-
extensions << ext if extensions.include?(ext) === false
|
126
|
-
end
|
127
|
-
end
|
128
|
-
# Build out font hash
|
129
|
-
font = {
|
130
|
-
"#{family}" => {
|
131
|
-
"path" => path,
|
132
|
-
"extensions" => extensions,
|
133
|
-
"weights" => variations
|
134
|
-
}
|
135
|
-
}
|
136
|
-
# Merge into fonts hash
|
137
|
-
fonts = fonts.merge(font)
|
138
|
-
# Set Sass variable for font family
|
139
|
-
set_sass_var(family)
|
140
|
-
end
|
141
|
-
end
|
142
|
-
end
|
143
|
-
else
|
144
|
-
puts "Directory was not found: #{dir}. Aborting mission."
|
145
|
-
end
|
146
|
-
# Return hash of all fonts
|
147
|
-
return fonts
|
148
|
-
end
|
149
|
-
|
150
|
-
# Assert types
|
151
|
-
assert_type font_dir, :String, :font_dir
|
152
|
-
assert_type legacy_ie, :Bool, :legacy_ie
|
153
|
-
assert_type debug, :Bool, :debug
|
154
|
-
|
155
|
-
# Cast to bool
|
156
|
-
legacy_ie = legacy_ie.to_bool
|
157
|
-
debug = debug.to_bool
|
158
|
-
|
159
|
-
# Define root path up to current working directory
|
160
|
-
root = Dir.pwd
|
161
|
-
|
162
|
-
# Clean up font_dir
|
163
|
-
font_dir = unquote(font_dir).to_s
|
164
|
-
|
165
|
-
# Define dir path
|
166
|
-
dir_path = root
|
167
|
-
dir_path += font_dir
|
168
|
-
|
169
|
-
# Normalize windows path
|
170
|
-
dir_path = Sass::Util.pathname(dir_path)
|
171
|
-
|
172
|
-
# Create Sass variable for font path
|
173
|
-
set_sass_var(font_dir, 'graphite_font_dir')
|
174
|
-
|
175
|
-
# Font naming convention : name-weight-variant.extension
|
176
|
-
fonts = {
|
177
|
-
"legacy-ie" => legacy_ie,
|
178
|
-
}
|
179
|
-
|
180
|
-
# Get all fonts in dir
|
181
|
-
f = dir_has_fonts?(dir_path, debug)
|
182
|
-
|
183
|
-
# Merge results into fonts
|
184
|
-
fonts = fonts.merge(f)
|
185
|
-
|
186
|
-
# Convert hash to map, return
|
187
|
-
Sass::Script::Value::Map.new(SassyHash[fonts])
|
188
|
-
end
|
189
|
-
declare :graphite, [:font_dir]
|
16
|
+
Sass::Script::Functions.send(:include, Graphite)
|
190
17
|
end
|
@@ -0,0 +1,207 @@
|
|
1
|
+
require "sass"
|
2
|
+
require "cgi/core"
|
3
|
+
|
4
|
+
module Graphite
|
5
|
+
class Importer < Sass::Importers::Filesystem
|
6
|
+
|
7
|
+
FONT_EXTENSIONS = [
|
8
|
+
"eot",
|
9
|
+
"woff2",
|
10
|
+
"woff",
|
11
|
+
"otf",
|
12
|
+
"ttf",
|
13
|
+
"svg"
|
14
|
+
]
|
15
|
+
|
16
|
+
FONT_WEIGHTS = [
|
17
|
+
"100",
|
18
|
+
"200",
|
19
|
+
"300",
|
20
|
+
"400",
|
21
|
+
"500",
|
22
|
+
"600",
|
23
|
+
"700",
|
24
|
+
"800",
|
25
|
+
"900"
|
26
|
+
]
|
27
|
+
|
28
|
+
FONT_STYLES = [
|
29
|
+
"normal",
|
30
|
+
"italic",
|
31
|
+
"oblique"
|
32
|
+
]
|
33
|
+
|
34
|
+
def find(name, options)
|
35
|
+
if options[:filename]
|
36
|
+
if name.include? "?styles="
|
37
|
+
find_fonts(name, options[:filename], options)
|
38
|
+
else
|
39
|
+
super(name, options)
|
40
|
+
end
|
41
|
+
else
|
42
|
+
nil
|
43
|
+
end
|
44
|
+
end
|
45
|
+
|
46
|
+
def key(name, options)
|
47
|
+
["Graphite:" + File.dirname(File.expand_path(name)), File.basename(name)]
|
48
|
+
end
|
49
|
+
|
50
|
+
def to_s
|
51
|
+
"Graphite::Importer"
|
52
|
+
end
|
53
|
+
|
54
|
+
protected
|
55
|
+
|
56
|
+
def find_fonts(name, base, options)
|
57
|
+
|
58
|
+
# Directory path
|
59
|
+
@font_family_path = strip_params(name)
|
60
|
+
|
61
|
+
# Get font name
|
62
|
+
@font_family_name = File.basename(@font_family_path)
|
63
|
+
|
64
|
+
# Get params from URI
|
65
|
+
@font_family_styles = get_params(name)
|
66
|
+
|
67
|
+
# Hash of fonts
|
68
|
+
@fonts = {
|
69
|
+
"#{@font_family_name}" => {
|
70
|
+
"path" => @font_family_path,
|
71
|
+
"styles" => {}
|
72
|
+
}
|
73
|
+
}
|
74
|
+
|
75
|
+
# Make sure path exists, else throw SyntaxError
|
76
|
+
if File.exists?(@font_family_path)
|
77
|
+
# Now loop through each weight and find match with ext
|
78
|
+
@font_family_styles.each do |style|
|
79
|
+
|
80
|
+
# Keep array of matching extensions
|
81
|
+
extensions = []
|
82
|
+
|
83
|
+
# Empty path for font file
|
84
|
+
path = ""
|
85
|
+
|
86
|
+
# Loop over each extension
|
87
|
+
FONT_EXTENSIONS.each do |ext|
|
88
|
+
# Check if the file exists with passed param
|
89
|
+
if File.exists?("#{@font_family_path}/#{@font_family_name}-#{style}.#{ext}")
|
90
|
+
# Save ext
|
91
|
+
extensions << ext unless extensions.include? ext
|
92
|
+
# Grab path
|
93
|
+
path = "#{@font_family_path}/#{@font_family_name}-#{style}"
|
94
|
+
end
|
95
|
+
end
|
96
|
+
|
97
|
+
# Create hash of style and extensions
|
98
|
+
font = {
|
99
|
+
"#{style}" => {
|
100
|
+
"path" => path,
|
101
|
+
"extensions" => extensions,
|
102
|
+
"weight" => get_weight(style),
|
103
|
+
"style" => get_style(style) || "normal"
|
104
|
+
}
|
105
|
+
}
|
106
|
+
|
107
|
+
# Merge into main fonts hash
|
108
|
+
unless extensions.empty?
|
109
|
+
@fonts[@font_family_name]["styles"].merge!(font)
|
110
|
+
else
|
111
|
+
raise ArgumentError, "Font family contained no valid fonts for: #{@font_family_name}-#{style}. Import failed."
|
112
|
+
end
|
113
|
+
end
|
114
|
+
else
|
115
|
+
raise ArgumentError, "Font family to import could not be found, or it's unreadable: #{@font_family_path}."
|
116
|
+
end
|
117
|
+
|
118
|
+
unless @fonts.nil?
|
119
|
+
Sass::Engine.new(output_fonts(@fonts), options.merge(
|
120
|
+
:filename => Pathname.new(base).to_s,
|
121
|
+
:importer => self,
|
122
|
+
:syntax => :scss
|
123
|
+
))
|
124
|
+
end
|
125
|
+
end
|
126
|
+
|
127
|
+
def get_weight(filename)
|
128
|
+
FONT_WEIGHTS.any? do |weight|
|
129
|
+
if filename.include? weight
|
130
|
+
return weight
|
131
|
+
end
|
132
|
+
end
|
133
|
+
end
|
134
|
+
|
135
|
+
def get_style(filename)
|
136
|
+
FONT_STYLES.any? do |style|
|
137
|
+
if filename.include? style
|
138
|
+
return style
|
139
|
+
end
|
140
|
+
end
|
141
|
+
end
|
142
|
+
|
143
|
+
def get_params(uri)
|
144
|
+
CGI.parse(URI.parse(uri).query)["styles"].to_s[2..-3].split(",")
|
145
|
+
end
|
146
|
+
|
147
|
+
def strip_params(name)
|
148
|
+
name.include?("?") ? name[0..name.rindex("?")-1] : name
|
149
|
+
end
|
150
|
+
|
151
|
+
private
|
152
|
+
|
153
|
+
def output_fonts(fonts)
|
154
|
+
content = ""
|
155
|
+
|
156
|
+
fonts.each do |font, keys|
|
157
|
+
keys["styles"].each do |style, atts|
|
158
|
+
content += "@font-face {\n"
|
159
|
+
|
160
|
+
# Font attributes
|
161
|
+
content += "\tfont-family: \"#{font}\";\n"
|
162
|
+
content += "\tfont-weight: #{atts["weight"]};\n"
|
163
|
+
content += "\tfont-style: #{atts["style"]};\n"
|
164
|
+
|
165
|
+
# Include this for IE9
|
166
|
+
if atts["extensions"].include? "eot"
|
167
|
+
content += "\tsrc: url('#{atts["path"]}.eot');\n"
|
168
|
+
end
|
169
|
+
|
170
|
+
# Create array of src urls
|
171
|
+
src = []
|
172
|
+
|
173
|
+
# Push extensions to src arr if match
|
174
|
+
if atts["extensions"].include? "eot"
|
175
|
+
src << "url('#{atts["path"]}.eot?#iefix') format('embedded-opentype')"
|
176
|
+
end
|
177
|
+
if atts["extensions"].include? "woff2"
|
178
|
+
src << "url('#{atts["path"]}.woff2') format('woff2')"
|
179
|
+
end
|
180
|
+
if atts["extensions"].include? "woff"
|
181
|
+
src << "url('#{atts["path"]}.woff') format('woff')"
|
182
|
+
end
|
183
|
+
if atts["extensions"].include? "otf"
|
184
|
+
src << "url('#{atts["path"]}.otf') format('opentype')"
|
185
|
+
end
|
186
|
+
if atts["extensions"].include? "ttf"
|
187
|
+
src << "url('#{atts["path"]}.ttf') format('truetype')"
|
188
|
+
end
|
189
|
+
if atts["extensions"].include? "svg"
|
190
|
+
src << "url('#{atts["path"]}.svg##{font}') format('svg')"
|
191
|
+
end
|
192
|
+
|
193
|
+
# Join src together
|
194
|
+
unless src.empty?
|
195
|
+
content += "\tsrc: #{src.join(",")}\n;"
|
196
|
+
else
|
197
|
+
raise ArgumentError, "Font family contained no valid font extensions: #{font}. Import failed."
|
198
|
+
end
|
199
|
+
|
200
|
+
content += "}\n"
|
201
|
+
end
|
202
|
+
end
|
203
|
+
|
204
|
+
content
|
205
|
+
end
|
206
|
+
end
|
207
|
+
end
|
@@ -0,0 +1,19 @@
|
|
1
|
+
require_relative "importer"
|
2
|
+
|
3
|
+
# Taken from https://github.com/chriseppstein/sass-css-importer/blob/master/lib/sass/css_importer/monkey_patches.rb
|
4
|
+
# TODO: This feels wrong, surely there must be a better way to handle this
|
5
|
+
|
6
|
+
class Sass::Engine
|
7
|
+
alias initialize_without_graphite_importer initialize
|
8
|
+
|
9
|
+
def initialize(template, options={})
|
10
|
+
initialize_without_graphite_importer(template, options)
|
11
|
+
|
12
|
+
graphite_importer = self.options[:load_paths].find {|lp| lp.is_a?(Graphite::Importer) }
|
13
|
+
|
14
|
+
unless graphite_importer
|
15
|
+
root = File.dirname(options[:filename] || ".")
|
16
|
+
self.options[:load_paths] << Graphite::Importer.new(root)
|
17
|
+
end
|
18
|
+
end
|
19
|
+
end
|
metadata
CHANGED
@@ -1,54 +1,42 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: graphite-sass
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.5.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Ezekiel Gabrielse
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2014-
|
11
|
+
date: 2014-10-07 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: sass
|
15
15
|
requirement: !ruby/object:Gem::Requirement
|
16
16
|
requirements:
|
17
|
-
- -
|
17
|
+
- - '>='
|
18
18
|
- !ruby/object:Gem::Version
|
19
|
-
version: 3.
|
19
|
+
version: 3.2.0
|
20
20
|
type: :runtime
|
21
21
|
prerelease: false
|
22
22
|
version_requirements: !ruby/object:Gem::Requirement
|
23
23
|
requirements:
|
24
|
-
- -
|
24
|
+
- - '>='
|
25
25
|
- !ruby/object:Gem::Version
|
26
|
-
version: 3.
|
27
|
-
|
28
|
-
|
29
|
-
requirement: !ruby/object:Gem::Requirement
|
30
|
-
requirements:
|
31
|
-
- - ">="
|
32
|
-
- !ruby/object:Gem::Version
|
33
|
-
version: 0.0.6
|
34
|
-
type: :runtime
|
35
|
-
prerelease: false
|
36
|
-
version_requirements: !ruby/object:Gem::Requirement
|
37
|
-
requirements:
|
38
|
-
- - ">="
|
39
|
-
- !ruby/object:Gem::Version
|
40
|
-
version: 0.0.6
|
41
|
-
description: Graphite imports a folder of fonts and automagically outputs font-face
|
42
|
-
directives for each font into your stylesheet.
|
26
|
+
version: 3.2.0
|
27
|
+
description: Graphite allows you to import fonts into your stylesheet in a syntax
|
28
|
+
similar to Google Fonts. Quick and simple.
|
43
29
|
email:
|
44
30
|
- ezekg@yahoo.com
|
45
31
|
executables: []
|
46
32
|
extensions: []
|
47
33
|
extra_rdoc_files: []
|
48
34
|
files:
|
49
|
-
-
|
35
|
+
- lib/graphite/importer.rb
|
36
|
+
- lib/graphite/monkeypatch.rb
|
37
|
+
- lib/graphite/version.rb
|
50
38
|
- lib/graphite.rb
|
51
|
-
-
|
39
|
+
- README.md
|
52
40
|
homepage: https://github.com/ezekg/Graphite/
|
53
41
|
licenses:
|
54
42
|
- MIT
|
@@ -57,22 +45,21 @@ post_install_message:
|
|
57
45
|
rdoc_options: []
|
58
46
|
require_paths:
|
59
47
|
- lib
|
60
|
-
- stylesheets
|
61
48
|
required_ruby_version: !ruby/object:Gem::Requirement
|
62
49
|
requirements:
|
63
|
-
- -
|
50
|
+
- - '>='
|
64
51
|
- !ruby/object:Gem::Version
|
65
52
|
version: '0'
|
66
53
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
67
54
|
requirements:
|
68
|
-
- -
|
55
|
+
- - '>='
|
69
56
|
- !ruby/object:Gem::Version
|
70
|
-
version:
|
57
|
+
version: '0'
|
71
58
|
requirements: []
|
72
59
|
rubyforge_project: graphite
|
73
|
-
rubygems_version: 2.
|
60
|
+
rubygems_version: 2.0.14
|
74
61
|
signing_key:
|
75
62
|
specification_version: 4
|
76
|
-
summary: Graphite
|
77
|
-
|
63
|
+
summary: Graphite allows you to import fonts into a syntax similar to Google Fonts.
|
64
|
+
Quick and simple.
|
78
65
|
test_files: []
|
data/stylesheets/_graphite.scss
DELETED
@@ -1,170 +0,0 @@
|
|
1
|
-
// Filename seperator
|
2
|
-
// ----
|
3
|
-
// @var [string] : used when rebuilding parsed filenames
|
4
|
-
// ----
|
5
|
-
$graphite_seperator: "-" !global;
|
6
|
-
|
7
|
-
// Prepend directory path
|
8
|
-
// ----
|
9
|
-
// @var [string] : prepends string to asset path in font-face output
|
10
|
-
// ----
|
11
|
-
$graphite_chdir: ".." !global;
|
12
|
-
|
13
|
-
// Relative asset paths
|
14
|
-
// ----
|
15
|
-
// @var [bool] : removes leading slash for asset path in font-face output
|
16
|
-
// ----
|
17
|
-
$graphite_relative_assets: false !global;
|
18
|
-
|
19
|
-
// Checks if item is map
|
20
|
-
// ----
|
21
|
-
// @param $n [literal] : item
|
22
|
-
// ----
|
23
|
-
// @return [bool]
|
24
|
-
|
25
|
-
@function graphite-is-map($n) {
|
26
|
-
@return type-of($n) == "map";
|
27
|
-
}
|
28
|
-
|
29
|
-
// Fetch value from key in map
|
30
|
-
// ----
|
31
|
-
// @param $map [map] : map to fetch from
|
32
|
-
// @param $keys [list] : list of keys
|
33
|
-
// ----
|
34
|
-
// @return fetched literal | false
|
35
|
-
|
36
|
-
@function graphite-map-fetch($map, $keys) {
|
37
|
-
$has-key: graphite-is-map($map) and map-has-key($map, nth($keys, 1)) and map-get($map, nth($keys, 1)) or false;
|
38
|
-
$length: length($keys);
|
39
|
-
|
40
|
-
@if $has-key and $length > 1 {
|
41
|
-
$remainder: ();
|
42
|
-
|
43
|
-
@for $i from 2 through $length {
|
44
|
-
$remainder: append($remainder, nth($keys, $i))
|
45
|
-
}
|
46
|
-
|
47
|
-
@return graphite-map-fetch($has-key, $remainder);
|
48
|
-
}
|
49
|
-
|
50
|
-
@return $has-key;
|
51
|
-
}
|
52
|
-
|
53
|
-
// Import fonts from $dir
|
54
|
-
// ----
|
55
|
-
// @param $dir [string] : directory to import fonts
|
56
|
-
// @param $legacy-ie [bool] : support legacy ie
|
57
|
-
// ----
|
58
|
-
// @return $fonts [map] : imports fonts from $dir and creates
|
59
|
-
// a $var for each font family containing [string] name
|
60
|
-
|
61
|
-
@mixin graphite($dir, $legacy-ie: false, $debug: false) {
|
62
|
-
$graphite_fonts: graphite("#{$dir}", $legacy-ie, $debug) !global;
|
63
|
-
|
64
|
-
// Make sure it's a valid map before attempting the loop
|
65
|
-
@if graphite-is-map($graphite_fonts) {
|
66
|
-
// Start legacy with null value
|
67
|
-
$legacy-ie: null;
|
68
|
-
|
69
|
-
// Loop over each label => font and output a @font-face directive
|
70
|
-
@each $key, $value in $graphite_fonts {
|
71
|
-
|
72
|
-
// Support legacy IE?
|
73
|
-
@if $key == "legacy-ie" {
|
74
|
-
$legacy-ie: map-get($graphite_fonts, "legacy-ie");
|
75
|
-
}
|
76
|
-
|
77
|
-
@if graphite-is-map($value) {
|
78
|
-
// Font name
|
79
|
-
$name: $key;
|
80
|
-
// Path to top-level font directory
|
81
|
-
$path: $graphite_font_dir;
|
82
|
-
// Empty list of extensions
|
83
|
-
$extensions: ();
|
84
|
-
// Empty list of declared fonts
|
85
|
-
$history: ();
|
86
|
-
|
87
|
-
// Break down the font map
|
88
|
-
@each $k, $v in $value {
|
89
|
-
|
90
|
-
// Font directory string
|
91
|
-
@if $k == "path" {
|
92
|
-
// Define path to font directory
|
93
|
-
$path: $graphite_chdir + $path + "/" + $v;
|
94
|
-
|
95
|
-
@if $graphite_relative_assets {
|
96
|
-
$path: str-slice($path, 2, str-length($path));
|
97
|
-
}
|
98
|
-
}
|
99
|
-
|
100
|
-
// List of extensions found
|
101
|
-
@if $k == "extensions" {
|
102
|
-
// Get each extension
|
103
|
-
@each $ext in $v {
|
104
|
-
// Append ext to list
|
105
|
-
$extensions: append($extensions, $ext);
|
106
|
-
}
|
107
|
-
}
|
108
|
-
|
109
|
-
// Map of font weights
|
110
|
-
@if $k == "weights" {
|
111
|
-
$weights: graphite-map-fetch($graphite_fonts, $key $k);
|
112
|
-
|
113
|
-
// Iterate over each weight
|
114
|
-
@each $weight, $styles in $weights {
|
115
|
-
// Get list of styles for weight
|
116
|
-
$styles: graphite-map-fetch($weights, $weight "styles");
|
117
|
-
|
118
|
-
// Iterate over each style
|
119
|
-
@each $style in $styles {
|
120
|
-
// Contatenate vars to create filename
|
121
|
-
$filename: "#{$name + $graphite_seperator + $weight + $graphite_seperator + $style}";
|
122
|
-
|
123
|
-
// If filename has not already been declared
|
124
|
-
@if not index($history, "#{$filename}") {
|
125
|
-
// Add filename to history
|
126
|
-
$history: append($history, $filename, "comma");
|
127
|
-
|
128
|
-
@font-face {
|
129
|
-
// Empty list of valid extensions
|
130
|
-
$types: (local('☺'));
|
131
|
-
|
132
|
-
font: {
|
133
|
-
family: "#{$name}";
|
134
|
-
weight: $weight;
|
135
|
-
style: $style;
|
136
|
-
}
|
137
|
-
|
138
|
-
// IE9
|
139
|
-
@if index($extensions, "eot") and $legacy-ie {
|
140
|
-
src: url("#{$path + $filename}.eot");
|
141
|
-
}
|
142
|
-
|
143
|
-
// Define value for each type
|
144
|
-
$eot: if(index($extensions, "eot"), url("#{$path + $filename}.eot?#iefix") format("embedded-opentype"), null);
|
145
|
-
$woff2: if(index($extensions, "woff2"), url("#{$path + $filename}.woff2") format("woff2"), null);
|
146
|
-
$woff: if(index($extensions, "woff"), url("#{$path + $filename}.woff") format("woff"), null);
|
147
|
-
$otf: if(index($extensions, "otf"), url("#{$path + $filename}.otf") format("opentype"), null);
|
148
|
-
$ttf: if(index($extensions, "ttf"), url("#{$path + $filename}.ttf") format("truetype"), null);
|
149
|
-
$svg: if(index($extensions, "svg"), url("#{$path + $filename + '.svg#' + $name}") format("svg"), null);
|
150
|
-
|
151
|
-
// Append to types list if not null
|
152
|
-
$types: if($eot != null, append($types, #{$eot}, "comma"), $types);
|
153
|
-
$types: if($woff2 != null, append($types, #{$woff2}, "comma"), $types);
|
154
|
-
$types: if($woff != null, append($types, #{$woff}, "comma"), $types);
|
155
|
-
$types: if($otf != null, append($types, #{$otf}, "comma"), $types);
|
156
|
-
$types: if($ttf != null, append($types, #{$ttf}, "comma"), $types);
|
157
|
-
$types: if($svg != null, append($types, #{$svg}, "comma"), $types);
|
158
|
-
|
159
|
-
// Output types
|
160
|
-
src: #{$types};
|
161
|
-
}
|
162
|
-
}
|
163
|
-
}
|
164
|
-
}
|
165
|
-
}
|
166
|
-
}
|
167
|
-
}
|
168
|
-
}
|
169
|
-
}
|
170
|
-
}
|