Как префикс и полифилл S CSS без компиляции с помощью gulp? - PullRequest
Новая
       63

Как префикс и полифилл S CSS без компиляции с помощью gulp?

0 голосов
/ 14 марта 2020

Я пытаюсь найти способ заполнить и префикс моего S CSS, не компилируя его в CSS. Я использую gulp с синтаксисом post css и post css -s css. Насколько я могу сказать, это ничего не делает. Я знаю, что мой файл gulp обращается к конфигу post css, потому что когда я удаляю опции конфигурации, в терминале появляется сообщение о том, что плагинов нет, но результаты одинаковы, независимо от того, есть плагины или нет.

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

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

Фрагмент из темы ..s css

.btn,
.btn-outline {
  appearance: none;
  display: inline-block;
  margin-bottom: $unit-4;
  padding: $unit-2 $unit-4;
  font-size: inherit;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  border-radius: $unit-1;
  transition: background .2s, border .2s, box-shadow .2s, color .2s;
  cursor: pointer;
  outline: none;
  user-select: none;

  &:active {
    transform: translateY(.125rem);
  }

  &:focus {
    box-shadow: 0 0 0 .125rem rgba(#4B4D60, .2);
  }
}

Gulp задание в стиле 

const config = require('./config/style');
const { src, dest } = require('gulp');
const plumber = require('gulp-plumber');
const postcss = require('gulp-postcss');
const replace = require('gulp-replace');
const combine = require('gulp-scss-combine');
const rename = require('gulp-rename');

let task = {};

task.build = () => {
    return src(config.path.src)
        .pipe(plumber())
        .pipe(replace(/(?<=\n\s*){{(.*?)}}|(?<=\n\s*|;\s*){%(.*?)%}/g, (match) => { return '/*' + match + '*/' }))
        .pipe(replace(/(?<=:\s*){%([^;]+)%}|(?<=:\s*){{([^;]+)}}/g, (match) => { return '"' + match + '"' }))
        .pipe(postcss())
        .pipe(replace('/*{%', '{%'))
        .pipe(replace('/*{{', '{{'))
        .pipe(replace('%}*/', '%}'))
        .pipe(replace('}}*/', '}}'))
        .pipe(replace('"{%', '{%'))
        .pipe(replace('"{{', '{{'))
        .pipe(replace('%}"', '%}'))
        .pipe(replace('}}"', '}}'))
        .pipe(combine())
        .pipe(rename(config.name))
        .pipe(dest(config.path.build))
}

exports.style = task;

post css .config. js

const postcssPresetEnv = require('postcss-preset-env');
const autoprefixer = require('autoprefixer');

module.exports = {
    syntax: require('postcss-scss'),
    plugins: [
        postcssPresetEnv({
            stage: 2
        })
    ]
}
...