Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: calc in the animation property value swaps duration and delay with the "calc" setting turned off #1527

Open
Serator opened this issue Oct 11, 2023 · 0 comments

Comments

@Serator
Copy link

Serator commented Oct 11, 2023

Describe the bug

I have the following styles:

@keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.a {
  animation: opacity 0ms 1000ms;
}
.b {
  animation: opacity 0ms calc(1000ms);
}

In the "default" preset everything works fine, both classes are reduced to that:

@keyframes opacity{0%{opacity:0}to{opacity:1}}.a,.b{animation:opacity 0ms 1s}

But if you turn off the "calc" setting, you get this:

@keyframes opacity{0%{opacity:0}to{opacity:1}}.a{animation:opacity 0ms 1s}.b{animation:opacity calc(1s) 0ms}

Expected behaviour

The "duration" and "delay" of the animation should not be swapped.

Steps to reproduce

Version

6.0.1

Preset

default

Environment

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Memory: 2.51 GB / 15.76 GB

Package details

├─┬ cssnano@6.0.1
│ ├─┬ cssnano-preset-default@6.0.1
│ │ ├─┬ css-declaration-sorter@6.4.1
│ │ │ └── postcss@8.4.31 deduped
│ │ ├─┬ cssnano-utils@4.0.0
│ │ │ └── postcss@8.4.31 deduped
│ │ ├─┬ postcss-calc@9.0.1
│ │ │ └── postcss@8.4.31 deduped
│ │ ├─┬ postcss-colormin@6.0.0
│ │ │ └── postcss@8.4.31 deduped
│ │ ├─┬ postcss-convert-values@6.0.0
│ │ │ └── postcss@8.4.31 deduped
│ │ ├─┬ postcss-discard-comments@6.0.0
│ │ │ └── postcss@8.4.31 deduped
│ │ ├─┬ postcss-discard-duplicates@6.0.0
│ │ │ └── postcss@8.4.31 deduped
│ │ ├─┬ postcss-discard-empty@6.0.0
│ │ │ └── postcss@8.4.31 deduped
│ │ ├─┬ postcss-discard-overridden@6.0.0
│ │ │ └── postcss@8.4.31 deduped
│ │ ├─┬ postcss-merge-longhand@6.0.0
│ │ │ ├── postcss@8.4.31 deduped
│ │ │ └─┬ stylehacks@6.0.0
│ │ │   └── postcss@8.4.31 deduped
│ │ ├─┬ postcss-merge-rules@6.0.1
│ │ │ └── postcss@8.4.31 deduped
│ │ ├─┬ postcss-minify-font-values@6.0.0
│ │ │ └── postcss@8.4.31 deduped
│ │ ├─┬ postcss-minify-gradients@6.0.0
│ │ │ └── postcss@8.4.31 deduped
│ │ ├─┬ postcss-minify-params@6.0.0
│ │ │ └── postcss@8.4.31 deduped
│ │ ├─┬ postcss-minify-selectors@6.0.0
│ │ │ └── postcss@8.4.31 deduped
│ │ ├─┬ postcss-normalize-charset@6.0.0
│ │ │ └── postcss@8.4.31 deduped
│ │ ├─┬ postcss-normalize-display-values@6.0.0
│ │ │ └── postcss@8.4.31 deduped
│ │ ├─┬ postcss-normalize-positions@6.0.0
│ │ │ └── postcss@8.4.31 deduped
│ │ ├─┬ postcss-normalize-repeat-style@6.0.0
│ │ │ └── postcss@8.4.31 deduped
│ │ ├─┬ postcss-normalize-string@6.0.0
│ │ │ └── postcss@8.4.31 deduped
│ │ ├─┬ postcss-normalize-timing-functions@6.0.0
│ │ │ └── postcss@8.4.31 deduped
│ │ ├─┬ postcss-normalize-unicode@6.0.0
│ │ │ └── postcss@8.4.31 deduped
│ │ ├─┬ postcss-normalize-url@6.0.0
│ │ │ └── postcss@8.4.31 deduped
│ │ ├─┬ postcss-normalize-whitespace@6.0.0
│ │ │ └── postcss@8.4.31 deduped
│ │ ├─┬ postcss-ordered-values@6.0.0
│ │ │ └── postcss@8.4.31 deduped
│ │ ├─┬ postcss-reduce-initial@6.0.0
│ │ │ └── postcss@8.4.31 deduped
│ │ ├─┬ postcss-reduce-transforms@6.0.0
│ │ │ └── postcss@8.4.31 deduped
│ │ ├─┬ postcss-svgo@6.0.0
│ │ │ └── postcss@8.4.31 deduped
│ │ ├─┬ postcss-unique-selectors@6.0.0
│ │ │ └── postcss@8.4.31 deduped
│ │ └── postcss@8.4.31 deduped
│ └── postcss@8.4.31 deduped
├─┬ htmlnano@2.0.4
│ ├── cssnano@6.0.1 deduped
│ └── postcss@8.4.31 deduped
├─┬ postcss-nesting@12.0.1
│ └── postcss@8.4.31 deduped
├─┬ postcss-preset-env@9.2.0
│ ├─┬ @csstools/postcss-cascade-layers@4.0.0
│ │ └── postcss@8.4.31 deduped
│ ├─┬ @csstools/postcss-color-function@3.0.7
│ │ └── postcss@8.4.31 deduped
│ ├─┬ @csstools/postcss-color-mix-function@2.0.7
│ │ └── postcss@8.4.31 deduped
│ ├─┬ @csstools/postcss-exponential-functions@1.0.1
│ │ └── postcss@8.4.31 deduped
│ ├─┬ @csstools/postcss-font-format-keywords@3.0.0
│ │ └── postcss@8.4.31 deduped
│ ├─┬ @csstools/postcss-gamut-mapping@1.0.0
│ │ └── postcss@8.4.31 deduped
│ ├─┬ @csstools/postcss-gradients-interpolation-method@4.0.7
│ │ └── postcss@8.4.31 deduped
│ ├─┬ @csstools/postcss-hwb-function@3.0.6
│ │ └── postcss@8.4.31 deduped
│ ├─┬ @csstools/postcss-ic-unit@3.0.2
│ │ └── postcss@8.4.31 deduped
│ ├─┬ @csstools/postcss-initial@1.0.0
│ │ └── postcss@8.4.31 deduped
│ ├─┬ @csstools/postcss-is-pseudo-class@4.0.3
│ │ └── postcss@8.4.31 deduped
│ ├─┬ @csstools/postcss-logical-float-and-clear@2.0.0
│ │ └── postcss@8.4.31 deduped
│ ├─┬ @csstools/postcss-logical-resize@2.0.0
│ │ └── postcss@8.4.31 deduped
│ ├─┬ @csstools/postcss-logical-viewport-units@2.0.3
│ │ └── postcss@8.4.31 deduped
│ ├─┬ @csstools/postcss-media-minmax@1.1.0
│ │ └── postcss@8.4.31 deduped
│ ├─┬ @csstools/postcss-media-queries-aspect-ratio-number-values@2.0.3
│ │ └── postcss@8.4.31 deduped
│ ├─┬ @csstools/postcss-nested-calc@3.0.0
│ │ └── postcss@8.4.31 deduped
│ ├─┬ @csstools/postcss-normalize-display-values@3.0.1
│ │ └── postcss@8.4.31 deduped
│ ├─┬ @csstools/postcss-oklab-function@3.0.7
│ │ └── postcss@8.4.31 deduped
│ ├─┬ @csstools/postcss-progressive-custom-properties@3.0.2
│ │ └── postcss@8.4.31 deduped
│ ├─┬ @csstools/postcss-relative-color-syntax@2.0.7
│ │ └── postcss@8.4.31 deduped
│ ├─┬ @csstools/postcss-scope-pseudo-class@3.0.0
│ │ └── postcss@8.4.31 deduped
│ ├─┬ @csstools/postcss-stepped-value-functions@3.0.2
│ │ └── postcss@8.4.31 deduped
│ ├─┬ @csstools/postcss-text-decoration-shorthand@3.0.3
│ │ └── postcss@8.4.31 deduped
│ ├─┬ @csstools/postcss-trigonometric-functions@3.0.2
│ │ └── postcss@8.4.31 deduped
│ ├─┬ @csstools/postcss-unset-value@3.0.0
│ │ └── postcss@8.4.31 deduped
│ ├─┬ autoprefixer@10.4.16
│ │ └── postcss@8.4.31 deduped
│ ├─┬ css-blank-pseudo@6.0.0
│ │ └── postcss@8.4.31 deduped
│ ├─┬ css-has-pseudo@6.0.0
│ │ └── postcss@8.4.31 deduped
│ ├─┬ css-prefers-color-scheme@9.0.0
│ │ └── postcss@8.4.31 deduped
│ ├─┬ postcss-attribute-case-insensitive@6.0.2
│ │ └── postcss@8.4.31 deduped
│ ├─┬ postcss-clamp@4.1.0
│ │ └── postcss@8.4.31 deduped
│ ├─┬ postcss-color-functional-notation@6.0.2
│ │ └── postcss@8.4.31 deduped
│ ├─┬ postcss-color-hex-alpha@9.0.2
│ │ └── postcss@8.4.31 deduped
│ ├─┬ postcss-color-rebeccapurple@9.0.1
│ │ └── postcss@8.4.31 deduped
│ ├─┬ postcss-custom-media@10.0.2
│ │ └── postcss@8.4.31 deduped
│ ├─┬ postcss-custom-properties@13.3.2
│ │ └── postcss@8.4.31 deduped
│ ├─┬ postcss-custom-selectors@7.1.6
│ │ └── postcss@8.4.31 deduped
│ ├─┬ postcss-dir-pseudo-class@8.0.0
│ │ └── postcss@8.4.31 deduped
│ ├─┬ postcss-double-position-gradients@5.0.2
│ │ └── postcss@8.4.31 deduped
│ ├─┬ postcss-focus-visible@9.0.0
│ │ └── postcss@8.4.31 deduped
│ ├─┬ postcss-focus-within@8.0.0
│ │ └── postcss@8.4.31 deduped
│ ├─┬ postcss-font-variant@5.0.0
│ │ └── postcss@8.4.31 deduped
│ ├─┬ postcss-gap-properties@5.0.0
│ │ └── postcss@8.4.31 deduped
│ ├─┬ postcss-image-set-function@6.0.1
│ │ └── postcss@8.4.31 deduped
│ ├─┬ postcss-lab-function@6.0.7
│ │ └── postcss@8.4.31 deduped
│ ├─┬ postcss-logical@7.0.0
│ │ └── postcss@8.4.31 deduped
│ ├─┬ postcss-opacity-percentage@2.0.0
│ │ └── postcss@8.4.31 deduped
│ ├─┬ postcss-overflow-shorthand@5.0.0
│ │ └── postcss@8.4.31 deduped
│ ├─┬ postcss-page-break@3.0.4
│ │ └── postcss@8.4.31 deduped
│ ├─┬ postcss-place@9.0.0
│ │ └── postcss@8.4.31 deduped
│ ├─┬ postcss-pseudo-class-any-link@9.0.0
│ │ └── postcss@8.4.31 deduped
│ ├─┬ postcss-replace-overflow-wrap@4.0.0
│ │ └── postcss@8.4.31 deduped
│ ├─┬ postcss-selector-not@7.0.1
│ │ └── postcss@8.4.31 deduped
│ └── postcss@8.4.31 deduped
├── postcss@8.4.31
├─┬ svelte-check@3.5.2
│ └─┬ svelte-preprocess@5.0.4
│   └── postcss@8.4.31 deduped
├─┬ tailwindcss@3.3.3
│ ├─┬ postcss-import@15.1.0
│ │ └── postcss@8.4.31 deduped
│ ├─┬ postcss-js@4.0.1
│ │ └── postcss@8.4.31 deduped
│ ├─┬ postcss-load-config@4.0.1
│ │ └── postcss@8.4.31 deduped
│ ├─┬ postcss-nested@6.0.1
│ │ └── postcss@8.4.31 deduped
│ └── postcss@8.4.31 deduped
└─┬ vite@4.4.11
  └── postcss@8.4.31 deduped

Additional context

No response

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant