feat(styles): build individual components

This will allow projects not using Sass to import individual component styles.

.changeset/proud-spies-tap.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Pre-compiled CSS files are now shipped with the package to enable projects not using Sass to selectively import component styles.

packages/styles/gulpfile.js

@@ -117,6 +117,26 @@ gulp.task('sass', () => {
     .pipe(gulp.dest(options.outputDir));
 });
 
+/**
+ * Compile components to Css
+ *  - Compile
+ *  - Autoprefix
+ *  - Also puts compiled Css into tsc-out
+ */
+gulp.task('build-components', () => {
+  return gulp
+    .src('./src/components/*.scss')
+    .pipe(
+      gulpSass({
+        outputStyle: 'compressed',
+        includePaths: options.includePaths,
+        quietDeps: true,
+      }),
+    )
+    .pipe(gulpPostCss([autoprefixer()]))
+    .pipe(gulp.dest(`${options.outputDir}/components`));
+});
+
 /**
  * Generate uncompressed sass output
  */
@@ -160,5 +180,6 @@ exports.default = gulp.task(
   gulp.parallel(
     gulp.series('map-icons', 'copy', 'autoprefixer', 'transform-package-json'),
     gulp.series('sass'),
+    gulp.series('build-components'),
   ),
 );