scss_beautifier 0.1.15 → 0.1.16

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 023084107da5cd65d276424b2bd0f71d5c9980e8
-  data.tar.gz: d831d0732a9ced86ec6490ba1fad209046b60589
+  metadata.gz: f73fc34d46f5c23ba992bd5811f31e9700fca0cb
+  data.tar.gz: 1367fe11e2d4a23778a2a337dcbbea70ab0078e2
 SHA512:
-  metadata.gz: ef0be2455cafa049f37d86fc22db6777266fbf0caa2661f806f41990e0ce1bd6caa5a37427fa345f599dcb1e93467f998aaf22c0e2fb0e6ee04550980db4ac88
-  data.tar.gz: 831bb733cd9ce25f9b663cc2787bee2d964f0c3f170bc2ea24be00c1aea48c6b926e37ebc7d17c2bf996b62a458f452acba46799ed4609cc69841a145e62f46e
+  metadata.gz: 63b72aa241ee07e6f7c83c32c4bfc366d4635c3dbb6b7313b225930070d267df6be7cb77c31afcb21fe87411340892fdd7fc33236d8eed14ee611ae836cebc83
+  data.tar.gz: dc2058530a0b6ed413950482ca60fef4ce4f883e8c312eb67059800a37c3717cb59fe0d18565b0fe163261cabb5826dc51428259a6ca4d25c83d886b37ac1e27

data/.gitignore

