fix: use css imports instead of separate postcss processing of each f…

…ile (#159)
asyncapi · Feb 22, 2021 · 742a164 · 742a164
1 parent 0847cbb
commit 742a164
Show file tree

Hide file tree

Showing 8 changed files with 206 additions and 1,463 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,10 +25,8 @@
     "develop": "npm run generate:assets && ag https://raw.githubusercontent.com/asyncapi/generator/v1.1.5/test/docs/dummy.yml ./ -o test/output --force-write --watch-template",
     "//develop:install": "Force ag to install your local html-template source code",
     "develop:install": " npm run develop -- --install",
-    "generate:atomcss": "cross-env NODE_ENV=production postcss template/css/atom-one-dark.min.css -o template/css/main.min.css",
-    "generate:maincss": "cross-env NODE_ENV=production postcss template/css/custom.css -o template/css/main.min.css",
-    "generate:tailwind.css": "cross-env NODE_ENV=production postcss template/css/tailwind.min.css -o template/css/main.min.css",
-    "generate:assets": "rimraf \"template/css/main.min.css\" && npm run generate:atomcss && npm run generate:maincss && npm run generate:tailwind.css",
+    "generate:maincss": "cross-env NODE_ENV=production postcss template/css/main.css -o template/css/main.min.css",
+    "generate:assets": "rimraf \"template/css/main.min.css\" && npm run generate:maincss",
     "bump:version": "npm --no-git-tag-version --allow-same-version version $VERSION",
     "prepublishOnly": "npm run generate:assets"
   },
@@ -38,6 +36,7 @@
   "dependencies": {
     "@asyncapi/generator-filters": "^1.1.0",
     "autoprefixer": "^10.2.1",
+    "postcss-import": "^14.0.0",
     "puppeteer": "^5.3.1",
     "rimraf": "^3.0.2",
     "tailwindcss": "^2.0.2"

diff --git a/postcss.config.js b/postcss.config.js
@@ -1,6 +1,7 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+  plugins: [
+    require("postcss-import"),
+    require("tailwindcss"),
+    require("autoprefixer"),
+  ],
 };
diff --git a/template/css/atom-one-dark.css b/template/css/atom-one-dark.css
@@ -0,0 +1,65 @@
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #abb2bf;
+  background: #282c34;
+}
+.hljs-comment,
+.hljs-quote {
+  color: #5c6370;
+  font-style: italic;
+}
+.hljs-doctag,
+.hljs-keyword,
+.hljs-formula {
+  color: #c678dd;
+}
+.hljs-section,
+.hljs-name,
+.hljs-selector-tag,
+.hljs-deletion,
+.hljs-subst {
+  color: #e06c75;
+}
+.hljs-literal {
+  color: #56b6c2;
+}
+.hljs-string,
+.hljs-regexp,
+.hljs-addition,
+.hljs-attribute,
+.hljs-meta-string {
+  color: #98c379;
+}
+.hljs-built_in,
+.hljs-class .hljs-title {
+  color: #e6c07b;
+}
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-type,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-number {
+  color: #d19a66;
+}
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id,
+.hljs-title {
+  color: #61aeee;
+}
+.hljs-emphasis {
+  font-style: italic;
+}
+.hljs-strong {
+  font-weight: bold;
+}
+.hljs-link {
+  text-decoration: underline;
+}
diff --git a/template/css/atom-one-dark.min.css b/template/css/atom-one-dark.min.css
diff --git a/template/css/custom.css → template/css/main.css b/template/css/custom.css → template/css/main.css
@@ -1,5 +1,19 @@
+@import "./atom-one-dark.css";
+
 @tailwind base;
 
+@tailwind components;
+
+@tailwind utilities;
+
+html,
+body {
+  font-weight: lighter;
+  background-color: white;
+  font-family: sans-serif;
+  line-height: 1.15;
+}
+
 h1 {
   font-size: 2em;
 }
