使用带有 mixins 的 postcss 条件答案

【问题标题】：Using postcss-conditionals with mixins使用带有 mixins 的 postcss 条件
【发布时间】：2021-10-13 22:53:41
【问题描述】：

我在将我的 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 语句之前未处理 mixins（已导入）。

这给了我这个错误：

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 文件，其中列表中的所有先前插件都已成功应用（无嵌套、正确替换的变量、转换的 calcs 等）。如果我删除 postcss-conditionals 插件，则输出 css 文件中没有 @define-mixins。

我对如何确保在尝试删除条件之前处理 @define-mixins 有点茫然（插件的顺序似乎是正确的我）。

如果有人对我做错了什么有一些见解，将不胜感激！

【问题讨论】：

标签： css gulp postcss css-modules

【解决方案1】：

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

【讨论】：

我不确定这是否是完全正确的方法，但我链接了插件，以便条件插件在先前插件的输出文件上运行 - 这似乎可以解决问题