How it will work with react-toolbox 2.0.0-beta.5

[Furqankhanzada]

In this beta version they converted all .scss files to .css file and using css modules variables like

:root {
  --appbar-color: var(--color-primary-dark);
}

Can you please update your demo according to it ? or create a branch for this major change ?

Thanks

[clark0x]

react-toolbox-example uses scss, while from react-toolbox 2.x it uses postcss. So this example won't work. Except this, meteor-css-modules can work with react-toolbox 2.x by using postcss-cssnext plugins.

meteor npm install postcss-cssnext --save
meteor reset

then, in package.json:

  "cssModules": {
    "postcssPlugins": {
      "postcss-cssnext": {},
      "postcss-modules-values": {},
      "postcss-modules-local-by-default": {},
      "postcss-modules-extract-imports": {},
      "postcss-modules-scope": {}
    },
    "ignorePaths": [
      "node_modules/postcss-nesting",
      "node_modules/react-toolbox/components"
    ]
  }

Then you will get an error about dropdown.css.css mising }. This is cause by a bug of react-toolbox. It has been fix in dev branch, but it hasn't been release. You can fix this by using dev branch , or fix it by hand and wait for next beta release.

[Furqankhanzada]

@clarkorz Thanks for you time and answer. with your answer i am able to run my project again. but the issue is "How we will override variables?" first i was doing it like

    "globalVariables": [
      {
        "theme-building": true
      },
      "client/toolbox-theme.scss"
    ],

and inside toolbox-theme.scss file :

$color-primary: #008142 !default;
$color-primary-dark: #fff !default;

it was working fine and overriding these variables all over the app. but now its not working. i have tried like this on same file :

:root {
  --color-primary: #008142;
}

any suggestions/help ?

[ddeklerk]

Any word on this? I am able to use the beta version of React-toolbox 2 with Meteor, but I haven't figured out how to override the global variables like primary color.

[neoromantic]

Same problem here. Can anyone please help with this?

[akanix42]

I don't use react-toolbox and unfortunately haven't had time to dig into this, but according to the react-toolbox docs, you can override the variables using a JSON object. I think that would look like this in package.json (using @clarkorz's example above):

"cssModules": {
    "postcssPlugins": {
      "postcss-cssnext": {
        "features": {
          "customProperties": {
            "variables": {
              "color-text": "#444548",
              "color-primary": "var(--palette-blue-500)",
              "button-height": "30px",
            },
          },
        },
      },
      "postcss-modules-values": {},
      "postcss-modules-local-by-default": {},
      "postcss-modules-extract-imports": {},
      "postcss-modules-scope": {}
    },
    "ignorePaths": [
      "node_modules/postcss-nesting",
      "node_modules/react-toolbox/components"
    ]
  }