Faster webpack compile time

Hodel Lukas, ENT-BPN-BAN-PDC-SWE-2 · Hodel Lukas, ENT-BPN-BAN-PDC-SWE-2 · commit a4315c1640e3 · 2021-02-09T18:52:56.000+01:00
When adding custom css into a separate file webpack does not have to
compile the whole tailwindcss again but only the changes in
application.scss
diff --git a/lib/install/stylesheets/application.scss b/lib/install/stylesheets/application.scss
@@ -1,3 +0,0 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
diff --git a/lib/install/stylesheets/base.scss b/lib/install/stylesheets/base.scss
@@ -0,0 +1,4 @@
+@import "tailwindcss/base";
+
+// Add custom base styles here
+// https://tailwindcss.com/docs/adding-base-styles
diff --git a/lib/install/stylesheets/components.scss b/lib/install/stylesheets/components.scss
@@ -0,0 +1,4 @@
+@import "tailwindcss/components";
+
+// Import components added to `./components/` here
+// https://tailwindcss.com/docs/extracting-components
diff --git a/lib/install/stylesheets/components/.keep b/lib/install/stylesheets/components/.keep
diff --git a/lib/install/stylesheets/tailwindcss/after.scss b/lib/install/stylesheets/tailwindcss/after.scss
@@ -0,0 +1,2 @@
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
diff --git a/lib/install/stylesheets/tailwindcss/before.scss b/lib/install/stylesheets/tailwindcss/before.scss
@@ -0,0 +1 @@
+@import "tailwindcss/base";
diff --git a/lib/install/stylesheets/utilities.scss b/lib/install/stylesheets/utilities.scss
@@ -0,0 +1,4 @@
+@import "tailwindcss/utilities";
+
+// Import vendor CSS here
+// https://tailwindcss.com/docs/adding-new-utilities
diff --git a/lib/install/tailwindcss_with_webpacker.rb b/lib/install/tailwindcss_with_webpacker.rb
@@ -3,7 +3,10 @@
 
 say "Installing Tailwind CSS"
 run "yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9"
-insert_into_file "#{Webpacker.config.source_entry_path}/application.js", "\nimport \"stylesheets/application\"\n"
+insert_into_file "#{Webpacker.config.source_entry_path}/application.js",
+  "\nimport \"stylesheets/tailwindcss/before\""\
+  "\nimport \"stylesheets/application\""\
+  "\nimport \"stylesheets/tailwindcss/after\"\n"
 
 say "Configuring Tailwind CSS"
 directory Pathname.new(__dir__).join("stylesheets"), Webpacker.config.source_path.join("stylesheets")

Original file line number	Diff line number	Diff line change
`@@ -1,3 +0,0 @@`
`1`		`-@import "tailwindcss/base";`
`2`		`-@import "tailwindcss/components";`
`3`		`-@import "tailwindcss/utilities";`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+@import "tailwindcss/components";`
	`2`	`+@import "tailwindcss/utilities";`