Decisiv/styled-components-modifiers

Throws error when modifier is applied to extended component

Closed this issue · 0 comments

EXPECTED BEHAVIOR

Modifiers should fall through to the component being extended.

ACTUAL BEHAVIOR

When applied to the extended component, the library is throwing a modifierFunc is not a function error.

STEPS TO REPRODUCE

const MODIFIER_CONFIG = {
  sample: () => 'color: blue;',
}

const Base = styled.div`
  ${applyStyleModifiers(MODIFIER_CONFIG)}
`;

const Extension = styled(Base)``;

// when rendering, this will throw the error.
<Extension modifiers={['sample']} />

SUGGESTED SOLUTION

PR to follow