Vue Flow CSS dependencies

[vvroul]

Hello! I'd like to ask if there are any CSS dependencies that someone should import while setting up the project and the examples.
I have successfully imported the appropriate styles as stated in the README file, but while trying to run the Basic Example from the examples page, something seems to be missing.

1. The animated edge is not animated
2. The 'toggle classnames' button doesn't toggle the classes

Thank you so much! Keep up the great work!

[bcakmakoglu]

Hi and thanks for trying out Vueflow :)

Did you import the default theme? The edge animation is part of the default-theme.css file.

/* import the default theme */
@import "node_modules/@braks/vue-flow/dist/theme-default.css";

/* default-theme.css */
.vue-flow__edge.animated path {
	stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
}

The toggle is only part of the example so the dark nodes have to be styled by yourself, i.e. something like this has to be present in your css:

.vue-flow__node.dark {
  background: #557;
  color: #f8f8f8;
}

[bcakmakoglu]

Could you try adding the rule manually and see what happens, i.e. add to your custom css:

.vue-flow__edge.animated path {
	stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
}

or can you describe the project setup you have?
Are you using vite to build your app? Vite should handle postcss fine without any plugins whatsoever

[vvroul]

Yes I'm building the app using Vite 2.7.2 and I just "copy-pasted" the Basic Example from the Examples in my App script and I've imported the needed CSS modules in the main script. I've added manually the rule but nothing changes. Should I add this rule with a specific "lang" CSS attribute?

[bcakmakoglu]

No no, if the rule doesn't work manually I'm guessing something else is a problem.
I'll try to do a barebones setup later and try to re-create the issue

[bcakmakoglu]

Hey, just a little follow-up, I've been busy with family and been starting a new job so please excuse the delay 😓
I will try to squeeze it in during this week

[vvroul]

No worries mate, totally understandable! Happy New Year!! 😁

[vvroul]

Returning to this thread for an update :

1. Animated edge is finally working! In order for it to work it is necessary to include the postcss-nested plugin in the postcss.config.js file!
2. I'm still having a problem with the "dark nodes toggle", maybe I'm not defining the class correctly, going to keep on testing it!

[bcakmakoglu]

thx for pointing it out - I'm having trouble finding time to do something here but I will simply be compiling the styles to simple css file.

About the dark nodes, are you sure you included your own style for the .dark class?
Is the class being applied when you press the toggle?

[vvroul]

Yes I've written in my styles an example like the one you mention above :

.vue-flow__node.dark { background: #557; color: #f8f8f8; }

The class is being applied but there's no change.

[bcakmakoglu]

@vvroul Css files are now preprocessed by postcss (version ^0.4.0) before bundling them with the library, thus avoiding issues when no preprocessor is used on the users end.