[feat] global/pfelement | Easy way to get local variables per component, in the console

[starryeyez024]

Description of the requested feature

Suggested by @jvp, what it was easy to get a quick list of local variables for each component? Like in the console, if you ran: PfeTabs.variables and it returned all the CSS custom properties for pfe-tabs, pfe-tab, and pfe-tab-panel:

  --pfe-tabs--BackgroundColor
  --pfe-tabs--BackgroundColor--inactive
  --pfe-tabs--Color
  --pfe-tabs--BorderColor--hover
  --pfe-tabs--BorderWidth
  --pfe-tabs__tab--FontSize
  --pfe-tabs__tab--Margin
  --pfe-tabs__tab--PaddingTop
  --pfe-tabs__tab--PaddingBottom
  --pfe-tabs__tab--PaddingRight
  --pfe-tabs__tab--PaddingLeft
  --pfe-tabs__tab--TextTransform
  --pfe-tabs--Color--focus
  --pfe-tabs--BorderColor
  --pfe-tabs--Display
  --pfe-tabs--Padding
  --pfe-tabs__tabs--FlexDirection
  --pfe-tabs__tabs--Width
  --pfe-tabs__tabs--Padding
  --pfe-tabs__tabs--BorderTop
  --pfe-tabs__tabs--BorderRight
  --pfe-tabs__tabs--BorderLeft
  --pfe-tabs__tabs--BorderColor
  --pfe-tabs__tabs--BorderBottom
  --pfe-tabs__panels--Width
  --pfe-tabs--focus
  --pfe-tabs__panel--BackgroundColor
  --pfe-tabs__panel--Padding
  --pfe-tabs__panel--BorderTop
  --pfe-tabs__panel--BorderRight
  --pfe-tabs__panel--BorderBottom
  --pfe-tabs__panel--BorderLeft

We could leverage the pfe-local-debug mixin and maybe print the local vars in separate unused Sass files, and then include the compiled CSS in a JS function only intended for this debugging purpose.

Impacted component(s)

• All components

[castastrophe]

Thought: what if the build tool grepped over the compiled CSS file for [var\(|\s|^|;]--(.*?)[,|\)|:] which would capture variables in the following formats:

background-color: var(--pfe-tabs--BackgroundColor, hotpink)
background-color: var(--pfe-tabs--BackgroundColor)
background-color: var(--pfe-tabs--BackgroundColor, var(--pfe-global--BackgroundColor, hotpink);
--pfe-tabs--BackgroundColor: hotpink;
--pfe-tabs--BackgroundColor: hotpink;

[starryeyez024]

That is a better idea, because the pfe-local-debug will only return vars in the local map. It won't include vars that are created via the pfe-typography mixin.