.github/workflows/php.yml

@@ -2,40 +2,40 @@ name: PHP Composer
 
 on:
   push:
-    branches: [ master ]
+    branches: [master]
   pull_request:
-    branches: [ master ]
+    branches: [master]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v2
-
-    - name: Validate composer.json and composer.lock
-      run: composer validate
-
-    - name: Cache Composer packages
-      id: composer-cache
-      uses: actions/cache@v2
-      with:
-        path: vendor
-        key: ${{ runner.os }}-php-${{ hashFiles('**/composer.lock') }}
-        restore-keys: |
-          ${{ runner.os }}-php-
-
-    - name: Install dependencies
-      if: steps.composer-cache.outputs.cache-hit != 'true'
-      run: composer install --prefer-dist --no-progress --no-suggest
-
-    - name: Run PHPUnit
-      run: phpunit
-
-    - name: Run PHPStan
-      uses: actions-x/phpstan@v1
-      with:
-        paths: src
-        level: 6
-        phpstanVersion: ^0.12
+      - uses: actions/checkout@v2
+
+      - name: Setup PHP 8.0
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: 8.0
+
+      - name: Validate composer.json and composer.lock
+        run: composer validate
+
+      - name: Cache Composer packages
+        id: composer-cache
+        uses: actions/cache@v2
+        with:
+          path: vendor
+          key: ${{ runner.os }}-php-${{ hashFiles('**/composer.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-php-
+
+      - name: Install dependencies
+        if: steps.composer-cache.outputs.cache-hit != 'true'
+        run: composer install --prefer-dist --no-progress --no-suggest
+
+      - name: Run PHPUnit
+        run: composer run phpunit
+
+      - name: Run PHPStan
+        run: composer run phpstan

.gitignore

@@ -10,3 +10,4 @@
 .php_cs.cache
 
 node_modules
+.phpunit.result.cache

composer.json

@@ -1,47 +1,47 @@
 {
-    "name": "paneon/php-vue-to-twig",
-    "description": "",
-    "type": "library",
-    "license": "MIT",
-    "authors": [
-        {
-            "name": "Alexander Pape",
-            "email": "a.pape@paneon.de"
-        }
-    ],
-    "require": {
-        "php": ">=7.1",
-        "ext-dom": "*",
-        "ext-libxml": "*",
-        "scssphp/scssphp": "1.1.1",
-        "squizlabs/php_codesniffer": "^3.3",
-        "ramsey/uuid": "^3.8"
-    },
-    "autoload": {
-        "psr-4": {
-            "Paneon\\VueToTwig\\": "src"
-        }
-    },
-    "autoload-dev": {
-        "psr-4": {
-            "Paneon\\VueToTwig\\": "src",
-            "Paneon\\VueToTwig\\Tests\\": "tests"
-        },
-        "files": [
-            "vendor/autoload.php"
-        ]
-
-    },
-    "require-dev": {
-        "ext-simplexml": "*",
-        "phpunit/phpunit": "^7",
-        "monolog/monolog": "^1.24",
-        "phpstan/phpstan": "^0.12",
-        "friendsofphp/php-cs-fixer": "^2.16"
-    },
-    "scripts": {
-        "cs:fix": "phpcbf --standard=phpcs.xml",
-        "cs:check": "phpcs --standard=phpcs.xml --colors -ps",
-        "phpstan": "@php vendor/bin/phpstan analyse src --level 6"
+  "name": "paneon/php-vue-to-twig",
+  "description": "",
+  "type": "library",
+  "license": "MIT",
+  "authors": [
+    {
+      "name": "Alexander Pape",
+      "email": "a.pape@paneon.de"
+    }
+  ],
+  "require": {
+    "php": "^7.3|^8.0",
+    "ext-dom": "*",
+    "ext-libxml": "*",
+    "scssphp/scssphp": "^1.9",
+    "squizlabs/php_codesniffer": "^3.3",
+    "ramsey/uuid": "^3.8"
+  },
+  "autoload": {
+    "psr-4": {
+      "Paneon\\VueToTwig\\": "src"
     }
+  },
+  "autoload-dev": {
+    "psr-4": {
+      "Paneon\\VueToTwig\\": "src",
+      "Paneon\\VueToTwig\\Tests\\": "tests"
+    },
+    "files": [
+      "vendor/autoload.php"
+    ]
+  },
+  "require-dev": {
+    "ext-simplexml": "*",
+    "phpunit/phpunit": "^9",
+    "monolog/monolog": "^1.24",
+    "phpstan/phpstan": "^0.12",
+    "friendsofphp/php-cs-fixer": "^2.16"
+  },
+  "scripts": {
+    "cs:fix": "phpcbf --standard=phpcs.xml",
+    "cs:check": "phpcs --standard=phpcs.xml --colors -ps",
+    "phpstan": "@php vendor/bin/phpstan analyse src --level 6",
+    "phpunit": "@php vendor/phpunit/phpunit/phpunit"
+  }
 }

src/Models/Component.php

@@ -90,6 +90,11 @@ public function addSlot(string $name, string $value): Slot
         return $this->slots[$name];
     }
 
+    public function addEmptyDefaultSlot(): void
+    {
+        $this->properties[] = new Property(Slot::SLOT_PREFIX . Slot::SLOT_DEFAULT_NAME, '""', false);
+    }
+
     public function kebabToCamelCase(string $string, bool $capitalizeFirstCharacter = false): string
     {
         $str = str_replace('-', '', ucwords($string, '-'));

src/Models/Data.php

@@ -0,0 +1,40 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Paneon\VueToTwig\Models;
+
+class Data
+{
+    /**
+     * @var string
+     */
+    protected $name;
+
+    /**
+     * @var string
+     */
+    protected $value;
+
+    /**
+     * Property constructor.
+     */
+    public function __construct(string $name, string $value)
+    {
+        $this->name = $name;
+        if (substr_count($value, 'window.')) {
+            $value = 'null';
+        }
+        $this->value = $value;
+    }
+
+    public function getName(): string
+    {
+        return $this->name;
+    }
+
+    public function getValue(): string
+    {
+        return $this->value;
+    }
+}

src/Models/Property.php

@@ -58,6 +58,12 @@ public function getValue(): string
         return $this->value;
     }
 
+    public function setValue(string $value): Property
+    {
+        $this->value = $value;
+        return $this;
+    }
+
     public function isBinding(): bool
     {
         return $this->isBinding;

src/Utils/StyleBuilder.php

@@ -7,6 +7,7 @@
 use DOMElement;
 use Exception;
 use ScssPhp\ScssPhp\Compiler as ScssCompiler;
+use ScssPhp\ScssPhp\Exception\SassException;
 
 class StyleBuilder
 {
@@ -69,26 +70,61 @@ public function setScssData(string $data): void
         $this->scssData = $data;
     }
 
-    public function compile(?DOMElement $styleElement): ?string
+    public function compile(?DOMElement $styleElement, ?string $path = null): ?string
     {
         if (!$styleElement instanceof DOMElement
             || ($styleElement->hasAttribute('scoped') && !($this->outputType & self::STYLE_SCOPED))
             || (!$styleElement->hasAttribute('scoped') && !($this->outputType & self::STYLE))) {
             return null;
         }
 
-        $style = $styleElement->textContent;
+        $style = preg_replace('/ *(?:\/deep\/|>>>)/', '::v-deep', $styleElement->textContent);
 
         if ($styleElement->hasAttribute('lang') && $styleElement->getAttribute('lang') === 'scss') {
             if ($this->scssCompiler === null) {
                 $this->scssCompiler = new ScssCompiler();
             }
-            $style = $this->scssCompiler->compile($this->scssData . ' ' . $style);
+            try {
+                $style = $this->scssCompiler->compileString($this->scssData . ' ' . $style, $path)->getCss();
+            } catch (SassException $e) {
+                $style = "\n/* Warning: " . $e->getMessage() . " */\n";
+            }
         }
 
         if ($styleElement->hasAttribute('scoped')) {
             $this->hasScoped = true;
-            $style = preg_replace('/((?:^|[^},]*?)\S+)(\s*[{,])/i', '$1[' . $this->scopedAttribute . ']$2', $style);
+            preg_match_all(
+                '/(?:^|\s)\s*[^@\s][^{}]+?\s*[{]/i',
+                $style,
+                $matches,
+                PREG_SET_ORDER
+            );
+            foreach ($matches as $match) {
+                $selectors = explode(',', $match[0]);
+                $selectorsCount = count($selectors);
+                $count = 0;
+                foreach ($selectors as $selector) {
+                    if (++$count < $selectorsCount) {
+                        $selector .= ',';
+                    }
+                    if (preg_match('/^[\s}]*::v-deep/', $selector)) {
+                        $style = str_replace(
+                            $selector,
+                            str_replace('::v-deep', '[' . $this->scopedAttribute . ']', $selector),
+                            $style
+                        );
+                    } else {
+                        $regex = strpos($selector, '::v-deep') !== false
+                            ? '/((?:^|\s)\s*[^@\s][a-z0-9-_]+?)((?::{1,2}[a-z-]+)?\s*)(?:::v-deep)/i'
+                            : '/((?:^|\s)\s*[^@\s][a-z0-9-_]+?)((?::{1,2}[a-z-]+)?\s*(?:[,{]|$))/i';
+                        $style = str_replace(
+                            $selector,
+                            preg_replace($regex, '$1[' . $this->scopedAttribute . ']$2', $selector),
+                            $style
+                        );
+                    }
+                }
+            }
         }
 
         return '<style>' . $style . '</style>';

src/Utils/TwigBuilder.php

@@ -153,11 +153,17 @@ public function createBlock(string $content): string
     /**
      * @param Property[] $variables
      */
-    public function createIncludePartial(string $partialPath, array $variables = []): string
+    public function createIncludePartial(string $partialPath, array $variables = [], ?string $vBind = null): string
     {
         $serializedProperties = $this->serializeComponentProperties($variables);
 
-        return $this->createBlock('include "' . $partialPath . '" with ' . $serializedProperties);
+        $content = 'include "' . $partialPath . '" with ' . $serializedProperties;
+
+        if ($vBind) {
+            $content .= '|merge(' . trim($vBind, '"') . ')';
+        }
+
+        return $this->createBlock($content);
     }
 
     /**

tests/AttributeIfTrueTest.php → tests/AttributeWithIfTest.php

@@ -4,7 +4,7 @@
 
 use Exception;
 
-class IfAttributesTest extends AbstractTestCase
+class AttributeWithIfTest extends AbstractTestCase
 {
     /**
      * @dataProvider dataProvider
@@ -42,6 +42,10 @@ public function dataProvider()
                 '<template><form><input type="checkbox" :checked="foo === 1"></form></template>',
                 '<form class="{{ class|default(\'\') }}" style="{{ style|default(\'\') }}"><input type="checkbox" {% if foo == 1 %}checked="checked"{% endif %}></form>',
             ],
+            [
+                '<template><form><input type="checkbox" :disabled="foo === 0" :checked="foo === 1"></form></template>',
+                '<form class="{{ class|default(\'\') }}" style="{{ style|default(\'\') }}"><input type="checkbox" {% if foo == 0 %}disabled="disabled"{% endif %} {% if foo == 1 %}checked="checked"{% endif %}></form>',
+            ],
         ];
     }
 }

tests/CompilerStyleBlockScopedImportTest.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace Paneon\VueToTwig\Tests;
+
+use Exception;
+use Paneon\VueToTwig\Utils\StyleBuilder;
+
+class CompilerStyleBlockScopedImportTest extends AbstractTestCase
+{
+    /**
+     * @dataProvider dataProvider
+     *
+     * @param mixed $html
+     * @param mixed $expected
+     *
+     * @throws Exception
+     */
+    public function testStyleBlock($html, $expected)
+    {
+        $compiler = $this->createCompiler($html);
+        $compiler->setStyleBlockOutputType(StyleBuilder::STYLE_ALL);
+        $compiler->setRelativePath(__DIR__ . '/fixtures/style-block-scoped-import/style-block-scss-scoped-import.vue');
+
+        $actual = $compiler->convert();
+
+        $this->assertEqualHtml($expected, $actual);
+    }
+
+    /**
+     * @return array
+     */
+    public function dataProvider()
+    {
+        return $this->loadFixturesFromDir('style-block-scoped-import');
+    }
+}

tests/DataTest.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace Paneon\VueToTwig\Tests;
+
+use Exception;
+
+class DataTest extends AbstractTestCase
+{
+    /**
+     * @dataProvider dataProvider
+     *
+     * @param mixed $html
+     * @param mixed $expected
+     *
+     * @throws Exception
+     */
+    public function testData($html, $expected)
+    {
+        $compiler = $this->createCompiler($html);
+
+        $compiler->enableDataSupport();
+
+        $actual = $compiler->convert();
+
+        $this->assertEqualHtml($expected, $actual);
+    }
+
+    /**
+     * @return array
+     */
+    public function dataProvider()
+    {
+        return $this->loadFixturesFromDir('data');
+    }
+}

tests/VueShowTest.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace Paneon\VueToTwig\Tests;
+
+use Exception;
+
+class VueShowTest extends AbstractTestCase
+{
+    /**
+     * @dataProvider showProvider
+     *
+     * @param mixed $html
+     * @param mixed $expected
+     *
+     * @throws Exception
+     */
+    public function testIf($html, $expected)
+    {
+        $compiler = $this->createCompiler($html);
+
+        $actual = $compiler->convert();
+
+        $this->assertEqualHtml($expected, $actual);
+    }
+
+    public function showProvider()
+    {
+        return $this->loadFixturesFromDir('vue-show');
+    }
+}

tests/fixtures/data/data-config.twig

@@ -0,0 +1,2 @@
+{% set bar = bar|default('baz') %}
+<div class="{{ class|default('') }}" style="{{ style|default('') }}"> Hello World! </div>

tests/fixtures/data/data-config.vue

@@ -0,0 +1,38 @@
+<template>
+    <div>
+        Hello World!
+    </div>
+</template>
+
+<twig-config>
+    disable-data-support = true;
+</twig-config>
+
+<script>
+    export default {
+        name: 'Foo',
+        props: {
+            bar: {
+                type: String,
+                default: 'baz',
+            },
+        },
+        data() {
+            return {
+                myNumber: 1,
+                myString: 'foo',
+                myArray: [
+                    'a',
+                    'b',
+                    'c',
+                ],
+                myObject: {
+                    a: 'x',
+                    b: 'y',
+                    c: 'z',
+                },
+                calculatedNumber: this.myString.length + 1,
+            };
+        },
+    };
+</script>

tests/fixtures/data/data-typescript.twig

@@ -0,0 +1,6 @@
+{% set bar = bar|default('baz') %}
+{% set myNumber = 1 %}
+{% set myString = 'foo' %}
+{% set myArray = ['a', 'b', 'c'] %}
+{% set myObject = { a: 'x', b: 'y', c: 'z' } %}
+<div class="{{ class|default('') }}" style="{{ style|default('') }}"> Hello World! </div>

tests/fixtures/data/data-typescript.vue

@@ -0,0 +1,23 @@
+<template>
+    <div>
+        Hello World!
+    </div>
+</template>
+
+<script lang="ts">
+    import { Vue, Component, Prop } from 'vue-property-decorator';
+
+    @Component()
+    export default class Foo extends Vue {
+
+        @Prop({ type: String, default: 'baz' }) readonly bar!: string;
+
+        private myNumber = 1;
+
+        private myString = 'foo';
+
+        private myArray = ['a', 'b', 'c'];
+
+        private myObject =  { a: 'x', b: 'y', c: 'z' };
+    };
+</script>

tests/fixtures/data/data-window.twig

@@ -0,0 +1,2 @@
+{% set foo = null %}
+<div class="{{ class|default('') }}" style="{{ style|default('') }}"> Hello World! </div>

tests/fixtures/data/data-window.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    Hello World!
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Foo',
+  data() {
+    return {
+      foo: window.location.href.indexOf('foo') != -1 ? 'www.foo.baz' : 'www.bar.baz'
+    };
+  },
+};
+</script>

tests/fixtures/data/data-with-comment.twig

@@ -0,0 +1,3 @@
+{% set bar = bar|default('baz') %}
+{% set myObject = { a: 'x', b: 'y', c: 'z', } %}
+<div class="{{ class|default('') }}" style="{{ style|default('') }}"> Hello World! </div>

tests/fixtures/data/data-with-comment.vue

@@ -0,0 +1,29 @@
+<template>
+    <div>
+        Hello World!
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'Foo',
+        props: {
+            bar: {
+                type: String,
+                default: 'baz',
+            },
+        },
+        data() {
+            return {
+              /**
+               * Foo
+               */
+                myObject: {
+                    a: 'x',
+                    b: 'y',
+                    c: 'z',
+                },
+            };
+        },
+    };
+</script>

tests/fixtures/data/data.twig

@@ -0,0 +1,7 @@
+{% set bar = bar|default('baz') %}
+{% set myNumber = 1 %}
+{% set myString = 'foo' %}
+{% set myArray = [ 'a', 'b', 'c', ] %}
+{% set myObject = { a: 'x', b: 'y', c: 'z', } %}
+{% set calculatedNumber = myString|length + 1 %}
+<div class="{{ class|default('') }}" style="{{ style|default('') }}"> Hello World! </div>

tests/fixtures/data/data.vue

@@ -0,0 +1,34 @@
+<template>
+    <div>
+        Hello World!
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'Foo',
+        props: {
+            bar: {
+                type: String,
+                default: 'baz',
+            },
+        },
+        data() {
+            return {
+                myNumber: 1,
+                myString: 'foo',
+                myArray: [
+                    'a',
+                    'b',
+                    'c',
+                ],
+                myObject: {
+                    a: 'x',
+                    b: 'y',
+                    c: 'z',
+                },
+                calculatedNumber: this.myString.length + 1,
+            };
+        },
+    };
+</script>

tests/fixtures/style-block-scoped-import/imports/import.scss

@@ -0,0 +1 @@
+$red: #FF0000;

tests/fixtures/style-block-scoped-import/imports/subfolder/import2.scss

@@ -0,0 +1,2 @@
+$red: #AA0000;
+$blue: #0000FF;

tests/fixtures/style-block-scoped-import/style-block-scss-scoped-import.twig

@@ -0,0 +1,6 @@
+<style>.foo[data-v-7e73cf3ea81584bf814227e32d0e09f8] { color: #0000FF;}.foo__bar[data-v-7e73cf3ea81584bf814227e32d0e09f8] { color: #AA0000;}</style>
+<div data-v-7e73cf3ea81584bf814227e32d0e09f8 {{ dataScopedStyleAttribute|default('') }} class="{{ class|default('') }}" style="{{ style|default('') }}">
+    <div class="foo__bar" data-v-7e73cf3ea81584bf814227e32d0e09f8>
+        baz
+    </div>
+</div>

tests/fixtures/style-block-scoped-import/style-block-scss-scoped-import.vue

@@ -0,0 +1,23 @@
+<template>
+<div>
+  <div class="foo__bar">
+    baz
+  </div>
+</div>
+</template>
+
+<style lang="scss" scoped>
+  @import "imports/import";
+  @import "imports/subfolder/import2";
+  .foo {
+    color: $blue;
+    &__bar {
+      color: $red;
+    }
+  }
+</style>
+
+<script>
+    export default {
+    }
+</script>

tests/fixtures/style-block-scoped/include-child-component-with-component-on-root-and-style-block-scoped.twig

@@ -0,0 +1,2 @@
+<style> .foo[data-v-858c11a91dcdf48f12d9b6c5ca636873] { color: purple; }</style>
+{% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'dataScopedStyleAttribute': "data-v-858c11a91dcdf48f12d9b6c5ca636873" ~ " " ~ dataScopedStyleAttribute|default(''), 'class': "foo" ~ " " ~ class|default(''), 'style': "color: black" ~ "; " ~ style|default('') } %}

tests/fixtures/style-block-scoped/include-child-component-with-component-on-root-and-style-block-scoped.vue

@@ -0,0 +1,18 @@
+<template>
+  <ChildComponent class="foo" style="color: black" />
+</template>
+
+<script>
+    export default {
+        name: 'ComponentWithComponentOnRoot',
+        component: {
+          ChildComponent,
+        }
+    };
+</script>
+
+<style scoped>
+  .foo {
+    color: purple;
+  }
+</style>

tests/fixtures/style-block-scoped/include-child-component-with-component-on-root.twig

@@ -0,0 +1 @@
+{% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'dataScopedStyleAttribute': dataScopedStyleAttribute|default(''), 'class': "foo" ~ " " ~ class|default(''), 'style': "color: black" ~ "; " ~ style|default('') } %}

tests/fixtures/style-block-scoped/include-child-component-with-component-on-root.vue

@@ -0,0 +1,12 @@
+<template>
+  <ChildComponent class="foo" style="color: black" />
+</template>
+
+<script>
+    export default {
+        name: 'ComponentWithComponentOnRoot',
+        component: {
+          ChildComponent,
+        }
+    };
+</script>

tests/fixtures/style-block-scoped/include-child-component-with-style-block-scoped.twig

@@ -0,0 +1,2 @@
+<style> .foo[data-v-858c11a91dcdf48f12d9b6c5ca636873] { color: purple; }</style>
+<div data-v-858c11a91dcdf48f12d9b6c5ca636873 {{ dataScopedStyleAttribute|default('') }} class="{{ class|default('') }}" style="{{ style|default('') }}">{% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'dataScopedStyleAttribute': "data-v-858c11a91dcdf48f12d9b6c5ca636873", 'class': "foo", 'style': "color: black" } %}</div>

tests/fixtures/style-block-scoped/include-child-component-with-style-block-scoped.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <ChildComponent class="foo" style="color: black" />
+  </div>
+</template>
+
+<script>
+    export default {
+        name: 'ComponentWithComponentOnRoot',
+        component: {
+          ChildComponent,
+        }
+    };
+</script>
+
+<style scoped>
+  .foo {
+    color: purple;
+  }
+</style>

