Reverse import

[FezVrasta]

Not sure if the title is clear.. well, actually I'm sure it is not.

Example:

// a.sss
$foo: 1

// b.sss
.b
  order: $foo

// c.sss
@import 'a'
@import 'b'

In this case, $foo in b.sss is undefined. With Stylus it worked correctly (I'm converting a big Stylus code base).

Is it expected or am I doing something wrong somewhere else maybe?

[ai]

In PostCSS logic is different.

You import a.pcss to c.pcss.

Not to global state.

[FezVrasta]

So I have to change the imports of the whole code base, d'oh!

Thanks, it makes sense.

[natank]

The following instructions will solve the problem:

1. Module.export a variables object in a javascript config file (e.g. colors.js).
2. Configure postcss-simple-vars accordingly to use this module.

For comple example and instructions refer to 'Variables' section in the post-css-simple-vars description (github.com):

`// config/colors.js

module.exports = { blue: '#056ef0' }

// gulpfile.js

var colors = require('./config/colors'); var vars = require('postcss-simple-vars')

gulp.task('css', function () { return gulp.src('./src/*.css') .pipe(postcss([ vars({ variables: colors }) ])) .pipe(gulp.dest('./dest')); });`

[Daddyjohn63]

HI, I have fallen on the same problem, but the instructions above make no sense to me. I understand the code needed for gulpfile.js , but cannot grasp the first step.

[natank]

I break down the first step further:

1. You should create a java script config file
2. In this config file, create an object that will hold your variables as keys
3. In the config file, export this variables object, as shown in the 'colors' example given above
4. continue with the gulpfile as explained above. is that fix the problem?

[Daddyjohn63]

Thank you,

I will try this.

Can I ask, why are we having this issue? Is this a solution that will need to be implemented in all installations of this package if we use it in future projects? or is it because the package we are using is out of date? should we try installing the most recent package?

best

John Paul

Mobile: 07739 875445

On Tue, Dec 4, 2018 at 6:40 AM natank notifications@github.com wrote:

I break down the first step further:

1. You should create a java script config file
2. In this config file, create an object that will hold your variables as keys
3. In the config file, export this variables object, as shown in the 'colors' example given above
4. continue with the gulpfile as explained above. is that fix the problem?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/postcss/postcss-simple-vars/issues/61#issuecomment-443989253, or mute the thread https://github.com/notifications/unsubscribe-auth/APIG2iG6w0XQzTs-T2YUMdRxU8ERy6cqks5u1hj0gaJpZM4KpqUL .