search

linkedin / css-blocks

High performance, maintainable stylesheets.
http://css-blocks.com/
BSD 2-Clause "Simplified" License
6.33k stars 152 forks source link

[Ember] Colocated Template Support #481

Open chriseppstein opened 4 years ago

chriseppstein commented 4 years ago

We need to support colocated templates, currently there's issues when colocated templates are enabled for a project which causes those templates to be ignored (not rewritten).

ramitha commented 4 years ago

To enable co-located templates, the following packages should exist in the app:

    let hasValidBabelVersion = hasBabel && semver.gte(babelVersion, '7.11.0');
    let hasValidEmberCLIVersion = semver.gte(emberCLIVersion, '3.12.0-beta.2');
    let hasValidEmberVersion = hasEmberSource && semver.gte(emberVersion, '3.13.0');

And the templates should co-exist within the component directory of the app/addon. For example, 

app
├── adapters
│   └── application.js
├── app.js
├── components
│   ├── burrito.block.scss
│   ├── burrito.hbs
│   ├── burritos
│   │   ├── filter.hbs
│   │   └── filter.js
│   ├── burritos.js
│   ├── nav-bar.block.scss
│   └── nav-bar.hbs
ramitha commented 4 years ago

The co-located templates aren't being picked up for compilation by CSSBlocksTemplateCompilerPlugin because there is another plugin in ember-cli-htmlbars called colocated-broccoli-plugin that inlines the contents of the template files with the component js which runs before CSSBlocksTemplateCompilerPlugin. Because of this, the input tree for the CSS Blocks plugin is stripped of .hbs files within the component directory and these files don't enter the CSS blocks build pipeline.