amber_component 1.0.0 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d81663eb6f3cd153cb0a277a0114f8cce4e2140f40685f23a688a60c8ce86226
-  data.tar.gz: 32abb3383e052466435f318e1f8c4010adfa5f3d7e93e588e7e2842ff7cd59e6
+  metadata.gz: 3fe50a4aaf1482572196e8ae5fd9fd7e2f04ef1ee07b9b5275b0454623e54a6d
+  data.tar.gz: 17c1e2848263efac38a029621d26a8d2eae5b4b3d47d2c9eaf8e040b14fe3eae
 SHA512:
-  metadata.gz: 4a3df277a91914b6a148cc72c1b3981f78c420e773b408c8555a8915424d11667c804f113c2a1fd76bce751083607086ab660f1634855fcec686bc433b875c12
-  data.tar.gz: 330efd82e1589a4804f72f4dcb1df1f9a9b90696ce2dfb542c69b91dd1b0a5b7797736c9fa8ce461f73ff7bb16a3966a8ed00b8340c6d047d289acde976240cc
+  metadata.gz: e566cb7199d6d8c890081557ed20ac02410085992b036b6a603e909a62ac6fb6af0e853910ab02ac087fd8e3bcaf398d59496e7172ac1233d843206785b15509
+  data.tar.gz: 3b8bb6257ba09f3f6fbf98c68a128ab99adfa289e8ee3d674de744052b4b69f7b06c0e5f43a5e7bb4ae54533a78728fea15ba2534b947b4e730869b5e09b8932

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    amber_component (1.0.0)
+    amber_component (1.1.0)
       actionview (>= 6)
       activemodel (>= 6)
       activesupport (>= 6)

data/README.md

@@ -9,7 +9,7 @@
 
 # AmberComponent
 
