Merge pull request #91 from kbond/tw4

Tailwind v4 Support

Author: kbond

composer.json

@@ -16,7 +16,8 @@
         "symfony/console": "^5.4|^6.3|^7.0",
         "symfony/http-client": "^5.4|^6.3|^7.0",
         "symfony/process": "^5.4|^6.3|^7.0",
-        "symfony/cache": "^6.3|^7.0"
+        "symfony/cache": "^6.3|^7.0",
+        "symfony/deprecation-contracts": "^2.2|^3.0"
     },
     "require-dev": {
         "symfony/filesystem": "^6.3|^7.0",

config/services.php

@@ -12,16 +12,11 @@
 
 return static function (ContainerConfigurator $container): void {
     $container->services()
-        ->set('cache.symfonycasts.tailwind_bundle')
-            ->parent('cache.system')
-            ->tag('cache.pool')
-
         ->set('tailwind.builder', TailwindBuilder::class)
             ->args([
                 param('kernel.project_dir'),
                 abstract_arg('path to source Tailwind CSS file'),
                 param('kernel.project_dir').'/var/tailwind',
-                service('cache.symfonycasts.tailwind_bundle'),
                 abstract_arg('path to tailwind binary'),
                 abstract_arg('Tailwind binary version'),
                 abstract_arg('path to Tailwind CSS config file'),

doc/index.rst

@@ -1,10 +1,6 @@
 Tailwind CSS for Symfony!
 =========================
 
-.. caution::
-
-    This bundle does not yet support Tailwind CSS 4.0.
-
 This bundle makes it easy to use `Tailwind CSS <https://tailwindcss.com/>`_ with
 Symfony's `AssetMapper Component <https://symfony.com/doc/current/frontend/asset_mapper.html>`_
 (no Node.js required!).
@@ -31,6 +27,10 @@ Install the bundle & initialize your app with two commands:
 Done! This will create a ``tailwind.config.js`` file and make sure your
 ``assets/styles/app.css`` contains the Tailwind directives.
 
+.. note::
+
+    If using Tailwind CSS v4+, ``tailwind.config.js`` is not created or used.
+
 Usage
 -----
 
@@ -69,6 +69,10 @@ command with ``--poll`` option.
 
     $ php bin/console tailwind:build --watch --poll
 
+.. caution::
+
+    The ``--poll`` option is not available in Tailwind CSS v4+.
+
 Symfony CLI
 ~~~~~~~~~~~
 
@@ -130,6 +134,11 @@ The Tailwind binary that the bundle downloads already contains the "Official Plu
 This means you can use those simply by adding the line to the ``plugins`` key in
 ``tailwind.config.js`` - e.g. ``require('@tailwindcss/typography')``.
 
+.. note
+
+    In Tailwind CSS v4 you include plugins with the ``@plugin`` directive in your
+    input CSS file - e.g. ``@plugin "@tailwindcss/typography";``.
+
 For other plugins - like `Flowbite Datepicker <https://flowbite.com/docs/plugins/datepicker/>`_,
 you will need to follow that package's documentation to `require the package <https://flowbite.com/docs/getting-started/quickstart/#require-via-npm>`_
 with ``npm``:
@@ -179,6 +188,10 @@ It's possible to use multiple input files by providing an array:
 Another option is the ``config_file`` option, which defaults to ``tailwind.config.js``.
 This represents the Tailwind configuration file:
 
+.. caution::
+
+    The ``config_file`` is ignored in Tailwind CSS v4+.
+
 .. code-block:: yaml
 
     # config/packages/symfonycasts_tailwind.yaml
@@ -231,11 +244,9 @@ To instruct the bundle to use that binary instead, set the ``binary`` option:
         binary: 'node_modules/.bin/tailwindcss'
 
 Using a Different Binary Version
-------------------------
+--------------------------------
 
-By default, the latest standalone Tailwind binary gets downloaded. However,
-if you want to use a different version, you can specify the version to use,
-set ``binary_version`` option:
+To use a different version, adjust the ``binary_version`` option:
 
 .. code-block:: yaml
 
@@ -244,7 +255,11 @@ set ``binary_version`` option:
         binary_version: 'v3.3.0'
 
 Using a PostCSS config file
-------------------------
+---------------------------
+
+.. caution::
+
+    PostCSS config is not available in Tailwind CSS v4+.
 
 If you want to use additional PostCSS plugins, you can specify the
 PostCSS config file to use, set ``postcss_config_file`` option or

src/Command/TailwindInitCommand.php

@@ -48,6 +48,12 @@ protected function execute(InputInterface $input, OutputInterface $output): int
 
     private function createTailwindConfig(SymfonyStyle $io): bool
     {
+        if ($this->tailwindBuilder->createBinary()->isV4()) {
+            $io->note('Tailwind v4 detected: skipping config file creation.');
+
+            return true;
+        }
+
         $configFile = $this->tailwindBuilder->getConfigFilePath();
         if (file_exists($configFile)) {
             $io->note(\sprintf('Tailwind config file already exists in "%s"', $configFile));
@@ -94,7 +100,7 @@ private function addTailwindDirectives(SymfonyStyle $io): void
     {
         $inputFile = $this->tailwindBuilder->getInputCssPaths()[0];
         $contents = is_file($inputFile) ? file_get_contents($inputFile) : '';
-        if (str_contains($contents, '@tailwind base')) {
+        if (str_contains($contents, '@tailwind base') || str_contains($contents, '@import "tailwindcss"')) {
             $io->note(\sprintf('Tailwind directives already exist in "%s"', $inputFile));
 
             return;
@@ -107,6 +113,12 @@ private function addTailwindDirectives(SymfonyStyle $io): void
         @tailwind utilities;
         EOF;
 
+        if ($this->tailwindBuilder->createBinary()->isV4()) {
+            $tailwindDirectives = <<<EOF
+            @import "tailwindcss";
+            EOF;
+        }
+
         file_put_contents($inputFile, $tailwindDirectives."\n\n".$contents);
     }
 }

src/DependencyInjection/TailwindExtension.php

@@ -29,10 +29,10 @@ public function load(array $configs, ContainerBuilder $container): void
 
         $container->findDefinition('tailwind.builder')
             ->replaceArgument(1, $config['input_css'])
-            ->replaceArgument(4, $config['binary'])
-            ->replaceArgument(5, $config['binary_version'])
-            ->replaceArgument(6, $config['config_file'])
-            ->replaceArgument(7, $config['postcss_config_file'])
+            ->replaceArgument(3, $config['binary'])
+            ->replaceArgument(4, $config['binary_version'])
+            ->replaceArgument(5, $config['config_file'])
+            ->replaceArgument(6, $config['postcss_config_file'])
         ;
     }
 
@@ -70,7 +70,13 @@ public function getConfigTreeBuilder(): TreeBuilder
                 ->end()
                 ->scalarNode('binary_version')
                     ->info('Tailwind CLI version to download - null means the latest version')
-                    ->defaultValue('v3.4.17')
+                    ->defaultNull()
+                    ->beforeNormalization()
+                        ->ifString()
+                        ->then(static function (string $version): string {
+                            return 'v'.ltrim($version, 'vV');
+                        })
+                    ->end()
                 ->end()
                 ->scalarNode('postcss_config_file')
                     ->info('Path to PostCSS config file which is passed to the Tailwind CLI')

src/TailwindBinary.php

@@ -9,11 +9,9 @@
 
 namespace Symfonycasts\TailwindBundle;
 
-use Psr\Cache\CacheItemInterface;
 use Symfony\Component\Console\Style\SymfonyStyle;
 use Symfony\Component\HttpClient\HttpClient;
 use Symfony\Component\Process\Process;
-use Symfony\Contracts\Cache\CacheInterface;
 use Symfony\Contracts\HttpClient\HttpClientInterface;
 
 /**
@@ -23,36 +21,87 @@
  */
 class TailwindBinary
 {
+    private const DEFAULT_VERSION = 'v3.4.17';
+
     private HttpClientInterface $httpClient;
-    private ?string $cachedVersion = null;
 
     public function __construct(
         private string $binaryDownloadDir,
         private string $cwd,
         private ?string $binaryPath,
         private ?string $binaryVersion,
-        private CacheInterface $cache,
         private ?SymfonyStyle $output = null,
         ?HttpClientInterface $httpClient = null,
     ) {
         $this->httpClient = $httpClient ?? HttpClient::create();
+
+        if (!$this->binaryVersion && !$this->binaryPath) {
+            trigger_deprecation(
+                'symfonycasts/tailwind-bundle',
+                '0.8',
+                'Not specifying a "binary" or "binary_version" is deprecated. %s is being used.',
+                self::DEFAULT_VERSION,
+            );
+
+            $this->binaryVersion = self::DEFAULT_VERSION;
+        }
+
+        if ($this->binaryVersion && $this->binaryPath) {
+            $this->binaryVersion = null;
+        }
     }
 
     public function createProcess(array $arguments = []): Process
     {
-        if (null === $this->binaryPath) {
-            $binary = $this->binaryDownloadDir.'/'.$this->getVersion().'/'.self::getBinaryName();
-            if (!is_file($binary)) {
-                $this->downloadExecutable();
-            }
-        } else {
-            $binary = $this->binaryPath;
+        // add binary to the front of the $arguments array
+        array_unshift($arguments, $this->getBinaryPath());
+
+        return new Process($arguments, $this->cwd);
+    }
+
+    public function getVersion(): string
+    {
+        if ($this->binaryVersion) {
+            return $this->binaryVersion;
         }
 
-        // add $binary to the front of the $arguments array
-        array_unshift($arguments, $binary);
+        $process = $this->createProcess(['--help']);
+        $process->run();
 
-        return new Process($arguments, $this->cwd);
+        if (!$process->isSuccessful()) {
+            throw new \RuntimeException('Could not determine the tailwindcss version.');
+        }
+
+        if (!preg_match('#(v\d+\.\d+\.\d+)#', $process->getOutput(), $matches)) {
+            throw new \RuntimeException('Could not determine the tailwindcss version.');
+        }
+
+        return $this->binaryVersion = $matches[1];
+    }
+
+    public function isV4(): bool
+    {
+        return version_compare($this->getRawVersion(), '4.0.0', '>=');
+    }
+
+    public function getRawVersion(): string
+    {
+        return ltrim($this->getVersion(), 'v');
+    }
+
+    private function getBinaryPath(): string
+    {
+        if ($this->binaryPath) {
+            return $this->binaryPath;
+        }
+
+        $this->binaryPath = $this->binaryDownloadDir.'/'.$this->getVersion().'/'.self::getBinaryName();
+
+        if (!is_file($this->binaryPath)) {
+            $this->downloadExecutable();
+        }
+
+        return $this->binaryPath;
     }
 
     private function downloadExecutable(): void
@@ -93,25 +142,6 @@ private function downloadExecutable(): void
         chmod($targetPath, 0777);
     }
 
-    private function getVersion(): string
-    {
-        return $this->cachedVersion ??= $this->binaryVersion ?? $this->getLatestVersion();
-    }
-
-    private function getLatestVersion(): string
-    {
-        return $this->cache->get('latestVersion', function (CacheItemInterface $item) {
-            $item->expiresAfter(3600);
-            try {
-                $response = $this->httpClient->request('GET', 'https://api.github.com/repos/tailwindlabs/tailwindcss/releases/latest');
-
-                return $response->toArray()['name'] ?? throw new \Exception('Cannot get the latest version name from response JSON.');
-            } catch (\Throwable $e) {
-                throw new \Exception('Cannot determine latest Tailwind CLI binary version. Please specify a version in the configuration.', previous: $e);
-            }
-        });
-    }
-
     /**
      * @internal
      */

src/TailwindBuilder.php

@@ -12,7 +12,6 @@
 use Symfony\Component\Console\Style\SymfonyStyle;
 use Symfony\Component\Process\InputStream;
 use Symfony\Component\Process\Process;
-use Symfony\Contracts\Cache\CacheInterface;
 
 /**
  * Manages the process of executing Tailwind on the input file.
@@ -25,12 +24,12 @@ class TailwindBuilder
 {
     private ?SymfonyStyle $output = null;
     private readonly array $inputPaths;
+    private TailwindBinary $binary;
 
     public function __construct(
         private readonly string $projectRootDir,
         array $inputPaths,
         private readonly string $tailwindVarDir,
-        private CacheInterface $cache,
         private readonly ?string $binaryPath = null,
         private readonly ?string $binaryVersion = null,
         private readonly string $configPath = 'tailwind.config.js',
@@ -58,6 +57,10 @@ public function runBuild(
             throw new \InvalidArgumentException(\sprintf('The input CSS file "%s" is not one of the configured input files.', $inputPath));
         }
 
+        if ($poll && $binary->isV4()) {
+            throw new \InvalidArgumentException('The --poll option is not supported in Tailwind CSS v4.0.0 and later.');
+        }
+
         $arguments = ['-c', $this->configPath, '-i', $inputPath, '-o', $this->getInternalOutputCssPath($inputPath)];
         if ($watch) {
             $arguments[] = '--watch';
@@ -69,7 +72,13 @@ public function runBuild(
             $arguments[] = '--minify';
         }
 
-        $postCssConfigPath = $this->validatePostCssConfigFile($postCssConfigFile ?? $this->postCssConfigPath);
+        $postCssConfigFile ??= $this->postCssConfigPath;
+
+        if ($postCssConfigFile && $binary->isV4()) {
+            throw new \InvalidArgumentException('Custom PostCSS configuration is not supported in Tailwind CSS v4.0.0 and later.');
+        }
+
+        $postCssConfigPath = $this->validatePostCssConfigFile($postCssConfigFile);
         if ($postCssConfigPath) {
             $arguments[] = '--postcss';
             $arguments[] = $postCssConfigPath;
@@ -140,6 +149,11 @@ public function getOutputCssContent(string $inputFile): string
         return file_get_contents($this->getInternalOutputCssPath($inputFile));
     }
 
+    public function createBinary(): TailwindBinary
+    {
+        return $this->binary ??= new TailwindBinary($this->tailwindVarDir, $this->projectRootDir, $this->binaryPath, $this->binaryVersion, $this->output);
+    }
+
     private function validateInputFile(string $inputPath): string
     {
         if (is_file($inputPath)) {
@@ -169,9 +183,4 @@ private function validatePostCssConfigFile(?string $postCssConfigPath): ?string
 
         throw new \InvalidArgumentException(\sprintf('The PostCSS config file "%s" does not exist.', $postCssConfigPath));
     }
-
-    private function createBinary(): TailwindBinary
-    {
-        return new TailwindBinary($this->tailwindVarDir, $this->projectRootDir, $this->binaryPath, $this->binaryVersion, $this->cache, $this->output);
-    }
 }