[enhancement]. using trim() on colors definitions and references to prevent incorrect spaces from causing unresolved

[ash0080]

Otherwise it is very difficult to find such bugs

[ash0080]

Since the styled component syntax has to support both color aliases and native arguments, I don't think it's realistic to check for errors, so at least reduce the number of such hard-to-find errors

[lachlanjc]

To clarify, you want e.g. color: ' red' to work by trimming the extra space? It makes sense, but could you explain the reason for this?

[hasparus]

Alternatively, a solution I think I'd prefer, we could throw on such an error.

if (process.env.NODE_ENV !== 'production') {
  if (color in theme.colors && color !== color.trim()) {
    throw new Error("serious message")
  }
}

[ash0080]

Alternatively, a solution I think I'd prefer, we could throw on such an error.

if (process.env.NODE_ENV !== 'production') {
  if (color in theme.colors && color !== color.trim()) {
    throw new Error("serious message")
  }
}

Mostly it can't be a typo in the config

[ash0080]

To clarify, you want e.g. color: ' red' to work by trimming the extra space? It makes sense, but could you explain the reason for this?

'red' is a native variable, Perhaps not an appropriate example

Not a native variable, but reference, Extra spaces are easier to find in the front, harder in the back
much more harder when using in array format

Sometimes formatting plugins such as prettier to insert incorrect spaces when the code you are currently writing is not completely closed， so it is not uncommon

I think adding a trim() is one of the easiest ways to implement it, it doesn't avoid errors 100% of the time, but at least 95% of the time it's possible

Imagine when your component has more than 200 lines of code or more, with 3-4 sx blocs, it is hard to find a small space that causes an element not to render correctly
Then consider why stylesheets almost ignore spaces.

eg:

bg: ['body ', 'primary' ] 

[hasparus]

🚀 Issue was released in v0.14.0 🚀