Skip to content

PostCSS plugins not working as expected #116

@soodoh

Description

@soodoh

When I add the following package.json configuration on the readme.md for adding PostCSS plugins, I get a build error.

{
  "devDependencies": {
    "postcss-simple-vars": "1.1.0"
  },
  "cssModules": {
    "postcssPlugins": {
      "postcss-simple-vars": {},
      "postcss-modules-local-by-default": {},
      "postcss-modules-extract-imports": {},
      "postcss-modules-scope": {},
    }
  }
}

This is the build error I keep getting:

/~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Processing Step: CSS Modules / PostCSS compilation
Unable to compile /home/admin/Projects/stencil/node_modules/react-toolbox/src/components/layout/theme.css
CssSyntaxError: postcss-simple-vars: /home/admin/Projects/stencil/node_modules/react-toolbox/src/components/layout/theme.css:161:1: Undefined variable $platform

@define-mixin sidebarIncrements $platform {
^
  & .sidebarDrawer {

/~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

This is an issue with React Toolbox's use of CSS Modules with CSS next, which oddly compiles just fine without any PostCSS plugins added to package.json. But when I revert to the default settings, it still doesn't allow me to use any CSS next in my own CSS modules in the /imports folder.

I'm sure I'm missing something with the set up here, but I can't find anything in the README.md. Any idea what I'm doing incorrectly?

This project is running Meteor 1.6.1, React v16 (with some old Blaze templates), and React Router v4.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions