Ignore adding scope hash when styles are not scoped

[saurabhdaware]

<AbellComponent>
<template>
  <!-- This code does not need to be scoped -->
  <div></div>
</template>
</AbellComponent>

<AbellComponent>
<template>
  <!-- This code does not need to be scoped -->
  <div></div>
</template>
<style global>
  /* global styles */
</style> 
</AbellComponent>

Problem:
In both of the above cases, CSS is not needed to be scoped. Above components will add abell-data-<hash> attribute to all html elements inside template.

And thus, it outputs:

<div data-abell-kGoBAj></div>

data-abell-<hash> is required to scope CSS. But since in above examples, styles are not scoped, we can ignore adding hash to HTML elements.

Expected:
Component with this code is not required to be scoped so does not need those abell-data attributes. So they are expected to output.

<div></div>

This is the function that adds those hashes to HTML output https://github.com/abelljs/abell-renderer/blob/main/src/parsers/component-parser.js#L158

We have to ignore calling this function if-

• <style> tag exists and has global attribute
• <style> tag does not exist

This is a good-first-issue so feel free to ask any additional questions in comments below

[judicaelandria]

I'll take this

[saurabhdaware]

Go ahead @judicaelandria 🥳

[judicaelandria]

we get the style tag with this https://github.com/abelljs/abell-renderer/blob/main/src/parsers/component-parser.js#L174 ?

[saurabhdaware]

yes

…

On Thu, Oct 29, 2020, 1:31 PM Judicael ***@***.***> wrote: we get the style tag with this https://github.com/abelljs/abell-renderer/blob/main/src/parsers/component-parser.js#L174 ? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#32 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHMEACMRS3F722IWG7XPEZTSNEOMLANCNFSM4SM3CVBQ> .