[Help] Importing data from other JavaScript files as variables

[patrulea]

I have a JavaScript file fetching data from a Shopify store through their Storefront API and I want to make the brand colors available as variables in PostCSS. Though, $background and $foreground return the function as a string when their variables are referenced.

// /data/shopify.js

// …
    return {
      shop: result.data.shop,
      products: result.data.products.nodes,
      collections: result.data.collections.nodes,
      homepage: result.data.homepage.nodes,
      news: result.data.news.nodes,
      board: result.data.board.nodes,
      lang: result.data.localization.language
    }
// …

// /postcss/variables.js

const { shop } = require("../data/shopify");

module.exports = {
  background: () => {
    return shop.brand.colors.primary[0].background;
  },
  foreground: () => {
    return shop.brand.colors.primary[0].foreground;
  },
  rem: "16px",
  border: "2px",
  duration: "250ms"
}

The other variables ($rem, $border, $duration) work as intended.

I’m new to JavaScript so I sort of don’t knot what I’m doing.

[ai]

Try move background to a simple value issues of function

[patrulea]

You mean something like this?

module.exports = {
  background: data => shop.brand.colors.primary[0].background,
  // …
}

[ai]

background: shop.brand.colors.primary[0].background

[patrulea]

Thanks! That solved the syntax issue. I’m still troubleshooting since shopify.js exports an async function, and PostCSS seems to get undefined keys from it. But that’s a different topic.