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

Explicit styled primitives #748

Open
msereniti opened this issue Sep 12, 2023 · 0 comments
Open

Explicit styled primitives #748

msereniti opened this issue Sep 12, 2023 · 0 comments
Assignees

Comments

@msereniti
Copy link
Contributor

msereniti commented Sep 12, 2023

Our styling works extremely unobvious. It's better explained here: https://github.com/semrush/intergalactic/blob/master/CONTRIBUTING.md#implicit-code-transformations

I propose to very change it and make it work the way same to way css modules works.

In my propose we will import css as following:

import { SLabel, SItem } from './filename.component.css'.

I also propose to add unplugin (universal plugin for all kinds of bundlers) that will transform compoennts.css file into .tsx file with React components SLabel, SItem and so on, that also imports a virtual css file.

The virtual css file should contain hashed class names (like with css modules). If classed, described in .component.css file has attribute selectors, the attribute selectors also are used to generate new css classed that are going to be applied to generated components when corresponding prop is provided. If css class uses css variables the generated component should also accept it via prop, while css variable name should be hashed for isolation.

The unplugin should support filtering variable names to allow us work with existing design tokens (named as --intergalactic-*)

New year is coming, it's better to publish major release after it.

@msereniti msereniti mentioned this issue Oct 6, 2023
9 tasks
msereniti added a commit that referenced this issue Oct 6, 2023
## Motivation and Context

I found several issues.
1. BaseTrigger generates warnings about using non existing attribute.
That would be better fixed after
#748 but for now I just
used the attribute name that is not passing _the grand regexp_.
2. If function is provided to ref prop, it will be called twice in deep
nested components because assignProps were not clearing forwardRef prop
after merging it into ref prop.
3. ScrollArea component remounts after first render. It caused by
assignProp function that generates new ref function callback on every
render. It cannot be fixed with current core and is not fixed in this
PR.

## How has this been tested?

All existing tests should pass.

## Types of changes

- [x] Bug fix (non-breaking change which fixes an issue).
- [ ] New feature (non-breaking change which adds functionality).
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected).
- [ ] Nice improve.

## Checklist:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [x] My code follows the code style of this project.
- [x] I have updated the documentation accordingly or it's not required.
- [x] Unit tests are not broken.
- [x] I have added changelog note to corresponding `CHANGELOG.md` file
with planned publish date.
- [ ] I have added new unit tests on added of fixed functionality.
ilyabrower pushed a commit that referenced this issue Oct 10, 2023
## Motivation and Context

I found several issues.
1. BaseTrigger generates warnings about using non existing attribute.
That would be better fixed after
#748 but for now I just
used the attribute name that is not passing _the grand regexp_.
2. If function is provided to ref prop, it will be called twice in deep
nested components because assignProps were not clearing forwardRef prop
after merging it into ref prop.
3. ScrollArea component remounts after first render. It caused by
assignProp function that generates new ref function callback on every
render. It cannot be fixed with current core and is not fixed in this
PR.

## How has this been tested?

All existing tests should pass.

## Types of changes

- [x] Bug fix (non-breaking change which fixes an issue).
- [ ] New feature (non-breaking change which adds functionality).
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected).
- [ ] Nice improve.

## Checklist:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [x] My code follows the code style of this project.
- [x] I have updated the documentation accordingly or it's not required.
- [x] Unit tests are not broken.
- [x] I have added changelog note to corresponding `CHANGELOG.md` file
with planned publish date.
- [ ] I have added new unit tests on added of fixed functionality.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Todo
Development

No branches or pull requests

1 participant