postcss-advanced-variables

postcss-advanced-variables copied to clipboard

Hi Jonathan,

Is there a way to export the advanced variables such that they can be imported into a JS file? I see you have a separate repo https://github.com/jonathantneal/postcss-export-custom-variables but this is different syntax.

For example: https://blog.bluematador.com/posts/how-to-share-variables-between-js-and-sass/

// styles/animation.scss
$animation-length: 250;
$animation-length-ms: $animation-length + 0ms;

:export {
  animationMillis: $animation-length-ms;
}

.component-enter {
  ...

  transition: all $animation-length-ms ease-in;
}

// js/animation.js
import styles from '../styles/animation.scss'
import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'

const millis = parseInt(styles.animationMillis)

...

<CSSTransitionGroup
  transitionName="component"
  transitionEnterTimeout={millis}
  transitionLeaveTimeout={millis}
/>

...

I have found https://github.com/nahody/postcss-export-vars, however if I have variables which are based on other variables it will not resolve them e.g.

$green-25: color($themeBaseColor04 tint(95%));

Thanks!

I think that comes down to your bundler :-x