Preserve: "true" only returns fallback declaration

[dippas]

Hi, I'm using postcss-css-variables in a gulp environment and whenever I set preserve: "true" it only returns the fallback declaration

Here is a simplified version of the gulpfile:

const {src, dest, series, parallel, watch} = require('gulp'),
    concat = require('gulp-concat'),
    rename = require('gulp-rename'),
    sourcemaps = require('gulp-sourcemaps'),
    plumber = require('gulp-plumber'),
    sass = require('gulp-sass'),
    cleanCSS = require('gulp-clean-css'),
    autoprefixer = require('autoprefixer'),
    postCSS = require('gulp-postcss'),
    cssVars = require('postcss-css-variables'),
    gap = require('postcss-gap-properties')

function coreStyles(basename, source, dist) {
  src(source)
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass({
         outputStyle: 'expanded'
     }).on('error', sass.logError))
    .pipe(cleanCSS()) //minify
    .pipe(postCSS([gap(), 
        cssVars({
          preserve: 'true'
      }), autoprefixer({
          grid: 'autoplace'
    })]))
    .pipe(concat(`${basename}.css`))
    .pipe(rename({
    basename: basename,
        suffix: '.min'
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(dest(dist))
}

function styles(done) {
    coreStyles(
        'filename',
        sourceFolder
        distFolder
    )    
    done()
}

const dev = series(clean, parallel(styles, otherNotRelevantTasksHere))
exports.build = dev
exports.default = series(dev, otherNotRelevantTasksHere)

---

Example:

:root {
  --spacing: 1rem;
}

section {
  padding: calc(var(--spacing) * 5);
}

Expected output:

:root {
  --spacing: 1rem;
}

section {
  padding: calc(1rem * 5);
  padding: calc(var(--spacing) * 5);
}

Actual output:

:root {
  --spacing: 1rem;
}

section {
  padding: calc(1rem * 5);
}

Can you tell what I am doing wrong here or is it a bug with gulp environment?

[MadLittleMods]

@dippas If I run your example through the playground with the preserve option on, it works as expected. It looks like one of your other plugins is messing with the output

You can try disabling your other plugins/pipes until you find what is stripping it out.

[dippas]

@MadLittleMods thanks for replying,

I've tried narrowing down the plugins/pipes for this use case, but no luck so far, I'm inclined to say this could be an issue either with the gulp-sass (the compiler from SCSS to CSS), or some incompatibility with postcss-css-vars and gulp environment.

Here is the narrowed example I've come up with:

const {src, dest} = require('gulp'),
    sass = require('gulp-sass'),
    postCSS = require('gulp-postcss'),
    cssVars = require('postcss-css-variables')

function styles(done) {
    src(paths.styles.app)
        .pipe(sass({
            outputStyle: 'expanded',
        }).on('error', sass.logError))
        .pipe(postCSS([
            cssVars({
                preserve: 'true'
            })
        ]))
        .pipe(dest(paths.styles.dist))
    done()
}

const dev = series(clean, parallel(styles, otherNotRelevantTasksHere))
exports.build = dev
exports.default = series(dev, otherNotRelevantTasksHere)

[MadLittleMods]

@dippas Please post the output from just the sass pipe (comment out the postcss stuff). That way, we can see your exact input that goes into postcss-css-variables. If necessary, reduce the Sass test case to reproduce as well.

[dippas]

@MadLittleMods thanks for taking time in replying to me.

Here is the minimal input of SCSS with only sass pipe (the setup is the one mentioned here https://github.com/MadLittleMods/postcss-css-variables/issues/115#issuecomment-576820951)

:root {
  --spacing: 1rem;
}

section {
  padding: calc(var(--spacing) * 5);
}

and the output is exactly the same in the CSS file:

:root {
  --spacing: 1rem;
}

section {
  padding: calc(var(--spacing) * 5);
}

I've tried another test, that was just add again the postcss-css-variables pipe and switch the true flag to false, and the only thing that does is switch from 1rem to --spacing , So it really doesn't add or remove any fallback property as it should.

[MadLittleMods]

@dippas Thanks for the minimal example 👍

Looking at your config again you should write the option without quotes around the true value -> preserve: true. I'm not sure if that solves your problem since a string is still a truthy value.

cssVars({
  preserve: true
})

---

In the playground with the options.preserve = true, https://madlittlemods.github.io/postcss-css-variables/playground/, everything looks expected 👀. Not sure what is going wrong in your setup

Input:

:root {
  --spacing: 1rem;
}

section {
  padding: calc(var(--spacing) * 5);
}

Output (looks as expected ✔️ ):

:root {
  --spacing: 1rem;
}

section {
  padding: calc(1rem * 5);
  padding: calc(var(--spacing) * 5);
}

[dippas]

@MadLittleMods that's it!

Very weird but yes it seems it only works when it is boolean type. I didn't remember try changing the type for the reason you said, a string true would still be a true value.

Many thanks!

[MadLittleMods]

It looks like the boolean strictness is caused by the following lines of code. But this also makes sense because the options.preserve can be a string value preserve: 'computed'

• https://github.com/MadLittleMods/postcss-css-variables/blob/8b458f7fa54205e5ab63a233de43d4559cb657fe/lib/resolve-decl.js#L104
• https://github.com/MadLittleMods/postcss-css-variables/blob/8b458f7fa54205e5ab63a233de43d4559cb657fe/lib/resolve-decl.js#L152