styled-components / xstyled

A utility-first CSS-in-JS framework built for React. 💅👩‍🎤⚡️
https://xstyled.dev
MIT License
2.27k stars 106 forks source link

feat(typings): assemble deep paths for autocompletion #310

Closed quantizor closed 2 years ago

quantizor commented 2 years ago

Fixes #308

Summary

This change leverages TS 4.1+ template literal types to enable deep path autocomplete for theme values.

For a theme like this:

const theme = {
  colors: {
    brandGreen: '#2B968F',
    uiButton: {
      _: '#FF0',
      hover: '#F00',
    }
  }
} as const

Instead of just receiving 'brandGreen' | 'uiButton' as an autocomplete option for color props, 'uiButton._' | 'uiButton.hover' would also be surfaced.

Test plan

Some beta testing is probably warranted.

netlify[bot] commented 2 years ago

‼️ Deploy request for xstyled rejected. Learn more about Netlify's sensitive variable policy

🔨 Explore the source changes: 6f22703d34d3c48035047abb2b6fe6a1e42bfb86

quantizor commented 2 years ago

@gregberge I didn't remove this type but it's not used anymore with this change

https://github.com/gregberge/xstyled/blob/34ed147c2c9dd02bc213e74f9d5d7af1fae3b42c/packages/system/src/types.ts#L54-L62

codecov[bot] commented 2 years ago

Codecov Report

Merging #310 (6f22703) into main (7b6dbca) will decrease coverage by 0.12%. The diff coverage is n/a.

Impacted file tree graph

@@            Coverage Diff             @@
##             main     #310      +/-   ##
==========================================
- Coverage   92.74%   92.61%   -0.13%     
==========================================
  Files          60       60              
  Lines        1255     1260       +5     
  Branches      240      242       +2     
==========================================
+ Hits         1164     1167       +3     
- Misses         91       93       +2     
Impacted Files Coverage Δ
packages/util/src/index.ts 69.44% <0.00%> (-0.71%) :arrow_down:

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 7b6dbca...6f22703. Read the comment docs.

gregberge commented 2 years ago

@probablyup thanks!