@@ -19,18 +33,6 @@ h6 {
   @apply text-xs;
 }
 
-@tailwind components;
-
-@tailwind utilities;
-
-html,
-body {
-  font-weight: lighter;
-  background-color: white;
-  font-family: sans-serif;
-  line-height: 1.15;
-}
-
 h1,
 h2,
 h3,

diff --git a/template/css/main.min.css b/template/css/main.min.css
@@ -1,3 +1,80 @@
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #abb2bf;
+  background: #282c34;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #5c6370;
+  font-style: italic;
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-formula {
+  color: #c678dd;
+}
+
+.hljs-section,
+.hljs-name,
+.hljs-selector-tag,
+.hljs-deletion,
+.hljs-subst {
+  color: #e06c75;
+}
+
+.hljs-literal {
+  color: #56b6c2;
+}
+
+.hljs-string,
+.hljs-regexp,
+.hljs-addition,
+.hljs-attribute,
+.hljs-meta-string {
+  color: #98c379;
+}
+
+.hljs-built_in,
+.hljs-class .hljs-title {
+  color: #e6c07b;
+}
+
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-type,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-number {
+  color: #d19a66;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id,
+.hljs-title {
+  color: #61aeee;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
 /*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
 
 /*
@@ -22,7 +99,7 @@ Use a more readable tab size (opinionated).
 :root {
   -moz-tab-size: 4;
   -o-tab-size: 4;
-  tab-size: 4;
+     tab-size: 4;
 }
 
 /**
@@ -91,7 +168,7 @@ Add the correct text decoration in Chrome, Edge, and Safari.
 
 abbr[title] {
   -webkit-text-decoration: underline dotted;
-  text-decoration: underline dotted;
+          text-decoration: underline dotted;
 }
 
 /**
@@ -511,30 +588,6 @@ video {
   height: auto;
 }
 
-h1 {
-  font-size: 2em;
-}
-
-h2 {
-  font-size: 1.5rem;
-}
-
-h3 {
-  font-size: 1.25rem;
-}
-
-h4 {
-  font-size: 1.125rem;
-}
-
-h5 {
-  font-size: 0.875rem;
-}
-
-h6 {
-  font-size: 0.75rem;
-}
-
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgba(247, 250, 252, var(--tw-bg-opacity));
@@ -1084,27 +1137,27 @@ h6 {
   0%, 100% {
     transform: translateY(-25%);
     -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
-    animation-timing-function: cubic-bezier(0.8,0,1,1);
+            animation-timing-function: cubic-bezier(0.8,0,1,1);
   }
 
   50% {
     transform: none;
     -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
-    animation-timing-function: cubic-bezier(0,0,0.2,1);
+            animation-timing-function: cubic-bezier(0,0,0.2,1);
   }
 }
 
 @keyframes bounce {
   0%, 100% {
     transform: translateY(-25%);
     -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
-    animation-timing-function: cubic-bezier(0.8,0,1,1);
+            animation-timing-function: cubic-bezier(0.8,0,1,1);
   }
 
   50% {
     transform: none;
     -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
-    animation-timing-function: cubic-bezier(0,0,0.2,1);
+            animation-timing-function: cubic-bezier(0,0,0.2,1);
   }
 }
 
@@ -1116,6 +1169,30 @@ body {
   line-height: 1.15;
 }
 
+h1 {
+  font-size: 2em;
+}
+
+h2 {
+  font-size: 1.5rem;
+}
+
+h3 {
+  font-size: 1.25rem;
+}
+
+h4 {
+  font-size: 1.125rem;
+}
+
+h5 {
+  font-size: 0.875rem;
+}
+
+h6 {
+  font-size: 0.75rem;
+}
+
 h1,
 h2,
 h3,
@@ -1178,7 +1255,7 @@ a:hover {
 
 .markdown :is(ol, ul) {
   -webkit-padding-start: 40px;
-  padding-inline-start: 40px;
+          padding-inline-start: 40px;
   list-style-type: disc;
 }