build: include animations.css file in build

- add animations step in gulp to transpile scss and copy to build

1 files changed, 36 insertions, 1 deletions

diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index c6fe6975a..02e42e788 100644
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -70,6 +70,10 @@ const paths = {
     src: 'src/styles/vertical.scss',
     dest: 'build/styles',
   },
+  animations: {
+    src: 'src/styles/animations.scss',
+    dest: 'build/styles',
+  },
   javascripts: {
     src: 'src/**/*.js',
     dest: 'build/',
@@ -239,6 +243,37 @@ export function verticalStyle() {
     .pipe(connect.reload());
 }
 
+export function animations() {
+  return gulp
+    .src(paths.animations.src)
+    .pipe(
+      sassVariables(
+        Object.assign(
+          {
+            $env: getTargetEnv,
+          },
+          ...styleConfig,
+        ),
+      ),
+    )
+    .pipe(
+      sass({
+        includePaths: ['./node_modules', '../node_modules'],
+      }).on('error', sass.logError),
+    )
+    .pipe(
+      gulpIf(
+        !isDevBuild,
+        csso({
+          // Only minify in production to speed up dev builds
+          restructure: false, // Don't restructure CSS, otherwise it will break the styles
+        }),
+      ),
+    )
+    .pipe(gulp.dest(paths.animations.dest))
+    .pipe(connect.reload());
+}
+
 export function processJavascripts() {
   return gulp
     .src(
@@ -309,7 +344,7 @@ export function recipeInfo() {
 const build = gulp.series(
   clean,
   gulp.parallel(mvSrc, mvPackageJson, mvLernaPackages, exportBuildInfo),
-  gulp.parallel(html, processJavascripts, processTypescripts, styles, verticalStyle, recipes, recipeInfo),
+  gulp.parallel(html, processJavascripts, processTypescripts, styles, verticalStyle, animations, recipes, recipeInfo),
 );
 export { build };