Skip to content

Commit 742a164

Browse files
TheiazTheiaz
authored
fix: use css imports instead of separate postcss processing of each file (#159)
1 parent 0847cbb commit 742a164

8 files changed

+206
-1463
lines changed

‎package-lock.json

+11-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3-4
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,8 @@
2525
"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",
2626
"//develop:install": "Force ag to install your local html-template source code",
2727
"develop:install": " npm run develop -- --install",
28-
"generate:atomcss": "cross-env NODE_ENV=production postcss template/css/atom-one-dark.min.css -o template/css/main.min.css",
29-
"generate:maincss": "cross-env NODE_ENV=production postcss template/css/custom.css -o template/css/main.min.css",
30-
"generate:tailwind.css": "cross-env NODE_ENV=production postcss template/css/tailwind.min.css -o template/css/main.min.css",
31-
"generate:assets": "rimraf \"template/css/main.min.css\" && npm run generate:atomcss && npm run generate:maincss && npm run generate:tailwind.css",
28+
"generate:maincss": "cross-env NODE_ENV=production postcss template/css/main.css -o template/css/main.min.css",
29+
"generate:assets": "rimraf \"template/css/main.min.css\" && npm run generate:maincss",
3230
"bump:version": "npm --no-git-tag-version --allow-same-version version $VERSION",
3331
"prepublishOnly": "npm run generate:assets"
3432
},
@@ -38,6 +36,7 @@
3836
"dependencies": {
3937
"@asyncapi/generator-filters": "^1.1.0",
4038
"autoprefixer": "^10.2.1",
39+
"postcss-import": "^14.0.0",
4140
"puppeteer": "^5.3.1",
4241
"rimraf": "^3.0.2",
4342
"tailwindcss": "^2.0.2"

‎postcss.config.js

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
module.exports = {
2-
plugins: {
3-
tailwindcss: {},
4-
autoprefixer: {},
5-
},
2+
plugins: [
3+
require("postcss-import"),
4+
require("tailwindcss"),
5+
require("autoprefixer"),
6+
],
67
};

‎template/css/atom-one-dark.css

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
.hljs {
2+
display: block;
3+
overflow-x: auto;
4+
padding: 0.5em;
5+
color: #abb2bf;
6+
background: #282c34;
7+
}
8+
.hljs-comment,
9+
.hljs-quote {
10+
color: #5c6370;
11+
font-style: italic;
12+
}
13+
.hljs-doctag,
14+
.hljs-keyword,
15+
.hljs-formula {
16+
color: #c678dd;
17+
}
18+
.hljs-section,
19+
.hljs-name,
20+
.hljs-selector-tag,
21+
.hljs-deletion,
22+
.hljs-subst {
23+
color: #e06c75;
24+
}
25+
.hljs-literal {
26+
color: #56b6c2;
27+
}
28+
.hljs-string,
29+
.hljs-regexp,
30+
.hljs-addition,
31+
.hljs-attribute,
32+
.hljs-meta-string {
33+
color: #98c379;
34+
}
35+
.hljs-built_in,
36+
.hljs-class .hljs-title {
37+
color: #e6c07b;
38+
}
39+
.hljs-attr,
40+
.hljs-variable,
41+
.hljs-template-variable,
42+
.hljs-type,
43+
.hljs-selector-class,
44+
.hljs-selector-attr,
45+
.hljs-selector-pseudo,
46+
.hljs-number {
47+
color: #d19a66;
48+
}
49+
.hljs-symbol,
50+
.hljs-bullet,
51+
.hljs-link,
52+
.hljs-meta,
53+
.hljs-selector-id,
54+
.hljs-title {
55+
color: #61aeee;
56+
}
57+
.hljs-emphasis {
58+
font-style: italic;
59+
}
60+
.hljs-strong {
61+
font-weight: bold;
62+
}
63+
.hljs-link {
64+
text-decoration: underline;
65+
}

‎template/css/atom-one-dark.min.css

-1
This file was deleted.

‎template/css/custom.css renamed to ‎template/css/main.css

+14-12
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,19 @@
1+
@import "./atom-one-dark.css";
2+
13
@tailwind base;
24

5+
@tailwind components;
6+
7+
@tailwind utilities;
8+
9+
html,
10+
body {
11+
font-weight: lighter;
12+
background-color: white;
13+
font-family: sans-serif;
14+
line-height: 1.15;
15+
}
16+
317
h1 {
418
font-size: 2em;
519
}
@@ -19,18 +33,6 @@ h6 {
1933
@apply text-xs;
2034
}
2135

22-
@tailwind components;
23-
24-
@tailwind utilities;
25-
26-
html,
27-
body {
28-
font-weight: lighter;
29-
background-color: white;
30-
font-family: sans-serif;
31-
line-height: 1.15;
32-
}
33-
3436
h1,
3537
h2,
3638
h3,

‎template/css/main.min.css

+108-31
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,80 @@
1+
.hljs {
2+
display: block;
3+
overflow-x: auto;
4+
padding: 0.5em;
5+
color: #abb2bf;
6+
background: #282c34;
7+
}
8+
9+
.hljs-comment,
10+
.hljs-quote {
11+
color: #5c6370;
12+
font-style: italic;
13+
}
14+
15+
.hljs-doctag,
16+
.hljs-keyword,
17+
.hljs-formula {
18+
color: #c678dd;
19+
}
20+
21+
.hljs-section,
22+
.hljs-name,
23+
.hljs-selector-tag,
24+
.hljs-deletion,
25+
.hljs-subst {
26+
color: #e06c75;
27+
}
28+
29+
.hljs-literal {
30+
color: #56b6c2;
31+
}
32+
33+
.hljs-string,
34+
.hljs-regexp,
35+
.hljs-addition,
36+
.hljs-attribute,
37+
.hljs-meta-string {
38+
color: #98c379;
39+
}
40+
41+
.hljs-built_in,
42+
.hljs-class .hljs-title {
43+
color: #e6c07b;
44+
}
45+
46+
.hljs-attr,
47+
.hljs-variable,
48+
.hljs-template-variable,
49+
.hljs-type,
50+
.hljs-selector-class,
51+
.hljs-selector-attr,
52+
.hljs-selector-pseudo,
53+
.hljs-number {
54+
color: #d19a66;
55+
}
56+
57+
.hljs-symbol,
58+
.hljs-bullet,
59+
.hljs-link,
60+
.hljs-meta,
61+
.hljs-selector-id,
62+
.hljs-title {
63+
color: #61aeee;
64+
}
65+
66+
.hljs-emphasis {
67+
font-style: italic;
68+
}
69+
70+
.hljs-strong {
71+
font-weight: bold;
72+
}
73+
74+
.hljs-link {
75+
text-decoration: underline;
76+
}
77+
178
/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
279

380
/*
@@ -22,7 +99,7 @@ Use a more readable tab size (opinionated).
2299
:root {
23100
-moz-tab-size: 4;
24101
-o-tab-size: 4;
25-
tab-size: 4;
102+
tab-size: 4;
26103
}
27104

28105
/**
@@ -91,7 +168,7 @@ Add the correct text decoration in Chrome, Edge, and Safari.
91168

92169
abbr[title] {
93170
-webkit-text-decoration: underline dotted;
94-
text-decoration: underline dotted;
171+
text-decoration: underline dotted;
95172
}
96173

97174
/**
@@ -511,30 +588,6 @@ video {
511588
height: auto;
512589
}
513590

514-
h1 {
515-
font-size: 2em;
516-
}
517-
518-
h2 {
519-
font-size: 1.5rem;
520-
}
521-
522-
h3 {
523-
font-size: 1.25rem;
524-
}
525-
526-
h4 {
527-
font-size: 1.125rem;
528-
}
529-
530-
h5 {
531-
font-size: 0.875rem;
532-
}
533-
534-
h6 {
535-
font-size: 0.75rem;
536-
}
537-
538591
.bg-gray-100 {
539592
--tw-bg-opacity: 1;
540593
background-color: rgba(247, 250, 252, var(--tw-bg-opacity));
@@ -1084,27 +1137,27 @@ h6 {
10841137
0%, 100% {
10851138
transform: translateY(-25%);
10861139
-webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
1087-
animation-timing-function: cubic-bezier(0.8,0,1,1);
1140+
animation-timing-function: cubic-bezier(0.8,0,1,1);
10881141
}
10891142

10901143
50% {
10911144
transform: none;
10921145
-webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
1093-
animation-timing-function: cubic-bezier(0,0,0.2,1);
1146+
animation-timing-function: cubic-bezier(0,0,0.2,1);
10941147
}
10951148
}
10961149

10971150
@keyframes bounce {
10981151
0%, 100% {
10991152
transform: translateY(-25%);
11001153
-webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
1101-
animation-timing-function: cubic-bezier(0.8,0,1,1);
1154+
animation-timing-function: cubic-bezier(0.8,0,1,1);
11021155
}
11031156

11041157
50% {
11051158
transform: none;
11061159
-webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
1107-
animation-timing-function: cubic-bezier(0,0,0.2,1);
1160+
animation-timing-function: cubic-bezier(0,0,0.2,1);
11081161
}
11091162
}
11101163

@@ -1116,6 +1169,30 @@ body {
11161169
line-height: 1.15;
11171170
}
11181171

1172+
h1 {
1173+
font-size: 2em;
1174+
}
1175+
1176+
h2 {
1177+
font-size: 1.5rem;
1178+
}
1179+
1180+
h3 {
1181+
font-size: 1.25rem;
1182+
}
1183+
1184+
h4 {
1185+
font-size: 1.125rem;
1186+
}
1187+
1188+
h5 {
1189+
font-size: 0.875rem;
1190+
}
1191+
1192+
h6 {
1193+
font-size: 0.75rem;
1194+
}
1195+
11191196
h1,
11201197
h2,
11211198
h3,
@@ -1178,7 +1255,7 @@ a:hover {
11781255

11791256
.markdown :is(ol, ul) {
11801257
-webkit-padding-start: 40px;
1181-
padding-inline-start: 40px;
1258+
padding-inline-start: 40px;
11821259
list-style-type: disc;
11831260
}
11841261

0 commit comments

Comments
 (0)