tests/fixtures/style-block-scoped/style-block-scoped-2.twig

@@ -0,0 +1,5 @@
+<style>
+    .star[data-v-7e44ab20eefdd2c93593e73b7fb7a43c] { margin-right: 0.125rem; width: 3.125rem; height: 3.125rem; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%20100%20100%22%20id%3D%22"); }
+    @media (-ms-high-contrast: none), (-ms-high-contrast: active) { .star[data-v-7e44ab20eefdd2c93593e73b7fb7a43c] { margin-right: -0.3125rem !important; } }
+</style>
+<div class="star {{ class|default('') }}" data-v-7e44ab20eefdd2c93593e73b7fb7a43c {{ dataScopedStyleAttribute|default('') }} style="{{ style|default('') }}"></div>

tests/fixtures/style-block-scoped/style-block-scoped-2.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="star"></div>
+</template>
+
+<style scoped>
+  .star {
+    margin-right: 0.125rem;
+    width: 3.125rem;
+    height: 3.125rem;
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%20100%20100%22%20id%3D%22");
+  }
+  @media (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    .star {
+      margin-right: -0.3125rem !important; }
+  }
+</style>
+
+<script>
+    export default {
+    }
+</script>

tests/fixtures/style-block-scoped/style-block-scoped-3.twig

@@ -0,0 +1,4 @@
+<style>
+    .foo[data-v-9a0d9603def78653cb6bac3e7905721b] { transition: all 400ms ease; overflow: hidden; will-change: height, margin, padding, opacity; }
+</style>
+<div class="foo {{ class|default('') }}" data-v-9a0d9603def78653cb6bac3e7905721b {{ dataScopedStyleAttribute|default('') }} style="{{ style|default('') }}"></div>

tests/fixtures/style-block-scoped/style-block-scoped-3.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="foo"></div>
+</template>
+
+<style scoped>
+  .foo {
+      transition: all 400ms ease;
+      overflow: hidden;
+      will-change: height, margin, padding, opacity;
+  }
+</style>
+
+<script>
+    export default {
+    }
+</script>

tests/fixtures/style-block-scoped/style-block-scoped-4.twig

@@ -0,0 +1,2 @@
+<style>.grow-enter[data-v-de62703e2bdacde95c4bc73d69f14aa5], .grow-leave-to[data-v-de62703e2bdacde95c4bc73d69f14aa5] { width: 0 !important;}.grow-enter-active[data-v-de62703e2bdacde95c4bc73d69f14aa5], .grow-leave-active[data-v-de62703e2bdacde95c4bc73d69f14aa5] { transition: width 0.6s ease;}</style>
+<div class="bar {{ class|default('') }}" data-v-de62703e2bdacde95c4bc73d69f14aa5 {{ dataScopedStyleAttribute|default('') }} style="{{ style|default('') }}"></div>

tests/fixtures/style-block-scoped/style-block-scoped-4.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="bar">
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator';
+
+@Component
+export default class Progressbar extends Vue {
+}
+</script>
+
+<style lang="scss" scoped>
+  .grow-enter,
+  .grow-leave-to {
+    width: 0 !important;
+  }
+  .grow-enter-active,
+  .grow-leave-active {
+    transition: width 0.6s ease;
+  }
+</style>

tests/fixtures/style-block-scoped/style-block-scoped-deep-2.twig

@@ -0,0 +1,10 @@
+<style>
+    .foo[data-v-847688d9dc643995a8ff92078036c174] li:nth-child(2) { color: purple; }
+</style>
+<div data-v-847688d9dc643995a8ff92078036c174 {{ dataScopedStyleAttribute|default('') }} class="{{ class|default('') }}" style="{{ style|default('') }}">
+    <ul class="foo" data-v-847688d9dc643995a8ff92078036c174>
+        <li data-v-847688d9dc643995a8ff92078036c174>foo</li>
+        <li data-v-847688d9dc643995a8ff92078036c174>bar</li>
+        <li data-v-847688d9dc643995a8ff92078036c174>baz</li>
+    </ul>
+</div>

tests/fixtures/style-block-scoped/style-block-scoped-deep-2.vue

@@ -0,0 +1,20 @@
+<template>
+<div>
+  <ul class="foo">
+    <li>foo</li>
+    <li>bar</li>
+    <li>baz</li>
+  </ul>
+</div>
+</template>
+
+<style scoped>
+  .foo /deep/ li:nth-child(2) {
+   color: purple;
+  }
+</style>
+
+<script>
+    export default {
+    }
+</script>

tests/fixtures/style-block-scoped/style-block-scoped-deep-3.twig

@@ -0,0 +1,8 @@
+<style>
+    .foo[data-v-a7086bdfdd04b85fedbd31210be0ce0d] li { color: purple; }
+</style>
+<div data-v-a7086bdfdd04b85fedbd31210be0ce0d {{ dataScopedStyleAttribute|default('') }} class="{{ class|default('') }}" style="{{ style|default('') }}">
+    <ul class="foo" data-v-a7086bdfdd04b85fedbd31210be0ce0d>
+        <li data-v-a7086bdfdd04b85fedbd31210be0ce0d>foo</li>
+    </ul>
+</div>

tests/fixtures/style-block-scoped/style-block-scoped-deep-3.vue

@@ -0,0 +1,18 @@
+<template>
+<div>
+  <ul class="foo">
+    <li>foo</li>
+  </ul>
+</div>
+</template>
+
+<style scoped>
+  .foo >>> li {
+   color: purple;
+  }
+</style>
+
+<script>
+    export default {
+    }
+</script>

tests/fixtures/style-block-scoped/style-block-scoped-deep-4.twig

@@ -0,0 +1,12 @@
+<style>
+    .foo[data-v-7e66383ada15fdfce08f163adad1e7b2] ul > li { color: purple; }
+    .foo[data-v-7e66383ada15fdfce08f163adad1e7b2] ul #first { color: red; }
+    .foo[data-v-7e66383ada15fdfce08f163adad1e7b2] [target=_blank] { color: blue; }
+</style>
+<div class="foo {{ class|default('') }}" data-v-7e66383ada15fdfce08f163adad1e7b2 {{ dataScopedStyleAttribute|default('') }} style="{{ style|default('') }}">
+    <ul data-v-7e66383ada15fdfce08f163adad1e7b2>
+        <li id="first" data-v-7e66383ada15fdfce08f163adad1e7b2>foo</li>
+        <li data-v-7e66383ada15fdfce08f163adad1e7b2>foo</li>
+    </ul>
+    <a href="#" target="_blank" data-v-7e66383ada15fdfce08f163adad1e7b2>foo</a>
+</div>

tests/fixtures/style-block-scoped/style-block-scoped-deep-4.vue

@@ -0,0 +1,26 @@
+<template>
+<div class="foo">
+  <ul>
+    <li id="first">foo</li>
+    <li>foo</li>
+  </ul>
+  <a href="#" target="_blank">foo</a>
+</div>
+</template>
+
+<style scoped>
+  .foo::v-deep ul > li {
+   color: purple;
+  }
+  .foo::v-deep ul #first {
+    color: red;
+  }
+  .foo::v-deep [target=_blank] {
+    color: blue;
+  }
+</style>
+
+<script>
+    export default {
+    }
+</script>

