styled-components / polished

A lightweight toolset for writing styles in JavaScript ✨
https://polished.js.org/
MIT License
7.64k stars 209 forks source link

Refactor triangle to use calc() #616

Open roginfarrer opened 2 years ago

roginfarrer commented 2 years ago

triangle() currently expects height and width values that are a string value with a unit (e.g. '12px') or a number (12). It throws an error otherwise.

This prevents the use of CSS custom variables. However, if we change from using JS arithmetic to CSS calc(), we can support CSS variables, in addition to number of unit values, without having to do any unit stripping in strings.

codecov[bot] commented 1 year ago

Codecov Report

Merging #616 (a40a1de) into main (275e646) will not change coverage. The diff coverage is 100.00%.

@@            Coverage Diff            @@
##              main      #616   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           89        89           
  Lines          860       858    -2     
  Branches       323       320    -3     
=========================================
- Hits           860       858    -2     
Flag Coverage Δ
unittests 100.00% <100.00%> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
src/mixins/triangle.js 100.00% <100.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.