Why are styles not being applied to the element in the bemhtml.js template?

Question

BEM

Hello!
Dear bem-experts, please help me to understand the following question.
There is a page block described in index.bemjson.js:

module.exports = {
    block: 'page',
    title: 'Test.ru | index',
    favicon: '/favicon.ico',
    head: [
        { elem: 'meta', attrs: { name: 'description', content: '' } },
        { elem: 'meta', attrs: { name: 'viewport', content: 'width=device-width, initial-scale=1' } },
        { elem: 'css', url: '//fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=cyrillic,latin' },
        { elem: 'css', url: 'index.min.css' }
    ],
    scripts: [{ elem: 'js', url: 'index.min.js' }],
    mods: { theme: 'testtheme' },
    mix: { block: 'container' },
    content: 'wrapper goes here'
};

Inside this block, you need to place the wrapper element. In order not to "shit" in index.bemjson.js, I described this element in the page.bemhtml.js template engine:

block('page')(
    content()(function () {
        return [
            {
                elem: 'wrapper',
                content: this.ctx.content
            }
        ];
    })
)

This is where the ambush happens. The template engine works with a bang and adds the element inside the page block, but the styles of the page__wrapper.post.css element are not added to the final css:

.page__wrapper {
  background: #fff;
}

Moreover, if the same element is described in index.bemjson.js, then the styles are applied without problems.
What is the reason for this anomaly?
Thanks in advance.

Answer 1

You need to add for the page.deps.js block :

[{
    shouldDeps : [
        {
            elems : ['wrapper']
        }
    ]
}]

See bem/bem-components/common.blocks for more examples .