tests/fixtures/style-block-scoped/style-block-scoped-deep-with-scss-2.twig

@@ -0,0 +1,6 @@
+<style>.foo[data-v-a75773abe77e60d5eec0d774b5e2deab] { color: black;}[data-v-a75773abe77e60d5eec0d774b5e2deab] .foo__bar { color: purple;}</style>
+<div class="foo {{ class|default('') }}" data-v-a75773abe77e60d5eec0d774b5e2deab {{ dataScopedStyleAttribute|default('') }} style="{{ style|default('') }}">
+    <span class="foo__bar" data-v-a75773abe77e60d5eec0d774b5e2deab>
+        test
+    </span>
+</div>

tests/fixtures/style-block-scoped/style-block-scoped-deep-with-scss-2.vue

@@ -0,0 +1,22 @@
+<template>
+<div class="foo">
+  <span class="foo__bar">
+    test
+  </span>
+</div>
+</template>
+
+<style lang="scss" scoped>
+  .foo {
+    color: black;
+
+    /deep/ &__bar {
+      color: purple;
+    }
+  }
+</style>
+
+<script>
+    export default {
+    }
+</script>

tests/fixtures/style-block-scoped/style-block-scoped-deep-with-scss.twig

@@ -0,0 +1,6 @@
+<style>.foo[data-v-fd8b19a241436e9520956030475ed391] { color: red;}.foo[data-v-fd8b19a241436e9520956030475ed391] .bar { color: blue;}</style>
+<div data-v-fd8b19a241436e9520956030475ed391 {{ dataScopedStyleAttribute|default('') }} class="{{ class|default('') }}" style="{{ style|default('') }}">
+    <div class="foo" data-v-fd8b19a241436e9520956030475ed391>
+        foo
+    </div>
+</div>

tests/fixtures/style-block-scoped/style-block-scoped-deep-with-scss.vue

@@ -0,0 +1,21 @@
+<template>
+<div>
+  <div class="foo">
+    foo
+  </div>
+</div>
+</template>
+
+<style lang="scss" scoped>
+  .foo {
+    color: red;
+    & /deep/ .bar {
+      color: blue;
+    }
+  }
+</style>
+
+<script>
+    export default {
+    }
+</script>

tests/fixtures/style-block-scoped/style-block-scoped-deep.twig

@@ -0,0 +1,9 @@
+<style>
+    .foo[data-v-34e67cc3ec28c53ca40eb2cd78aa6d35] { color: red; }
+    .foo[data-v-34e67cc3ec28c53ca40eb2cd78aa6d35] .bar { color: blue; }
+</style>
+<div data-v-34e67cc3ec28c53ca40eb2cd78aa6d35 {{ dataScopedStyleAttribute|default('') }} class="{{ class|default('') }}" style="{{ style|default('') }}">
+    <div class="foo" data-v-34e67cc3ec28c53ca40eb2cd78aa6d35>
+        foo
+    </div>
+</div>

tests/fixtures/style-block-scoped/style-block-scoped-deep.vue

@@ -0,0 +1,21 @@
+<template>
+<div>
+  <div class="foo">
+    foo
+  </div>
+</div>
+</template>
+
+<style scoped>
+  .foo {
+    color: red;
+  }
+  .foo /deep/ .bar {
+   color: blue;
+  }
+</style>
+
+<script>
+    export default {
+    }
+</script>

tests/fixtures/style-block-scoped/style-block-scoped-v-deep-with-scss.twig

@@ -0,0 +1,6 @@
+<style>.foo[data-v-380077bd8cc6cda5c4990f3e4ac075fd] { color: red;}.foo[data-v-380077bd8cc6cda5c4990f3e4ac075fd] .bar { color: blue;}</style>
+<div data-v-380077bd8cc6cda5c4990f3e4ac075fd {{ dataScopedStyleAttribute|default('') }} class="{{ class|default('') }}" style="{{ style|default('') }}">
+    <div class="foo" data-v-380077bd8cc6cda5c4990f3e4ac075fd>
+        foo
+    </div>
+</div>

tests/fixtures/style-block-scoped/style-block-scoped-v-deep-with-scss.vue

@@ -0,0 +1,21 @@
+<template>
+<div>
+  <div class="foo">
+    foo
+  </div>
+</div>
+</template>
+
+<style lang="scss" scoped>
+  .foo {
+    color: red;
+    &::v-deep .bar {
+      color: blue;
+    }
+  }
+</style>
+
+<script>
+    export default {
+    }
+</script>

tests/fixtures/style-block-scoped/style-block-scoped-v-deep.twig

@@ -0,0 +1,9 @@
+<style>
+    .foo[data-v-edb841210d6b44de44e970ef62228269] { color: red; }
+    .foo[data-v-edb841210d6b44de44e970ef62228269] .bar { color: blue; }
+</style>
+<div data-v-edb841210d6b44de44e970ef62228269 {{ dataScopedStyleAttribute|default('') }} class="{{ class|default('') }}" style="{{ style|default('') }}">
+    <div class="foo" data-v-edb841210d6b44de44e970ef62228269>
+        foo
+    </div>
+</div>

tests/fixtures/style-block-scoped/style-block-scoped-v-deep.vue

@@ -0,0 +1,21 @@
+<template>
+<div>
+  <div class="foo">
+    foo
+  </div>
+</div>
+</template>
+
+<style scoped>
+  .foo {
+    color: red;
+  }
+  .foo::v-deep .bar {
+   color: blue;
+  }
+</style>
+
+<script>
+    export default {
+    }
+</script>

tests/fixtures/style-block-scoped/style-block-scoped-with-child-binding.twig

@@ -1,10 +1,10 @@
 <style>
-  .foo[data-v-a2116698cabca27b45a4db453446b8d2] {
+  .foo[data-v-7ac31a851ab0c4c52bc569b6f256bfe4] {
     color: red;
   }
 </style>
-<div class="root {{ class|default('') }}" data-v-a2116698cabca27b45a4db453446b8d2 {{ dataScopedStyleAttribute|default('') }} style="{{ style|default('') }}">
-  <div class="foo" data-v-a2116698cabca27b45a4db453446b8d2>
-    {% include "/templates/ChildComponent.twig" with { 'dataScopedStyleAttribute': "data-v-a2116698cabca27b45a4db453446b8d2", 'class': "", 'style': "" } %}
+<div class="root {{ class|default('') }}" data-v-7ac31a851ab0c4c52bc569b6f256bfe4 {{ dataScopedStyleAttribute|default('') }} style="{{ style|default('') }}">
+  <div class="foo" data-v-7ac31a851ab0c4c52bc569b6f256bfe4>
+    {% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'dataScopedStyleAttribute': "data-v-7ac31a851ab0c4c52bc569b6f256bfe4", 'class': "", 'style': "" } %}
   </div>
 </div>

tests/fixtures/style-block-scoped/style-block-scoped.twig

@@ -1,26 +1,26 @@
 <style>
