将 postcss-conditionals 与 mixins 一起使用

Question

我在将 postcss 条件句转换为 css 时遇到问题。我正在使用 gulp 来处理文件并输出一个 css 文件。在我尝试转换条件（见下文）之前，一切似乎都在进行中。

这是我的 gulp 文件：

const postcss = require('gulp-postcss');
const gulp = require('gulp');
const rename = require('gulp-rename');

gulp.task('generate-css', function () {
  var plugins = [
    require('postcss-import'),
    require('postcss-mixins'),
    require('postcss-nested'),
    require('postcss-simple-vars'),
    require('postcss-calc'),
    require('postcss-conditionals'),
    // require('cssnano'), -> commented out so that I can see what is being converted correctly
  ];
  return gulp
    .src('./src/pages/test/*.css')
    .pipe(postcss(plugins))
    .pipe(
      rename(function (path) {
        path.dirname = './src/pages/' + path.dirname;
        path.basename = 'testingStyles.module';
        path.extname = '.css';
      }),
    )
    .pipe(gulp.dest('.'));
});

这是我的 postcss 文件的简化版本：

@import '../../theme/_mixins.css';
@import '../../theme/_variables.css';

.myClass {
  @mixin mixinOne;
  @mixin mixinTwo bottom, 10;

  &__icon {
    @mixin SVG logo_url, $my-color;
  }
}

我遇到的（我认为）问题是在 postcss-conditionals 尝试删除 @if 语句之前未处理混音（导入的）。

这给了我这个错误：

postcss-conditionals: .../_mixins.css:4:3: Failed to parse expression
  3 | @define-mixin mixinOne $paramOne, $paramTwo {
> 4 |   @if $direction == all {
    |   ^
  5 |     margin: calc($spacer * $(factor));
  6 |   }

如果我删除 postcss-conditionals 插件，我会得到一个 css 文件，其中成功应用了列表中所有以前的插件（没有嵌套、正确替换变量、转换计算等）。如果我删除 postcss-conditionals 插件，输出 css 文件中没有 @define-mixins。

对于如何确保在 @define-mixins 尝试删除条件之前对其进行处理，我有点不知所措（插件的顺序似乎对我来说是正确的）。

如果有人知道我做错了什么，将不胜感激！

Answer 1

也许有一些方法可以分两次处理插件？例如。先['postcss-import', 'postcss-mixins']，然后剩下的？那至少会（反）证明你的理论

将 postcss-conditionals 与 mixins 一起使用

Using postcss-conditionals with mixins

css

gulp

postcss

css-modules