Linaria: Environment variables not respected during Interpolation

[woahitsraj]

Environment

• Linaria version: 2.0.0-alpha.5
• Bundler (+ version): 4.42.1
• Node.js version: 12.14.1
• OS: macOS 10.15.6

Description

I have a project that uses Linaria and I want to set the theme at build time using an environment variable. The Theme.js file goes something like this:

const theme = process.env.REACT_APP_THEME_NAME === 'MAIN'
    ? require('../theme-variables.js')
    : require('../theme-variables-alt.js')

export { theme };

and there is a Button.js file that goes like this

import { styled } from 'linaria/react';
import { theme } from '../Theme';
const Button = styled('button')`
  background-color: ${theme.colors.blue};
`;

However, for some reason during interpolation, the complied CSS will only contain the values from the alt file despite the REACT_APP_THEME_NAME environment variable being set to MAIN.

Reproducible Demo

https://codesandbox.io/s/linaria-demo-forked-q25fw?file=/src/App.js

[woahitsraj]

Additionally, it was suggested in discord that in the process.ts file if we were to pass all the environment variables through and not just the NODE_ENV, this would be solved however I experimented by modifying it like so:

export const env = {
  NODE_ENV: process.env.NODE_ENV,
  REACT_APP_THEME_NAME: process.env.REACT_APP_THEME_NAME
}

and the problem persists

[Anber]

Hi @woahitsraj
Can you please confirm, that the problem has gone?

[woahitsraj]

Hi @Anber, thanks for looking into this. I'm not able to verify because the linaria/react module is now missing. Should I raise a new issue?

[Anber]

Have you checked in rc.3?

[woahitsraj]

Yes this is in 2.0.0-rc.3 Additionally, my minimal example is failing because of a missing module gensync. https://codesandbox.io/s/linaria-demo-forked-q25fw?file=/src/App.js

[Anber]

Ok, thank you. I'll check it ASAP

[Anber]

Hi @woahitsraj!
There are actually a few different problems:

1. The version of babel is too low in your sandbox. I have to find a minimal version and specify in the requirements, but I can say that >7.9.0 is definitely ok.
2. You have a misspelt in Title definition (it should be styled.h1 and not just styled).
3. Since Linaria is a babel plugin, we cannot process webpack plugins, so if you use DefinePlugin for mocking env in a browser, do not forget to specify the real environment variable.
4. And the last but definitely not least, I've broken default imports processing in shaker strategy :(

Here is a working sandbox https://codesandbox.io/s/linaria-demo-forked-y0vwn?file=/package.json

[woahitsraj]

Amazing! Thank you so much