Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
2 tasks
etc-tiago opened this issue Jul 14, 2020 · 2 comments
Closed
2 tasks
Labels
enhancement New feature or request

Comments

@etc-tiago
Copy link
Contributor

etc-tiago commented Jul 14, 2020

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 etc-tiago added the enhancement New feature or request label Jul 14, 2020
@etc-tiago
Copy link
Contributor Author

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

@kripod
Copy link
Owner

kripod commented Jul 15, 2020

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 kripod closed this as completed Jul 15, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants