cssinjs/jss

Extend function property values are converted to strings

Open

#1,134 opened on 2019年6月17日

GitHub で見る
 (0 comments) (2 reactions) (0 assignees)JavaScript (7,000 stars) (434 forks)batch import
bughelp wanted

説明

Expected behavior: A clear and concise description of what you expected to happen.

const styles = {
  linkCommon: {
    color: () => "orange"
  },
  link: {
    extend: "linkCommon"
  }
};

The link should be orange.

Describe the bug: A clear and concise description of what happend instead of the expected behavior.

The function is being converted to a string before being inserted into the DOM.

image

Codesandbox link:

Playground: https://codesandbox.io/embed/core-jss-playground-ef0j4

Versions (please complete the following information):

  • jss: 10 alpha 18
  • jss-preset-default: 10 alpha 18
  • Browser Chrome 75
  • OS: OX X

Feel free to add any additional versions which you may think are relevant to the bug.

Not to be confused with https://github.com/cssinjs/jss/issues/479

コントリビューターガイド

技術スタック
javascriptcss
領域
frontend
Issue 種別
bug
難度新しい貢献者にとっての実装難度です。1 は非常に小さな変更、5 は専門的な作業です。
2
推定時間経験ある貢献者が調査、実装、テスト、pull request 準備にかけるおおよその時間範囲です。
1-3 hours
活動状況Issue が今どれだけ取り組みやすいかを示します。新しい、活発、古い、ブロック中、またはメンテナー入力待ちなどです。
stale
明確さ期待される変更、受け入れ条件、次の手順がどれだけ明確かを示します。
clear
前提条件
Basic knowledge of JSSUnderstanding of how CSS in JS resolves styles
初心者向け度初回貢献者にどれだけ取り組みやすいかを 1-100 で推定したスコアです。
60
調査方針
Investigate how the `extend` property merges styles when values are functions. Look at the source files in the JSS repository, particularly the style merging logic (e.g., `src/`). The issue shows that when a function is used as a value in an extended style, it gets converted to a string. Compare with the handling of functions in non extended styles. Check if there is a test case for similar scenarios and consider adding one. The playground link suggests the code uses jss preset default; ensure the fix works with the default preset.