abelljs/abell-renderer

Ignore adding scope hash when styles are not scoped

Closed this issue · 4 comments

saurabhdaware commented 
<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 commented

I'll take this

saurabhdaware commented