игнорировать фолбеки css-переменных
стили написаны на scss. После прогонки через postcss накидываются фолбеки на css-переменные. На входе: Стили:
:root {
--white: #ffffff;
--white-1: #E2E6E8;
--white-2: #F3F5F5;
--white-3: #E3E7EA;
--black: #212429;
--pink: #F784AD;
--purple: #7048E8;
--blue: #4263EB;
}
.btn {
padding: 15px 10px;
border: none;
border-radius: 8px;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 500;
color: var(--white);
background-color: var(--white);
cursor: pointer;
text-align: center;
&--large {
width: 100%;
}
&--small {
width: 15%;
@media (max-width: 768px) {
width: auto;
}
}
&--preview {
padding: 7px 10px;
}
&--primary {
background-color: var(--primary);
transition: background-color .2s linear;
&:hover {
background-color: var(--blueHover);
}
}
&--secondary {
background-color: var(--secondary);
transition: background-color .2s linear;
&:hover {
background-color: var(--purpleHover);
}
}
&--disabled {
opacity: 50%;
pointer-events: none;
cursor: default;
}
&--alternate {
background-color: var(--white);
border: 1px solid var(--grey-3);
color: #495057;
transition: border .2s linear;
&-disabled {
opacity: 50%;
pointer-events: none;
cursor: default;
}
&:hover {
border: 1px solid var(--black);
}
}
}
На выходе:
.btn{
background-color:#fff;
background-color:var(--white);
border:none;
border-radius:8px;
color:#fff;
color:var(--white);
cursor:pointer;
font-family:Roboto,sans-serif;
font-size:16px;
font-weight:500;
padding:15px 10px;
text-align:center;
}
.btn--large{
width:100%;
}
.btn--small{
width:15%
}
@media (max-width:768px){
.btn--small{
width:auto
}
}
.btn--preview{
padding:7px 10px;
}
.btn--primary{
background-color:#4263eb;
background-color:var(--primary);
transition:background-color .2s linear
}
.btn--primary:hover{
background-color:#2342c0;
background-color:var(--blueHover);
}
.btn--secondary{
background-color:#7048e8;
background-color:var(--secondary);
transition:background-color .2s linear
}
.btn--secondary:hover{
background-color:#5028c6;
background-color:var(--purpleHover);
}
.btn--disabled{
cursor:default;
opacity:50%;
pointer-events:none;
}
.btn--alternate{
background-color:#fff;
background-color:var(--white);
border:1px solid #acb5bd;
border:1px solid var(--grey-3);
color:#495057;
transition:border .2s linear;
}
.btn--alternate-disabled{
cursor:default;
opacity:50%;
pointer-events:none;
}
.btn--alternate:hover{
border:1px solid #212429;
border:1px solid var(--black);
}
Конфиг postcss.config.js
module.exports = {
syntax: 'postcss-scss',
map: { inline: true },
plugins: [
require('precss')({
lookup: { disable: true },
properties: {
disable: true,
preserve: true,
},
}),
require('postcss-import'),
require('postcss-mixins'),
require('postcss-nested'),
require('autoprefixer'),
require('cssnano')({
preset: ['default', {
discardComments: {
removeAll: true,
},
normalizeWhitespace: false,
}]
}),
],
}
Webpack/gulp не использую.
.browserslistrc
last 3 version
not dead
not ie > 0
Ответы (1 шт):
Автор решения: ndjs19
→ Ссылка
решение проблемы с фолбеками найдено - как тут писали, что autoprefixer не тянет фолбеки - спасибо, тк упустила этот момент в документации. Тянет эти полифилы precss, у которого в зависимостях есть postcss-preset-env. Проставив stage: false, фолбеки ушли
require('precss')({
lookup: { disable: true },\
stage: false,
properties: {
disable: true,
preserve: true,
},
}),