Как получить предупреждения о недопустимых значениях css

Я перехожу с sass на postcss. Чтобы упростить задачу, я использую postcss-simple-vars, который поддерживает такие же переменные, как и sass.

Моя проблема:

$size: 100px;

.class {
    width: $size * 2;
}

Сасс результат:

.class {
    width: 200px;
}

Postcss с простым результатом vars:

.class {
    width: 100px * 2;
}

Последнее кажется недопустимым кодом CSS. Чтобы исправить это, мне нужно использовать функцию calc(). Проблема состоит в том, чтобы найти все случаи этих вычислений в моем коде. У меня есть ~ 1 МБ scss...

Есть ли какой-нибудь инструмент (линтер, компилятор и т. д.), который проанализирует мой css и предупредит меня обо всех местах, где об этом нужно позаботиться?


css postcss
person Karolis    schedule 14.04.2018    source источник

Ответы (1)


arrow_upward
-1
arrow_downward

Я не уверен, есть ли плагин для предварительной сборки, готовый к использованию. Но вы можете создать простую задачу в gulp и указать на любую ошибку в вашем файле css.

создайте новую задачу в своих задачах gulp и console.log введите errorInfo из вашего файла style.css, используя метод toString()

так далее

gulp.task('styles' function() {
  return gulp.src('your src ./path for your style.css ')
    .on('error', function(errorInfo) {
     console.log(errorInfo.toString());
     this.emit('end');
 })
   .pipe(gulp.dest('your dest ./path four final destination path '));
});

Обновление

var processors = function() {
    return function(css) {
      css.eachDecl('width', function(decl) {
          decl.value = decl.value + ', calc({{ size }} * 2)';
      });
    }
};

gulp.task('css', function() {
  return gulp.src('./app/assets/styles/your_style.css')
    .pipe(postcss([processors]))
    .pipe(gulp.dest('./app/temp/styles/'));
 });
person Ploutarchos    schedule 16.04.2018
comment
Где именно проверяется css в этой функции? - person Karolis; 16.04.2018
comment
@Karolis не уверен, используете ли вы gulp в своем рабочем процессе. вы можете найти документацию здесь, чтобы установить его. вышеприведенная функция может указывать на ваши синтаксические ошибки в файле CSS на вашей консоли imghhere - person Ploutarchos; 16.04.2018
comment
gulp.src() просто читает файл. Чтобы получить предупреждение об ошибках css, мне пришлось бы передать содержимое другой функции, которая выполняет обработку. Приведенный вами пример этого не делает. - person Karolis; 17.04.2018
comment
@Каролис извините за недоразумение. Если я правильно понимаю, вы пытаетесь заменить width: 200px * 2; на › width: calc(200px *2);? а как насчет следующего: function(css) { css.eachDecl('width', function(decl) { decl.value = decl.value + ', calc($size * 2)'; }); } - person Ploutarchos; 17.04.2018
comment
Вы не должны бросать догадки в качестве ответов. Если вы не знаете ответа на вопрос, просто пропустите его. - person Karolis; 18.04.2018
comment
@Karolis, при всем моем уважении, но вы спросили следующее Is there any tool (linter, compiler, etc) which would analyze my css and warn me of all the places where this needs to be taken care of? 'Я предполагал, что подогрею вас за ошибки.. Правильно? И я попросил об этом, ты помнишь? 'Почему вы не ответили на мой вопрос? Я не знаю твоего вопроса, мой друг, как на него можно ответить?? - person Ploutarchos; 19.04.2018