Add support for interpolation
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 45/100
- issue の種類
- 機能追加
- 明瞭さ
- おおむね明確
- 活発さ
- 静か
- 技術スタック
- css, typescript
- 領域
- frontend
調査の方向性
まず、CSS オブジェクトプロパティに対する補間が現在どのように処理されているか、また css テンプレートリテラルがどのように処理されているかを追跡します。オブジェクトを css リテラルに補間する際の期待される動作を確認し、その後、生成されたボタンのスタイルに、リテラルの宣言とともに補間されたフォントプロパティが含まれることを示すテストカバレッジを追加します。
索引モデルが issue の本文から書いたものです。
説明
Why is interpolation only supported for CSS object properties and not for css literals?
import { css } from '@linaria/core';
// REQUIRED:
const fontMedium = {
fontSize: '24px',
fontWeight: 'bold'
}
// WANTED:
// const fontMedium = css`
// font-size: 24px;
// font-weight: bold;
// `
const button = css`
${fontMedium}
color: #862e9c;
border: 1px solid;
border-radius: 4px;
padding: 0.5rem 1rem;
&:hover,
&:focus {
color: #be4bdb;
}
`;
export const Button = (props) => {
return <button {...props} className={button} />;
};
Why do we need to use two completely different syntaxes to interpolate CSS properties?
I would very much like to stick with one syntax.
Using multiple classes is not really a great option for something like typographies either - I'd very much like to have the button declaration include the typography, and manually reusing the 5-10 properties required for a complete typography is not really a good option either.
Using multiple classes works (cx) but is not a great option either - I would very much prefer if the button styles were self-contained, residing in a single declaration, not spread between two classes.
Is there a reason this isn't practical or can't be done?
- 主要言語
- TypeScript
- スター
- 12.4k
- フォーク
- 413
- 平均マージ
- 3日 4時間
- マージ済み PR（30日）
- 2
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
callstack/linaria のほかの issue
-
feature: proposal 💬 needs: triage 🏷
難易度 5/5 1週間以上 初心者へのやさしさ 35/100
-
cat: modules aliasing 🔗 enhancement: proposal 💬 needs: triage 🏷
難易度 3/5 1〜2日 初心者へのやさしさ 35/100
-
enhancement: proposal 💬 needs: triage 🏷
難易度 3/5 1〜2日 初心者へのやさしさ 35/100
-
bug report 🦗 bundler: webpack 📦 needs: complete repro 🖥️
難易度 3/5 1〜2日 初心者へのやさしさ 35/100
-
feature: proposal 💬 needs: triage 🏷
難易度 5/5 1週間以上 初心者へのやさしさ 25/100
callstack/linaria の issue をすべて見る
似ている issue
-
Create/import wallet form shows raw "password must be at least 1 characters" instead of the translated message対応中かも @CapThunder19 が今日担当しました。 オープンbug
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
joinmarket-webui/jam#1538 ·
メンテナーはふだん 1 日以内に返信
-
t0ggles
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
nolimits4web/swiper#8240 · コメント 1 件 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
modelcontextprotocol/inspector#2723 ·
メンテナーはふだん 1 日以内に返信
-
status:approved type:bug
難易度 1/5 1時間未満 初心者へのやさしさ 70/100
メンテナーはふだん 1 日以内に返信