linkedin / linkedin/css-blocks
Intent to implement: Vue SFC integration
- Dominant language
- TypeScript
- Stars
- 6.3k
- Forks
- 154
- PR merge metrics
- No merged PRs in 30d
Description
### Current State: Research
This ticket will guide the discussion of implementing css-blocks in Vue Single File Components.
## Motivation
Vue provides a rich interface for creating single file components. In the ecosystem, vue-loader provides both an implementation of [scoped styles](https://vue-loader.vuejs.org/guide/scoped-css.html) and easy hooks into [css-modules](https://vue-loader.vuejs.org/guide/css-modules.html). Scoped styles work well [until](https://github.com/vuejs/vue-loader/issues/1259) [they](https://github.com/vuejs/vue-loader/issues/1136) [don't](https://github.com/vuejs/vue-loader/issues/1091). Css-modules relies on a lot of dynamic class bindings and has its own set of issues making it a non-optimal solution. I think css-blocks has an opportunity to shine.
## Scope
- The implementation will _only_ cover SFC style blocks
- The implementation will work with vue-loader 15+
## Notes
- [vue-template-compiler](https://www.npmjs.com/package/vue-template-compiler)'s [compile](https://www.npmjs.com/package/vue-template-compiler#compilercompiletemplate-options) method returns an ast for the template. Hopefully that'll ease the [block parsing phase](https://github.com/linkedin/css-blocks/blob/master/ARCHITECTURE.md#block-parsing).
- Vue's templates have the ability to use preprocessors. That means if we integrate with vue-loader we'll need to being the css-blocks processing after the preprocessor transforms, but before vue-loader compiles the template. I think one option would be to make a wrapper around vue-template-compiler and tell vue-loader to [use that compiler instead](https://vue-loader.vuejs.org/options.html#compiler).
- A personal desire of mine is to have this functionality _by default_ on all style tags in SFCs. No `scoped` attributes needed. I'm uncertain if we should provide an escape hatch to have css-blocks not parse certain style tags.
@chriseppstein I'm sure I'll have a lot of questions. Once we can work through the basic approach I'll create a POC PR.
Contributor guide
Research direction
Start with ARCHITECTURE.md’s block-parsing section, then review vue-template-compiler’s compile API and vue-loader 15+ compiler option. The issue needs an agreed integration approach and a proof-of-concept covering SFC style blocks before the work can be considered defined.
Written by the indexing model from the issue text.
Assessment
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100