Allow css function receive ScopedCSSRules | ScopedCSSRules[] and override rules

etc-tiago commented 4 years ago

Motivation

My web application has some buttons and inputs with the same styles, but with peculiarities that make them the same. And instead of writing the css in each element and when it is necessary to change something having to practically redo the whole process in each button, we could store the value of these repetitive styles in a variable of the type ScopedCSSRules and join in the functioncss

Basic example

Allow:

css({ margin: 0 })

and

const btnBase: ScopedCSSRules  = ({ margin: 0, padding: 10, color: '#0088cc' })
css([btnBase, { padding: 0 }])

// { margin: 0, padding: 0, color: '#0088cc' }

This example is extremely basic, but represents an override of styles that are considered a good feature.

Steps to implementation

[ ] Update OtionInstance interface

css(rules: ScopedCSSRules | ScopedCSSRules[]): string;

[ ] Update css function

css(rules): string {
  let styles: ScopedCSSRules = {};
  if ((rules as any).length) {
(rules as ScopedCSSRules[]).forEach((rule: ScopedCSSRules) => {
  styles = Object.assign(styles, rule);
});
  } else {
    styles = rules as ScopedCSSRules;
  }

  // The leading white space character gets removed
  return decomposeToClassNames(styles, '', '').slice(1);
},

I am using this code separately from otion, and in my opinion it would be a very desired feature since there are several codes that are repeated in the css style and in some cases it would be very nice to be able to overwrite some styles before generating the class.

I tried to create a pull request, but I still haven't been able to normalize the typing then getting the error:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'ScopedCSSRules'. No index signature with a parameter of type 'string' was found on type 'ScopedCSSRules'.ts(7053)

etc-tiago commented 4 years ago

@kripod If you find this feature interesting, I can do the implementation and create a pull request

kripod commented 4 years ago

Thank you for this submission! I left my review at #30, suggesting to join the ongoing discussion at #3, so that we can think about this deeper before experimenting with implementations. I'm closing this issue for now to focus the discourse to a single place.

kripod / otion