added test for scss scoped import fixed test canges caused by scssphp 1.4.0

Author: alexander.bachmann

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/fixtures/style-block-scoped-import/import.scss

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

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

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

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

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

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

@@ -1,2 +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>
+<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-scss-scoped.twig

@@ -1,4 +1,4 @@
-<style>.foo[data-v-bc2fd2697c25be635fabb11cba6f24b9] { color: red; } .foo__bar[data-v-bc2fd2697c25be635fabb11cba6f24b9] { color: blue; } .foo__baz[data-v-bc2fd2697c25be635fabb11cba6f24b9] { color: #00FF00; }</style>
+<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

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

@@ -1,6 +1,6 @@
 <style> .foo { color: red; }</style>
 <style> .bar[data-v-d90c32720cdc50ff836bde94d71a2bb5] { color: blue; }</style>
-<style>.baz { color: #00FF00; }</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

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