Move to TailwindCSS 3 and JIT support to slowly replace twin.macro/styled-components
This commit is contained in:
Dane Everitt
parent
cb4d4b5ce6
commit
06cc228f26
7 changed files with 880 additions and 134 deletions
19
package.json
19
package.json
|
|
@ -99,7 +99,7 @@
|
|||
"@babel/preset-react": "^7.16.0",
|
||||
"@babel/preset-typescript": "^7.16.0",
|
||||
"@babel/runtime": "^7.16.3",
|
||||
"@tailwindcss/forms": "^0.3.4",
|
||||
"@tailwindcss/forms": "^0.4.0",
|
||||
"@types/chart.js": "^2.9.34",
|
||||
"@types/debounce": "^1.2.1",
|
||||
"@types/events": "^3.0.0",
|
||||
|
|
@ -122,10 +122,10 @@
|
|||
"@types/yup": "^0.29.13",
|
||||
"@typescript-eslint/eslint-plugin": "^4.33.0",
|
||||
"@typescript-eslint/parser": "^4.33.0",
|
||||
"autoprefixer": "^10.4.0",
|
||||
"autoprefixer": "^10.4.2",
|
||||
"babel-loader": "^8.2.3",
|
||||
"babel-plugin-macros": "^3.1.0",
|
||||
"babel-plugin-styled-components": "^1.13.3",
|
||||
"babel-plugin-styled-components": "^2.0.3",
|
||||
"browserslist": "^4.17.6",
|
||||
"cross-env": "^7.0.3",
|
||||
"css-loader": "^5.2.7",
|
||||
|
|
@ -137,14 +137,18 @@
|
|||
"eslint-plugin-react": "^7.27.0",
|
||||
"eslint-plugin-react-hooks": "^4.3.0",
|
||||
"fork-ts-checker-webpack-plugin": "^6.4.0",
|
||||
"postcss": "^8.3.11",
|
||||
"postcss": "^8.4.6",
|
||||
"postcss-import": "^14.0.2",
|
||||
"postcss-loader": "^4.0",
|
||||
"postcss-nesting": "^10.1.2",
|
||||
"postcss-preset-env": "^7.4.1",
|
||||
"redux-devtools-extension": "^2.13.9",
|
||||
"source-map-loader": "^1.1.3",
|
||||
"style-loader": "^2.0.0",
|
||||
"svg-url-loader": "^7.1.1",
|
||||
"tailwindcss": "^2.2.7",
|
||||
"tailwindcss": "^3.0.23",
|
||||
"terser-webpack-plugin": "^4.2.3",
|
||||
"twin.macro": "^2.8.1",
|
||||
"twin.macro": "^2.8.2",
|
||||
"typescript": "^4.4.4",
|
||||
"webpack": "^4.46.0",
|
||||
"webpack-assets-manifest": "^4.0.6",
|
||||
|
|
@ -164,8 +168,7 @@
|
|||
],
|
||||
"babelMacros": {
|
||||
"twin": {
|
||||
"preset": "styled-components",
|
||||
"autoCssProp": true
|
||||
"preset": "styled-components"
|
||||
},
|
||||
"styledComponents": {
|
||||
"pure": true,
|
||||
|
|
|
|||
17
postcss.config.js
Normal file
17
postcss.config.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
module.exports = {
|
||||
plugins: [
|
||||
require('postcss-import'),
|
||||
// We want to make use of nesting following the CSS Nesting spec, and not the
|
||||
// SASS style nesting.
|
||||
//
|
||||
// @see https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting
|
||||
require('tailwindcss/nesting')(require('postcss-nesting')),
|
||||
require('tailwindcss'),
|
||||
require('autoprefixer'),
|
||||
require('postcss-preset-env')({
|
||||
features: {
|
||||
'nesting-rules': false,
|
||||
},
|
||||
}),
|
||||
],
|
||||
};
|
||||
3
resources/scripts/assets/tailwind.css
Normal file
3
resources/scripts/assets/tailwind.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
|
@ -15,6 +15,7 @@ import { setupInterceptors } from '@/api/interceptors';
|
|||
import GlobalStyles from '@/components/GlobalStyles';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
|
||||
import '@/assets/tailwind.css';
|
||||
const ChunkedAdminRouter = lazy(() => import(/* webpackChunkName: "admin" */'@/routers/AdminRouter'));
|
||||
|
||||
interface ExtendedWindow extends Window {
|
||||
|
|
|
|||
|
|
@ -1,88 +1,21 @@
|
|||
const colors = require('tailwindcss/colors');
|
||||
|
||||
module.exports = {
|
||||
content: [
|
||||
'./resources/scripts/**/*.{js,ts,tsx}',
|
||||
],
|
||||
theme: {
|
||||
fontFamily: {
|
||||
sans: [ 'Rubik', '-apple-system', 'BlinkMacSystemFont', '"Helvetica Neue"', '"Roboto"', 'system-ui', 'sans-serif' ],
|
||||
header: [ '"IBM Plex Sans"', '"Roboto"', 'system-ui', 'sans-serif' ],
|
||||
mono: [ '"IBM Plex Mono"', '"Source Code Pro"', 'SourceCodePro', 'Menlo', 'Monaco', 'Consolas', 'monospace' ],
|
||||
},
|
||||
colors: {
|
||||
transparent: 'transparent',
|
||||
black: 'hsl(210, 27%, 10%)',
|
||||
white: '#ffffff',
|
||||
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%)',
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
primary: colors.blue,
|
||||
neutral: colors.slate,
|
||||
cyan: colors.cyan,
|
||||
},
|
||||
fontSize: {
|
||||
'2xs': '0.625rem',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -31,7 +31,20 @@ module.exports = {
|
|||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [ 'style-loader', 'css-loader' ],
|
||||
use: [
|
||||
{ loader: 'style-loader' },
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
sourceMap: !isProduction,
|
||||
importLoaders: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: { sourceMap: !isProduction },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(png|jp(e?)g|gif)$/,
|
||||
|
|
@ -48,7 +61,7 @@ module.exports = {
|
|||
test: /\.js$/,
|
||||
enforce: 'pre',
|
||||
loader: 'source-map-loader',
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
stats: {
|
||||
|
|
@ -84,12 +97,12 @@ module.exports = {
|
|||
},
|
||||
eslint: isProduction ? undefined : {
|
||||
files: `${path.join(__dirname, '/resources/scripts')}/**/*.{ts,tsx}`,
|
||||
}
|
||||
},
|
||||
}),
|
||||
process.env.ANALYZE_BUNDLE ? new BundleAnalyzerPlugin({
|
||||
analyzerHost: '0.0.0.0',
|
||||
analyzerPort: 8081,
|
||||
}) : null
|
||||
}) : null,
|
||||
].filter(p => p),
|
||||
optimization: {
|
||||
usedExports: true,
|
||||
|
|
|
|||
Loading…
Reference in a new issue