Skip to content
This repository was archived by the owner on Feb 3, 2024. It is now read-only.

Commit 6c2d2d1

Browse files
DylanVannDylanVann
committed
stop fighting with tailwind
1 parent 1d0d13f commit 6c2d2d1

8 files changed

Lines changed: 2857 additions & 33 deletions

File tree

‎packages/docs/data.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import * as path from 'path'
2-
import fs from 'fs-extra'
3-
import gzipSize from 'gzip-size'
4-
import pug from 'pug'
1+
const path = require('path')
2+
const fs = require('fs-extra')
3+
const gzipSize = require('gzip-size')
4+
const pug = require('pug')
55

66
const run = async () => {
77
const pkg = fs.readJSONSync(

‎packages/docs/index.css‎

Lines changed: 48 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,39 +2,79 @@
22
:root {
33
--color: white;
44
--background: black;
5+
--black: rgba(255, 255, 255, 1);
6+
--white: rgba(0, 0, 0, 1);
7+
--gray-100: rgba(255, 255, 255, 0.1);
8+
--gray-200: rgba(255, 255, 255, 0.2);
9+
--gray-300: rgba(255, 255, 255, 0.3);
10+
--gray-400: rgba(255, 255, 255, 0.4);
11+
--gray-500: rgba(255, 255, 255, 0.5);
12+
--gray-600: rgba(255, 255, 255, 0.6);
13+
--gray-700: rgba(255, 255, 255, 0.7);
14+
--gray-800: rgba(255, 255, 255, 0.8);
15+
--gray-900: rgba(255, 255, 255, 0.9);
516
}
617
}
718

819
@media (prefers-color-scheme: light) {
920
:root {
1021
--color: black;
1122
--background: white;
23+
--black: rgba(0, 0, 0, 1);
24+
--white: rgba(255, 255, 255, 1);
25+
--gray-100: rgba(0, 0, 0, 0.1);
26+
--gray-200: rgba(0, 0, 0, 0.2);
27+
--gray-300: rgba(0, 0, 0, 0.3);
28+
--gray-400: rgba(0, 0, 0, 0.4);
29+
--gray-500: rgba(0, 0, 0, 0.5);
30+
--gray-600: rgba(0, 0, 0, 0.6);
31+
--gray-700: rgba(0, 0, 0, 0.7);
32+
--gray-800: rgba(0, 0, 0, 0.8);
33+
--gray-900: rgba(0, 0, 0, 0.9);
1234
}
1335
}
1436

1537
:root.light {
1638
--color: black;
1739
--background: white;
40+
--black: rgba(0, 0, 0, 1);
41+
--white: rgba(255, 255, 255, 1);
42+
--gray-100: rgba(0, 0, 0, 0.1);
43+
--gray-200: rgba(0, 0, 0, 0.2);
44+
--gray-300: rgba(0, 0, 0, 0.3);
45+
--gray-400: rgba(0, 0, 0, 0.4);
46+
--gray-500: rgba(0, 0, 0, 0.5);
47+
--gray-600: rgba(0, 0, 0, 0.6);
48+
--gray-700: rgba(0, 0, 0, 0.7);
49+
--gray-800: rgba(0, 0, 0, 0.8);
50+
--gray-900: rgba(0, 0, 0, 0.9);
1851
}
1952

2053
:root.dark {
2154
--color: white;
2255
--background: black;
56+
--black: rgba(255, 255, 255, 1);
57+
--white: rgba(0, 0, 0, 1);
58+
--gray-100: rgba(255, 255, 255, 0.1);
59+
--gray-200: rgba(255, 255, 255, 0.2);
60+
--gray-300: rgba(255, 255, 255, 0.3);
61+
--gray-400: rgba(255, 255, 255, 0.4);
62+
--gray-500: rgba(255, 255, 255, 0.5);
63+
--gray-600: rgba(255, 255, 255, 0.6);
64+
--gray-700: rgba(255, 255, 255, 0.7);
65+
--gray-800: rgba(255, 255, 255, 0.8);
66+
--gray-900: rgba(255, 255, 255, 0.9);
2367
}
2468

2569
:root {
26-
color: var(--color) !important;
70+
color: var(--color);
2771
background: var(--background);
2872
font-family: sans-serif;
2973
font-size: 16px;
3074
padding: env(safe-area-inset-top) env(safe-area-inset-right)
3175
env(safe-area-inset-bottom) env(safe-area-inset-left);
3276
}
3377

34-
.prose * {
35-
color: var(--color) !important;
36-
}
37-
3878
body {
3979
padding-top: 1rem;
4080
padding-left: 0.5rem;
@@ -64,10 +104,11 @@ input {
64104

65105
button {
66106
min-width: 120px;
67-
border: 1px solid var(--color);
68107
padding: 0.5rem 1rem;
69108
border-radius: 2px;
70109
font-weight: bold;
110+
background: var(--color);
111+
color: var(--background);
71112
}
72113

73114
a.badge {
@@ -97,5 +138,5 @@ a.badge svg .text {
97138
}
98139

99140
.prose pre code {
100-
color: var(--background) !important;
141+
color: var(--background);
101142
}

‎packages/docs/index.pug‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ html
77
title Perfect Dark Mode
88
link(rel="icon" type="image/png" href="sun.png")
99
script(src="perfect-dark-mode/dist/index.js")
10-
link(rel="stylesheet" href="https://unpkg.com/tailwindcss@1.7.5/dist/base.min.css")
11-
link(rel="stylesheet" href="https://unpkg.com/@tailwindcss/typography@0.2.0/dist/typography.min.css")
10+
link(rel="stylesheet" href="tailwind.css")
1211
style
1312
include ./index.css
1413
body.prose

‎packages/docs/package.json‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,31 @@
33
"version": "0.0.1",
44
"private": true,
55
"license": "MIT",
6-
"type": "module",
76
"scripts": {
8-
"build": "run-s build:copy-lib build:data build:html",
7+
"build": "run-s build:copy-lib build:data build:html build:tailwind",
98
"build:copy-lib": "cpx \"../../node_modules/perfect-dark-mode/dist/**/*\" dist/perfect-dark-mode/dist",
9+
"build:tailwind": "NODE_ENV=production postcss tailwind.css -o dist/tailwind.css",
1010
"build:data": "node data.js",
1111
"build:html": "pug index.pug --pretty --out dist --obj data.json",
1212
"serve": "serve dist"
1313
},
1414
"devDependencies": {
15+
"@fullhuman/postcss-purgecss": "^3.0.0",
16+
"@tailwindcss/typography": "^0.2.0",
1517
"cpx": "^1.5.0",
18+
"cssnano": "^4.1.10",
1619
"fs-extra": "^9.0.1",
1720
"gzip-size": "^5.1.1",
1821
"jstransformer-markdown-it": "^2.1.0",
1922
"npm-run-all": "^4.1.5",
2023
"perfect-dark-mode": "0.0.5",
24+
"postcss": "^8.1.1",
25+
"postcss-cli": "^8.1.0",
26+
"postcss-copy": "^7.1.0",
27+
"postcss-import": "^12.0.1",
2128
"pug": "^3.0.0",
2229
"pug-cli": "^1.0.0-alpha6",
23-
"serve": "^11.3.2"
30+
"serve": "^11.3.2",
31+
"tailwindcss": "^1.9.2"
2432
}
2533
}

‎packages/docs/postcss.config.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const tailwindcss = require('tailwindcss')
2+
const purgecss = require('@fullhuman/postcss-purgecss')
3+
const cssnano = require('cssnano')
4+
const copy = require('postcss-copy')
5+
const postcssImport = require('postcss-import')
6+
7+
const production = process.env.NODE_ENV === 'production'
8+
9+
module.exports = {
10+
plugins: [
11+
postcssImport(),
12+
copy({
13+
template: '[name].[ext][query]',
14+
dest: 'static',
15+
}),
16+
tailwindcss('./tailwind.config.js'),
17+
production &&
18+
purgecss({
19+
content: ['dist/index.html', 'index.js'],
20+
defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
21+
}),
22+
production && cssnano({ preset: 'default' }),
23+
].filter(Boolean),
24+
}

0 commit comments

Comments
 (0)