-AmberComponent is a simple component library which seamlessly hooks into your Rails project and allows you to create simple backend components. They work like mini controllers which are bound with their view and stylesheet.
+AmberComponent is a simple component library which seamlessly hooks into your Rails project and allows you to create simple backend components which consist of a Ruby controller, view, stylesheet and even a JavaScript controller (using [Stimulus](https://stimulus.hotwired.dev/)).
 
 Created by [Garbus Beach](https://github.com/garbusbeach) and [Mateusz Drewniak](https://github.com/Verseth).
 
@@ -33,16 +33,37 @@ If you're using a Rails application there's an installation generator that you s
 $ bin/rails generate amber_component:install
 ```
 
+Amber component supports [Stimulus](https://stimulus.hotwired.dev/) to make your components
+reactive using JavaScript.
+
+If you want to use stimulus you should install this gem with the `--stimulus` flag
+
+```sh
+$ bin/rails generate amber_component:install --stimulus
+```
+
 ## Usage
 
-## Components
+### Components
 
-Components are located under `app/components`.
+Components are located under `app/components`. And their tests under `test/components`.
 
 Every component consists of:
 - a Ruby file which defines its properties, encapsulates logic and may implement helper methods (like a controller)
 - a view/template file (html.erb, haml, slim etc.)
 - a style file (css, scss, sass etc.)
+- [optional] a JavaScript file with a Stimulus controller (if you installed the gem with `--stimulus`)
+
+```
+app/components/
+├─ [name]_component.rb
+└─ [name]_component/
+   ├─ style.css     # may be .sass or .scss
+   ├─ view.html.erb
+   └─ controller.js # if stimulus is configured
+test/components/
+└─ [name]_component_test.rb
+```
 
 An individual component which implements a button may look like this.
 
@@ -57,7 +78,9 @@ end
 ```html
 <!-- app/components/button_component/view.html.erb -->
 
-<div class="button_component">
+<div class="button_component"
+     data-controller="button-component"
+     data-action="click->button-component#greet">
     <%= label %>
 </div>
 ```
@@ -76,6 +99,25 @@ end
 }
 ```
 
+If you used the `--stimulus` option when installing the gem, a JS controller will be generated as well.
+```js
+// app/components/button_component/controller.js
+
+import { Controller } from "@hotwired/stimulus"
+
+// Read more about Stimulus here https://stimulus.hotwired.dev/
+export default class extends Controller {
+  connect() {
+    console.log("Stimulus controller 'button-component' is connected!")
+  }
+
+  greet() {
+    alert("Hi there!")
+  }
+}
+
+```
+
 You can render this component in other components or in a Rails view.
 
 ```html
@@ -97,34 +139,69 @@ ButtonComponent.call label: 'Click me!'
 #=> '<div class="button_component">Click me!</div>'
 ```
 
-### Rails helpers inside component templates
+### Components with namespaces
 
-Component views/template files can make use
-of all ActionView helpers and Rails route helpers.
+Components may be defined inside multiple modules/namespaces.
 
-This makes component views very flexible and convenient.
+```ruby
+# app/components/sign_up/button_component.rb
 
-```erb
-<!-- app/components/login_form_component/view.html.erb -->
+class SignUp::ButtonComponent < AmberComponent::Base
+  prop :label, required: true
+end
+```
 
-<%= form_with url: sign_up_path, class: "login_form_component" do |f| %>
-  <%= f.label :first_name %>
-  <%= f.text_field :first_name %>
+```html
+<!-- app/components/sign_up/button_component/view.html.erb -->
 
-  <%= f.label :last_name %>
-  <%= f.text_field :last_name %>
+<div class="sign_up_button_component">
+    <%= label %>
+</div>
+```
 
-  <%= f.label :email, "Email Address" %>
-  <%= f.text_field :email %>
+```scss
+// app/components/sign_up/button_component/style.scss
 
-  <%= f.label :password %>
-  <%= f.password_field :password %>
+.sign_up_button_component {
+    background-color: indigo;
+    border-radius: 1rem;
+    transition-duration: 500ms;
 
-  <%= f.label :password_confirmation, "Confirm Password" %>
-  <%= f.password_field :password_confirmation %>
+    &:hover {
+        background-color: blue;
+    }
+}
+```
 
-  <%= f.submit "Create account" %>
-<% end %>
+You can render such a component by calling the `::call` method
+on its class, or by using the helper method defined on its parent module.
+
+```ruby
+SignUp::ButtonComponent.call label: 'Sign up!'
+SignUp.button_component label: 'Sign up!'
+```
+
+### Generating Components
+
+You can generate new components by running
+
+```sh
+$ bin/rails generate component [name]
+```
+
+Name of the component may be PascalCased like `FooBar` or snake_cased `foo_bar`
+
+This will generate a new component in `app/components/[name]_component.rb` along with a view, stylesheet, test file and a stimulus controller (if configured).
+
+```
+app/components/
+├─ [name]_component.rb
+└─ [name]_component/
+   ├─ style.css
+   ├─ view.html.erb
+   └─ controller.js # if stimulus is configured
+test/components/
+└─ [name]_component_test.rb
 ```
 
 ### Component properties
@@ -155,39 +232,6 @@ CommentComponent.call body: 'Foo bar', author: User.first
 comment_component body: 'Foo bar', author: User.first
 ```
 
-### Overriding prop getters and setters
-
-Getters and setters for properties are
-defined in a module which means that you can override them and call them with `super`.
-
-```ruby
-# app/components/priority_icon_component.rb
-
-class PriorityIconComponent < ApplicationComponent
-    PriorityStruct = Struct.new :icon, :color
-
-    PRIORITY_MAP = {
-        low: PriorityStruct.new('fa-solid fa-chevrons-down', 'green'),
-        medium: PriorityStruct.new('fa-solid fa-chevron-up', 'yellow'),
-        high: PriorityStruct.new('fa-solid fa-chevrons-up', 'red')
-    }
-
-    prop :severity, default: -> { :low }
-
-    def severity=(val)
-      # super will call the original
-      # implementation of the setter
-      super(PRIORITY_MAP[val])
-    end
-end
-```
-
-```html
-<!-- app/components/priority_icon_component/view.html.erb -->
-
-<i style="color: <%= severity&.color %>;" class="<%= severity&.icon %>"></i>
-```
-
 ### Helper methods
 
 Defining helper methods which are available
@@ -239,6 +283,39 @@ end
 </div>
 ```
 
+### Overriding prop getters and setters
+
+Getters and setters for properties are
+defined in a module which means that you can override them and call them with `super`.
+
+```ruby
+# app/components/priority_icon_component.rb
+
+class PriorityIconComponent < ApplicationComponent
+    PriorityStruct = Struct.new :icon, :color
+
+    PRIORITY_MAP = {
+        low: PriorityStruct.new('fa-solid fa-chevrons-down', 'green'),
+        medium: PriorityStruct.new('fa-solid fa-chevron-up', 'yellow'),
+        high: PriorityStruct.new('fa-solid fa-chevrons-up', 'red')
+    }
+
+    prop :severity, default: -> { :low }
+
+    def severity=(val)
+      # super will call the original
+      # implementation of the setter
+      super(PRIORITY_MAP[val])
+    end
+end
+```
+
+```html
+<!-- app/components/priority_icon_component/view.html.erb -->
+
+<i style="color: <%= severity&.color %>;" class="<%= severity&.icon %>"></i>
+```
+
 ### Nested components
 
 It's possible to nest components or provide
@@ -304,64 +381,36 @@ In general `block_given?` will return `true` when a block/nested content is pres
 You can use it to render content conditionally based on
 whether nested content is present.
 
-### Components with namespaces
-
-Components may be defined inside multiple modules/namespaces.
-
-```ruby
-# app/components/sign_up/button_component.rb
-
-class SignUp::ButtonComponent < AmberComponent::Base
-  prop :label, required: true
-end
-```
-
-```html
-<!-- app/components/sign_up/button_component/view.html.erb -->
-
-<div class="sign_up_button_component">
-    <%= label %>
-</div>
-```
-
-```scss
-// app/components/sign_up/button_component/style.scss
+### Rails helpers inside component templates
 
-.sign_up_button_component {
-    background-color: indigo;
-    border-radius: 1rem;
-    transition-duration: 500ms;
+Component views/template files can make use
+of all ActionView helpers and Rails route helpers.
 
-    &:hover {
-        background-color: blue;
-    }
-}
-```
+This makes component views very flexible and convenient.
 
-You can render such a component by calling the `::call` method
-on its class, or by using the helper method defined on its parent module.
+```erb
+<!-- app/components/login_form_component/view.html.erb -->
 
-```ruby
-SignUp::ButtonComponent.call label: 'Sign up!'
-SignUp.button_component label: 'Sign up!'
-```
+<%= form_with url: sign_up_path, class: "login_form_component" do |f| %>
+  <%= f.label :first_name %>
+  <%= f.text_field :first_name %>
 
-### Generating Components
+  <%= f.label :last_name %>
+  <%= f.text_field :last_name %>
 
-You an generate new components by running
+  <%= f.label :email, "Email Address" %>
+  <%= f.text_field :email %>
 
-```sh
-$ bin/rails generate component foo_bar
-```
+  <%= f.label :password %>
+  <%= f.password_field :password %>
 
-or
+  <%= f.label :password_confirmation, "Confirm Password" %>
+  <%= f.password_field :password_confirmation %>
 
-```sh
-$ bin/rails generate component FooBar
+  <%= f.submit "Create account" %>
+<% end %>
 ```
 
-This will generate a new component in `app/components/foo_bar_component.rb` along with a view, stylesheet and test file.
-
 ### Testing Components
 
 ### Rails

data/amber_component.gemspec

@@ -43,7 +43,4 @@ require_relative "lib/amber_component/version"
   spec.add_dependency "activesupport", ">= 6"
   spec.add_dependency "memery", ">= 1.4.1"
   spec.add_dependency "tilt", ">= 2.0.10"
-
-  # For more information and examples about making a new gem, check out our
-  # guide at: https://bundler.io/guides/creating_gem.html
 end

data/assets/javascripts/amber_component/stimulus_loading.js

@@ -0,0 +1,30 @@
+const registeredControllers = {}
+
+export function eagerLoadAmberComponentControllers(application) {
+  const paths = Object.keys(parseImportmapJson()).filter(path => path.match(new RegExp(`/controller$`)))
+  paths.forEach(path => registerControllerFromPath(path, application))
+}
+
+function parseImportmapJson() {
+  return JSON.parse(document.querySelector("script[type=importmap]").text).imports
+}
+
+function registerControllerFromPath(path, application) {
+  const name = path
+    .replace("/controller", "")
+    .replace(/\//g, "--")
+    .replace(/_/g, "-")
+
+  if (!(name in registeredControllers)) {
+    import(path)
+      .then(module => registerController(name, module, application))
+      .catch(error => console.error(`Failed to register controller: ${name} (${path})`, error))
+  }
+}
+
+function registerController(name, module, application) {
+  if (!(name in registeredControllers)) {
+    application.register(name, module.default)
+    registeredControllers[name] = true
+  }
+}

data/lib/amber_component/configuration.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module ::AmberComponent
+  # Object which stores configuration options
+  # for this gem.
+  class Configuration
+    # @return [Array<Symbol>]
+    STIMULUS_INTEGRATIONS = %i[importmap jsbundling webpack esbuild rollup].freeze
+
+    # How Stimulus.js is bundled in this app.
+    # Possible values: `[nil, :importmap, :jsbundling, :webpack, :esbuild, :rollup]`
+    # `nil` indicates that stimulus should not be used (default behaviour).
+    #
+    # @return [Symbol, nil]
+    attr_reader :stimulus
+
+    # How Stimulus.js is bundled in this app.
+    # Possible values: `[nil, :importmap, :jsbundling, :webpack, :esbuild, :rollup]`
+    # `nil` indicates that stimulus should not be used (default behaviour).
+    #
+    # @param val [Symbol, String, nil]
+    def stimulus=(val)
+      val = val&.to_sym
+      unless val.nil? || STIMULUS_INTEGRATIONS.include?(val)
+        raise(::ArgumentError,
+              "Invalid value for `stimulus` bundling. " \
+              "Received #{val.inspect}, expected one of #{STIMULUS_INTEGRATIONS.inspect}")
+      end
+
+      @stimulus = val
+    end
+
+    # @return [Boolean]
+    def stimulus?
+      !@stimulus.nil?
+    end
+
+    # @return [Boolean]
+    def stimulus_importmap?
+      @stimulus == :importmap
+    end
+  end
+end

data/lib/amber_component/railtie.rb

@@ -4,8 +4,10 @@ module ::AmberComponent
   # Class which hooks into Rails
   # and configures the application.
   class Railtie < ::Rails::Railtie
-    initializer 'amber_component.initialization' do |app|
+    initializer 'amber_component.assets' do |app|
       app.config.assets.paths << (app.root / 'app' / 'components')
+      app.config.assets.paths << (ROOT_GEM_PATH / 'assets' / 'javascripts')
+      app.config.assets.precompile += %w[amber_component/stimulus_loading.js]
 
       next if ::Rails.env.production?
 

data/lib/amber_component/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ::AmberComponent
-  VERSION = '1.0.0'
+  VERSION = '1.1.0'
 end

data/lib/amber_component.rb

@@ -2,7 +2,11 @@
 
 require 'active_support'
 require 'active_support/core_ext'
+require 'pathname'
 
+require_relative 'amber_component/configuration'
+
+# Root module of the `amber_component` gem.
 module ::AmberComponent
   class Error < ::StandardError; end
   class MissingPropsError < Error; end
@@ -13,6 +17,22 @@ module ::AmberComponent
   class EmptyViewError < Error; end
   class UnknownViewTypeError < Error; end
   class MultipleViewsError < Error; end
+
+  # @return [Pathname]
+  ROOT_GEM_PATH = ::Pathname.new ::File.expand_path('..', __dir__)
+
+  class << self
+    # @return [Configuration]
+    def configuration
+      @configuration ||= Configuration.new
+    end
+
+    # @yieldparam [Configuration]
+    # @return [void]
+    def configure
+      yield configuration
+    end
+  end
 end
 
 require_relative 'amber_component/version'

data/lib/generators/amber_component/install_generator.rb

@@ -10,8 +10,14 @@ module ::AmberComponent
       desc 'Install the AmberComponent gem'
       source_root ::File.expand_path('templates', __dir__)
 
-      # copy rake tasks
-      def copy_tasks
+      # @return [Array<Symbol>]
+      STIMULUS_INTEGRATIONS = %i[stimulus importmap jsbundling webpack esbuild rollup].freeze
+
+      class_option :stimulus,
+                   desc: "Configure the app to use Stimulus.js wih components to make them interactive " \
+                         "[options: importmap (default), jsbundling, webpack, esbuild, rollup]"
+
+      def setup
         copy_file 'application_component.rb', 'app/components/application_component.rb'
         copy_file 'application_component_test_case.rb', 'test/application_component_test_case.rb'
         append_file 'test/test_helper.rb', "require_relative 'application_component_test_case'"
@@ -23,10 +29,87 @@ module ::AmberComponent
         require_components_css_in 'app/assets/stylesheets/application.css.sass'
         require_components_css_in 'app/assets/stylesheets/application.scss.sass'
         require_components_css_in 'app/assets/stylesheets/application.sass.scss'
+        configure_stimulus
       end
 
       private
 
+      def configure_stimulus
+        stimulus = options[:stimulus]&.to_sym
+        return unless stimulus
+
+        case stimulus
+        when :stimulus
+          if defined?(::Jsbundling)
+            stimulus_integration = :jsbundling
+            configure_stimulus_jsbundling
+          else
+            stimulus_integration = :importmap
+            configure_stimulus_importmap
+          end
+        when :importmap
+          stimulus_integration = :importmap
+          configure_stimulus_importmap
+        when :jsbundling, :webpack, :esbuild, :rollup
+          stimulus_integration = :jsbundling
+          configure_stimulus_jsbundling
+        end
+
+        create_file 'config/initializers/amber_component.rb', <<~RUBY
+          # frozen_string_literal: true
+
+          ::AmberComponent.configure do |c|
+            c.stimulus = :#{stimulus_integration}
+          end
+        RUBY
+      end
+
+      def configure_stimulus_importmap
+        install_importmap
+        install_stimulus
+        append_file 'config/importmap.rb', <<~RUBY
+          pin "@amber_component/stimulus_loading", to: "amber_component/stimulus_loading.js", preload: true
+          pin_all_from "app/components"
+        RUBY
+        append_file 'app/javascript/controllers/index.js', <<~JS
+          import { eagerLoadAmberComponentControllers } from "@amber_component/stimulus_loading"
+          eagerLoadAmberComponentControllers(application)
+        JS
+        append_file 'app/assets/config/manifest.js', %(//= link_tree ../../components .js\n)
+      end
+
+      def configure_stimulus_jsbundling
+        install_stimulus
+        append_file 'app/javascript/application.js', %(import "./controllers/components"\n)
+        create_file 'app/javascript/controllers/components.js', <<~JS
+          // This file has been created by `amber_component` and will
+          // register all stimulus controllers from your components
+          import { application } from "./application"
+        JS
+      end
+
+      # @return [void]
+      def install_importmap
+        return if ::File.exist?('config/importmap.rb') && defined?(::Importmap)
+
+        unless defined?(::Importmap)
+          system 'gem install importmap-rails'
+          gem 'importmap-rails'
+          system 'bundle install'
+        end
+        rake 'importmap:install'
+      end
+
+      # @return [void]
+      def install_stimulus
+        return if defined?(::Stimulus)
+
+        system 'gem install stimulus-rails'
+        gem 'stimulus-rails'
+        system 'bundle install'
+        rake 'stimulus:install'
+      end
+
       # @param file_name [String]
       # @return [void]
       def require_components_css_in(file_name)

data/lib/generators/amber_component_generator.rb

@@ -40,8 +40,10 @@ class AmberComponentGenerator < ::Rails::Generators::NamedBase
     template 'component_test.rb.erb', "test/components/#{file_path}_test.rb"
     create_stylesheet
     create_view
+    create_stimulus_controller
   end
 
+  # @return [String]
   def file_name
     name = super
     return name if name.end_with? '_component'
@@ -51,6 +53,29 @@ class AmberComponentGenerator < ::Rails::Generators::NamedBase
 
   private
 
+  # @return [Boolean]
+  def stimulus?
+    ::AmberComponent.configuration.stimulus?
+  end
+
+  # @return [Boolean]
+  def stimulus_importmap?
+    ::AmberComponent.configuration.stimulus_importmap?
+  end
+
+  # @return [void]
+  def create_stimulus_controller
+    return unless stimulus?
+
+    template 'controller.js.erb', "app/components/#{file_path}/controller.js"
+    return if stimulus_importmap?
+
+    append_file 'app/javascript/controllers/components.js', <<~JS
+      import #{stimulus_controller_class_name} from "../../components/#{file_path}/controller"
+      application.register("#{stimulus_controller_id}", #{stimulus_controller_class_name})
+    JS
+  end
+
   # @return [void]
   def create_view
     case @view_format
@@ -73,4 +98,14 @@ class AmberComponentGenerator < ::Rails::Generators::NamedBase
       template 'style.css.erb', "app/components/#{file_path}/style.css"
     end
   end
+
+  # @return [String]
+  def stimulus_controller_id
+    file_path.gsub('_', '-').gsub('/', '--')
+  end
+
+  # @return [String]
+  def stimulus_controller_class_name
+    file_path.gsub('/', '_').camelize
+  end
 end

data/lib/generators/templates/controller.js.erb

@@ -0,0 +1,12 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Read more about Stimulus here https://stimulus.hotwired.dev/
+export default class extends Controller {
+  connect() {
+    console.log("Stimulus controller '<%= stimulus_controller_id %>' is connected!")
+  }
+
+  greet() {
+    alert("Hi there!")
+  }
+}

data/lib/generators/templates/view.haml.erb

@@ -1,9 +1,13 @@
-.<%= singular_table_name %>
+.<%= singular_table_name %><%= %({ data: { controller: "#{stimulus_controller_id}" } }) if stimulus? %>
   %h1
     Hello from
     %b
       <%= class_name %>
     , initialized at:
     = @time
+  <%- if stimulus? %>
+  %button{ data: { action: "click-><%= stimulus_controller_id %>#greet" }
+    Greet me
+  <% end %>
   %p
     = description

data/lib/generators/templates/view.html.erb.erb

@@ -1,7 +1,10 @@
-<div class='<%= singular_table_name %>'>
+<div class="<%= singular_table_name %>"<%= %( data-controller="#{stimulus_controller_id}") if stimulus? %>>
   <h1>
     Hello from <b><%= class_name %></b>, initialized at: <%%= @time %>
   </h1>
+  <%- if stimulus? %>
+  <button data-action="click-><%= stimulus_controller_id %>#greet">Greet me</button>
+  <% end %>
   <p>
     <%%= description %>
   </p>

data/lib/generators/templates/view.slim.erb

@@ -1,6 +1,10 @@
-div.<%= singular_table_name %>
+div.<%= singular_table_name %><%= %( data-controller="#{stimulus_controller_id}") if stimulus? %>
   h1
     | Hello from
     b <%= class_name %>
     | , initialized at: #{@time}
+    <%- if stimulus? %>
+    button data-action="click-><%= stimulus_controller_id %>#greet"
+      | Greet me
+    <% end %>
   p = description

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: amber_component
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 1.1.0
 platform: ruby
 authors:
 - Ruby-Amber
@@ -10,7 +10,7 @@ authors:
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2022-11-07 00:00:00.000000000 Z
+date: 2022-11-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -106,11 +106,13 @@ files:
 - README.md
 - Rakefile
 - amber_component.gemspec
+- assets/javascripts/amber_component/stimulus_loading.js
 - banner.png
 - icon.png
 - lib/amber_component.rb
 - lib/amber_component/assets.rb
 - lib/amber_component/base.rb
+- lib/amber_component/configuration.rb
 - lib/amber_component/helpers.rb
 - lib/amber_component/helpers/class_helper.rb
 - lib/amber_component/helpers/component_helper.rb
@@ -133,6 +135,7 @@ files:
 - lib/generators/component_generator.rb
 - lib/generators/templates/component.rb.erb
 - lib/generators/templates/component_test.rb.erb
+- lib/generators/templates/controller.js.erb
 - lib/generators/templates/style.css.erb
 - lib/generators/templates/style.sass.erb
 - lib/generators/templates/style.scss.erb