Cannot import and use postcss-simple-vars as a function

Question

I am updating a PostCSS plugin to use PostCSS 8, and I am struggling with this error:

TypeError: vars(...) is not a function

The plugin is referenced in the code like so:

var vars = require('postcss-simple-vars');

...

vars({ only: value })(content);

The plugin was able to make this call before I updated the packages for it, but I'm not sure which one is breaking it. I've tried looking at the source code for postcss-simple-vars but I'm not understanding how this call isn't working.

These are the dependencies BEFORE upgrading:

"dependencies": {
    "postcss": "^5.0.0",
    "postcss-simple-vars": "^2.0.0"
  },
  "devDependencies": {
    "chai": "3.2.0",
    "gulp": "3.9.0",
    "gulp-eslint": "0.11.1",
    "gulp-mocha": "2.1.3",
    "postcss-custom-properties": "^5.0.1"
  }

AFTER updating packages:

"dependencies": {
    "postcss-simple-vars": "^6.0.3"
  },
  "peerDependencies": {
    "postcss": "^8.0.0"
  },
  "devDependencies": {
    "chai": "4.3.6",
    "gulp": "4.0.2",
    "gulp-eslint": "6.0.0",
    "gulp-mocha": "8.0.0",
    "postcss": "^8.0.0",
    "postcss-custom-properties": "^12.1.8"
  }

The issue seems to be that postcss-simple-vars isn't importing as a function anymore, but I don't know why.

UPDATE

I managed to get it to at least partially compile using this invocation:

 const {root} = postcss([vars({ only: value })]).process(content)

My issue with this is that it kind of goes against the principles of PostCSS 8. They mention in their migration guide that you really shouldn't have to import the postcss package anymore to perform operations in a plugin. Though this is technically performing an operation using a separate plugin, it still feels like it could potentially cause performance issues. I don't think I'm smart enough to know how or why though.

Cannot import and use postcss-simple-vars as a function

0 Answers