-  .foo[data-v-6737f06d5bb113335593e128322855f1] {
+  .foo[data-v-298e350ad072842c5a52ec31b90d5edf] {
     color: red;
   }
-  .bar[data-v-6737f06d5bb113335593e128322855f1],
-  .baz[data-v-6737f06d5bb113335593e128322855f1] {
+  .bar[data-v-298e350ad072842c5a52ec31b90d5edf],
+  .baz[data-v-298e350ad072842c5a52ec31b90d5edf] {
     color: blue;
   }
-  .foo:after[data-v-6737f06d5bb113335593e128322855f1] {
+  .foo[data-v-298e350ad072842c5a52ec31b90d5edf]:after {
     display: none;
   }
-  .root .bar[data-v-6737f06d5bb113335593e128322855f1] {
+  .root .bar[data-v-298e350ad072842c5a52ec31b90d5edf] {
     text-decoration: underline;
   }
 </style>
-<div class="root {{ class|default('') }}" data-v-6737f06d5bb113335593e128322855f1 {{ dataScopedStyleAttribute|default('') }} style="{{ style|default('') }}">
-  <div class="foo" data-v-6737f06d5bb113335593e128322855f1>
+<div class="root {{ class|default('') }}" data-v-298e350ad072842c5a52ec31b90d5edf {{ dataScopedStyleAttribute|default('') }} style="{{ style|default('') }}">
+  <div class="foo" data-v-298e350ad072842c5a52ec31b90d5edf>
     foo
   </div>
-  <div class="bar" data-v-6737f06d5bb113335593e128322855f1>
+  <div class="bar" data-v-298e350ad072842c5a52ec31b90d5edf>
     bar
   </div>
-  <div class="baz" data-v-6737f06d5bb113335593e128322855f1>
+  <div class="baz" data-v-298e350ad072842c5a52ec31b90d5edf>
     baz
   </div>
 </div>

tests/fixtures/style-block-scoped/style-block-scss-scoped.twig

@@ -1,6 +1,6 @@
-<style>.foo[data-v-eb50964453fb1d39d2d2f020c6639c00] { color: red; } .foo__bar[data-v-eb50964453fb1d39d2d2f020c6639c00] { color: blue; } .foo__baz[data-v-eb50964453fb1d39d2d2f020c6639c00] { color: #00FF00; }</style>
-<div data-v-eb50964453fb1d39d2d2f020c6639c00 {{ dataScopedStyleAttribute|default('') }} class="{{ class|default('') }}" style="{{ style|default('') }}">
-    <div class="foo__bar" data-v-eb50964453fb1d39d2d2f020c6639c00>
+<style>.foo[data-v-bc2fd2697c25be635fabb11cba6f24b9] { color: red;}.foo__bar[data-v-bc2fd2697c25be635fabb11cba6f24b9] { color: blue;}.foo__baz[data-v-bc2fd2697c25be635fabb11cba6f24b9] { color: #00FF00;}</style>
+<div data-v-bc2fd2697c25be635fabb11cba6f24b9 {{ dataScopedStyleAttribute|default('') }} class="{{ class|default('') }}" style="{{ style|default('') }}">
+    <div class="foo__bar" data-v-bc2fd2697c25be635fabb11cba6f24b9>
       baz
     </div>
 </div>

tests/fixtures/style-block-scoped/style-block.twig

@@ -1,6 +1,6 @@
 <style> .foo { color: red; }</style>
 <div {{ dataScopedStyleAttribute|default('') }} class="{{ class|default('') }}" style="{{ style|default('') }}">
-    <div class="foo" {{ dataScopedStyleAttribute|default('') }}>
+    <div class="foo">
       foo
     </div>
 </div>

tests/fixtures/style-block-scoped/style-blocks.twig

@@ -1,8 +1,8 @@
 <style> .foo { color: red; }</style>
-<style> .bar[data-v-9d8ac5d70d06b0f0d2a21f893932dffe] { color: blue; }</style>
-<style>.baz { color: #00FF00; }</style>
-<div data-v-9d8ac5d70d06b0f0d2a21f893932dffe {{ dataScopedStyleAttribute|default('') }} class="{{ class|default('') }}" style="{{ style|default('') }}">
-    <div class="foo bar baz" data-v-9d8ac5d70d06b0f0d2a21f893932dffe>
+<style> .bar[data-v-d90c32720cdc50ff836bde94d71a2bb5] { color: blue; }</style>
+<style>.baz { color: #00FF00;}</style>
+<div data-v-d90c32720cdc50ff836bde94d71a2bb5 {{ dataScopedStyleAttribute|default('') }} class="{{ class|default('') }}" style="{{ style|default('') }}">
+    <div class="foo bar baz" data-v-d90c32720cdc50ff836bde94d71a2bb5>
       42
     </div>
 </div>

tests/fixtures/style-block/style-block-scss-error-handling.twig

@@ -0,0 +1,6 @@
+<style>/* Warning: `./file` file not found for @import: line: 2, column: 1 */</style>
+<div class="{{ class|default('') }}" style="{{ style|default('') }}">
+    <div class="foo">
+      foo
+    </div>
+</div>

tests/fixtures/style-block/style-block-scss-error-handling.vue

@@ -0,0 +1,26 @@
+<template>
+<div>
+  <div class="foo">
+    foo
+  </div>
+</div>
+</template>
+
+<style lang="scss">
+@import "./file";
+
+.foo {
+  color: red;
+  &__bar {
+    color: blue;
+  }
+  &__baz {
+    color: $color;
+  }
+}
+</style>
+
+<script>
+    export default {
+    }
+</script>

tests/fixtures/style-block/style-block-scss.twig

@@ -1,4 +1,4 @@
-<style>.foo { color: red; } .foo__bar { color: blue; } .foo__baz { color: #00FF00; }</style>
+<style>.foo { color: red;}.foo__bar { color: blue;}.foo__baz { color: #00FF00;}</style>
 <div class="{{ class|default('') }}" style="{{ style|default('') }}">
     <div class="foo">
       foo

tests/fixtures/vue-bind/binding-with-array-with-object-binding-2.twig

@@ -0,0 +1,7 @@
+{% set foo = foo|default(false) %}
+{% set bar = bar|default(false) %}
+<div class="{{ class|default('') }}" style="{{ style|default('') }}">
+  <div class="a {{ foo or bar ? 'b' }}">
+    Foo
+  </div>
+</div>

tests/fixtures/vue-bind/binding-with-array-with-object-binding-2.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <div :class="['a', { 'b': foo || bar } ]">
+      Foo
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    foo: {
+      type: Boolean,
+      default: false,
+    },
+    bar: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

tests/fixtures/vue-bind/binding-with-array-with-object-binding-3.twig

@@ -0,0 +1,6 @@
+{% set isDisabled = isDisabled|default(false) %}
+<div class="{{ class|default('') }}" style="{{ style|default('') }}">
+  <div class="a {{ isDisabled ? 'a--disabled' }} b">
+    Foo
+  </div>
+</div>

tests/fixtures/vue-bind/binding-with-array-with-object-binding-3.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <div :class='["a", { "a--disabled": isDisabled }, "b" ]'>
+      Foo
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

tests/fixtures/vue-bind/binding-with-array-with-object-binding.twig

@@ -0,0 +1,6 @@
+{% set isDisabled = isDisabled|default(false) %}
+<div class="{{ class|default('') }}" style="{{ style|default('') }}">
+  <div class="a {{ isDisabled ? 'a--disabled' }} b">
+    Foo
+  </div>
+</div>

tests/fixtures/vue-bind/binding-with-array-with-object-binding.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <div :class="['a', { 'a--disabled': isDisabled }, 'b' ]">
+      Foo
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

tests/fixtures/vue-bind/binding-with-array-with-template-string.twig

@@ -0,0 +1,6 @@
+{% set isDisabled = isDisabled|default(false) %}
+<div class="{{ class|default('') }}" style="{{ style|default('') }}">
+  <div class="a b {{ isDisabled ? 'b--disabled' : '' }}">
+    Foo
+  </div>
+</div>

tests/fixtures/vue-bind/binding-with-array-with-template-string.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <div :class="['a', `b ${isDisabled ? 'b--disabled' : ''}`]">
+      Foo
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

tests/fixtures/vue-bind/binding-with-array.twig

@@ -0,0 +1,5 @@
+<div class="{{ class|default('') }}" style="{{ style|default('') }}">
+  <div class="foo foo__bar foo__bar--baz">
+    Foo
+  </div>
+</div>

tests/fixtures/vue-bind/binding-with-array.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <div :class="['foo', 'foo__bar', 'foo__bar--baz']">
+      Foo
+    </div>
+  </div>
+</template>

tests/fixtures/vue-bind/binding-with-template-string-4.twig

@@ -0,0 +1,9 @@
+{% set foo = foo|default('') %}
+<div class="block {{ class|default('') }}" style="{{ style|default('') }}">
+  <div style="width: {{ size }}px; height: {{ size }}px;">
+    Foo
+  </div>
+  <div style='{{ foo ? foo : "width: " ~ ( size ) ~ "px; height: " ~ ( size ) ~ "px;" }};'>
+    Bar
+  </div>
+</div>

tests/fixtures/vue-bind/binding-with-template-string-4.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="block">
+    <div :style="`width: ${size}px; height: ${size}px;`">
+      Foo
+    </div>
+    <div :style="foo ? foo : `width: ${size}px; height: ${size}px;`">
+      Bar
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+      props: {
+        foo: {
+          type: String,
+          default: '',
+        },
+        size: {
+              type: Number,
+              required: true,
+          },
+      },
+  };
+</script>

tests/fixtures/vue-bind/bindings-style.twig

@@ -0,0 +1,26 @@
+<div class="{{ class|default('') }}" style="{{ style|default('') }}">
+  <span style="color: #ff0000">
+    test
+  </span>
+  <span style="{{ 'color: #ff0000' }};">
+    test
+  </span>
+  <span style="{{ 'color:' ~ '#ff0000' }};">
+    test
+  </span>
+  <span style="{{ 'width:' ~ w ~ 'px' }}; {{ ' height:' ~ h ~ 'px' }};">
+    test
+  </span>
+  <span style="{{ isSomething ? 'color: red' }}; {{ not isSomething ? 'color: blue' }};">
+    test
+  </span>
+  <span style="{{ isSomething ? 'display: block;' : 'display: inline;' }};">
+    test
+  </span>
+  <span style="{{ 'background-color:' ~ color }};">
+    test
+  </span>
+  <span style="{{ 'background-color:' ~ color }};">
+    test
+  </span>
+</div>

tests/fixtures/vue-bind/bindings-style.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <span style="color: #ff0000">
+      test
+    </span>
+    <span :style="'color: #ff0000'">
+      test
+    </span>
+    <span :style="{color: '#ff0000'}">
+      test
+    </span>
+    <span :style="{width: w + 'px', height: h + 'px'}">
+      test
+    </span>
+    <span :style="{'color: red': isSomething, 'color: blue': !isSomething}">
+      test
+    </span>
+    <span :style="isSomething ? 'display: block;' : 'display: inline;'">
+      test
+    </span>
+    <span :style="'background-color:' + color">
+      test
+    </span>
+    <span :style="{backgroundColor: color}">
+      test
+    </span>
+  </div>
+</template>

tests/fixtures/vue-bind/bindings.twig

@@ -4,12 +4,12 @@
     <img src="{{ imageSrc }}">
     <img src="{{ imageSrc }}">
     <div class="a b c"></div>
-    <div title="Title" class="category-filter-list categories {{ isSomething ? 'block ' }} {{ not isSomething ? 'block2 ' }}"></div>
+    <div title="Title" class="category-filter-list categories {{ isSomething ? 'block' }} {{ not isSomething ? 'block2' }}"></div>
     <div class="{{ getClasses(not hasSomething) }}"></div>
     <div style="{{ 'display: none !important' }};">Hidden</div>
     <div style="color: red; {{ 'display: none !important' }};">Hidden</div>
-    <div style="border: 1px solid #000000; {{ isSomething ? 'color: red ' }}; {{ not isSomething ? 'color: blue ' }};">Hidden</div>
-    <div class="{{ bar ? 'foo ' }}"></div>
-    <div class="{{ bar ? 'foo ' }}"></div>
+    <div style="border: 1px solid #000000; {{ isSomething ? 'color: red' }}; {{ not isSomething ? 'color: blue' }};">Hidden</div>
+    <div class="{{ bar ? 'foo' }}"></div>
+    <div class="{{ bar ? 'foo' }}"></div>
   </div>
 </div>

tests/fixtures/vue-bind/double-attribute-binding.twig

@@ -2,7 +2,7 @@
   <div class="static1 static2 dynamic dynamic--{{ modifier }}">
     Hello World
   </div>
-  <div class="static1 static2 {{ true ? 'my-class ' }}">
+  <div class="static1 static2 {{ true ? 'my-class' }}">
     With Object Binding
   </div>
 </div>

tests/fixtures/vue-component/component-with-child-binding-2.twig

@@ -0,0 +1,4 @@
+{% set test = test|default(false) %}
+<div class="{{ class|default('') }}" style="{{ style|default('') }}">
+  {% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'class': 'foo' ~ " " ~ ( test ? 'bar' ) ~ " " ~ ( not test ? 'baz' ), 'style': "" } %}
+</div>

tests/fixtures/vue-component/component-with-child-binding-2.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <ChildComponent :class="['foo', {'bar': test}, {'baz': !test}]" />
+  </div>
+</template>
+<script>
+    export default {
+        name: 'component-with-child-binding.vue',
+        component: {
+            ChildComponent,
+        },
+        props: {
+            test: {
+                type: Boolean,
+                default: false
+            },
+        },
+    };
+</script>

tests/fixtures/vue-component/component-with-child-binding-3.twig

@@ -0,0 +1,4 @@
+{% set test = test|default(false) %}
+<div class="{{ class|default('') }}" style="{{ style|default('') }}">
+  {% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'class': "foo" ~ " " ~ ( test ? 'bar' ) ~ " " ~ ( not test ? 'baz' ), 'style': "" } %}
+</div>

tests/fixtures/vue-component/component-with-child-binding-3.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <ChildComponent :class='["foo", {"bar": test}, {"baz": !test}]' />
+  </div>
+</template>
+<script>
+    export default {
+        name: 'component-with-child-binding.vue',
+        component: {
+            ChildComponent,
+        },
+        props: {
+            test: {
+                type: Boolean,
+                default: false
+            },
+        },
+    };
+</script>

tests/fixtures/vue-component/component-with-child-binding-4.twig

@@ -0,0 +1,4 @@
+{% set test = test|default(false) %}
+<div class="{{ class|default('') }}" style="{{ style|default('') }}">
+  {% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'class': 'foo' ~ " " ~ ( test ? 'bar' ) ~ " " ~ ( not test ? 'baz' ), 'style': "" } %}
+</div>

tests/fixtures/vue-component/component-with-child-binding-4.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <ChildComponent :class="['foo', {'bar': test}, {'baz': !test}, ]" />
+  </div>
+</template>
+<script>
+    export default {
+        name: 'component-with-child-binding.vue',
+        component: {
+            ChildComponent,
+        },
+        props: {
+            test: {
+                type: Boolean,
+                default: false
+            },
+        },
+    };
+</script>

tests/fixtures/vue-component/component-with-child-binding.twig

@@ -1,8 +1,8 @@
 <div class="{{ class|default('') }}" style="{{ style|default('') }}">
-  {% include "/templates/ChildComponent.twig" with { 'test': "test", 'class': "", 'style': ( "fill:" ~ ( color ) ~ ";" ) } %}
-  {% include "/templates/ChildComponent.twig" with { 'class': "", 'style': "color: red" ~ "; " ~ ( "fill:" ~ ( color ) ~ ";" ) } %}
-  {% include "/templates/ChildComponent.twig" with { 'class': "foo" ~ " " ~ ( "bar" ), 'style': "" } %}
-  {% include "/templates/ChildComponent.twig" with { 'class': "foo" ~ " " ~ ( bar ), 'style': "" } %}
-  {% include "/templates/ChildComponent.twig" with { 'class': "product-column__tile" ~ " " ~ ( isSingleProductTile ? 'product-column__tile--large ' ), 'style': "" } %}
-  {% include "/templates/ChildComponent.twig" with { 'ariaLabelledby': "foo-" ~ ( _uid ) ~ "", 'class': "", 'style': "" } %}
+  {% include "/templates/ChildComponent.twig" with { 'test': "test", 'slot_default': "", 'class': "", 'style': ( "fill:" ~ ( color ) ~ ";" ) } %}
+  {% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'class': "", 'style': "color: red" ~ "; " ~ ( "fill:" ~ ( color ) ~ ";" ) } %}
+  {% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'class': "foo" ~ " " ~ ( "bar" ), 'style': "" } %}
+  {% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'class': "foo" ~ " " ~ ( bar ), 'style': "" } %}
+  {% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'class': "product-column__tile" ~ " " ~ ( isSingleProductTile ? 'product-column__tile--large' ), 'style': "" } %}
+  {% include "/templates/ChildComponent.twig" with { 'ariaLabelledby': "foo-" ~ ( _uid ) ~ "", 'slot_default': "", 'class': "", 'style': "" } %}
 </div>

tests/fixtures/vue-component/component-with-child.twig

@@ -1,3 +1,3 @@
 <div class="{{ class|default('') }}" style="{{ style|default('') }}">
-  {% include "/templates/ChildComponent.twig" with { 'class': "", 'style': "" } %}
+  {% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'class': "", 'style': "" } %}
 </div>

tests/fixtures/vue-component/component-with-for.twig

@@ -1,3 +1,3 @@
 <div class="{{ class|default('') }}" style="{{ style|default('') }}">
-  {% for a in listOfProducts %}{% include "/templates/ChildComponent.twig" with { 'string': "string", 'product': productA, 'class': "", 'style': "" } %}{% endfor %}
+  {% for a in listOfProducts %}{% include "/templates/ChildComponent.twig" with { 'string': "string", 'product': productA, 'slot_default': "", 'class': "", 'style': "" } %}{% endfor %}
 </div>

tests/fixtures/vue-component/component-with-if.twig

@@ -1,3 +1,3 @@
 <div class="{{ class|default('') }}" style="{{ style|default('') }}">
-  {% if a > 5 %}{% include "/templates/ChildComponent.twig" with { 'string': "string", 'product': productA, 'class': "", 'style': "" } %}{% endif %}
+  {% if a > 5 %}{% include "/templates/ChildComponent.twig" with { 'string': "string", 'product': productA, 'slot_default': "", 'class': "", 'style': "" } %}{% endif %}
 </div>

tests/fixtures/vue-component/component-with-inline-condition-prop.twig

@@ -2,5 +2,5 @@
   {% include "/templates/ChildComponent.twig" with {
     'product': testProduct,
     'showSomething': index > 5 and a == true,
-    'testA': "Hello", 'string': "Test", 'class': "", 'style': "" } %}
+    'testA': "Hello", 'string': "Test", 'slot_default': "", 'class': "", 'style': "" } %}
 </div>

