Merge pull request #91 from SupraSmooth/master

Allow Scoped SCSS Imports + Update phpscss to 1.4.0

Author: Macavity

composer.json

@@ -13,7 +13,7 @@
         "php": ">=7.1",
         "ext-dom": "*",
         "ext-libxml": "*",
-        "scssphp/scssphp": "1.1.1",
+        "scssphp/scssphp": "1.4.0",
         "squizlabs/php_codesniffer": "^3.3",
         "ramsey/uuid": "^3.8"
     },

composer.lock

@@ -66,6 +66,11 @@ class Compiler
      */
     protected $styleBuilder;
 
+    /**
+     * @var string|null
+     */
+    protected $relativePath = null;
+
     /**
      * @var NodeHelper
      */
@@ -133,6 +138,7 @@ public function __construct(DOMDocument $document, LoggerInterface $logger)
     {
         $this->builder = new TwigBuilder();
         $this->styleBuilder = new StyleBuilder();
+        $this->relativePath = null;
         $this->nodeHelper = new NodeHelper();
         $this->document = $document;
         $this->logger = $logger;
@@ -159,6 +165,14 @@ public function setBanner($strings): void
         $this->banner = $strings;
     }
 
+    /**
+     * @param string|null $path
+     */
+    public function setRelativePath(?string $path): void
+    {
+        $this->relativePath = $path;
+    }
+
     /**
      * @throws ReflectionException
      * @throws Exception
@@ -216,7 +230,7 @@ public function convert(): string
             }
             foreach ($styleBlocks as $styleBlock) {
                 /* @var DOMElement $styleBlock */
-                $this->rawBlocks[] = $this->styleBuilder->compile($styleBlock);
+                $this->rawBlocks[] = $this->styleBuilder->compile($styleBlock, $this->relativePath);
             }
         }
 

src/Compiler.php

@@ -70,7 +70,7 @@ 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))
@@ -85,7 +85,7 @@ public function compile(?DOMElement $styleElement): ?string
                 $this->scssCompiler = new ScssCompiler();
             }
             try {
-                $style = $this->scssCompiler->compile($this->scssData . ' ' . $style);
+                $style = $this->scssCompiler->compile($this->scssData . ' ' . $style, $path);
             } catch (CompilerException $e) {
                 $style = "\n/* Warning: " . $e->getMessage() . " */\n";
             }

src/Utils/StyleBuilder.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/CompilerStyleBlockScopedImportTest.php

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

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

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

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

@@ -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.twig

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

@@ -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-scoped-4.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-block-scss-scoped.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-scoped/style-blocks.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