nested extends locals are not working

[nelsonihc]

Hi, i'm trying to use locals with nested extends block, but it's not working. This use case is interesting for posthtml-extend to create components from code snippets and use them into bigger pages.

<!-- parent.html -->
<div>
    <block name="content"></block>
</div>

<!-- nested.html -->
<div class="nested">
    <span>{{ nested_var }}</span>
    <block name="nested"></block>
</div>

<!-- page.html -->
<extends src="parent.html">
  <block name="content">
        <extends src="nested.html" locals='{"nested_var":"tada!"}'>
          <block name="nested">nested content example</block>
        </extends>
  </block>
</extends>

results in (code is reformatted for readability):

<div class="parent">
    <div class="nested">
        <span>undefined</span>
        nested content example
    </div>        
</div>

[Scrum]

@nelsonihc v0.6.2

[thewebartisan7]

I try the exact your example with nested extends, but I am getting a compilation error, see below:

What I am missing?

PostHTML Loader: 
  [posthtml-extend] Unexpected block "nested"

  - PostHTML Loader:

  - [posthtml-extend] Unexpected block "nested"

  - ModuleBuildError: Module build failed (from ./node_modules/posthtml-loader/lib/index.js):

  - PostHTML Loader:

  - [posthtml-extend] Unexpected block "nested"

  - index.js:158 
    [template-engine]/[posthtml-loader]/lib/index.js:158:10

  - NormalModule.js:316 
    [template-engine]/[webpack]/lib/NormalModule.js:316:20

  - LoaderRunner.js:367 
    [template-engine]/[loader-runner]/lib/LoaderRunner.js:367:11

  - LoaderRunner.js:233 
    [template-engine]/[loader-runner]/lib/LoaderRunner.js:233:18

  - LoaderRunner.js:111 context.callback
    [template-engine]/[loader-runner]/lib/LoaderRunner.js:111:13

  - index.js:158 
    [template-engine]/[posthtml-loader]/lib/index.js:158:7

  - child-compiler.js:131 
    [template-engine]/[html-webpack-plugin]/lib/child-compiler.js:131:18

  - Compiler.js:343 
    [template-engine]/[webpack]/lib/Compiler.js:343:11

  - Compiler.js:681 
    [template-engine]/[webpack]/lib/Compiler.js:681:15

  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [template-engine]/[tapable]/lib/Hook.js:154:20

  - Compiler.js:678 
    [template-engine]/[webpack]/lib/Compiler.js:678:31

  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [template-engine]/[tapable]/lib/Hook.js:154:20

  - Compilation.js:1423 
    [template-engine]/[webpack]/lib/Compilation.js:1423:35

  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [template-engine]/[tapable]/lib/Hook.js:154:20

  - Compilation.js:1414 
    [template-engine]/[webpack]/lib/Compilation.js:1414:32

  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [template-engine]/[tapable]/lib/Hook.js:154:20

  - Compilation.js:1409 
    [template-engine]/[webpack]/lib/Compilation.js:1409:36

[thewebartisan7]

As I understand seem that also parent.html expect a nested block, because it works fine if I add nested block in parent.html, but then content it's duplicated:

<!--  parent.html -->
<div>
    <block name="content"></block>
    <block name="nested">nested content example</block>
</div>

Checking source code of compiled file I see that nested block of page.html it's not compiled:

<!-- parent.html -->
<div>

        <!-- nested.html -->
<div class="nested">
    <block name="nested">nested content example</block>
</div>

   nested content example
</div>

[thewebartisan7]

Ok I found that is required to set strict: false: https://github.com/posthtml/posthtml-extend/issues/28

Anyway please add an example in docs about this so next one will spare an hour looking into.

Thanks