scss_beautifier 0.1.15 → 0.1.16
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.gitignore +3 -1
- data/Gemfile.lock +1 -1
- data/lib/scss_beautifier/formatters/color.rb +9 -4
- data/lib/scss_beautifier/formatters/declaration_order.rb +3 -0
- data/lib/scss_beautifier/formatters/property_sort_order.rb +4 -0
- data/lib/scss_beautifier/version.rb +1 -1
- data/web/Gemfile +4 -0
- data/web/Gemfile.lock +24 -0
- data/web/app.rb +29 -0
- data/web/config.ru +2 -0
- data/web/public/imgs/gh.png +0 -0
- data/web/public/index.html +34 -0
- data/web/public/main.css +90 -0
- data/web/public/main.js +25 -0
- data/web/public/main.scss +113 -0
- metadata +10 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: f73fc34d46f5c23ba992bd5811f31e9700fca0cb
|
4
|
+
data.tar.gz: 1367fe11e2d4a23778a2a337dcbbea70ab0078e2
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 63b72aa241ee07e6f7c83c32c4bfc366d4635c3dbb6b7313b225930070d267df6be7cb77c31afcb21fe87411340892fdd7fc33236d8eed14ee611ae836cebc83
|
7
|
+
data.tar.gz: dc2058530a0b6ed413950482ca60fef4ce4f883e8c312eb67059800a37c3717cb59fe0d18565b0fe163261cabb5826dc51428259a6ca4d25c83d886b37ac1e27
|
data/.gitignore
CHANGED
data/Gemfile.lock
CHANGED
@@ -1,4 +1,6 @@
|
|
1
1
|
class SCSSBeautifier::Formatters::Color < SCSSBeautifier::Formatters::Base
|
2
|
+
HEX_REGEX = /(#\h{3})(?!\h)/
|
3
|
+
|
2
4
|
def visit_prop(node)
|
3
5
|
if node.value.respond_to?(:each)
|
4
6
|
node.value.each{ |item| format_color(item) }
|
@@ -13,10 +15,13 @@ class SCSSBeautifier::Formatters::Color < SCSSBeautifier::Formatters::Base
|
|
13
15
|
color_value = Sass::Script::Value::Color.new(color)
|
14
16
|
color_value.options = {}
|
15
17
|
item.instance_variable_set(:@value, Sass::Script::Value::String.new(color_value.inspect))
|
16
|
-
elsif item.value.value =~
|
17
|
-
|
18
|
-
|
19
|
-
|
18
|
+
elsif item.value.value =~ HEX_REGEX
|
19
|
+
|
20
|
+
new_val = item.value.value.split(" ").map do |val|
|
21
|
+
val.match(HEX_REGEX) ? [val[0..1], val[1], val[2], val[2], val[3], val[3]].join : val
|
22
|
+
end.join(" ")
|
23
|
+
|
24
|
+
item.instance_variable_set(:@value, Sass::Script::Value::String.new(new_val))
|
20
25
|
end
|
21
26
|
end
|
22
27
|
end
|
@@ -23,6 +23,9 @@ class SCSSBeautifier::Formatters::DeclarationOrder < SCSSBeautifier::Formatters:
|
|
23
23
|
end
|
24
24
|
end
|
25
25
|
|
26
|
+
# add remaining comments
|
27
|
+
node_hash['comment'] = comment_array if comment_array.any?
|
28
|
+
|
26
29
|
compiled_array = sort_order.reduce([]) do |memo, key|
|
27
30
|
memo.concat(node_hash[key])
|
28
31
|
end
|
@@ -18,6 +18,10 @@ class SCSSBeautifier::Formatters::PropertySortOrder < SCSSBeautifier::Formatters
|
|
18
18
|
comment_array = []
|
19
19
|
end
|
20
20
|
end
|
21
|
+
|
22
|
+
# account for remaining comments
|
23
|
+
seen_comments -= comment_array
|
24
|
+
|
21
25
|
prop_nodes.sort! { |x,y| x.last.name[0] <=> y.last.name[0] }
|
22
26
|
# Replace children being respective of other types of props/funcs/etc
|
23
27
|
children = []
|
data/web/Gemfile
ADDED
data/web/Gemfile.lock
ADDED
@@ -0,0 +1,24 @@
|
|
1
|
+
GEM
|
2
|
+
remote: https://rubygems.org/
|
3
|
+
specs:
|
4
|
+
rack (1.6.4)
|
5
|
+
rack-protection (1.5.3)
|
6
|
+
rack
|
7
|
+
sass (3.4.22)
|
8
|
+
scss_beautifier (0.1.14)
|
9
|
+
sass (~> 3.4)
|
10
|
+
sinatra (1.4.7)
|
11
|
+
rack (~> 1.5)
|
12
|
+
rack-protection (~> 1.4)
|
13
|
+
tilt (>= 1.3, < 3)
|
14
|
+
tilt (2.0.5)
|
15
|
+
|
16
|
+
PLATFORMS
|
17
|
+
ruby
|
18
|
+
|
19
|
+
DEPENDENCIES
|
20
|
+
scss_beautifier
|
21
|
+
sinatra
|
22
|
+
|
23
|
+
BUNDLED WITH
|
24
|
+
1.12.5
|
data/web/app.rb
ADDED
@@ -0,0 +1,29 @@
|
|
1
|
+
require "sinatra/base"
|
2
|
+
require "scss_beautifier"
|
3
|
+
|
4
|
+
class ScssBeautifierApp < Sinatra::Base
|
5
|
+
|
6
|
+
get "/" do
|
7
|
+
redirect '/index.html'
|
8
|
+
end
|
9
|
+
|
10
|
+
post "/beautify" do
|
11
|
+
engine = Sass::Engine.new(request.body.read.to_s, cache: false, syntax: :scss)
|
12
|
+
|
13
|
+
begin
|
14
|
+
tree = engine.to_tree
|
15
|
+
rescue Sass::SyntaxError => e
|
16
|
+
return e.message
|
17
|
+
end
|
18
|
+
|
19
|
+
config = SCSSBeautifier::Config.new(SCSSBeautifier::CLI::DEFAULT)
|
20
|
+
|
21
|
+
config.formatters.each do |formatter|
|
22
|
+
formatter.send(:visit, tree)
|
23
|
+
end
|
24
|
+
|
25
|
+
output = SCSSBeautifier::Convert.visit(tree, {indent: config.tab_style}, :scss)
|
26
|
+
|
27
|
+
end
|
28
|
+
|
29
|
+
end
|
data/web/config.ru
ADDED
Binary file
|
@@ -0,0 +1,34 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html lang="en">
|
3
|
+
<head>
|
4
|
+
<meta charset="UTF-8">
|
5
|
+
<title>SCSS Beautifier</title>
|
6
|
+
<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
|
7
|
+
<link rel="stylesheet" type="text/css" href="main.css">
|
8
|
+
</head>
|
9
|
+
<body>
|
10
|
+
<header class="header">
|
11
|
+
<div class="header-contents">
|
12
|
+
<div class='logo'>SCSSBeautifier</div>
|
13
|
+
<div class='links'>
|
14
|
+
<a href='https://github.com/paperlesspost/scss-beautifier' target="_blank"><img class='link-img' src='imgs/gh.png' alt='Github' /></a>
|
15
|
+
</div>
|
16
|
+
</div>
|
17
|
+
</header>
|
18
|
+
<div class='main-body'>
|
19
|
+
<div class="half user-input-container">
|
20
|
+
<div class="input-title">Unbeautified SCSS goes here</div>
|
21
|
+
<textarea class="scss-ta js-input-ta"></textarea>
|
22
|
+
</div>
|
23
|
+
<div class="half generated-output-container">
|
24
|
+
<div class="input-title">Beautified SCSS comes out here</div>
|
25
|
+
<textarea class="scss-ta js-output-ta"></textarea>
|
26
|
+
</div>
|
27
|
+
<div class="cf"></div>
|
28
|
+
</div>
|
29
|
+
<div class="submit-container">
|
30
|
+
<span class="button submit-button js-submit-button">Beautify</span>
|
31
|
+
</div>
|
32
|
+
<script type="text/javascript" src="main.js"></script>
|
33
|
+
</body>
|
34
|
+
</html>
|
data/web/public/main.css
ADDED
@@ -0,0 +1,90 @@
|
|
1
|
+
*,
|
2
|
+
*::before,
|
3
|
+
*::after {
|
4
|
+
box-sizing: border-box; }
|
5
|
+
|
6
|
+
html,
|
7
|
+
body {
|
8
|
+
color: #1F212D;
|
9
|
+
font-family: Helvetica, Arial, sans-serif;
|
10
|
+
height: 100%;
|
11
|
+
margin: 0;
|
12
|
+
padding: 0;
|
13
|
+
position: relative;
|
14
|
+
width: 100%; }
|
15
|
+
|
16
|
+
.button {
|
17
|
+
cursor: pointer; }
|
18
|
+
|
19
|
+
.submit-button {
|
20
|
+
background-color: #7382AD;
|
21
|
+
border: 1px solid #1F212D;
|
22
|
+
border-radius: 2px;
|
23
|
+
display: inline-block;
|
24
|
+
font-family: "Satisfy", sans-serif;
|
25
|
+
font-size: 18px;
|
26
|
+
padding: 10px 20px; }
|
27
|
+
.submit-button:hover {
|
28
|
+
background-color: #6374a4; }
|
29
|
+
|
30
|
+
.header {
|
31
|
+
background-color: #7382AD;
|
32
|
+
border-bottom: 2px solid #1F212D;
|
33
|
+
font-family: "Satisfy", sans-serif;
|
34
|
+
height: 80px; }
|
35
|
+
|
36
|
+
.header-contents {
|
37
|
+
margin: 0 auto;
|
38
|
+
max-width: 960px;
|
39
|
+
width: 100%; }
|
40
|
+
|
41
|
+
.logo {
|
42
|
+
float: left;
|
43
|
+
font-size: 48px;
|
44
|
+
position: relative;
|
45
|
+
top: 6px; }
|
46
|
+
|
47
|
+
.links {
|
48
|
+
float: right;
|
49
|
+
height: 80px; }
|
50
|
+
.links a {
|
51
|
+
position: relative;
|
52
|
+
top: 16px; }
|
53
|
+
|
54
|
+
.link-img {
|
55
|
+
height: 50px;
|
56
|
+
width: 50px; }
|
57
|
+
|
58
|
+
.main-body {
|
59
|
+
margin: 50px auto 0;
|
60
|
+
max-width: 960px;
|
61
|
+
position: relative;
|
62
|
+
width: 100%; }
|
63
|
+
|
64
|
+
.half {
|
65
|
+
float: left;
|
66
|
+
width: calc(50% - 7.5px); }
|
67
|
+
.half:first-child {
|
68
|
+
margin-right: 15px; }
|
69
|
+
|
70
|
+
.submit-container {
|
71
|
+
margin-top: 15px;
|
72
|
+
text-align: center; }
|
73
|
+
|
74
|
+
.cf,
|
75
|
+
.cf::before,
|
76
|
+
.cf::after {
|
77
|
+
clear: both; }
|
78
|
+
|
79
|
+
.input-title {
|
80
|
+
margin-bottom: 15px; }
|
81
|
+
|
82
|
+
.scss-ta {
|
83
|
+
font-family: Courier, Helvetica, Arial, sans-serif;
|
84
|
+
font-size: 14px;
|
85
|
+
height: calc(100vh - 250px);
|
86
|
+
padding: 15px;
|
87
|
+
resize: none;
|
88
|
+
width: 100%; }
|
89
|
+
|
90
|
+
/*# sourceMappingURL=main.css.map */
|
data/web/public/main.js
ADDED
@@ -0,0 +1,25 @@
|
|
1
|
+
(function() {
|
2
|
+
var inputTextarea = document.querySelector('.js-input-ta');
|
3
|
+
var outputTextarea = document.querySelector('.js-output-ta');
|
4
|
+
var submitButton = document.querySelector('.js-submit-button');
|
5
|
+
|
6
|
+
inputTextarea.addEventListener('keydown', function(e) {
|
7
|
+
if (e.keyCode === 9) {
|
8
|
+
e.preventDefault();
|
9
|
+
e.target.value = e.target.value += " ";
|
10
|
+
}
|
11
|
+
});
|
12
|
+
|
13
|
+
var scssSubmit = submitButton.addEventListener('click', function() {
|
14
|
+
var req = new XMLHttpRequest();
|
15
|
+
req.addEventListener("load", function(res) {
|
16
|
+
if (req.status === 200) {
|
17
|
+
outputTextarea.value = req.response;
|
18
|
+
} else {
|
19
|
+
alert('There was an issue on the server.');
|
20
|
+
}
|
21
|
+
});
|
22
|
+
req.open("POST", "/beautify");
|
23
|
+
req.send(inputTextarea.value);
|
24
|
+
});
|
25
|
+
})();
|
@@ -0,0 +1,113 @@
|
|
1
|
+
$text-color: #1F212D;
|
2
|
+
$highlight-color: #7382AD;
|
3
|
+
$webfont: "Satisfy", sans-serif;
|
4
|
+
|
5
|
+
*,
|
6
|
+
*::before,
|
7
|
+
*::after {
|
8
|
+
box-sizing: border-box;
|
9
|
+
}
|
10
|
+
|
11
|
+
html,
|
12
|
+
body {
|
13
|
+
color: $text-color;
|
14
|
+
font-family: Helvetica, Arial, sans-serif;
|
15
|
+
height: 100%;
|
16
|
+
margin: 0;
|
17
|
+
padding: 0;
|
18
|
+
position: relative;
|
19
|
+
width: 100%;
|
20
|
+
}
|
21
|
+
|
22
|
+
.button {
|
23
|
+
cursor: pointer;
|
24
|
+
}
|
25
|
+
|
26
|
+
.submit-button {
|
27
|
+
background-color: $highlight-color;
|
28
|
+
border: 1px solid $text-color;
|
29
|
+
border-radius: 2px;
|
30
|
+
display: inline-block;
|
31
|
+
font-family: $webfont;
|
32
|
+
font-size: 18px;
|
33
|
+
padding: 10px 20px;
|
34
|
+
|
35
|
+
&:hover {
|
36
|
+
background-color: darken($highlight-color, 5%);
|
37
|
+
}
|
38
|
+
}
|
39
|
+
|
40
|
+
.header {
|
41
|
+
background-color: $highlight-color;
|
42
|
+
border-bottom: 2px solid $text-color;
|
43
|
+
font-family: $webfont;
|
44
|
+
height: 80px;
|
45
|
+
}
|
46
|
+
|
47
|
+
.header-contents {
|
48
|
+
margin: 0 auto;
|
49
|
+
max-width: 960px;
|
50
|
+
width: 100%;
|
51
|
+
}
|
52
|
+
|
53
|
+
.logo {
|
54
|
+
float: left;
|
55
|
+
font-size: 48px;
|
56
|
+
position: relative;
|
57
|
+
top: 6px;
|
58
|
+
}
|
59
|
+
|
60
|
+
.links {
|
61
|
+
float: right;
|
62
|
+
height: 80px;
|
63
|
+
|
64
|
+
a {
|
65
|
+
position: relative;
|
66
|
+
top: 16px;
|
67
|
+
}
|
68
|
+
}
|
69
|
+
|
70
|
+
.link-img {
|
71
|
+
height: 50px;
|
72
|
+
width: 50px;
|
73
|
+
}
|
74
|
+
|
75
|
+
.main-body {
|
76
|
+
margin: 50px auto 0;
|
77
|
+
max-width: 960px;
|
78
|
+
position: relative;
|
79
|
+
width: 100%;
|
80
|
+
}
|
81
|
+
|
82
|
+
.half {
|
83
|
+
float: left;
|
84
|
+
width: calc(50% - 7.5px);
|
85
|
+
|
86
|
+
&:first-child {
|
87
|
+
margin-right: 15px;
|
88
|
+
}
|
89
|
+
}
|
90
|
+
|
91
|
+
.submit-container {
|
92
|
+
margin-top: 15px;
|
93
|
+
text-align: center;
|
94
|
+
}
|
95
|
+
|
96
|
+
.cf,
|
97
|
+
.cf::before,
|
98
|
+
.cf::after {
|
99
|
+
clear: both;
|
100
|
+
}
|
101
|
+
|
102
|
+
.input-title {
|
103
|
+
margin-bottom: 15px;
|
104
|
+
}
|
105
|
+
|
106
|
+
.scss-ta {
|
107
|
+
font-family: Courier, Helvetica, Arial, sans-serif;
|
108
|
+
font-size: 14px;
|
109
|
+
height: calc(100vh - 250px);
|
110
|
+
padding: 15px;
|
111
|
+
resize: none;
|
112
|
+
width: 100%;
|
113
|
+
}
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: scss_beautifier
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.1.
|
4
|
+
version: 0.1.16
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Ivan Tse
|
@@ -127,6 +127,15 @@ files:
|
|
127
127
|
- lib/scss_beautifier/version.rb
|
128
128
|
- scss_beautifier.gemspec
|
129
129
|
- tmp/dump.txt
|
130
|
+
- web/Gemfile
|
131
|
+
- web/Gemfile.lock
|
132
|
+
- web/app.rb
|
133
|
+
- web/config.ru
|
134
|
+
- web/public/imgs/gh.png
|
135
|
+
- web/public/index.html
|
136
|
+
- web/public/main.css
|
137
|
+
- web/public/main.js
|
138
|
+
- web/public/main.scss
|
130
139
|
homepage: https://github.com/paperlesspost/scss-beautifier
|
131
140
|
licenses:
|
132
141
|
- MIT
|