Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow using custom PostCSS configuration file #80

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 5 additions & 6 deletions config/services.php
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
<?php

use Symfony\Component\DependencyInjection\Loader\Configurator\ContainerConfigurator;

use Symfonycasts\TailwindBundle\AssetMapper\TailwindCssAssetCompiler;
use Symfonycasts\TailwindBundle\Command\TailwindBuildCommand;
use Symfonycasts\TailwindBundle\Command\TailwindInitCommand;
use Symfonycasts\TailwindBundle\TailwindBinary;
use Symfonycasts\TailwindBundle\TailwindBuilder;

use function Symfony\Component\DependencyInjection\Loader\Configurator\abstract_arg;
use function Symfony\Component\DependencyInjection\Loader\Configurator\param;
use function Symfony\Component\DependencyInjection\Loader\Configurator\service;
Expand All @@ -26,11 +25,12 @@
abstract_arg('path to tailwind binary'),
abstract_arg('Tailwind binary version'),
abstract_arg('path to Tailwind CSS config file'),
abstract_arg('path to PostCSS config file'),
])

->set('tailwind.command.build', TailwindBuildCommand::class)
->args([
service('tailwind.builder')
service('tailwind.builder'),
])
->tag('console.command')

Expand All @@ -42,11 +42,10 @@

->set('tailwind.css_asset_compiler', TailwindCssAssetCompiler::class)
->args([
service('tailwind.builder')
service('tailwind.builder'),
])
->tag('asset_mapper.compiler', [
// run before core CssAssetUrlCompiler that resolves url() references
'priority' => 10,
])
;
]);
};
21 changes: 20 additions & 1 deletion doc/index.rst
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ the default directories, for example, in the ``vendor/`` directory like the
.. code-block:: yaml

# config/packages/twig.yaml
twig:
twig:
form_themes:
- 'tailwind_2_layout.html.twig'

Expand Down Expand Up @@ -234,6 +234,25 @@ if you want to use a different version, you can specify the version to use,
set ``binary_version`` option:

.. code-block:: yaml

# config/packages/symfonycasts_tailwind.yaml
symfonycasts_tailwind:
binary_version: 'v3.3.0'

Using a PostCSS config file
------------------------

If you want to use additional PostCSS plugins, you can specify the
PostCSS config file to use, set ``postcss_config_file`` option or
pass the ``--postcss`` option to the ``tailwind:build`` command.

.. code-block:: yaml

# config/packages/symfonycasts_tailwind.yaml
symfonycasts_tailwind:
postcss_config_file: 'postcss.config.js'


.. code-block:: terminal

$ php bin/console tailwind:build --postcss='postcss.config.js'
2 changes: 2 additions & 0 deletions src/Command/TailwindBuildCommand.php
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ protected function configure(): void
->addOption('watch', 'w', null, 'Watch for changes and rebuild automatically')
->addOption('poll', null, null, 'Use polling instead of filesystem events when watching')
->addOption('minify', 'm', InputOption::VALUE_NONE, 'Minify the output CSS')
->addOption('postcss', null, InputOption::VALUE_REQUIRED, 'Load custom PostCSS configuration')
;
}

Expand All @@ -50,6 +51,7 @@ protected function execute(InputInterface $input, OutputInterface $output): int
poll: $input->getOption('poll'),
minify: $input->getOption('minify'),
inputFile: $input->getArgument('input_css'),
postCssConfigFile: $input->getOption('postcss'),
);
$process->wait(function ($type, $buffer) use ($io) {
$io->write($buffer);
Expand Down
5 changes: 5 additions & 0 deletions src/DependencyInjection/TailwindExtension.php
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ public function load(array $configs, ContainerBuilder $container): void
->replaceArgument(4, $config['binary'])
->replaceArgument(5, $config['binary_version'])
->replaceArgument(6, $config['config_file'])
->replaceArgument(7, $config['postcss_config_file'])
;
}

Expand Down Expand Up @@ -71,6 +72,10 @@ public function getConfigTreeBuilder(): TreeBuilder
->info('Tailwind CLI version to download - null means the latest version')
->defaultNull()
->end()
->scalarNode('postcss_config_file')
->info('Path to PostCSS config file which is passed to the Tailwind CLI')
->defaultNull()
->end()
->end();

return $treeBuilder;
Expand Down
25 changes: 25 additions & 0 deletions src/TailwindBuilder.php
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ public function __construct(
private readonly ?string $binaryPath = null,
private readonly ?string $binaryVersion = null,
private readonly string $configPath = 'tailwind.config.js',
private readonly ?string $postCssconfigPath = null,
fracsi marked this conversation as resolved.
Show resolved Hide resolved
) {
$paths = [];
foreach ($inputPaths as $inputPath) {
Expand All @@ -48,6 +49,7 @@ public function runBuild(
bool $poll,
bool $minify,
?string $inputFile = null,
?string $postCssConfigFile = null,
): Process {
$binary = $this->createBinary();

Expand All @@ -66,6 +68,12 @@ public function runBuild(
if ($minify) {
$arguments[] = '--minify';
}

$postCssConfigPath = $this->validatePostCssConfigFile($postCssConfigFile ?? $this->postCssconfigPath);
fracsi marked this conversation as resolved.
Show resolved Hide resolved
if ($postCssConfigPath) {
$arguments[] = '--postcss';
$arguments[] = $postCssConfigPath;
}
$process = $binary->createProcess($arguments);
if ($watch) {
$process->setTimeout(null);
Expand Down Expand Up @@ -145,6 +153,23 @@ private function validateInputFile(string $inputPath): string
throw new \InvalidArgumentException(\sprintf('The input CSS file "%s" does not exist.', $inputPath));
}

private function validatePostCssConfigFile(?string $postCssConfigPath): ?string
{
if (null === $postCssConfigPath) {
return null;
}

if (is_file($postCssConfigPath)) {
return realpath($postCssConfigPath);
}

if (is_file($this->projectRootDir.'/'.$postCssConfigPath)) {
return realpath($this->projectRootDir.'/'.$postCssConfigPath);
}

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);
Expand Down
22 changes: 22 additions & 0 deletions tests/TailwindBuilderTest.php
Original file line number Diff line number Diff line change
Expand Up @@ -106,4 +106,26 @@ public function testBuildProvidedInputFile(): void
$outputFileContents = file_get_contents(__DIR__.'/fixtures/var/tailwind/second.built.css');
$this->assertStringContainsString('body{background-color:blue}', $outputFileContents, 'The output file should contain minified CSS.');
}

public function testIntegrationWithPostcss(): void
{
$builder = new TailwindBuilder(
__DIR__.'/fixtures',
[__DIR__.'/fixtures/assets/styles/app.css'],
__DIR__.'/fixtures/var/tailwind',
new ArrayAdapter(),
null,
null,
__DIR__.'/fixtures/tailwind.config.js',
__DIR__.'/fixtures/postcss.config.js',
);
$process = $builder->runBuild(watch: false, poll: false, minify: false);
$process->wait();

$this->assertTrue($process->isSuccessful());
$this->assertFileExists(__DIR__.'/fixtures/var/tailwind/app.built.css');

$outputFileContents = file_get_contents(__DIR__.'/fixtures/var/tailwind/app.built.css');
$this->assertStringContainsString('.dummy {}', $outputFileContents, 'The output file should contain the dummy CSS added by the dummy plugin.');
}
}
10 changes: 10 additions & 0 deletions tests/fixtures/postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
module.exports = {
plugins: [
{
postcssPlugin: 'dummy',
Once (root) {
root.append('.dummy {}')
},
},
],
}
Loading