Skip to content

Commit 783e8ba

Browse files
enricoprazeresenricoprazeres
committed
refactor: create and move icon plugins to /vendor
1 parent 3cf882e commit 783e8ba

File tree

9 files changed

+153
-238
lines changed

9 files changed

+153
-238
lines changed

‎.gitignore‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,6 @@ priv/uploads/
2828
safira-*.tar
2929

3030
# Ignore assets that are produced by build tools.
31-
/assets/css/icons.css
32-
/assets/css/icons-utilities.css
3331
/priv/static/assets/
3432

3533
# Ignore digested assets cache.

‎assets/css/app.css‎

Lines changed: 64 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
@import 'tailwindcss';
2-
@plugin "@tailwindcss/forms";
32
@import './components.css';
4-
@import './icons.css';
5-
@import './icons-utilities.css';
3+
4+
@plugin "@tailwindcss/forms";
5+
@plugin "../vendor/heroicons.js";
6+
@plugin "../vendor/fontawesome.js";
67

78
@custom-variant dark (&:where(.dark, .dark *));
89

@@ -37,65 +38,65 @@
3738
--color-darkMuted: #71717a;
3839
--color-darkShade: #27272a;
3940

40-
--color-secondary-50: #f0f9ff;
41-
--color-secondary-100: #e0f2fe;
42-
--color-secondary-200: #bae6fd;
43-
--color-secondary-300: #7dd3fc;
44-
--color-secondary-400: #38bdf8;
45-
--color-secondary-500: #0ea5e9;
46-
--color-secondary-600: #0284c7;
47-
--color-secondary-700: #0369a1;
48-
--color-secondary-800: #075985;
49-
--color-secondary-900: #0c4a6e;
50-
--color-secondary-950: #082f49;
51-
52-
--color-success-50: #f0fdf4;
53-
--color-success-100: #dcfce7;
54-
--color-success-200: #bbf7d0;
55-
--color-success-300: #86efac;
56-
--color-success-400: #4ade80;
57-
--color-success-500: #22c55e;
58-
--color-success-600: #16a34a;
59-
--color-success-700: #15803d;
60-
--color-success-800: #166534;
61-
--color-success-900: #14532d;
62-
--color-success-950: #052e16;
63-
64-
--color-danger-50: #fef2f2;
65-
--color-danger-100: #fee2e2;
66-
--color-danger-200: #fecaca;
67-
--color-danger-300: #fca5a5;
68-
--color-danger-400: #f87171;
69-
--color-danger-500: #ef4444;
70-
--color-danger-600: #dc2626;
71-
--color-danger-700: #b91c1c;
72-
--color-danger-800: #991b1b;
73-
--color-danger-900: #7f1d1d;
74-
--color-danger-950: #450a0a;
75-
76-
--color-warning-50: #fefce8;
77-
--color-warning-100: #fef9c3;
78-
--color-warning-200: #fef08a;
79-
--color-warning-300: #fde047;
80-
--color-warning-400: #facc15;
81-
--color-warning-500: #eab308;
82-
--color-warning-600: #ca8a04;
83-
--color-warning-700: #a16207;
84-
--color-warning-800: #854d0e;
85-
--color-warning-900: #713f12;
86-
--color-warning-950: #422006;
87-
88-
--color-info-50: #eff6ff;
89-
--color-info-100: #dbeafe;
90-
--color-info-200: #bfdbfe;
91-
--color-info-300: #93c5fd;
92-
--color-info-400: #60a5fa;
93-
--color-info-500: #3b82f6;
94-
--color-info-600: #2563eb;
95-
--color-info-700: #1d4ed8;
96-
--color-info-800: #1e40af;
97-
--color-info-900: #1e3a8a;
98-
--color-info-950: #172554;
41+
--color-secondary-50: var(--color-sky-50);
42+
--color-secondary-100: var(--color-sky-100);
43+
--color-secondary-200: var(--color-sky-200);
44+
--color-secondary-300: var(--color-sky-300);
45+
--color-secondary-400: var(--color-sky-400);
46+
--color-secondary-500: var(--color-sky-500);
47+
--color-secondary-600: var(--color-sky-600);
48+
--color-secondary-700: var(--color-sky-700);
49+
--color-secondary-800: var(--color-sky-800);
50+
--color-secondary-900: var(--color-sky-900);
51+
--color-secondary-950: var(--color-sky-950);
52+
53+
--color-success-50: var(--color-green-50);
54+
--color-success-100: var(--color-green-100);
55+
--color-success-200: var(--color-green-200);
56+
--color-success-300: var(--color-green-300);
57+
--color-success-400: var(--color-green-400);
58+
--color-success-500: var(--color-green-500);
59+
--color-success-600: var(--color-green-600);
60+
--color-success-700: var(--color-green-700);
61+
--color-success-800: var(--color-green-800);
62+
--color-success-900: var(--color-green-900);
63+
--color-success-950: var(--color-green-950);
64+
65+
--color-danger-50: var(--color-red-50);
66+
--color-danger-100: var(--color-red-100);
67+
--color-danger-200: var(--color-red-200);
68+
--color-danger-300: var(--color-red-300);
69+
--color-danger-400: var(--color-red-400);
70+
--color-danger-500: var(--color-red-500);
71+
--color-danger-600: var(--color-red-600);
72+
--color-danger-700: var(--color-red-700);
73+
--color-danger-800: var(--color-red-800);
74+
--color-danger-900: var(--color-red-900);
75+
--color-danger-950: var(--color-red-950);
76+
77+
--color-warning-50: var(--color-yellow-50);
78+
--color-warning-100: var(--color-yellow-100);
79+
--color-warning-200: var(--color-yellow-200);
80+
--color-warning-300: var(--color-yellow-300);
81+
--color-warning-400: var(--color-yellow-400);
82+
--color-warning-500: var(--color-yellow-500);
83+
--color-warning-600: var(--color-yellow-600);
84+
--color-warning-700: var(--color-yellow-700);
85+
--color-warning-800: var(--color-yellow-800);
86+
--color-warning-900: var(--color-yellow-900);
87+
--color-warning-950: var(--color-yellow-950);
88+
89+
--color-info-50: var(--color-blue-50);
90+
--color-info-100: var(--color-blue-100);
91+
--color-info-200: var(--color-blue-200);
92+
--color-info-300: var(--color-blue-300);
93+
--color-info-400: var(--color-blue-400);
94+
--color-info-500: var(--color-blue-500);
95+
--color-info-600: var(--color-blue-600);
96+
--color-info-700: var(--color-blue-700);
97+
--color-info-800: var(--color-blue-800);
98+
--color-info-900: var(--color-blue-900);
99+
--color-info-950: var(--color-blue-950);
99100

