From d3fbaf3ff879d16002b7f391f65eab269452caac Mon Sep 17 00:00:00 2001 From: Andre Meij Date: Mon, 8 Jan 2024 20:27:32 +0000 Subject: [PATCH 1/3] Allow custom postcss.config.js Updating test and README for custom postcss.config.js --- README.md | 14 ++++++++++++++ lib/tailwindcss/commands.rb | 1 + test/lib/tailwindcss/commands_test.rb | 21 +++++++++++++++++++++ 3 files changed, 36 insertions(+) diff --git a/README.md b/README.md index 59f71cf5..6f73db9b 100644 --- a/README.md +++ b/README.md @@ -38,6 +38,20 @@ This also works with relative paths. If you've installed into your app's directo TAILWINDCSS_INSTALL_DIR=node_modules/.bin ``` +### Using a custom postcss.config.js + +If you want to use a custom `postcss.config.js`, for example to enable nesting, you can place it in the `config` folder and it will be loaded automatically. + +``` +module.exports = { + plugins: { + 'postcss-import': {}, + 'tailwindcss/nesting': {}, + tailwindcss: {}, + autoprefixer: {}, + }, +} +``` ## Developing with Tailwindcss diff --git a/lib/tailwindcss/commands.rb b/lib/tailwindcss/commands.rb index b1367c66..60a17053 100644 --- a/lib/tailwindcss/commands.rb +++ b/lib/tailwindcss/commands.rb @@ -81,6 +81,7 @@ def compile_command(debug: false, **kwargs) "-c", Rails.root.join("config/tailwind.config.js").to_s, ].tap do |command| command << "--minify" unless (debug || rails_css_compressor?) + command << "--postcss #{Rails.root.join("config/postcss.config.js")}" if File.exist?(Rails.root.join("config/postcss.config.js")) end end diff --git a/test/lib/tailwindcss/commands_test.rb b/test/lib/tailwindcss/commands_test.rb index 47112225..c95123af 100644 --- a/test/lib/tailwindcss/commands_test.rb +++ b/test/lib/tailwindcss/commands_test.rb @@ -151,6 +151,27 @@ def mock_local_tailwindcss_install end end + test ".compile_command when postcss.config.js exists" do + mock_exe_directory("sparc-solaris2.8") do |dir, executable| + Dir.mktmpdir do |tmpdir| + Rails.stub(:root, Pathname.new(tmpdir)) do # Rails.root won't work in this test suite + actual = Tailwindcss::Commands.compile_command(exe_path: dir) + assert_kind_of(Array, actual) + assert_equal(executable, actual.first) + refute_includes(actual, "--postcss config/postcss.config.js") + + config_file = Rails.root.join("config/postcss.config.js") + FileUtils.mkdir_p(Rails.root.join("config")) + FileUtils.touch(config_file) + actual = Tailwindcss::Commands.compile_command(exe_path: dir) + assert_kind_of(Array, actual) + assert_equal(executable, actual.first) + assert_includes(actual, "--postcss #{config_file}") + end + end + end + end + test ".watch_command" do mock_exe_directory("sparc-solaris2.8") do |dir, executable| Rails.stub(:root, File) do # Rails.root won't work in this test suite From 5caa7ebac34d2326e1c8b6162619fd65d09d147b Mon Sep 17 00:00:00 2001 From: Mike Dalessio Date: Wed, 10 Jan 2024 16:34:03 -0500 Subject: [PATCH 2/3] command postcss flag argument is a separate array member following the convention used for assembling the overall command --- lib/tailwindcss/commands.rb | 14 +++++++++----- test/lib/tailwindcss/commands_test.rb | 6 ++++-- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/lib/tailwindcss/commands.rb b/lib/tailwindcss/commands.rb index 60a17053..08b70d33 100644 --- a/lib/tailwindcss/commands.rb +++ b/lib/tailwindcss/commands.rb @@ -74,15 +74,19 @@ def executable(exe_path: DEFAULT_DIR) end def compile_command(debug: false, **kwargs) - [ + command = [ executable(**kwargs), "-i", Rails.root.join("app/assets/stylesheets/application.tailwind.css").to_s, "-o", Rails.root.join("app/assets/builds/tailwind.css").to_s, "-c", Rails.root.join("config/tailwind.config.js").to_s, - ].tap do |command| - command << "--minify" unless (debug || rails_css_compressor?) - command << "--postcss #{Rails.root.join("config/postcss.config.js")}" if File.exist?(Rails.root.join("config/postcss.config.js")) - end + ] + + command << "--minify" unless (debug || rails_css_compressor?) + + postcss_path = Rails.root.join("config/postcss.config.js") + command += ["--postcss", postcss_path.to_s] if File.exist?(postcss_path) + + command end def watch_command(always: false, poll: false, **kwargs) diff --git a/test/lib/tailwindcss/commands_test.rb b/test/lib/tailwindcss/commands_test.rb index c95123af..0be78894 100644 --- a/test/lib/tailwindcss/commands_test.rb +++ b/test/lib/tailwindcss/commands_test.rb @@ -158,7 +158,7 @@ def mock_local_tailwindcss_install actual = Tailwindcss::Commands.compile_command(exe_path: dir) assert_kind_of(Array, actual) assert_equal(executable, actual.first) - refute_includes(actual, "--postcss config/postcss.config.js") + refute_includes(actual, "--postcss") config_file = Rails.root.join("config/postcss.config.js") FileUtils.mkdir_p(Rails.root.join("config")) @@ -166,7 +166,9 @@ def mock_local_tailwindcss_install actual = Tailwindcss::Commands.compile_command(exe_path: dir) assert_kind_of(Array, actual) assert_equal(executable, actual.first) - assert_includes(actual, "--postcss #{config_file}") + assert_includes(actual, "--postcss") + postcss_index = actual.index("--postcss") + assert_equal(actual[postcss_index + 1], config_file.to_s) end end end From a30ad61d553f707ae47dd87e6fe054d2aac8af0f Mon Sep 17 00:00:00 2001 From: Mike Dalessio Date: Wed, 10 Jan 2024 16:41:26 -0500 Subject: [PATCH 3/3] doc: update README section on postcss --- README.md | 33 ++++++++++++++++++--------------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 6f73db9b..1f13e498 100644 --- a/README.md +++ b/README.md @@ -38,21 +38,6 @@ This also works with relative paths. If you've installed into your app's directo TAILWINDCSS_INSTALL_DIR=node_modules/.bin ``` -### Using a custom postcss.config.js - -If you want to use a custom `postcss.config.js`, for example to enable nesting, you can place it in the `config` folder and it will be loaded automatically. - -``` -module.exports = { - plugins: { - 'postcss-import': {}, - 'tailwindcss/nesting': {}, - tailwindcss: {}, - autoprefixer: {}, - }, -} -``` - ## Developing with Tailwindcss ### Configuration @@ -114,6 +99,24 @@ If you want unminified assets, you can pass a `debug` argument to the rake task, Note that you can combine task options, e.g. `rails tailwindcss:watch[debug,poll]`. +### Using with PostCSS + +If you want to use PostCSS as a preprocessor, create a custom `config/postcss.config.js` and it will be loaded automatically. + +For example, to enable nesting: + +```js +// config/postcss.config.js +module.exports = { + plugins: { + 'postcss-import': {}, + 'tailwindcss/nesting': {}, + tailwindcss: {}, + autoprefixer: {}, + }, +} +``` + ### Custom inputs or outputs If you need to use a custom input or output file, you can run `bundle exec tailwindcss` to access the platform-specific executable, and give it your own build options.