Intent to implement: Vue SFC integration

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 and easy hooks into css-modules. Scoped styles work well until they don’t. 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’s compile method returns an ast for the template. Hopefully that’ll ease the block parsing phase.
• 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.
• 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.

[OEvgeny]

Hello, I’m also interested in using css-blocks with Vue! There are a couple of notes related to current state notes:

A personal desire of mine is to have this functionality by default

I believe this could be a stop sign for existing Vue projects to start using css-blocks.

Also plain styles are useful at some point. Mixing them with scoped ones also a well-known practice. That’s why limiting style tags to one per file may be not a good choice.

Can’t we just introduce a new (block) keyword for style tags like scoped and module? And require only one style with block keyword for the component? E.g.

<template></template>

<script></script>

<style block></style>

Anyway, for SFCs compilation there is a set of utils: https://github.com/vuejs/component-compiler-utils may be useful!

[yyx990803]

I haven’t got time to fully investigate this topic, but if anything I’d stay away from directives. I’d suggest looking into custom compiler modules that are more powerful then directives. (API type interface)

These modules can be passed to the underlying compiler via vue-loader options as well.