tests/fixtures/vue-component/component-with-prop.twig

@@ -1,3 +1,3 @@
 <div class="{{ class|default('') }}" style="{{ style|default('') }}">
-  {% include "/templates/ChildComponent.twig" with { 'product': testProduct, 'testA': "Hello", 'string': "Test", 'class': "", 'style': "" } %}
+  {% include "/templates/ChildComponent.twig" with { 'product': testProduct, 'testA': "Hello", 'string': "Test", 'slot_default': "", 'class': "", 'style': "" } %}
 </div>

tests/fixtures/vue-component/component-with-v-bind-props.twig

@@ -0,0 +1,5 @@
+{% set foo = foo|default('foo') %}
+{% set bar = bar|default(42) %}
+<div class="{{ class|default('') }}" style="{{ style|default('') }}">
+  {% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'foo': foo, 'bar': bar, 'class': "", 'style': "" } %}
+</div>

tests/fixtures/vue-component/component-with-v-bind-props.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <ChildComponent v-bind="$props" />
+  </div>
+</template>
+
+<script lang="ts">
+    import { Component, Prop, Vue } from 'vue-property-decorator';
+
+    @Component
+    export default class ComponentWithVBind extends Vue {
+      @Prop({ type: String, default: 'foo' }) foo: string;
+      @Prop({ type: Number, default: 42 }) bar: number;
+    }
+</script>

