hnzycfcfed / styled-px2vw Goto Github PK

const SearchView = styled.div`
display: flex;
align-items: flex-start;
justify-content: space-around;
width: 100%;
height: 131px;
box-sizing: border-box;
padding-top: 5px;
background-image: linear-gradient(1deg, rgba(255,255,255,0.30) 27%, #FFFFFF 99%);
font-family: PingFangSC-Regular;
.item{
position: relative;
padding-right: 22px;
height: 92px;
line-height: 92px;
font-size: 24px;
color: #999999;
text-align: center;
span{
position: absolute;
top: 0;
right: 0;
display: inline-block;
width: 12px;
height: 92px;
background-image: url("data:image/svg+xml,%3Csvg width='6' height='15' viewBox='0 0 6 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23999' fill-rule='evenodd'%3E%3Cg transform='matrix(1 0 0 -1 0 7)'%3E%3Crect transform='rotate(45 2.04 2.232)' x='.039' y='1.732' width='4' height='1' rx='.5'/%3E%3Crect transform='scale(-1 1) rotate(45 0 -7.827)' x='2.166' y='1.732' width='4' height='1' rx='.5'/%3E%3C/g%3E%3Cg transform='translate(0 8)'%3E%3Crect transform='rotate(45 2.04 2.5)' x='.039' y='2' width='4' height='1' rx='.5'/%3E%3Crect transform='scale(-1 1) rotate(45 0 -7.559)' x='2.166' y='2' width='4' height='1' rx='.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-size: 12px 30px;
background-position: center;
background-repeat: no-repeat;
}
&.red{
font-weight: bold;
color: #333333;
}
}

.red span{
    background-color: red;
}

`

解析为，嵌套部分解析错误，.red span解析为.iPNFtH .item span.red：

.iPNFtH .item{position:relative;padding-right:2.93333vw;height:12.26667vw;line-height:12.26667vw;font-size:3.2vw;color:#999999;text-align:center;}
.iPNFtH .item span{position:absolute;top:0;right:0;display:inline-block;width:1.6vw;height:12.26667vw;background-image:url("data:image/svg+xml,%3Csvg width='6' height='15' viewBox='0 0 6 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23999' fill-rule='evenodd'%3E%3Cg transform='matrix(1 0 0 -1 0 7)'%3E%3Crect transform='rotate(45 2.04 2.232)' x='.039' y='1.732' width='4' height='1' rx='.5'/%3E%3Crect transform='scale(-1 1) rotate(45 0 -7.827)' x='2.166' y='1.732' width='4' height='1' rx='.5'/%3E%3C/g%3E%3Cg transform='translate(0 8)'%3E%3Crect transform='rotate(45 2.04 2.5)' x='.039' y='2' width='4' height='1' rx='.5'/%3E%3Crect transform='scale(-1 1) rotate(45 0 -7.559)' x='2.166' y='2' width='4' height='1' rx='.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-size:1.6vw 4vw;background-position:center;background-repeat:no-repeat;}
.iPNFtH .item span.red{font-weight:bold;color:#333333;} .iPNFtH .item span .red span{background-color:red;}

对于

styled.div`
  width: ${(props: { width: number }) => props.width}px;
`;

width传100的话，输出的css是
width: 1000;

看了下代码，strings 和 interpolations 分开处理的

strings中的'px'，由于去掉单位后是''，所以直接返回了0

interpolations 中的 100，没有被处理。因为不是px结尾，所以没有匹配到正则，直接返回了

自己试了下，可以这样写：

const A = styled.div`
  width: ${(props: { width: number }) => `${props.width}px`};
`;

但这样和styled-component的API就不一致了

請問有沒有方法可以忽略 @media 區塊內不轉換 ?

我這邊想到一個方案是,
lg 以下尺寸, 寫px 自動轉換為vw
lg 尺寸不進行轉換, 手動寫 px

请问是否可以支持下