@@ -1,3 +1,5 @@
 .DS_Store
 pkg/*
-test.scss
+test.scss
+*.css.map
+.sass-cache

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    scss_beautifier (0.1.15)
+    scss_beautifier (0.1.16)
       sass (~> 3.4)
 
 GEM

data/lib/scss_beautifier/formatters/color.rb

@@ -1,4 +1,6 @@
 class SCSSBeautifier::Formatters::Color < SCSSBeautifier::Formatters::Base
+  HEX_REGEX = /(#\h{3})(?!\h)/
+
   def visit_prop(node)
     if node.value.respond_to?(:each)
       node.value.each{ |item| format_color(item) }
@@ -13,10 +15,13 @@ class SCSSBeautifier::Formatters::Color < SCSSBeautifier::Formatters::Base
         color_value = Sass::Script::Value::Color.new(color)
         color_value.options = {}
         item.instance_variable_set(:@value, Sass::Script::Value::String.new(color_value.inspect))
-      elsif item.value.value =~ /(#\h{3})(?!\h)/
-        hex = item.value.value
-        long_form = [hex[0..1], hex[1], hex[2], hex[2], hex[3], hex[3]].join
-        item.instance_variable_set(:@value, Sass::Script::Value::String.new(long_form))
+      elsif item.value.value =~ HEX_REGEX
+
+        new_val = item.value.value.split(" ").map do |val|
+          val.match(HEX_REGEX) ? [val[0..1], val[1], val[2], val[2], val[3], val[3]].join : val
+        end.join(" ")
+
+        item.instance_variable_set(:@value, Sass::Script::Value::String.new(new_val))
       end
     end
   end

data/lib/scss_beautifier/formatters/declaration_order.rb

@@ -23,6 +23,9 @@ class SCSSBeautifier::Formatters::DeclarationOrder < SCSSBeautifier::Formatters:
       end
     end
 
+    # add remaining comments
+    node_hash['comment'] = comment_array if comment_array.any?
+
     compiled_array = sort_order.reduce([]) do |memo, key|
       memo.concat(node_hash[key])
     end

data/lib/scss_beautifier/formatters/property_sort_order.rb

@@ -18,6 +18,10 @@ class SCSSBeautifier::Formatters::PropertySortOrder < SCSSBeautifier::Formatters
         comment_array = []
       end
     end
+
+    # account for remaining comments
+    seen_comments -= comment_array
+
     prop_nodes.sort! { |x,y| x.last.name[0] <=> y.last.name[0] }
     # Replace children being respective of other types of props/funcs/etc
     children = []

data/lib/scss_beautifier/version.rb

@@ -1,3 +1,3 @@
 module SCSSBeautifier
-  VERSION = "0.1.15"
+  VERSION = "0.1.16"
 end

data/web/Gemfile

@@ -0,0 +1,4 @@
+source "https://rubygems.org"
+
+gem "scss_beautifier"
+gem "sinatra"

data/web/Gemfile.lock

@@ -0,0 +1,24 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    rack (1.6.4)
+    rack-protection (1.5.3)
+      rack
+    sass (3.4.22)
+    scss_beautifier (0.1.14)
+      sass (~> 3.4)
+    sinatra (1.4.7)
+      rack (~> 1.5)
+      rack-protection (~> 1.4)
+      tilt (>= 1.3, < 3)
+    tilt (2.0.5)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  scss_beautifier
+  sinatra
+
+BUNDLED WITH
+   1.12.5

data/web/app.rb

@@ -0,0 +1,29 @@
+require "sinatra/base"
+require "scss_beautifier"
+
+class ScssBeautifierApp < Sinatra::Base
+
+  get "/" do
+    redirect '/index.html'
+  end
+
+  post "/beautify" do
+    engine = Sass::Engine.new(request.body.read.to_s, cache: false, syntax: :scss)
+
+    begin
+      tree = engine.to_tree
+    rescue Sass::SyntaxError => e
+      return e.message
+    end
+
+    config = SCSSBeautifier::Config.new(SCSSBeautifier::CLI::DEFAULT)
+
+    config.formatters.each do |formatter|
+      formatter.send(:visit, tree)
+    end
+
+    output = SCSSBeautifier::Convert.visit(tree, {indent: config.tab_style}, :scss)
+
+  end
+
+end

data/web/config.ru

@@ -0,0 +1,2 @@
+require_relative "./app"
+run ScssBeautifierApp

data/web/public/index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>SCSS Beautifier</title>
+  <link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="main.css">
+</head>
+<body>
+  <header class="header">
+    <div class="header-contents">
+      <div class='logo'>SCSSBeautifier</div>
+      <div class='links'>
+        <a href='https://github.com/paperlesspost/scss-beautifier' target="_blank"><img class='link-img' src='imgs/gh.png' alt='Github' /></a>
+      </div>
+    </div>
+  </header>
+  <div class='main-body'>
+    <div class="half user-input-container">
+      <div class="input-title">Unbeautified SCSS goes here</div>
+      <textarea class="scss-ta js-input-ta"></textarea>
+    </div>
+    <div class="half generated-output-container">
+      <div class="input-title">Beautified SCSS comes out here</div>
+      <textarea class="scss-ta js-output-ta"></textarea>
+    </div>
+    <div class="cf"></div>
+  </div>
+  <div class="submit-container">
+    <span class="button submit-button js-submit-button">Beautify</span>
+  </div>
+  <script type="text/javascript" src="main.js"></script>
+</body>
+</html>

data/web/public/main.css

@@ -0,0 +1,90 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box; }
+
+html,
+body {
+  color: #1F212D;
+  font-family: Helvetica, Arial, sans-serif;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  width: 100%; }
+
+.button {
+  cursor: pointer; }
+
+.submit-button {
+  background-color: #7382AD;
+  border: 1px solid #1F212D;
+  border-radius: 2px;
+  display: inline-block;
+  font-family: "Satisfy", sans-serif;
+  font-size: 18px;
+  padding: 10px 20px; }
+  .submit-button:hover {
+    background-color: #6374a4; }
+
+.header {
+  background-color: #7382AD;
+  border-bottom: 2px solid #1F212D;
+  font-family: "Satisfy", sans-serif;
+  height: 80px; }
+
+.header-contents {
+  margin: 0 auto;
+  max-width: 960px;
+  width: 100%; }
+
+.logo {
+  float: left;
+  font-size: 48px;
+  position: relative;
+  top: 6px; }
+
+.links {
+  float: right;
+  height: 80px; }
+  .links a {
+    position: relative;
+    top: 16px; }
+
+.link-img {
+  height: 50px;
+  width: 50px; }
+
+.main-body {
+  margin: 50px auto 0;
+  max-width: 960px;
+  position: relative;
+  width: 100%; }
+
+.half {
+  float: left;
+  width: calc(50% - 7.5px); }
+  .half:first-child {
+    margin-right: 15px; }
+
+.submit-container {
+  margin-top: 15px;
+  text-align: center; }
+
+.cf,
+.cf::before,
+.cf::after {
+  clear: both; }
+
+.input-title {
+  margin-bottom: 15px; }
+
+.scss-ta {
+  font-family: Courier, Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  height: calc(100vh - 250px);
+  padding: 15px;
+  resize: none;
+  width: 100%; }
+
+/*# sourceMappingURL=main.css.map */

data/web/public/main.js

@@ -0,0 +1,25 @@
+(function() {
+  var inputTextarea = document.querySelector('.js-input-ta');
+  var outputTextarea = document.querySelector('.js-output-ta');
+  var submitButton = document.querySelector('.js-submit-button');
+
+  inputTextarea.addEventListener('keydown', function(e) {
+    if (e.keyCode === 9) {
+      e.preventDefault();
+      e.target.value = e.target.value += "  ";
+    }
+  });
+
+  var scssSubmit = submitButton.addEventListener('click', function() {
+    var req = new XMLHttpRequest();
+    req.addEventListener("load", function(res) {
+      if (req.status === 200) {
+        outputTextarea.value = req.response;
+      } else {
+        alert('There was an issue on the server.');
+      }
+    });
+    req.open("POST", "/beautify");
+    req.send(inputTextarea.value);
+  });
+})();

data/web/public/main.scss

@@ -0,0 +1,113 @@
+$text-color: #1F212D;
+$highlight-color: #7382AD;
+$webfont: "Satisfy", sans-serif;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  color: $text-color;
+  font-family: Helvetica, Arial, sans-serif;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  width: 100%;
+}
+
+.button {
+  cursor: pointer;
+}
+
+.submit-button {
+  background-color: $highlight-color;
+  border: 1px solid $text-color;
+  border-radius: 2px;
+  display: inline-block;
+  font-family: $webfont;
+  font-size: 18px;
+  padding: 10px 20px;
+
+  &:hover {
+    background-color: darken($highlight-color, 5%);
+  }
+}
+
+.header {
+  background-color: $highlight-color;
+  border-bottom: 2px solid $text-color;
+  font-family: $webfont;
+  height: 80px;
+}
+
+.header-contents {
+  margin: 0 auto;
+  max-width: 960px;
+  width: 100%;
+}
+
+.logo {
+  float: left;
+  font-size: 48px;
+  position: relative;
+  top: 6px;
+}
+
+.links {
+  float: right;
+  height: 80px;
+
+  a {
+    position: relative;
+    top: 16px;
+  }
+}
+
+.link-img {
+  height: 50px;
+  width: 50px;
+}
+
+.main-body {
+  margin: 50px auto 0;
+  max-width: 960px;
+  position: relative;
+  width: 100%;
+}
+
+.half {
+  float: left;
+  width: calc(50% - 7.5px);
+
+  &:first-child {
+    margin-right: 15px;
+  }
+}
+
+.submit-container {
+  margin-top: 15px;
+  text-align: center;
+}
+
+.cf,
+.cf::before,
+.cf::after {
+  clear: both;
+}
+
+.input-title {
+  margin-bottom: 15px;
+}
+
+.scss-ta {
+  font-family: Courier, Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  height: calc(100vh - 250px);
+  padding: 15px;
+  resize: none;
+  width: 100%;
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: scss_beautifier
 version: !ruby/object:Gem::Version
-  version: 0.1.15
+  version: 0.1.16
 platform: ruby
 authors:
 - Ivan Tse
@@ -127,6 +127,15 @@ files:
 - lib/scss_beautifier/version.rb
 - scss_beautifier.gemspec
 - tmp/dump.txt
+- web/Gemfile
+- web/Gemfile.lock
+- web/app.rb
+- web/config.ru
+- web/public/imgs/gh.png
+- web/public/index.html
+- web/public/main.css
+- web/public/main.js
+- web/public/main.scss
 homepage: https://github.com/paperlesspost/scss-beautifier
 licenses:
 - MIT