feat(styles): add gulp task to update _not-defined.scss with built co…

…mponents

packages/styles/gulpfile.js

@@ -160,6 +160,51 @@ gulp.task(
   }),
 );
 
+/**
+ * Get all available components names from the components package and add them to the scss file (packages\styles\src\utilities\_not-defined.scss) which sets initial visibility to hidden (for unregistered state).
+ */
+
+gulp.task('extract-component-names', done => {
+  const filePath = path.join(__dirname, '../components/dist/collection/index.js');
+  fs.readFile(filePath, 'utf8', (err, data) => {
+    if (err) {
+      console.error('Error reading file:', err);
+      done(err);
+      return;
+    }
+
+    const content = data;
+    const componentNames = content
+      .match(/export \{ (\w+) \} from/g)
+      .map(match => match.replace(/export \{ (\w+) \} from/, '$1'));
+
+    const kebabCaseNames = componentNames.map(name =>
+      name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(),
+    );
+    console.log('Kebab-case component names:', kebabCaseNames);
+
+    const componentNamesContent = `/*
+  Initial visibility of the components is set to hidden to prevent 'flickering' effect due to stencil js/scss delay.
+*/
+
+:where(
+    ${kebabCaseNames.join(',\n    ')}
+):not(:defined) {
+  visibility: hidden;
+}
+    `;
+    const outputPath = path.join(__dirname, 'src/utilities/_not-defined.scss');
+    fs.writeFile(outputPath, componentNamesContent, err => {
+      if (err) {
+        console.error('Error writing file:', err);
+        done(err);
+        return;
+      }
+      done();
+    });
+  });
+});
+
 /**
  * Watch task for scss development
  */
@@ -178,5 +223,6 @@ exports.default = gulp.task(
   gulp.parallel(
     gulp.series('map-icons', 'copy', 'autoprefixer', 'transform-package-json'),
     gulp.series('temporarily-copy-token-files', 'sass'),
+    gulp.series('extract-component-names'),
   ),
 );