tests/fixtures/vue-component/component-with-v-bind.twig

@@ -0,0 +1,3 @@
+<div class="{{ class|default('') }}" style="{{ style|default('') }}">
+  {% include "/templates/ChildComponent.twig" with { 'bar': "baz", 'slot_default': "", 'class': "", 'style': "" }|merge(foo) %}
+</div>

tests/fixtures/vue-component/component-with-v-bind.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <ChildComponent v-bind="foo" bar="baz" />
+  </div>
+</template>
+
+<script>
+    export default {
+        name: 'ComponentWithVBind',
+    };
+</script>

tests/fixtures/vue-show/single-node.twig

@@ -0,0 +1,3 @@
+{% if foo %}
+  <div class="{{ class|default('') }}" style="{{ style|default('') }}">Text</div>
+{% endif %}

tests/fixtures/vue-show/single-node.vue

@@ -0,0 +1,3 @@
+<template>
+  <div v-show="foo">Text</div>
+</template>

tests/fixtures/vue-show/with-v-if.twig

@@ -0,0 +1,3 @@
+{% if (foo) and (bar) %}
+  <div class="{{ class|default('') }}" style="{{ style|default('') }}">Text</div>
+{% endif %}

tests/fixtures/vue-show/with-v-if.vue

@@ -0,0 +1,3 @@
+<template>
+  <div v-if="foo" v-show="bar">Text</div>
+</template>

tests/fixtures/vue-slot/child-component-in-slot.twig

@@ -0,0 +1,4 @@
+{% set slot_default_fallback %}{% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'class': "", 'style': "" } %}{% endset %}
+<div class="{{ class|default('') }}" style="{{ style|default('') }}">
+    {{ slot_default|default(slot_default_fallback) }}
+</div>

tests/fixtures/vue-slot/child-component-in-slot.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <slot>
+      <ChildComponent/>
+    </slot>
+  </div>
+</template>
+<script>
+    export default {
+        name: 'component-with-child.vue',
+        component: {
+            ChildComponent,
+        }
+    };
+</script>

tests/fixtures/vue-slot/component-has-named-slots-2.twig

@@ -0,0 +1,3 @@
+<div class="container {{ class|default('') }}" style="{{ style|default('') }}">
+  {{ slot_foo_bar|default('') }}
+</div>

tests/fixtures/vue-slot/component-has-named-slots-2.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="container">
+    <slot name="foo-bar" />
+  </div>
+</template>
+<script>
+  export default {
+    name: 'BaseLayout',
+  };
+</script>

tests/fixtures/vue-slot/component-has-two-default-slots-with-fallback-value.twig

@@ -0,0 +1,11 @@
+{% set slot_default_fallback %}{{ text }}{% endset %}
+{% set slot_default_fallback_2 %}{{ text }}{% endset %}
+{% if true %}
+<a href="#" class="{{ class|default('') }}" style="{{ style|default('') }}">
+    {{ slot_default|default(slot_default_fallback) }}
+</a>
+{% else %}
+<button class="{{ class|default('') }}" style="{{ style|default('') }}">
+    {{ slot_default|default(slot_default_fallback_2) }}
+</button>
+{% endif %}

tests/fixtures/vue-slot/component-has-two-default-slots-with-fallback-value.vue

@@ -0,0 +1,13 @@
+<template>
+  <a v-if="true" href="#">
+    <slot>{{ text }}</slot>
+  </a>
+  <button v-else>
+    <slot>{{ text }}</slot>
+  </button>
+</template>
+<script>
+    export default {
+        name: 'ComponentWithTowDefaultSlots',
+    };
+</script>

tests/fixtures/vue-slot/include-child-component-with-default-slot-and-props.twig

@@ -0,0 +1,4 @@
+{% set text = text|default('foo') %}
+{% set slot_default_fallback %}{{ text }}{% endset %}
+{% set slot_default_value %}{{ slot_default|default(slot_default_fallback) }}{% endset %}
+{% include "/templates/ChildComponent.twig" with { 'slot_default': slot_default_value, 'class': class|default(''), 'style': style|default('') } %}

tests/fixtures/vue-slot/include-child-component-with-default-slot-and-props.vue

@@ -0,0 +1,19 @@
+<template>
+  <ChildComponent>
+    <slot>{{ text }}</slot>
+  </ChildComponent>
+</template>
+<script>
+  export default {
+    name: 'ComponentWithSlot',
+    component: {
+      ChildComponent,
+    },
+    props: {
+      text: {
+        type: String,
+        default: 'foo'
+      },
+    },
+  };
+</script>

tests/fixtures/vue-slot/include-child-component-with-named-slots-2.twig

@@ -0,0 +1,5 @@
+<div class="{{ class|default('') }}" style="{{ style|default('') }}">
+  {% set slot_foo_bar_value %}baz{% endset %}
+  {% set slot_default_value %}{% endset %}
+  {% include "/templates/ChildComponent.twig" with { 'slot_foo_bar': slot_foo_bar_value, 'slot_default': slot_default_value, 'class': "", 'style': "" } %}
+</div>

tests/fixtures/vue-slot/include-child-component-with-named-slots-2.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <ChildComponent>
+      <template v-slot:foo-bar>
+        baz
+      </template>
+    </ChildComponent>
+  </div>
+</template>
+<script>
+    export default {
+        name: 'ComponentWithSlot',
+        component: {
+          ChildComponent,
+        }
+    };
+</script>

tests/fixtures/vue-slot/include-child-component-without-default-slot.twig

@@ -0,0 +1,3 @@
+<div class="{{ class|default('') }}" style="{{ style|default('') }}">
+  {% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'class': "", 'style': "" } %}
+</div>

tests/fixtures/vue-slot/include-child-component-without-default-slot.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <ChildComponent />
+  </div>
+</template>
+<script>
+    export default {
+        name: 'ComponentWithoutDefaultSlot',
+        component: {
+            ChildComponent,
+        }
+    };
+</script>