Support for Atomizer

[chinchang]

What problem does this feature solve?

Atomizer: https://github.com/acss-io/atomizer
Atomizer is a tool to create atomic classes by parsing HTML. I am using vue SFC and Atomizer so need a way for Atomizer to parse .vue files. Without integrating Atomizer inside vue-loader, it doesn't seems possible for both to run independently on .vue files.

If this sounds valid, I can contribute on it.

What does the proposed API look like?

What I expect w.r.t. to developer experience after this feature is something like this in .vue files:

<template lang="acss">
<div class="Bgc(red) P(20px)">Hello World</div>
</template>

And the generated CSS would be internally passed on to css-loader and style-loader.

<!-- generated by vue-issues. DO NOT REMOVE -->

[chinchang]

I have been working on this and was studying the vue-loader. It seems to be structure so that each language block is sent as a part to a common function which generates a raw loader string. For eg. template part is sent as string which returns vue-template-compiler as the loader string.

My requirement is a little different. Atomic CSS(Atomizer) is an approach where HTML contains the classes. These classes are parsed and CSS is generated from it. Therefor, template should be run over by vue-template-compiler and also by a atomizer loader parallely (which further chains to css-loader and then style-loader).

Can someone point me in the right direction to make such a change in vue-loader? +@yyx990803

[Jinjiang]

If I understand it correctly, the CSS class syntax in Vue also has some special details. And the generated code vue-template-compiler is JavaScript (render functions), not HTML with CSS classes.

So if you want to run vue-template-compiler first, you cannot run atomizer loader after that. If you want to run atomizer loader first, you would recognize and preserve the special syntax of CSS class in Vue correctly.

So that's a little hard imo 😅.

Thanks.

[dword-design]

In case you use Nuxt, you can use nuxt-atomizer. Install it via npm install nuxt-atomizer and add it to nuxt.config.js:

export default {
  modules: [
    'nuxt-atomizer',
  ],
}