linkedin / linkedin/css-blocks

Intent to implement: Vue SFC integration

Open
#151 18 comments 42 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.