Creating a primer_view_components.css bundle that will ship with the …

…npm package (#1316)

* Building primer.css with postcss and ship to npm

* Create wicked-pears-help.md

* Rename to pcss and minimize plugin use

.changeset/wicked-pears-help.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Creating a primer_view_components.css bundle that will ship with the npm package

.gitignore

@@ -3,7 +3,7 @@ app/components/**/*.js
 app/components/**/*.d.ts
 
 # Generated by demo yarn post-install
-demo/app/assets/stylesheets/primer.css
+demo/app/assets/stylesheets/primer*
 
 # Generated by lib/tasks/docs.rake
 /.yardoc

app/components/primer/primer.pcss

@@ -0,0 +1 @@
+/* CSS component styles here */

demo/.storybook/preview.js

@@ -1,4 +1,5 @@
 import '@primer/css/dist/primer.css'
+import '../app/assets/stylesheets/primer_view_components.css'
 
 const isProd = process.env.NODE_ENV == 'production';
 

demo/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "version": "0.1.0",
   "dependencies": {
-    "@primer/css": "^20.4.1",
+    "@primer/css": "^20.4.2",
     "@rails/actioncable": "^6.0.0",
     "@rails/ujs": "^6.0.0",
     "prettier": "^2.4.1",
@@ -23,7 +23,7 @@
     "storybook": "start-storybook -p 5000",
     "build-storybook": "build-storybook -o public/view-components/stories --preview-url=/view-components/stories/iframe.html --force-build-preview",
     "build": "yarn build-storybook",
-    "postinstall": "cp node_modules/@primer/css/dist/primer.css app/assets/stylesheets"
+    "postinstall": "cp node_modules/@primer/css/dist/primer.css app/assets/stylesheets && cp ../app/assets/styles/*.css app/assets/stylesheets/"
   },
   "engines": {
     "yarn": "1.22.x"

docs/postcss.confg.js

@@ -0,0 +1,2 @@
+// Empty for gatsby build
+module.exports = {}

docs/src/@primer/gatsby-theme-doctocat/components/head.js

@@ -4,6 +4,7 @@ import Helmet from 'react-helmet'
 import useSiteMetadata from '@primer/gatsby-theme-doctocat/src/use-site-metadata'
 import '@primer/css/dist/primer.css'
 import '@primer/css/dist/primitives.css'
+import '../../../../static/primer_view_components.css'
 
 // Reset PrimerCSS changing body font-size to 14px
 const bodyStyle = `

lookbook/app/assets/stylesheets/primer.css

@@ -6,3 +6,6 @@
 
 /* design token import while primitives are not included in main bundle */
 @import '@primer/css/primitives/index.scss';
+
+/* View Component CSS */
+@import '../../../../app/assets/styles/primer_view_components.css';

package.json

@@ -20,17 +20,20 @@
     "url": "https://github.com/primer/view_components/issues"
   },
   "files": [
+    "app/assets/**/*",
     "app/components/primer/**/*.js",
+    "app/components/primer/**/*.css",
     "app/components/primer/**/*.d.ts"
   ],
   "scripts": {
     "build:docs": "cd docs && yarn gatsby build --prefix-paths",
     "build:docs:preview": "cd docs && yarn gatsby build",
-    "prepare": "rm -rf docs/static && mkdir -p docs/static && tsc && rollup -c && cp app/assets/javascripts/primer_view_components.js docs/static/primer_view_components.js",
+    "prepare": "rm -rf docs/static && mkdir -p docs/static && yarn build:js && yarn build:css && cp app/assets/**/primer_view_components.* docs/static/",
     "lint": "eslint 'app/components/**/*.ts' demo/.storybook",
     "lint:fix": "eslint 'app/components/**/*.ts' demo/.storybook --fix",
     "changeset:version": "changeset version && script/version",
-    "build:js": "tsc && rollup -c"
+    "build:js": "tsc && rollup -c",
+    "build:css": "postcss -o app/assets/styles/primer_view_components.css app/components/primer/primer.pcss"
   },
   "dependencies": {
     "@github/auto-complete-element": "^3.3.4",
@@ -45,17 +48,22 @@
     "@changesets/changelog-github": "^0.4.6",
     "@changesets/cli": "^2.24.1",
     "@github/prettier-config": "0.0.4",
-    "@primer/css": "^20.3.0",
+    "@primer/css": "^20.4.2",
     "@primer/primitives": "^7.9.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.3",
     "@typescript-eslint/eslint-plugin": "^5.31.0",
     "@typescript-eslint/parser": "^5.31.0",
+    "cssnano": "^5.1.13",
     "eslint": "^8.20.0",
     "eslint-plugin-custom-elements": "^0.0.6",
     "eslint-plugin-github": "^4.3.7",
     "eslint-plugin-prettier": "^4.2.1",
     "mocha": "^10.0.0",
+    "postcss": "^8.4.16",
+    "postcss-cli": "^10.0.0",
+    "postcss-import": "^14.1.0",
+    "postcss-preset-env": "^7.8.0",
     "rollup": "^2.77.1",
     "rollup-plugin-terser": "^7.0.2",
     "tslib": "^2.4.0",

postcss.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  map: {
+    annotation: false
+  },
+  plugins: [
+    require('postcss-import'),
+    require('postcss-preset-env')({
+      stage: 3,
+      // https://preset-env.cssdb.org/
+      features: {
+        'nesting-rules': true
+      }
+    }),
+    require('cssnano'),
+  ],
+};