From dcf1a8cf39dff1dee9d3dcdf0d731c4ab13b4f28 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Fri, 31 Jan 2020 18:25:39 -0300 Subject: [PATCH 1/3] feat(front_end): add tailwind to frontend recipe --- lib/potassium/recipes/front_end.rb | 72 ++++++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) diff --git a/lib/potassium/recipes/front_end.rb b/lib/potassium/recipes/front_end.rb index 29f0f1bf..78bc476c 100644 --- a/lib/potassium/recipes/front_end.rb +++ b/lib/potassium/recipes/front_end.rb @@ -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 ", 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: "" + + 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 From 935f63b63946bf3a96fbe5ed4c643a80b883699b Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Fri, 7 Feb 2020 15:14:09 -0300 Subject: [PATCH 2/3] docs(changelog): add talwindcss to unreleased section --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 179a3dc9..38e66848 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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) From 0734ccf9323725d553371a3626591247971e0dd5 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Fri, 7 Feb 2020 17:22:33 -0300 Subject: [PATCH 3/3] feat(front_end_spec): add tests for tailwind and change filename --- spec/features/front_end.rb | 33 ---------------- spec/features/front_end_spec.rb | 70 +++++++++++++++++++++++++++++++++ 2 files changed, 70 insertions(+), 33 deletions(-) delete mode 100644 spec/features/front_end.rb create mode 100644 spec/features/front_end_spec.rb diff --git a/spec/features/front_end.rb b/spec/features/front_end.rb deleted file mode 100644 index 10053009..00000000 --- a/spec/features/front_end.rb +++ /dev/null @@ -1,33 +0,0 @@ -require "spec_helper" - -RSpec.describe "Front end" do - before(:all) { drop_dummy_database } - before(:each) { remove_project_directory } - - 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") } - - it "creates a project wihtout a front end framework" do - create_dummy_project("front_end" => "None") - expect(gemfile).not_to include('webpacker') - end - - it "creates a project wihtout vue as front end framework" do - create_dummy_project("front_end" => "angular") - - expect(gemfile).to include('webpacker') - expect(node_modules_file).to include("\"@angular/core\"") - end - - it "creates a project wiht vue in compiler mode as frontend framework" do - create_dummy_project("front_end" => "vue") - - 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 -end diff --git a/spec/features/front_end_spec.rb b/spec/features/front_end_spec.rb new file mode 100644 index 00000000..02102afa --- /dev/null +++ b/spec/features/front_end_spec.rb @@ -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