Skip to content

Commit 9ecd3e9

Browse files
yoeunesyoeunes
authored
Merge pull request #4 from php-flasher/feat/tailwind-skin
add tailwind skin and purge css
2 parents 9e38e56 + 18490be commit 9ecd3e9

7 files changed

+15770
-4114
lines changed

‎package-lock.json

+15,605-4,098
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+28-14
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
"license": "MIT",
1717
"typings": "dist/index.d.ts",
1818
"scripts": {
19-
"build": "rollup -c",
20-
"dev": "rollup -c -w",
19+
"build": "NODE_ENV=production rollup -c",
20+
"dev": "ODE_ENV=development rollup -c -w",
2121
"pretest": "npm run build",
2222
"lint": "eslint . --ext .ts --fix",
2323
"test": "echo \"No test specified\""
@@ -30,27 +30,41 @@
3030
"url": "https://github.com/php-flasher/flasher-js.git"
3131
},
3232
"dependencies": {
33+
"autoprefixer": "^10.4.0",
34+
"cssnano": "^5.0.8",
3335
"csstype": "^3.0.9",
34-
"deepmerge": "^4.2.2"
36+
"deepmerge": "^4.2.2",
37+
"postcss-discard-comments": "^5.0.1",
38+
"postcss-import": "^14.0.2",
39+
"tailwindcss": "^2.2.19"
3540
},
3641
"devDependencies": {
37-
"@rollup/plugin-commonjs": "^20.0.0",
38-
"@rollup/plugin-node-resolve": "^13.0.4",
39-
"@typescript-eslint/eslint-plugin": "^4.31.0",
40-
"@typescript-eslint/parser": "^4.31.0",
41-
"eslint": "^7.32.0",
42+
"@rollup/plugin-commonjs": "^21.0.1",
43+
"@rollup/plugin-multi-entry": "^4.1.0",
44+
"@rollup/plugin-node-resolve": "^13.0.6",
45+
"@typescript-eslint/eslint-plugin": "^5.2.0",
46+
"@typescript-eslint/parser": "^5.2.0",
47+
"eslint": "^8.1.0",
4248
"eslint-config-airbnb": "^18.2.1",
43-
"eslint-config-airbnb-typescript": "^14.0.0",
44-
"eslint-plugin-import": "^2.24.2",
49+
"eslint-config-airbnb-typescript": "^14.0.1",
50+
"eslint-plugin-import": "^2.25.2",
4551
"eslint-plugin-jsx-a11y": "^6.4.1",
46-
"eslint-plugin-react": "^7.25.1",
52+
"eslint-plugin-react": "^7.26.1",
4753
"node-notifier": ">=10.0.0",
48-
"rollup": "^2.56.3",
54+
"node-sass": "^6.0.1",
55+
"postcss": "^8.3.11",
56+
"rollup": "^2.58.3",
57+
"rollup-plugin-clear": "^2.0.7",
58+
"rollup-plugin-multi-input": "^1.3.1",
4959
"rollup-plugin-notify": "^1.1.0",
60+
"rollup-plugin-postcss": "^4.0.1",
61+
"rollup-plugin-styles": "^3.14.1",
5062
"rollup-plugin-terser": "^7.0.2",
5163
"rollup-plugin-typescript2": "^0.30.0",
52-
"ts-node": "^10.2.1",
64+
"sass": "^1.43.4",
65+
"sass-loader": "^12.3.0",
66+
"ts-node": "^10.4.0",
5367
"tslib": "^2.3.1",
54-
"typescript": "^4.4.2"
68+
"typescript": "^4.4.4"
5569
}
5670
}

‎postcss.config.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
module.exports = {
2+
filterPlugins: false,
3+
plugins: {
4+
'postcss-import': {},
5+
autoprefixer: {},
6+
tailwindcss: {},
7+
cssnano: {
8+
preset: 'default',
9+
},
10+
'postcss-discard-comments': {
11+
removeAll: true,
12+
},
13+
},
14+
};

‎rollup.config.js

+22
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,33 @@ import typescript from 'rollup-plugin-typescript2';
44
import notify from 'rollup-plugin-notify';
55
import { terser } from 'rollup-plugin-terser';
66
import pkg from './package.json';
7+
import multiInput from 'rollup-plugin-multi-input';
8+
import styles from 'rollup-plugin-styles';
9+
import clear from 'rollup-plugin-clear';
710

