Allow css function receive ScopedCSSRules | ScopedCSSRules[] and override rules
etc-tiago opened this issue · 2 comments
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)