Weave Code
Code Weaver
Helps Laravel developers discover, compare, and choose open-source packages. See popularity, security, maintainers, and scores at a glance to make better decisions.
Feedback
Share your thoughts, report bugs, or suggest improvements.
Subject
Message

Contao Theme Compiler Bundle Laravel Package

oveleon/contao-theme-compiler-bundle

Contao Theme Compiler Bundle adds an automated workflow for compiling and managing theme assets in Contao. It helps build CSS/JS from sources, handles bundling and output paths, and streamlines deploying optimized assets for your site’s frontend.

Deep Wiki
Context7

Getting Started

Minimal Setup

  1. Install the Bundle Add to composer.json:

    composer require oveleon/contao-theme-compiler-bundle
    

    Enable in config/bundles.php:

    return [
        // ...
        Oveleon\ContaoThemeCompilerBundle\OveleonContaoThemeCompilerBundle::class => ['all' => true],
    ];
    
  2. Configure the Bundle Publish the default config:

    php bin/console oveleon:theme-compiler:install
    

    Edit config/packages/oveleon_theme_compiler.yaml to define:

    • Source directories (e.g., src/Resources/public/css, src/Resources/public/js).
    • Output paths (e.g., web/assets/).
    • Build tools (e.g., postcss, webpack, or vite).
  3. First Compilation Run the compiler:

    php bin/console oveleon:theme-compiler:compile
    

    Verify assets appear in web/assets/ (or your configured output).


First Use Case: Local Development Workflow

  • Watch Mode: Start a watcher for live updates:
    php bin/console oveleon:theme-compiler:watch
    
  • Theme-Specific Compilation: Override config per theme by creating config/packages/oveleon_theme_compiler_[theme_name].yaml.
  • Contao Integration: Use the generated assets in Contao templates via:
    <link rel="stylesheet" href="{{ asset('assets/css/main.css') }}">
    

Implementation Patterns

Workflow Integration

  1. Git Hooks for Automation Add a post-merge hook to compile assets on branch updates:

    php bin/console oveleon:theme-compiler:compile --env=dev
    

    Use --env to target specific environments (e.g., prod for minified builds).

  2. Modular Theme Development

    • Theme Isolation: Store theme-specific assets in themes/[theme_name]/assets/.
    • Shared Config: Extend base config in config/packages/oveleon_theme_compiler_[theme_name].yaml:
      oveleon_theme_compiler:
          themes:
              my_theme:
                  source: "%kernel.project_dir%/themes/my_theme/assets"
                  output: "web/assets/my_theme"
      
    • Inheritance: Use @import in CSS/SCSS to share base styles across themes.
  3. Build Pipeline

    • Multi-Tool Support: Configure tools per file type:
      tools:
          css:
              postcss: true
              options:
                  plugins: [autoprefixer, cssnano]
          js:
              vite: true
      
    • Environment-Specific Builds: Use Symfony’s %kernel.environment% to toggle features:
      tools:
          js:
              sourcemaps: "%kernel.debug%"
      
  4. Contao Asset Management

    • Dynamic Asset URLs: Use Contao’s Url::asset() helper with compiled paths:
      Url::asset('assets/css/main.css', true); // Force fresh load
      
    • Cache Busting: Leverage Contao’s Asset::addCss() with versioned filenames:
      Asset::addCss('assets/css/main-' . filemtime('web/assets/css/main.css') . '.css');
      

Integration Tips

  • Laravel Mix/Vite: Bridge gaps by configuring the bundle to use Laravel’s build tools:
    tools:
        js:
            vite: true
            config: "vite.config.js" # Path to your Vite config
    
  • Contao Backend Assets: Compile backend-specific assets separately:
    themes:
        backend:
            source: "%kernel.project_dir%/src/Resources/contao/backend"
            output: "system/modules/backend/assets"
    
  • Database-Driven Themes: Sync compiled assets with theme selections via Contao’s tl_theme table:
    // In a Contao hook (e.g., `onInitializeSystem`)
    if ($this->Input->get('act') === 'switch_theme') {
        $theme = $this->Input->get('theme');
        $this->compileTheme($theme);
    }
    

Gotchas and Tips

