Get basic compiling working with new CSS setup
This commit is contained in:
Dane Everitt
parent
7b75e7a648
commit
2193916fe4
18 changed files with 2159 additions and 959 deletions
12
.babel-plugin-macrosrc.js
Normal file
12
.babel-plugin-macrosrc.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
module.exports = {
|
||||
twin: {
|
||||
preset: 'styled-components',
|
||||
autoCssProp: true,
|
||||
config: './tailwind.config.js',
|
||||
},
|
||||
styledComponents: {
|
||||
pure: true,
|
||||
displayName: false,
|
||||
fileName: false,
|
||||
},
|
||||
};
|
||||
23
babel.config.js
Normal file
23
babel.config.js
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
module.exports = {
|
||||
presets: [
|
||||
'@babel/typescript',
|
||||
['@babel/env', {
|
||||
modules: false,
|
||||
useBuiltIns: 'entry',
|
||||
corejs: 3,
|
||||
}],
|
||||
'@babel/react',
|
||||
],
|
||||
plugins: [
|
||||
'babel-plugin-macros',
|
||||
'styled-components',
|
||||
'react-hot-loader/babel',
|
||||
'@babel/transform-runtime',
|
||||
'@babel/transform-react-jsx',
|
||||
'@babel/proposal-class-properties',
|
||||
'@babel/proposal-object-rest-spread',
|
||||
'@babel/proposal-optional-chaining',
|
||||
'@babel/proposal-nullish-coalescing-operator',
|
||||
'@babel/syntax-dynamic-import',
|
||||
],
|
||||
};
|
||||
64
package.json
64
package.json
|
|
@ -5,13 +5,13 @@
|
|||
"@fortawesome/free-solid-svg-icons": "^5.9.0",
|
||||
"@fortawesome/react-fontawesome": "^0.1.4",
|
||||
"@types/react-google-recaptcha": "^1.1.1",
|
||||
"axios": "^0.19.0",
|
||||
"axios": "^0.19.2",
|
||||
"ayu-ace": "^2.0.4",
|
||||
"brace": "^0.11.1",
|
||||
"chart.js": "^2.8.0",
|
||||
"classnames": "^2.2.6",
|
||||
"date-fns": "^1.29.0",
|
||||
"easy-peasy": "^3.2.3",
|
||||
"date-fns": "^2.14.0",
|
||||
"easy-peasy": "^3.3.1",
|
||||
"events": "^3.0.0",
|
||||
"formik": "^2.1.4",
|
||||
"i18next": "^19.0.0",
|
||||
|
|
@ -22,23 +22,23 @@
|
|||
"lodash-es": "^4.17.15",
|
||||
"path": "^0.12.7",
|
||||
"query-string": "^6.7.0",
|
||||
"react": "^16.12.0",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "npm:@hot-loader/react-dom",
|
||||
"react-google-recaptcha": "^2.0.1",
|
||||
"react-hot-loader": "^4.12.18",
|
||||
"react-hot-loader": "^4.12.21",
|
||||
"react-i18next": "^11.2.1",
|
||||
"react-redux": "^7.1.0",
|
||||
"react-router-dom": "^5.1.2",
|
||||
"react-transition-group": "^4.3.0",
|
||||
"sockette": "^2.0.6",
|
||||
"styled-components": "^4.4.1",
|
||||
"styled-components": "^5.1.1",
|
||||
"styled-components-breakpoint": "^3.0.0-preview.20",
|
||||
"use-react-router": "^1.0.7",
|
||||
"uuid": "^3.3.2",
|
||||
"xterm": "^3.14.4",
|
||||
"xterm-addon-attach": "^0.1.0",
|
||||
"xterm-addon-fit": "^0.1.0",
|
||||
"yup": "^0.27.0"
|
||||
"yup": "^0.29.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.7.5",
|
||||
|
|
@ -47,6 +47,7 @@
|
|||
"@babel/plugin-proposal-object-rest-spread": "^7.7.4",
|
||||
"@babel/plugin-proposal-optional-chaining": "^7.8.3",
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.7.4",
|
||||
"@babel/plugin-transform-react-jsx": "^7.10.4",
|
||||
"@babel/plugin-transform-runtime": "^7.7.5",
|
||||
"@babel/preset-env": "^7.7.5",
|
||||
"@babel/preset-react": "^7.7.4",
|
||||
|
|
@ -60,32 +61,33 @@
|
|||
"@types/lodash-es": "^4.17.3",
|
||||
"@types/node": "^12.6.9",
|
||||
"@types/query-string": "^6.3.0",
|
||||
"@types/react": "^16.9.15",
|
||||
"@types/react-dom": "^16.9.4",
|
||||
"@types/react": "^16.9.41",
|
||||
"@types/react-dom": "^16.9.8",
|
||||
"@types/react-redux": "^7.1.1",
|
||||
"@types/react-router": "^5.1.3",
|
||||
"@types/react-router-dom": "^5.1.3",
|
||||
"@types/react-transition-group": "^2.9.2",
|
||||
"@types/styled-components": "^4.4.0",
|
||||
"@types/uuid": "^3.4.5",
|
||||
"@types/webpack-env": "^1.13.6",
|
||||
"@types/yup": "^0.26.17",
|
||||
"@typescript-eslint/eslint-plugin": "^2.19.0",
|
||||
"@typescript-eslint/parser": "^2.19.0",
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"@types/yup": "^0.29.3",
|
||||
"@typescript-eslint/eslint-plugin": "^3.5.0",
|
||||
"@typescript-eslint/parser": "^3.5.0",
|
||||
"babel-loader": "^8.0.6",
|
||||
"babel-plugin-styled-components": "^1.10.6",
|
||||
"babel-plugin-styled-components": "^1.10.7",
|
||||
"babel-plugin-tailwind-components": "^0.5.10",
|
||||
"cross-env": "^7.0.2",
|
||||
"css-loader": "^3.2.1",
|
||||
"cssnano": "^4.1.10",
|
||||
"eslint": "^5.16.0",
|
||||
"eslint-config-standard": "^12.0.0",
|
||||
"eslint-plugin-import": "^2.17.3",
|
||||
"eslint": "^7.4.0",
|
||||
"eslint-config-standard": "^14.1.1",
|
||||
"eslint-plugin-import": "^2.22.0",
|
||||
"eslint-plugin-node": "^9.1.0",
|
||||
"eslint-plugin-promise": "^4.1.1",
|
||||
"eslint-plugin-react-hooks": "^2.1.2",
|
||||
"eslint-plugin-standard": "^4.0.0",
|
||||
"fork-ts-checker-webpack-plugin": "^1.5.0",
|
||||
"eslint-plugin-promise": "^4.2.1",
|
||||
"eslint-plugin-react": "^7.20.3",
|
||||
"eslint-plugin-react-hooks": "^4.0.5",
|
||||
"eslint-plugin-standard": "^4.0.1",
|
||||
"fork-ts-checker-webpack-plugin": "^5.0.6",
|
||||
"glob-all": "^3.1.0",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"mini-css-extract-plugin": "^0.8.0",
|
||||
|
|
@ -97,17 +99,19 @@
|
|||
"purgecss-webpack-plugin": "^1.6.0",
|
||||
"redux-devtools-extension": "^2.13.8",
|
||||
"resolve-url-loader": "^3.0.0",
|
||||
"source-map-loader": "^0.2.4",
|
||||
"style-loader": "^0.23.1",
|
||||
"tailwindcss": "^0.7.4",
|
||||
"terser-webpack-plugin": "^1.3.0",
|
||||
"source-map-loader": "^1.0.1",
|
||||
"style-loader": "^1.2.1",
|
||||
"tailwindcss": "^1.4.6",
|
||||
"terser-webpack-plugin": "^3.0.6",
|
||||
"ts-loader": "^6.2.1",
|
||||
"typescript": "^3.7.5",
|
||||
"webpack": "^4.41.2",
|
||||
"twin.macro": "^1.4.1",
|
||||
"typescript": "^3.9.6",
|
||||
"typescript-plugin-tw-template": "^2.0.1",
|
||||
"webpack": "^4.43.0",
|
||||
"webpack-assets-manifest": "^3.1.1",
|
||||
"webpack-cli": "^3.3.10",
|
||||
"webpack-dev-server": "^3.9.0",
|
||||
"webpack-manifest-plugin": "^2.0.3",
|
||||
"webpack-cli": "^3.3.12",
|
||||
"webpack-dev-server": "^3.11.0",
|
||||
"webpack-manifest-plugin": "^2.2.0",
|
||||
"yarn-deduplicate": "^1.1.1"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -1,23 +1,35 @@
|
|||
parser: "@typescript-eslint/parser"
|
||||
parserOptions:
|
||||
ecmaVersion: 6
|
||||
ecmaFeatures:
|
||||
jsx: true
|
||||
project: "./tsconfig.json"
|
||||
tsconfigRootDir: "./"
|
||||
settings:
|
||||
react:
|
||||
pragma: "React"
|
||||
version: "detect"
|
||||
linkComponents:
|
||||
- name: Link
|
||||
linkAttribute: to
|
||||
- name: NavLink
|
||||
linkAttribute: to
|
||||
env:
|
||||
browser: true
|
||||
es6: true
|
||||
plugins:
|
||||
- "@typescript-eslint"
|
||||
- "react"
|
||||
- "react-hooks"
|
||||
- "@typescript-eslint"
|
||||
extends:
|
||||
- "standard"
|
||||
- "plugin:react/recommended"
|
||||
- "plugin:@typescript-eslint/recommended"
|
||||
globals:
|
||||
tw: "readonly"
|
||||
rules:
|
||||
indent:
|
||||
- error
|
||||
- 4
|
||||
- SwitchCase: 1
|
||||
semi:
|
||||
- error
|
||||
- always
|
||||
|
|
@ -33,6 +45,25 @@ rules:
|
|||
"@typescript-eslint/no-unused-vars": 0
|
||||
"@typescript-eslint/no-explicit-any": 0
|
||||
"@typescript-eslint/no-non-null-assertion": 0
|
||||
no-restricted-imports:
|
||||
- error
|
||||
- paths:
|
||||
- name: styled-components
|
||||
message: Please import from styled-components/macro.
|
||||
patterns:
|
||||
- "!styled-components/macro"
|
||||
"react/prop-types": 0
|
||||
"react/display-name": 0
|
||||
"react/jsx-indent-props":
|
||||
- warn
|
||||
- 4
|
||||
"react/jsx-boolean-value":
|
||||
- warn
|
||||
- never
|
||||
"react/jsx-closing-bracket-location":
|
||||
- 1
|
||||
- "line-aligned"
|
||||
"react/jsx-closing-tag-location": 1
|
||||
overrides:
|
||||
- files:
|
||||
- "**/*.tsx"
|
||||
|
|
|
|||
|
|
@ -18,11 +18,13 @@ interface ExtendedWindow extends Window {
|
|||
uuid: string;
|
||||
username: string;
|
||||
email: string;
|
||||
/* eslint-disable camelcase */
|
||||
root_admin: boolean;
|
||||
use_totp: boolean;
|
||||
language: string;
|
||||
updated_at: string;
|
||||
created_at: string;
|
||||
/* eslint-enable camelcase */
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import styled from 'styled-components';
|
||||
import { breakpoint } from 'styled-components-breakpoint';
|
||||
import styled from 'styled-components/macro';
|
||||
import { breakpoint } from '@/theme';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
const ContentContainer = styled.div`
|
||||
max-width: 1200px;
|
||||
|
|
@ -9,5 +10,6 @@ const ContentContainer = styled.div`
|
|||
${tw`mx-auto`};
|
||||
`};
|
||||
`;
|
||||
ContentContainer.displayName = 'ContentContainer';
|
||||
|
||||
export default ContentContainer;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,11 @@
|
|||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
import { ServerBackup } from '@/api/server/backups/getServerBackups';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faArchive } from '@fortawesome/free-solid-svg-icons/faArchive';
|
||||
import format from 'date-fns/format';
|
||||
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
|
||||
import { format, formatDistanceToNow } from 'date-fns';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
import Modal, { RequiredModalProps } from '@/components/elements/Modal';
|
||||
import { bytesToHuman } from '@/helpers';
|
||||
import Can from '@/components/elements/Can';
|
||||
import useServer from '@/plugins/useServer';
|
||||
import getBackupDownloadUrl from '@/api/server/backups/getBackupDownloadUrl';
|
||||
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
import { httpErrorToHuman } from '@/api/http';
|
||||
import useWebsocketEvent from '@/plugins/useWebsocketEvent';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import BackupContextMenu from '@/components/server/backups/BackupContextMenu';
|
||||
|
|
@ -65,7 +58,7 @@ export default ({ backup, className }: Props) => {
|
|||
title={format(backup.createdAt, 'ddd, MMMM Do, YYYY HH:mm:ss Z')}
|
||||
className={'text-sm'}
|
||||
>
|
||||
{distanceInWordsToNow(backup.createdAt, { includeSeconds: true, addSuffix: true })}
|
||||
{formatDistanceToNow(backup.createdAt, { includeSeconds: true, addSuffix: true })}
|
||||
</p>
|
||||
<p className={'text-2xs text-neutral-500 uppercase mt-1'}>Created</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,7 @@ import { faFileImport } from '@fortawesome/free-solid-svg-icons/faFileImport';
|
|||
import { faFileAlt } from '@fortawesome/free-solid-svg-icons/faFileAlt';
|
||||
import { faFolder } from '@fortawesome/free-solid-svg-icons/faFolder';
|
||||
import { bytesToHuman, cleanDirectoryPath } from '@/helpers';
|
||||
import differenceInHours from 'date-fns/difference_in_hours';
|
||||
import format from 'date-fns/format';
|
||||
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
|
||||
import { differenceInHours, format, formatDistanceToNow } from 'date-fns';
|
||||
import React from 'react';
|
||||
import { FileObject } from '@/api/server/files/loadDirectory';
|
||||
import FileDropdownMenu from '@/components/server/files/FileDropdownMenu';
|
||||
|
|
@ -65,7 +63,7 @@ export default ({ file }: { file: FileObject }) => {
|
|||
{Math.abs(differenceInHours(file.modifiedAt, new Date())) > 48 ?
|
||||
format(file.modifiedAt, 'MMM Do, YYYY h:mma')
|
||||
:
|
||||
distanceInWordsToNow(file.modifiedAt, { addSuffix: true })
|
||||
formatDistanceToNow(file.modifiedAt, { addSuffix: true })
|
||||
}
|
||||
</div>
|
||||
</NavLink>
|
||||
|
|
|
|||
1
resources/scripts/gloabl.d.ts
vendored
1
resources/scripts/gloabl.d.ts
vendored
|
|
@ -1 +0,0 @@
|
|||
declare function tw (a: TemplateStringsArray | string): any;
|
||||
|
|
@ -4,6 +4,8 @@ import App from '@/components/App';
|
|||
import './i18n';
|
||||
import { setConfig } from 'react-hot-loader';
|
||||
|
||||
import 'tailwindcss/dist/base.min.css';
|
||||
|
||||
// Prevents page reloads while making component changes which
|
||||
// also avoids triggering constant loading indicators all over
|
||||
// the place in development.
|
||||
|
|
|
|||
4
resources/scripts/macros.d.ts
vendored
Normal file
4
resources/scripts/macros.d.ts
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
// This allows the use of css={} on JSX elements.
|
||||
//
|
||||
// @see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245
|
||||
import {} from 'styled-components/cssprop';
|
||||
17
resources/scripts/style.d.ts
vendored
17
resources/scripts/style.d.ts
vendored
|
|
@ -1,17 +0,0 @@
|
|||
import { Breakpoints, css, DefaultTheme, StyledProps } from 'styled-components';
|
||||
|
||||
declare module 'styled-components' {
|
||||
type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
||||
|
||||
export interface DefaultTheme {
|
||||
breakpoints: {
|
||||
[name in 'xs' | 'sm' | 'md' | 'lg' | 'xl']: number;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
declare module 'styled-components-breakpoint' {
|
||||
type CSSFunction = (...params: Parameters<typeof css>) => <P extends object>({ theme }: StyledProps<P>) => ReturnType<typeof css>;
|
||||
|
||||
export const breakpoint: (breakpointA: Breakpoints, breakpointB?: Breakpoints) => CSSFunction;
|
||||
}
|
||||
10
resources/scripts/theme.ts
Normal file
10
resources/scripts/theme.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { BreakpointFunction, createBreakpoint } from 'styled-components-breakpoint';
|
||||
|
||||
type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
||||
export const breakpoint: BreakpointFunction<Breakpoints> = createBreakpoint<Breakpoints>({
|
||||
xs: 0,
|
||||
sm: 640,
|
||||
md: 768,
|
||||
lg: 1024,
|
||||
xl: 1280,
|
||||
});
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
@show
|
||||
|
||||
@section('assets')
|
||||
{!! $asset->css('main.css') !!}
|
||||
{{-- {!! $asset->css('main.css') !!}--}}
|
||||
@show
|
||||
|
||||
@include('layouts.scripts')
|
||||
|
|
|
|||
114
tailwind.config.js
Normal file
114
tailwind.config.js
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
module.exports = {
|
||||
theme: {
|
||||
fontFamily: {
|
||||
sans: [
|
||||
'Rubik',
|
||||
'-apple-system',
|
||||
'BlinkMacSystemFont',
|
||||
'"Helvetica Neue"',
|
||||
'"Roboto"',
|
||||
'system-ui',
|
||||
'sans-serif',
|
||||
],
|
||||
header: [
|
||||
'"IBM Plex Sans"',
|
||||
'"Roboto"',
|
||||
'system-ui',
|
||||
'sans-serif',
|
||||
],
|
||||
serif: [
|
||||
'Constantia',
|
||||
'"Lucida Bright"',
|
||||
'Lucidabright',
|
||||
'"Lucida Serif"',
|
||||
'Lucida',
|
||||
'serif',
|
||||
],
|
||||
mono: [
|
||||
'"IBM Plex Mono"',
|
||||
'"Source Code Pro"',
|
||||
'SourceCodePro',
|
||||
'Menlo',
|
||||
'Monaco',
|
||||
'Consolas',
|
||||
'monospace',
|
||||
],
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {
|
||||
50: 'hsl(202, 100%, 95%)', // lightest
|
||||
100: 'hsl(204, 100%, 86%)', // lighter
|
||||
200: 'hsl(206, 93%, 73%)',
|
||||
300: 'hsl(208, 88%, 62%)',
|
||||
400: 'hsl(210, 83%, 53%)', // light
|
||||
500: 'hsl(212, 92%, 43%)', // base
|
||||
600: 'hsl(214, 95%, 36%)', // dark
|
||||
700: 'hsl(215, 96%, 32%)',
|
||||
800: 'hsl(216, 98%, 25%)', // darker
|
||||
900: 'hsl(218, 100%, 17%)', // darkest
|
||||
},
|
||||
neutral: {
|
||||
50: 'hsl(216, 33%, 97%)',
|
||||
100: 'hsl(214, 15%, 91%)',
|
||||
200: 'hsl(210, 16%, 82%)',
|
||||
300: 'hsl(211, 13%, 65%)',
|
||||
400: 'hsl(211, 10%, 53%)',
|
||||
500: 'hsl(211, 12%, 43%)',
|
||||
600: 'hsl(209, 14%, 37%)',
|
||||
700: 'hsl(209, 18%, 30%)',
|
||||
800: 'hsl(209, 20%, 25%)',
|
||||
900: 'hsl(210, 24%, 16%)',
|
||||
},
|
||||
red: {
|
||||
50: 'hsl(360, 100%, 95%)',
|
||||
100: 'hsl(360, 100%, 87%)',
|
||||
200: 'hsl(360, 100%, 80%)',
|
||||
300: 'hsl(360, 91%, 69%)',
|
||||
400: 'hsl(360, 83%, 62%)',
|
||||
500: 'hsl(356, 75%, 53%)',
|
||||
600: 'hsl(354, 85%, 44%)',
|
||||
700: 'hsl(352, 90%, 35%)',
|
||||
800: 'hsl(350, 94%, 28%)',
|
||||
900: 'hsl(348, 94%, 20%)',
|
||||
},
|
||||
yellow: {
|
||||
50: 'hsl(49, 100%, 96%)',
|
||||
100: 'hsl(48, 100%, 88%)',
|
||||
200: 'hsl(48, 95%, 76%)',
|
||||
300: 'hsl(48, 94%, 68%)',
|
||||
400: 'hsl(44, 92%, 63%)',
|
||||
500: 'hsl(42, 87%, 55%)',
|
||||
600: 'hsl(36, 77%, 49%)',
|
||||
700: 'hsl(29, 80%, 44%)',
|
||||
800: 'hsl(22, 82%, 39%)',
|
||||
900: 'hsl(15, 86%, 30%)',
|
||||
},
|
||||
cyan: {
|
||||
50: 'hsl(171, 82%, 94%)',
|
||||
100: 'hsl(172, 97%, 88%)',
|
||||
200: 'hsl(174, 96%, 78%)',
|
||||
300: 'hsl(176, 87%, 67%)',
|
||||
400: 'hsl(178, 78%, 57%)',
|
||||
500: 'hsl(180, 77%, 47%)',
|
||||
600: 'hsl(182, 85%, 39%)',
|
||||
700: 'hsl(184, 90%, 34%)',
|
||||
800: 'hsl(186, 91%, 29%)',
|
||||
900: 'hsl(188, 91%, 23%)',
|
||||
},
|
||||
green: {
|
||||
50: 'hsl(125, 65%, 93%)',
|
||||
100: 'hsl(127, 65%, 85%)',
|
||||
200: 'hsl(124, 63%, 74%)',
|
||||
300: 'hsl(123, 53%, 55%)',
|
||||
400: 'hsl(123, 57%, 45%)',
|
||||
500: 'hsl(122, 73%, 35%)',
|
||||
600: 'hsl(122, 80%, 29%)',
|
||||
700: 'hsl(125, 79%, 26%)',
|
||||
800: 'hsl(125, 86%, 20%)',
|
||||
900: 'hsl(125, 97%, 14%)',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -1,12 +1,14 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "esnext",
|
||||
"target": "es2015",
|
||||
"module": "es2015",
|
||||
"jsx": "react",
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"noImplicitReturns": true,
|
||||
"moduleResolution": "node",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"sourceMap": true,
|
||||
"baseUrl": ".",
|
||||
"lib": ["es2015", "dom"],
|
||||
|
|
@ -14,7 +16,13 @@
|
|||
"@/*": [
|
||||
"./resources/scripts/*"
|
||||
]
|
||||
},
|
||||
"plugins": [
|
||||
{
|
||||
"name": "typescript-plugin-tw-template"
|
||||
}
|
||||
],
|
||||
"typeRoots": ["node_modules/@types"]
|
||||
},
|
||||
"include": [
|
||||
"./resources/scripts/**/*"
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ const TerserPlugin = require('terser-webpack-plugin');
|
|||
const isProduction = process.env.NODE_ENV === 'production';
|
||||
|
||||
let plugins = [
|
||||
new MiniCssExtractPlugin({ filename: isProduction ? 'bundle.[chunkhash:8].css' : 'bundle.[hash:8].css' }),
|
||||
// new MiniCssExtractPlugin({ filename: isProduction ? 'bundle.[chunkhash:8].css' : 'bundle.[hash:8].css' }),
|
||||
new AssetsManifestPlugin({
|
||||
writeToDisk: true,
|
||||
publicPath: true,
|
||||
|
|
@ -22,25 +22,25 @@ let plugins = [
|
|||
];
|
||||
|
||||
if (isProduction) {
|
||||
plugins = plugins.concat([
|
||||
new PurgeCssPlugin({
|
||||
paths: glob.sync([
|
||||
path.join(__dirname, 'resources/scripts/**/*.tsx'),
|
||||
path.join(__dirname, 'resources/views/templates/**/*.blade.php'),
|
||||
]),
|
||||
whitelistPatterns: [/^xterm/],
|
||||
extractors: [
|
||||
{
|
||||
extractor: class {
|
||||
static extract (content) {
|
||||
return content.match(/[A-Za-z0-9-_:\\/]+/g) || [];
|
||||
}
|
||||
},
|
||||
extensions: ['html', 'ts', 'tsx', 'js', 'php'],
|
||||
},
|
||||
],
|
||||
}),
|
||||
]);
|
||||
// plugins = plugins.concat([
|
||||
// new PurgeCssPlugin({
|
||||
// paths: glob.sync([
|
||||
// path.join(__dirname, 'resources/scripts/**/*.tsx'),
|
||||
// path.join(__dirname, 'resources/views/templates/**/*.blade.php'),
|
||||
// ]),
|
||||
// whitelistPatterns: [/^xterm/],
|
||||
// extractors: [
|
||||
// {
|
||||
// extractor: class {
|
||||
// static extract (content) {
|
||||
// return content.match(/[A-Za-z0-9-_:\\/]+/g) || [];
|
||||
// }
|
||||
// },
|
||||
// extensions: ['html', 'ts', 'tsx', 'js', 'php'],
|
||||
// },
|
||||
// ],
|
||||
// }),
|
||||
// ]);
|
||||
} else {
|
||||
plugins.concat([new ForkTsCheckerWebpackPlugin()]);
|
||||
}
|
||||
|
|
@ -55,7 +55,6 @@ module.exports = {
|
|||
},
|
||||
entry: [
|
||||
'react-hot-loader/patch',
|
||||
'./resources/styles/main.css',
|
||||
'./resources/scripts/index.tsx',
|
||||
],
|
||||
output: {
|
||||
|
|
@ -70,65 +69,20 @@ module.exports = {
|
|||
{
|
||||
test: /\.tsx?$/,
|
||||
exclude: /node_modules/,
|
||||
use: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
cacheDirectory: !isProduction,
|
||||
presets: [
|
||||
'@babel/typescript',
|
||||
'@babel/env',
|
||||
'@babel/react',
|
||||
],
|
||||
plugins: [
|
||||
'tailwind-components',
|
||||
'react-hot-loader/babel',
|
||||
'@babel/transform-runtime',
|
||||
'@babel/proposal-class-properties',
|
||||
'@babel/proposal-object-rest-spread',
|
||||
'@babel/proposal-optional-chaining',
|
||||
'@babel/proposal-nullish-coalescing-operator',
|
||||
'@babel/syntax-dynamic-import',
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
include: [
|
||||
path.resolve(__dirname, 'resources'),
|
||||
],
|
||||
// include: [
|
||||
// path.resolve(__dirname, 'resources'),
|
||||
// ],
|
||||
use: [
|
||||
{
|
||||
loader: MiniCssExtractPlugin.loader,
|
||||
options: {
|
||||
hmr: !isProduction,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
sourceMap: !isProduction,
|
||||
importLoaders: 1,
|
||||
},
|
||||
},
|
||||
{ loader: 'style-loader' },
|
||||
{ loader: 'css-loader' },
|
||||
{ loader: 'resolve-url-loader' },
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
ident: 'postcss',
|
||||
sourceMap: true,
|
||||
plugins: [
|
||||
require('postcss-import'),
|
||||
tailwind('./tailwind.js'),
|
||||
require('postcss-preset-env')({
|
||||
stage: 2,
|
||||
}),
|
||||
require('precss'),
|
||||
].concat(isProduction ? require('cssnano') : []),
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -138,6 +92,11 @@ module.exports = {
|
|||
name: '[name].[ext]?[hash:8]',
|
||||
},
|
||||
},
|
||||
{
|
||||
enforce: 'pre',
|
||||
test: /\.js$/,
|
||||
loader: 'source-map-loader',
|
||||
}
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue