Proposal: withModifiers function with Flow support

[ilyalesik]

OVERVIEW

In our team we used withModifiers function, which has flow typing support and used applyStyleModifiers inside. Example:

// @flow
import React from "react";
import TextInput from "...";
import colors from "...";

import withModifiers from "...";

const EditProjectInput = withModifiers({
    big: () => `
        padding: 19px 20px;
    `,
     red: () => `
        border-color: ${colors.red};
        color: ${colors.red};
    `,
})(
    modifier => styled(TextInput)`
        width: 100%;
        padding: 17px 14px 13px;
        border-color: ${colors.greyLight};

        ${modifier};
    `
);

This allows check that only modifiers from declaration will be passed to the component. When you try to pass not allowed modifiers, for example<EditProjectInput modifiers="blue" />, Flow error will occur.

WHERE SHOULD THE REVIEWER START?

/src/withModifiers.js_

HOW CAN THIS BE MANUALLY TESTED?

Just use example from overview.

ANY NEW DEPENDENCIES ADDED?

Dev dependencies: flow-bin, babel-plugin-transform-flow-strip-types, babel-preset-flow, eslint-plugin-flowtype, flow-copy-source.

CHECKLIST

Be sure all items are ✅ before submitting a PR for review.

• [x] Verify the linter and tests pass: npm run review
• [x] Verify this branch is rebased with the latest master

GIF

Share a fun GIF to say thanks to your reviewer: https://giphy.com

[andrewtpoe]

My team also built utilities that helped us build styled components more cleanly, so I'm very happy you were able to do that as well. I think I'd like to leave this kind of utility in the hands of the users though. We had a very different solution that worked for us, and I suspect there are many others as well.

Thanks for proposing this idea!