Pitfalls

  1. Caching Issues

    • Symptom: Changes to source files don’t reflect in compiled assets.
    • Fix: Clear Contao’s cache and the bundle’s cache:
      php bin/console cache:clear
      php bin/console oveleon:theme-compiler:clear-cache
      
    • Debug: Check var/cache/dev/oveleon_theme_compiler for stale manifests.
  2. Tool Configuration Conflicts

    • Symptom: Build fails with "Tool not found" errors.
    • Fix: Ensure tools (e.g., postcss, webpack) are installed globally or via devDependencies:
      npm install -g postcss-cli
      
    • Fallback: Use the bundle’s default toolchain by omitting tools config.
  3. File Overwrites

    • Symptom: Compiled assets overwrite each other during theme switches.
    • Fix: Use unique output paths per theme or append theme names to filenames:
      output: "web/assets/%theme_name%"
      
  4. Contao Asset Versioning

    • Symptom: Browsers cache old asset versions.
    • Fix: Enable Contao’s asset versioning in config/local.php:
      $GLOBALS['TL_CONFIG']['versionAssets'] = true;
      

Debugging

  1. Dry Runs Test changes without overwriting files:

    php bin/console oveleon:theme-compiler:compile --dry-run
    

    Outputs a diff of changes to var/log/oveleon_theme_compiler.log.

  2. Verbose Logging Enable debug mode for detailed logs:

    php bin/console oveleon:theme-compiler:compile --env=dev -v
    
  3. Manifest Inspection Check the generated manifest file (e.g., web/assets/manifest.json) for:

    • Missing source files.
    • Incorrect hashes (indicating tool misconfiguration).

Extension Points

  1. Custom Compilers Extend the bundle’s compiler system by implementing Oveleon\ContaoThemeCompilerBundle\Compiler\CompilerInterface:

    namespace App\Compiler;
    
    use Oveleon\ContaoThemeCompilerBundle\Compiler\CompilerInterface;
    
    class CustomCompiler implements CompilerInterface {
        public function compile(string $source, string $output): void {
            // Custom logic (e.g., call a CLI tool)
        }
    }
    

    Register in config/packages/oveleon_theme_compiler.yaml:

    compilers:
        custom:
            class: App\Compiler\CustomCompiler
            extensions: ['.custom']
    
  2. Pre/Post-Compile Hooks Use Symfony events to hook into the compilation process:

    // In a service or controller
    $dispatcher->addListener(
        OveleonThemeCompilerEvents::PRE_COMPILE,
        function (PreCompileEvent $event) {
            // Modify $event->getFiles() or $event->getOptions()
        }
    );
    
  3. Dynamic Theme Detection Override Oveleon\ContaoThemeCompilerBundle\Theme\ThemeDetectorInterface to auto-detect themes from Contao’s database or filesystem.


Configuration Quirks

  1. Environment Variables Use Symfony’s %env() in config for dynamic paths:

    output: "%kernel.project_dir%/%env(ASSET_OUTPUT_DIR)%/assets"
    

    Set via .env:

    ASSET_OUTPUT_DIR=web/custom_assets
    
  2. Theme Inheritance Merge configs for child themes by extending parent configs:

    # config/packages/oveleon_theme_compiler_child.yaml
    extends: oveleon_theme_compiler_parent.yaml
    oveleon_theme_compiler:
        tools:
            css:
                postcss:
                    options:
                        plugins: [parent_plugins, child_plugin]
    
  3. Excluding Files Skip specific files/folders in compilation:

    exclude:
        - "src/Resources/public/css/_private.scss"
        - "node_modules/"
    
Weaver

How can I help you explore Laravel packages today?

Conversation history is not saved when not logged in.
Prompt
Add packages to context
No packages found.
comsave/common
alecsammon/php-raml-parser
chrome-php/wrench
lendable/composer-license-checker
typhoon/reflection
mesilov/moneyphp-percentage
mike42/gfx-php
bookdown/themes
aura/view
aura/html
aura/cli
povils/phpmnd
nayjest/manipulator
omnipay/tests
psr-mock/http-message-implementation
psr-mock/http-factory-implementation
psr-mock/http-client-implementation
voku/email-check
voku/urlify
rtheunissen/guzzle-log-middleware