Fix styled component inconsistent naming and missing component definition

[a3626a]

Issues Found

Problem 1 : Inconsistent Naming

Expected: Styled Component must be defined and referenced with same name.
Actual: Styled Component is defined as StyledDescriptionspan but referenced as StyledDescription

Problem 2 : Missing Text Wrapper Definition

Expected: Wrapper component for text is defined properly.
Actual: Wrapper component for text is not defined at all.

Changes

[Major] Save component name in cssCollection for better consistency

• component name is now saved in cssCollection
• nodeName is not used any more, so removed.
  • nodeName was only used to calculate component name.
• component name is calculated inside html builders, along with other css collection values.

[Major] Always render both wrapper and segment component for htmlText

• Author's decision is required :
  • Choice 1) Always render both wrapper and segment component
  • Choice 2) Merge wrapper and segment component when there's only 1 segment.
  • I choose 1) just because it is easy to implement.

[Minor] Change getComponentName

• Change paraemeter type to match changes of callers

Testing

Problem 1

Now it is consistent. (+ New wrapper component is added)

Problem 2

Wrapper component is correctly defined

Some Notes

Automated tests are necessary for this project.

Intermediate representation will greatly increase maintainability. CSS Collection can be expanded into IR. IR will have classname, data attributes, styles, component names ALWAYS(not conditionally). IR will be conditaionally referenced by each render mode(html, svelte, style-component ...).

[a3626a]

if mode === "styled-components", and after layoutBuilder.build(),
layoutBuilder always has cssClassName