Proposal: Standardize configuration

[angeloashmore]

Proposal

Standardize configuration and use it as a base for the implementation.

This may reduce the amount of code used to implement things like pseudo classes and makes for a more flexible and scalable plugin, both for maintainers and users.

// Initial configuration ideas.

const babelConfig = {
  plugins: [
    [
      "babel-plugin-style-props",
      {
        // If moving to a single style prop, define the prop.
        // e.g. <Comp sx={{ color: 'primary' }} />
        prop: 'sx',

        // If keeping global style props, define an optional prefix.
        // e.g. <Comp sxColor="primary" />
        propPrefix: 'sx',

        // Provide a way to detect pseudo classes. These would probably be
        // built-in, but it opens the door for custom classes.
        // e.g. <Comp colorNthChild2n="secondary" />
        pseudoClasses: {
          hover: /Hover$/,
          focus: /Focus$/,
          active: /Active$/,
          'last-child': /LastChild$/,
          'first-child': /FirstChild$/
          'nth-child($0)': /NthChild(.*)$/
          // ...
        },

        // Provide custom theme mappings.
        themed: {
          color: 'colors',
          fontFamily: 'fonts',
          fontWeight: 'fontWeights',
          // ...
        }
      }
    ]
  ]
};

[asyarb]

Since I think we're heading for a scoped prop such as sx, gonna just keep a copy of your above config as reference:

const babelConfig = {
  plugins: [
    [
      "babel-plugin-style-props",
      {
        // If moving to a single style prop, define the prop.
        // e.g. <Comp sx={{ color: 'primary' }} />
        prop: 'sx',

        // Provide a way to detect pseudo classes. These would probably be
        // built-in, but it opens the door for custom classes.
        // e.g. <Comp sx={{ colorHover: 'secondary' }} />
        pseudoClasses: {
          hover: /Hover$/, // Builtin
          focus: /Focus$/, // Builtin
          active: /Active$/, // Builtin
          'last-child': /LastChild$/,
          'first-child': /FirstChild$/
          'nth-child($0)': /NthChild(.*)$/
          // ...
        },

        // Provide custom theme mappings.
        themeMap: {
          color: 'colors',
          fontFamily: 'fonts',
          fontWeight: 'fontWeights',
          // ...
        },

        // Provide custom variants.
        variants: {
          boxStyle: 'boxStyles'
        }
      }
    ]
  ]
};

I've updated themed to themeMap instead, but open to suggestions there.