Refactoring HTML code with help of regex search and replace

Undo that change — Mon, 30 Nov 2020 21:49:39 +0000

Recently I had to do a lot of refactoring in HTML templates. Current IDEs usually don't provide many tools for refactoring HTML code so we had to help ourselves. Let's see if we could leverage old good search & replace and a bit of regular expressions.

The goal was to remove old component record-item from templates and replace it with new markup composed just of divs and spans. This one simple change just repeated so many times it would be tedious to do it all manually:

<!-- old code -->
<record-item label="Name">
    {{ details.name }}
</record-item>
<record-item *ngIf="details.color" label="Color">
    {{ details.color }}
</record-item>

<!-- new code -->
<div class="record">
  <span class="label">Name</span>
  <span class="value">{{ details.name }}</span>
</div>
<div *ngIf="details.color" class="record">
  <span class="label">Color</span>
  <span class="value">{{ details.color }}</span>
</div>

The complication was that record-item component had one input as attribute that needed to be converted as content of span element in the new code. On top of that a condition like *ngIf="details.color" could be set on the old component which would also need to be present on div element in the new code.

I originally thought that the optional condition is a complication that would require two distinct search regulars - one for occurrence with the condition and the other for occurrence without the condition. It turned out later that it would not. Let's check the regular.

Regular expression for search and replace:

//search regex
const search = /(<hfc-review-section-item) (\*ngIf="[^"]+")? ?label="(.*)".*>(.*)<\/hfc-review-section-item>/

//replace with
const replace = "<div $2 class="record">\n<span class="label">$3</span>\n<span class="value">$4</span>\n</div>"

Every piece of code that needs to be transferred into new one is captured in its own group.

Group for possible condition *ngIf="..." has optional modifier ?

Then a final result is composed from new HTML markup and captured groups.

Finally, I was able to successfully replace all my templates with this simple regex and have saved a lot of time and avoided possible typos by not doing it manually.

Styling button component with CSS custom variables

Undo that change — Tue, 10 Nov 2020 21:41:50 +0000

Let's explore the power of CSS custom variables when styling a customizable button component.

We are going to build a button component. Our button would support two color variants: primary and secondary. On top of that the button would also have these four common states: normal, hover, active and disabled.

The color variant would be chosen by applying primary or secondary class on a button element. disabled attribute would be used to render the button in disabled state. For the hover and active state we will use :hover and :active CSS pseudo classes.

The HTML code for the button is very simple, here are examples of our button:



<button class="primary">Click Me</button>
<button class="primary" disabled>Click Me</button>

<button class="secondary">Click Me</button>
<button class="secondary" disabled>Click Me</button>

Now let's dig into the styling. As the article title says we will use CSS custom properties, a lot.

The styles for the button are divided in two parts:

Generic button styles
Styles for button color variants

Let's start with generic button styles:



button {
  color: var(--label-color);
  background-color: var(--background-color);
  border-color: var(--border-color);

  border-width: 4px;
  border-style: solid;

  padding: 10px 64px;
  border-radius: 8px;
  font-size: 18px;
}

button:hover {
  background-color: var(--background-hover-color);
}

button:active {
  background-color: var(--background-active-color);
}

button[disabled] {
  color: var(--label-disabled-color);
  background-color: var(--background-disabled-color);
  border-color: var(--border-disabled-color);
}

As you can see this part defines generic button features like padding or border-radius that are common for both color variants.

On the other hand, all the color properties like background-color or border-color should depend on specified color variant (primary or secondary) and therefore we define for them appropriate variables like —background-color or —border-color. We will specify actual colors for all these variables in the next part.

Now we can define actual color values for primary button variant



button.primary {
  --label-color: hsl(0, 0%, 100%);
  --background-color: hsl(230, 60%, 50%);
  --border-color: hsl(230, 60%, 50%);
}

button.primary:hover {
  --background-hover-color: hsl(230, 60%, 55%);
}

button.primary:active {
  --background-active-color: hsl(230, 60%, 60%);
}

button.primary[disabled] {
  --label-disabled-color: hsl(0, 0%, 100%);
  --background-disabled-color: hsl(0, 0%, 63%);
  --border-disabled-color: hsl(0, 0%, 63%);
}

And similarly for secondary button color variant:



button.secondary {
  --label-color: hsl(230, 60%, 50%);
  --background-color: hsl(0, 0%, 100%);
  --border-color: hsl(230, 60%, 50%);
}

button.secondary:hover {
  --background-hover-color: hsl(230, 55%, 80%);
}

button.secondary:active {
  --background-active-color: hsl(230, 55%, 85%);
}

button.secondary[disabled] {
  --label-disabled-color: hsl(0, 0%, 63%);
  --background-disabled-color-color: hsl(0, 0%, 100%);
  --border-disabled-color: hsl(0, 0%, 63%);
}

As you can see, the custom CSS variables can help us keep our cascading styles for components more structured and clear while still customizable enough. We can now easily add another color variant for our button just by defining an another set of colors.

Full code on Codepen:

DEV Community: Undo that change

Refactoring HTML code with help of regex search and replace

Styling button component with CSS custom variables