100101
--font-terminal: 'Terminal', ui-monospace, monospace;
101102
--font-iregular: 'Inter-Regular', ui-sans-serif, sans-serif;
@@ -148,4 +149,4 @@ select:-webkit-autofill,
148149
select:-webkit-autofill:hover,
149150
select:-webkit-autofill:focus {
150151
-webkit-box-shadow: 0 0 0px 1000px transparent inset;
151-
}
152+
}

‎assets/vendor/fontawesome.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
const plugin = require("tailwindcss/plugin")
2+
const fs = require('fs')
3+
const path = require('path')
4+
5+
module.exports = plugin(function({ matchComponents, theme }) {
6+
let iconsDir = path.join(__dirname, "../../deps/fontawesome/svgs")
7+
let values = {}
8+
let icons = [
9+
["", "", "/regular"],
10+
["-solid", "", "/solid"],
11+
["", "brand-", "/brands"]
12+
]
13+
14+
icons.forEach(([suffix, prefix, dir]) => {
15+
fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
16+
let name = prefix + path.basename(file, ".svg") + suffix
17+
values[name] = { name, fullPath: path.join(iconsDir, dir, file) }
18+
})
19+
})
20+
21+
matchComponents({
22+
"fa": ({ name, fullPath }) => {
23+
let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
24+
return {
25+
[`--fa-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
26+
"-webkit-mask": `var(--fa-${name})`,
27+
"mask": `var(--fa-${name})`,
28+
"mask-repeat": "no-repeat",
29+
"background-color": "currentColor",
30+
"vertical-align": "middle",
31+
"display": "inline-block",
32+
"width": theme("spacing.5"),
33+
"height": theme("spacing.5")
34+
}
35+
}
36+
}, { values })
37+
})

‎assets/vendor/heroicons.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
const plugin = require("tailwindcss/plugin")
2+
const fs = require("fs")
3+
const path = require("path")
4+
5+
module.exports = plugin(function({matchComponents, theme}) {
6+
let iconsDir = path.join(__dirname, "../../deps/heroicons/optimized")
7+
let values = {}
8+
let icons = [
9+
["", "/24/outline"],
10+
["-solid", "/24/solid"],
11+
["-mini", "/20/solid"],
12+
["-micro", "/16/solid"]
13+
]
14+
icons.forEach(([suffix, dir]) => {
15+
fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
16+
let name = path.basename(file, ".svg") + suffix
17+
values[name] = {name, fullPath: path.join(iconsDir, dir, file)}
18+
})
19+
})
20+
matchComponents({
21+
"hero": ({name, fullPath}) => {
22+
let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
23+
content = encodeURIComponent(content)
24+
let size = theme("spacing.6")
25+
if (name.endsWith("-mini")) {
26+
size = theme("spacing.5")
27+
} else if (name.endsWith("-micro")) {
28+
size = theme("spacing.4")
29+
}
30+
return {
31+
[`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
32+
"-webkit-mask": `var(--hero-${name})`,
33+
"mask": `var(--hero-${name})`,
34+
"mask-repeat": "no-repeat",
35+
"background-color": "currentColor",
36+
"vertical-align": "middle",
37+
"display": "inline-block",
38+
"width": size,
39+
"height": size
40+
}
41+
}
42+
}, {values})
43+
})

‎config/config.exs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ config :safira, Safira.Mailer, adapter: Swoosh.Adapters.Local
4545
# Configure esbuild (the version is required)
4646
config :esbuild,
4747
version: "0.17.11",
48-
default: [
48+
safira: [
4949
args:
5050
~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
5151
cd: Path.expand("../assets", __DIR__),
@@ -55,7 +55,7 @@ config :esbuild,
5555
# Configure tailwind (the version is required)
5656
config :tailwind,
5757
version: "4.1.12",
58-
default: [
58+
safira: [
5959
args: ~w(
6060
--input=assets/css/app.css
6161
--output=priv/static/assets/app.css

‎config/dev.exs‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,8 @@ config :safira, SafiraWeb.Endpoint,
2525
debug_errors: true,
2626
secret_key_base: "OMQPnGb+HW48fr0JEKK1y0z4qalryuRAitzuuTbIn4RbTWQJuBtkhWuHGjFNyCLf",
2727
watchers: [
28-
icon_gen: {Mix.Tasks.GenerateIconCss, :run, [[]]},
29-
esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
30-
tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
28+
esbuild: {Esbuild, :install_and_run, [:safira, ~w(--sourcemap=inline --watch)]},
29+
tailwind: {Tailwind, :install_and_run, [:safira, ~w(--watch)]}
3130
]
3231

3332
# ## SSL Support

0 commit comments

Comments
 (0)