Building PostCSS components separately (#1488)

* Building css components separately

* Convert to a shell script

* Create modern-pets-grab.md

* add script folder

* Put clean back

.changeset/modern-pets-grab.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Building PostCSS components separately 

.gitignore

@@ -1,5 +1,7 @@
 # Generated from npm prepare
 app/components/**/*.js
+app/components/**/*.css
+app/components/**/*.css.map
 app/components/**/*.d.ts
 app/assets/
 

demo/kuby.rb

@@ -114,6 +114,7 @@ def install_from_image(image, dockerfile)
           package.json
           package-lock.json
           previews
+          script
         ]
 
         files.each { |f| dockerfile.copy(f, f) }

package.json

@@ -30,15 +30,15 @@
     "clean": "git clean -fdX -- app/",
     "build:docs": "npm run --prefix ./docs/ build",
     "build:docs:preview": "cd docs && npx gatsby build",
-    "prepare": "rm -rf docs/static && mkdir -p docs/static && npm run build:js && npm run build:css && cp app/assets/**/primer_view_components.* docs/static/",
+    "prepare": "rm -rf docs/static && mkdir -p docs/static && script/build-assets && cp app/assets/**/primer_view_components.* docs/static/",
     "lint": "npm run lint:stylelint && npm run lint:eslint",
     "lint:stylelint": "stylelint 'app/components/**/*.pcss'",
     "lint:stylelint:fix": "stylelint 'app/components/**/*.pcss' --fix",
     "lint:eslint": "eslint 'app/components/**/*.ts'",
     "lint:eslint:fix": "eslint 'app/components/**/*.ts' --fix",
     "changeset:version": "changeset version && script/version",
-    "build:js": "tsc && rollup -c",
-    "build:css": "postcss -o app/assets/styles/primer_view_components.css app/components/primer/primer.pcss"
+    "build:js": "script/build-assets js",
+    "build:css": "script/build-assets css"
   },
   "dependencies": {
     "@github/auto-complete-element": "^3.3.4",

script/build-assets

@@ -0,0 +1,31 @@
+#!/bin/bash
+
+export INPUT_TYPE=$1
+
+build_css() {
+  # Get a list of all the CSS files in the src directory
+  CSS_FILES=$(find app/components/primer -name '*.pcss' ! -path '*/primer.pcss')
+  npx postcss $CSS_FILES --dir app/components --base app/components --ext css
+  # Build main CSS bundle
+  npx postcss -o app/assets/styles/primer_view_components.css app/components/primer/primer.pcss
+}
+
+# Function to build the assets
+build_js() {
+  # Build the assets
+  npx tsc
+  npx rollup -c
+}
+
+if [ "$INPUT_TYPE" = "css" ]; then
+  echo "Building css assets"
+  build_css
+elif [ "$INPUT_TYPE" = "js" ]; then
+  # run build_js
+  echo "Building js assets"
+  build_js
+else
+  echo "Building all assets"
+  build_js
+  build_css
+fi