interpreting-html

How to Interpret Pasted HTML Code

When the site is rendered to HTML, you can identify several aspects of the app code via HTML properties:

• Class names with the pattern _camelCase_123ab_45 correspond to class names applied from CSS Modules.
  • For example, class="_headerWrapper_16arl_15" in HTML comes from className={styles.headerWrapper} in React.
• Class names prefixed with fui- are derived from Fluent UI components.
  • These are Fluent component root elements. For example, fui-Button is a <Button/>.
  • These are Fluent component sub-elements if they contain the __ delimiter (BEM style). For example, fui-Button__icon comes from <Button icon={<SomeIcon20Regular/>}/>.
• Class names that follow the pattern f123abc are Griffel-generated atomic classes. Reset classes use an r… hash, and sequence classes start with ___. These are auto-generated and are not authored source identifiers. For example: class="f11589ue f1q5o8ev f1pdflbu fkfq4zb". Do not search these hashes to locate authored styles.
• data-* attributes may be authored in React, generated by a framework, or derived from dynamic state. Verify their origin before using them to locate source; do not assume their values are static.
• aria-label attributes and text content often appear as literal strings in this prototype, so searching them can help locate the corresponding JSX. For example, Create agent appears directly in the agents route. Values may also come from props, data, or localization, so a rendered string does not always have an exact literal match in source.

Interpreting React Grab Context

The prototype's customized React Grab context is not raw DOM output. It decodes CSS Module class names to their local names and omits Fluent/Griffel classes. A cleaned class such as brandLink can therefore correspond to a hashed CSS Module class in the browser.

The in Component (path:line:column) entries describe component usage or rendering ancestry, not necessarily component definitions. Components that render passed-in children may appear in the ancestry even when another component created that JSX. Use the reported location to inspect the relevant call site or component body before deciding which source to edit.