Duplicated declaration without fallback

[yoanmalie]

Hi, weird new one I've found.

Input:

img {
  --some-length: 32px;

  height: var(--some-length);
  width: var(--some-length);
}

Output:

img {
  --some-length: 32px;

  height: var(--some-length);

  height: var(--some-length);
  width: var(--some-length);
  width: var(--some-length);
}

Expected:

img {
  --some-length: 32px;

  height: 32px;
  height: var(--some-length);
  width: 32px;
  width: var(--some-length);
}

[pascalduez]

Hi,

see https://github.com/postcss/postcss-custom-properties/issues/173#issuecomment-483530357 for the "no-fallback" case.

Has for the duplication, we will need more details on your setup and env to be able to help you.

[yoanmalie]

Hello, here the package.json and postcss.config.js used.

macOS 10.14.4 Node.js 10.15.2 npm 6.4.1

package.json:

{
  "name": "test-postcss-preset-env",
  "scripts": {
    "dev": "postcss --config postcss.config.js src/main.css --output dist/bundle.css --watch --verbose"
  },
  "devDependencies": {
    "postcss-cli": "^6.0.0",
    "postcss-import": "^11.1.0",
    "postcss-preset-env": "^5.3.0"
  },
  "browserslist": [
    "> 0.5% in US",
    "> 0.25%",
    "ios >= 8.1",
    "android >= 4.4",
    "firefox esr",
    "not ie < 11",
    "chrome >= 41",
    "not OperaMini all"
  ]
}

postcss.config.js:

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-preset-env': {
      stage: 0,
    }
  },
  map: false,
}

[Semigradsky]

@yoanmalie I can't reproduce this. Could you try on the last version?

[clementbiron]

Same behaviour here.

Input

:root {
    --foo : 3;
}

.test{
 	height:var(--foo) * 100px;
  
	--bar: 4;
	width: var(--bar) * 100px;
}

Output

:root {
    --foo : 3;
}

.test{
 	height:3 * 100px;
 	height:var(--foo) * 100px;
  
	--bar: 4;
	width: var(--bar) * 100px;
}

Excepted

:root {
    --foo : 3;
}

.test{
 	height:3 * 100px;
 	height:var(--foo) * 100px;
  
	--bar: 4;
        width:4 * 100px;
	width: var(--bar) * 100px;
}

Config postcss-preset-env": "^6.5.0"

"gulp": "^4.0.0",

postcss: { plugins: [ postcssEasyImport, postcssMixins, postcssNested, postcssSimpleExtend, postcssEasings, postcssFlexbugsFixes, postcssCalc, postcssPresetEnv({ stage: 1, browsers: ['last 2 versions', 'ie 11', '>= 1%'] }), ], },

$ node -v v10.16.0

$ npm -v 6.9.0

[yoanmalie]

Hi, I've been notified but sorry I can't test anymore since I stayed with Sass.

@posykrat I don't know if this is related but are you trying to do a calculation here? You should use calc() event with postcss-calc for what I see in the doc, try:

:root {
    --foo : 3;
}

.test{
 	height: calc(var(--foo) * 100px);
  
	--bar: 4;
	width: calc(var(--bar) * 100px);
}

[clementbiron]

thank you for your response ;)

sorry, my example was wrong, I'm used to using calc so it's not related to the bug