Merge pull request #42 from Paneon/master

Update master

Author: tronsha

src/Compiler.php

@@ -463,7 +463,13 @@ private function preparePropertiesForInclude(array $variables, bool $isRootNode
                     );
                 }
             } elseif ($name === 'vBind') {
-                $this->vBind = $value;
+                if ($value === '"$props"') {
+                    foreach ($this->properties as $property) {
+                        $variables[] = (clone $property)->setValue($property->getName());
+                    }
+                } else {
+                    $this->vBind = $value;
+                }
                 unset($variables[$key]);
             }
         }

src/Utils/StyleBuilder.php

@@ -85,7 +85,9 @@ public function compile(?DOMElement $styleElement, ?string $path = null): ?strin
                 $this->scssCompiler = new ScssCompiler();
             }
             try {
+                $style = str_replace('/deep/', '__vue_to_twig_deep_placeholder__', $style);
                 $style = $this->scssCompiler->compile($this->scssData . ' ' . $style, $path);
+                $style = str_replace('__vue_to_twig_deep_placeholder__', '/deep/', $style);
             } catch (CompilerException $e) {
                 $style = "\n/* Warning: " . $e->getMessage() . " */\n";
             }

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/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>