Nested modifiers

[jpbelo]

EXPECTED BEHAVIOR

Being able to write nested modifiers to reduce duplicated code.

const MODIFIER_CONFIG = {
  asButton: () => {
    css`
      border: 1px solid grey;
      padding: 10px 20px;
      font-size: 15px;
    `,
    primary: () => {
      css`
        background-color: red;
      `
    },
    secondary: () => {
      css`
        background-color: blue;
      `
    }
  },
  asText: () => {
    css`
      font-size: 12px;
    `,
    primary: ...
    secondary: ...
  },
};

<Component modifiers="asButton.secondary" />

ACTUAL BEHAVIOR

Have to either use multiple modifiers or duplicate the shared code.

[andrewtpoe]

This is an interesting proposal, though I think I prefer smaller, more specific modifiers. When I've needed to share common styles in modifiers I typically extract them to a separate constant and add them to each style definition:

const withButtonStyles = css`/* ... */`;

const MODIFIER_CONFIG = {
  primary: () => css`
    ${withButtonStyles}
    /* ... */
  `,
  secondary: () => css`
    ${withButtonStyles}
    /* ... */
  `
};

More commonly, the base button styles are defined on the base component, and modifier styles should override what needs to be different:

const Button = styled.button`
  /* ...base button styles */
  ${applyStyleModifiers(MODIFIER_CONFIG)}

I don't consider needing to use multiple modifiers to be an issue as that is an extremely common use case.

I'm going to leave this issue open a little while longer to see if it gathers any interest.

[albertdugba]

Yes I also had similar problems, I agree with the author of this post, so I was experimenting with thus nice package where I wanted to create like a button component something similar to bootstrap i.e (primary,secondary,warning,danger,success) etc. It was not possible to use that approach. Would be very pleased if you guys can add that as a feature.