Add dynamic value support for extract static in the styled function. #279
Conversation
|
|
||
| // Help Needed: | ||
| // We should read the browser preferences for postcss | ||
| // and turn this on only if css vars are supported in their browser targets. |
There was a problem hiding this comment.
There was a problem hiding this comment.
Detection:
browserslist(undefined, { path: processingFileName }).some(i => i.slice(0, 2) === 'ie')It will detect IE and IE mobile.
There was a problem hiding this comment.
I'm good with this overall but I'm not sure if we should use inline style, maybe we should do it how we did it pre-v7, it's pretty small. Also, using inline style wouldn't work in Preact right now, preactjs/preact#666
|
@mitchellhamilton I have a PR in for preactjs/preact#666 here preactjs/preact#827 |
packages/emotion/src/index.js
Outdated
|
|
||
| export function customProperties(baseClassName: string, vars: Array<inputVar>) { | ||
| const hash = hashArray([baseClassName, ...vars]) | ||
| const varCls = `css-vars-${hash}` |
There was a problem hiding this comment.
I did this so that users could SSR and extract the custom property values, but I'm not sure if it will trip up in other places.
There was a problem hiding this comment.
I have to write a test for it but I think we have to do something different to get SSR to work.
There was a problem hiding this comment.
I was wrong! it works right now! 🎉
| const objs = path.node.quasi.expressions.slice(0, composesCount) | ||
|
|
||
| if (objs.length) { | ||
| throw new Error('Cannot use composes in extractStatic mode.') |
There was a problem hiding this comment.
@tkh44 Do you think we should just go to inline mode instead of throwing an error. We also need to check if there are any interpolations in other places before going to extract.
There was a problem hiding this comment.
I think that might be a good idea.
Codecov Report
@@ Coverage Diff @@
## master #279 +/- ##
==========================================
+ Coverage 90.37% 90.72% +0.35%
==========================================
Files 21 22 +1
Lines 966 1003 +37
Branches 260 271 +11
==========================================
+ Hits 873 910 +37
Misses 75 75
Partials 18 18
Continue to review full report at Codecov.
|
|
Just a thought: extracted |
What:
Add dynamic value support for
styled(react components) when using extractStatic mode. This intentionally handicapped to juststyledbecause of the inline style requirement.Todos:
styledcomponent is one ugly hack and needs to be cleaned up.This will work
Why:
It's possible.
Make @ai happy.
How:
This was actually a very straight forward process.
${name}-${hash}-${index}varsbut no content function in the higher order componentChecklist: