No-wrap attributes and styled-components

Bugs
, ,
1

Currently, if you use the no-wrap flag on a custom component, and spread in the builder.io attributes {…props.attributes}, these attributes exist as non-data attributes (e.g. builder-id instead of data-builder-id).

Because these properties are not standard/accepted HTML element attributes, they get stripped out by styled-components. In order to successfully use no-wrap with styled-components you have to set up custom property forwarding.

Generally as far as I’m aware it’s bad practice to create your own element attributes, and these should really be data attributes.

Are there any plans to correct this, or at least add a guide to docs so others don’t have to figure this out on their own? My TS fix:

import type React from "react";

import type { ThemedStyledFunction } from "styled-components";

import type { TBasicTheme } from "src/types/theme.types";

const builderIoAttributes: Array<string | number | symbol> = ["builder-id"];

type TForwardBuilderAttributesFunction<
  C extends keyof JSX.IntrinsicElements | React.ComponentType<unknown>,
  T extends object,
  O extends object = Record<string, any>,
  A extends keyof never = never
> = (
  element: ThemedStyledFunction<C, T, O, A>
) => ThemedStyledFunction<C, T, O, A>;

const forwardBuilderAttributes: TForwardBuilderAttributesFunction<
  keyof JSX.IntrinsicElements | React.ComponentType<unknown>,
  TBasicTheme
> = (element) =>
  element.withConfig({
    shouldForwardProp: (prop, defaultValidatorFn) =>
      defaultValidatorFn(prop) || builderIoAttributes.includes(prop),
  });

export default forwardBuilderAttributes;

Usage:

export const Item = forwardBuilderAttributes(
  styled(LinkAtom)<{ ... customPropTypes }>
)(
  (customProps) => css``
);