811
const moduleName = 'Flasher';
912
const inputFileName = 'src/index.ts';
1013

14+
const isProduction = process.env.NODE_ENV === 'production';
15+
1116
export default [
17+
{
18+
input: ['src/*.scss'],
19+
output: {
20+
dir: 'dist',
21+
assetFileNames: '[name].min.css',
22+
},
23+
plugins: [
24+
clear({
25+
targets: ['dist'],
26+
}),
27+
multiInput(),
28+
styles({
29+
minify: isProduction,
30+
mode: 'extract',
31+
}),
32+
],
33+
},
1234
{
1335
input: inputFileName,
1436
output: [

‎src/tailwindcss.scss

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
@import "~tailwindcss/base.css";
2+
@import "~tailwindcss/components.css";
3+
@import "~tailwindcss/utilities.css";
4+
5+
$colors: (
6+
success: 'rgba(5, 150, 105)',
7+
info: 'rgba(37, 99, 235)',
8+
warning: 'rgba(217, 119, 6)',
9+
error: 'rgba(220, 38, 38)',
10+
);
11+
12+
$types: (
13+
success: 'green',
14+
info: 'blue',
15+
warning: 'yellow',
16+
error: 'red',
17+
);
18+
19+
$icons: (
20+
success: 'M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z',
21+
info: 'M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z',
22+
warning: 'M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z',
23+
error: 'M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z',
24+
);
25+
26+
.fl-container {
27+
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
28+
line-height: 1.5;
29+
30+
@apply mt-2 bg-white shadow-lg border-l-8 rounded-md rounded-r-none cursor-pointer overflow-hidden shadow-lg;
31+
32+
.fl-content {
33+
@apply flex items-center py-1;
34+
}
35+
36+
.fl-icon {
37+
@apply inline-block w-10 h-10 mx-2 text-sm rounded-full bg-no-repeat bg-cover bg-center flex-shrink-0;
38+
}
39+
40+
.fl-title {
41+
@apply block ml-2 text-base leading-5 font-medium capitalize;
42+
}
43+
44+
.fl-message {
45+
@apply block ml-2 mt-1 text-sm leading-5 text-gray-500;
46+
}
47+
48+
.fl-progress-bar {
49+
@apply h-0.5 flex;
50+
}
51+
}
52+
53+
@each $type, $color in $types {
54+
.fl-container-#{$type} {
55+
@apply border-#{$color}-600;
56+
57+
.fl-icon {
58+
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="#{map-get($colors, $type)}"><path fill-rule="evenodd" d="#{map-get($icons, $type)}" clip-rule="evenodd" /></svg>');
59+
}
60+
61+
.fl-title {
62+
@apply text-#{$color}-600;
63+
}
64+
65+
.fl-progress-bar {
66+
@apply bg-#{$color}-100;
67+
68+
.fl-progress {
69+
@apply bg-#{$color}-600;
70+
}
71+
}
72+
}
73+
}

‎src/template.ts

+8-2
Original file line numberDiff line numberDiff line change
@@ -95,8 +95,14 @@ export default class TemplateFactory implements FlasherInterface {
9595
}, 200);
9696
});
9797

98-
const progressBar = template.querySelector('.flasher-progress');
99-
if (progressBar instanceof HTMLElement && options.timeout > 0) {
98+
const progressBarContainer = template.querySelector('.fl-progress-bar');
99+
100+
if (progressBarContainer instanceof HTMLElement && options.timeout > 0) {
101+
const progressBar = document.createElement('div');
102+
progressBar.classList.add('fl-progress');
103+
104+
progressBarContainer.appendChild(progressBar);
105+
100106
let width = 0;
101107
let progress: NodeJS.Timeout;
102108
const lapse = 1000 / options.fps;

‎tailwind.config.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
module.exports = {
2+
purge: {
3+
enabled: true,
4+
preserveHtmlElements: false,
5+
content: ['src/*.scss'],
6+
options: {
7+
keyframes: true,
8+
fontFace: true,
9+
defaultExtractor: content => content.match(/^fl-/) || [],
10+
},
11+
},
12+
darkMode: false, // or 'media' or 'class'
13+
theme: {
14+
extend: {},
15+
},
16+
variants: {
17+
extend: {},
18+
},
19+
plugins: [],
20+
};

0 commit comments

Comments
 (0)