Skip to content

Commit

Permalink
Merge pull request #266 from platanus/add-tailwind
Browse files Browse the repository at this point in the history
feat(front_end): add tailwindcss to front_end recipe
Diego Andai Castilla authored Feb 10, 2020

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
2 parents 3fce2d3 + 0734ccf commit b78adcc
Showing 4 changed files with 143 additions and 33 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -10,6 +10,7 @@ Features:
- Dasherize app name in docker compose related files [#261](https://github.com/platanus/potassium/pull/261)
- Split specs by timings in CircleCI [#263](https://github.com/platanus/potassium/pull/263)
- Update ruby to 2.7.0 [#264](https://github.com/platanus/potassium/pull/264)
- Add tailwindcss [#266](https://github.com/platanus/potassium/pull/266)

Fix:
- Correctly use cache for bundle dependencies in CircleCI build [#244](https://github.com/platanus/potassium/pull/244) and [#258](https://github.com/platanus/potassium/pull/258)
72 changes: 72 additions & 0 deletions lib/potassium/recipes/front_end.rb
Original file line number Diff line number Diff line change
@@ -24,6 +24,7 @@ def create
run "rails webpacker:install:#{value}" if value

recipe.setup_vue_with_compiler_build if value == :vue
recipe.setup_tailwind
end
end

@@ -55,6 +56,13 @@ def setup_vue_with_compiler_build
insert_into_file layout_file, "\n </div>", after: "<%= yield %>"
end

def setup_tailwind
run 'bin/yarn add tailwindcss'
setup_client_css
remove_server_css_requires
setup_tailwind_requirements
end

private

def frameworks(framework)
@@ -66,6 +74,42 @@ def frameworks(framework)
frameworks[framework]
end

def setup_client_css
application_css = 'app/javascript/css/application.css'
create_file application_css, "", force: true

stylesheet_pack_tag = "\n <%= stylesheet_pack_tag 'application' %>\n "
layout_file = "app/views/layouts/application.html.erb"
insert_into_file layout_file, stylesheet_pack_tag, before: "</head>"

application_js = 'app/javascript/packs/application.js'
if get(:front_end) != :vue
create_file application_js, "import '../css/application.css';\n", force: true
else
insert_into_file(
application_js,
"\nimport '../css/application.css';",
after: "import App from '../app.vue';"
)
end
end

def setup_tailwind_requirements
application_css = 'app/javascript/css/application.css'
insert_into_file application_css, tailwind_client_css

tailwind_config = 'tailwind.config.js'
create_file tailwind_config, tailwind_config_content, force: true

postcss_file = 'postcss.config.js'
insert_into_file postcss_file, postcss_require_tailwind, after: "plugins: [\n"
end

def remove_server_css_requires
assets_css_file = 'app/assets/stylesheets/application.css'
gsub_file(assets_css_file, " *= require_tree .\n *= require_self\n", "")
end

def application_js_content
<<~JS
import Vue from 'vue/dist/vue.esm';
@@ -81,4 +125,32 @@ def application_js_content
});
JS
end

def tailwind_client_css
<<~CSS
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
CSS
end

def tailwind_config_content
<<~JS
/* eslint-disable no-undef */
module.exports = {
theme: {
extend: {},
},
variants: {},
plugins: [],
};
JS
end

def postcss_require_tailwind
<<-JS.gsub(/^ {4}/, ' ')
require('tailwindcss'),
require('autoprefixer'),
JS
end
end
33 changes: 0 additions & 33 deletions spec/features/front_end.rb

This file was deleted.

70 changes: 70 additions & 0 deletions spec/features/front_end_spec.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
require "spec_helper"

RSpec.describe "Front end" do
before :all do
drop_dummy_database
remove_project_directory
end

let(:application_css_path) { "#{project_path}/app/javascript/css/application.css" }
let(:gemfile) { IO.read("#{project_path}/Gemfile") }
let(:node_modules_file) { IO.read("#{project_path}/package.json") }
let(:application_js_file) { IO.read("#{project_path}/app/javascript/packs/application.js") }
let(:layout_file) { IO.read("#{project_path}/app/views/layouts/application.html.erb") }
let(:application_css_file) { IO.read(application_css_path) }
let(:tailwind_config_file) { IO.read("#{project_path}/tailwind.config.js") }
let(:rails_css_file) { IO.read("#{project_path}/app/assets/stylesheets/application.css") }

it "creates a project without a front end framework" do
remove_project_directory
create_dummy_project("front_end" => "None")
expect(gemfile).to include('webpacker')
expect(File).not_to exist(application_css_path)
end

context "with vue" do
before(:all) do
remove_project_directory
create_dummy_project("front_end" => "vue")
end

it "creates a project with vue in compiler mode as frontend framework" do
expect(gemfile).to include('webpacker')
expect(node_modules_file).to include("\"vue\"")
expect(application_js_file).to include('vue/dist/vue.esm')
expect(application_js_file).to include("el: '#vue-app'")
expect(layout_file).to include('id="vue-app"')
end

it "creates a vue project with client css" do
expect(application_js_file).to include("import '../css/application.css';")
expect(layout_file).to include("<%= stylesheet_pack_tag 'application' %>")
expect(rails_css_file).not_to include('*= require_tree', '*= require_self')
end

it "creates a vue project with tailwindcss" do
expect(node_modules_file).to include("\"tailwindcss\"")
expect(application_css_file).to include(
"@import 'tailwindcss/base';",
"@import 'tailwindcss/components';"
)
expect(tailwind_config_file).to include('module.exports')
end
end

context "with angular" do
before(:all) do
remove_project_directory
create_dummy_project("front_end" => "angular")
end

it "creates a project without vue as front end framework" do
expect(gemfile).to include('webpacker')
expect(node_modules_file).to include("\"@angular/core\"")
end

it "creates application_js_file for tailwind without vue" do
expect(application_js_file).to include("import '../css/application.css';")
end
end
end

0 comments on commit b78adcc

Please sign in to comment.