Update to Tailwind 3; support normal tailwind usage without twin.macro
This commit is contained in:
DaneEveritt
parent
21ca91abd0
commit
921da09a63
9 changed files with 1262 additions and 467 deletions
|
|
@ -1,11 +0,0 @@
|
|||
module.exports = {
|
||||
twin: {
|
||||
preset: 'styled-components',
|
||||
autoCssProp: true,
|
||||
},
|
||||
styledComponents: {
|
||||
pure: true,
|
||||
displayName: true,
|
||||
fileName: true,
|
||||
},
|
||||
};
|
||||
40
package.json
40
package.json
|
|
@ -4,7 +4,7 @@
|
|||
"@fortawesome/fontawesome-svg-core": "^1.2.32",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.1",
|
||||
"@fortawesome/react-fontawesome": "^0.1.11",
|
||||
"@tailwindcss/forms": "^0.2.1",
|
||||
"@tailwindcss/forms": "^0.5.2",
|
||||
"axios": "^0.21.1",
|
||||
"chart.js": "^2.8.0",
|
||||
"codemirror": "^5.57.0",
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
"styled-components": "^5.2.1",
|
||||
"styled-components-breakpoint": "^3.0.0-preview.20",
|
||||
"swr": "^0.2.3",
|
||||
"tailwindcss": "^2.0.2",
|
||||
"tailwindcss": "^3.0.24",
|
||||
"uuid": "^3.3.2",
|
||||
"xterm": "^4.15.0",
|
||||
"xterm-addon-attach": "^0.6.0",
|
||||
|
|
@ -78,11 +78,11 @@
|
|||
"@types/yup": "^0.29.3",
|
||||
"@typescript-eslint/eslint-plugin": "^4.25.0",
|
||||
"@typescript-eslint/parser": "^4.25.0",
|
||||
"autoprefixer": "^10.1.0",
|
||||
"babel-loader": "^8.0.6",
|
||||
"babel-plugin-styled-components": "^1.12.0",
|
||||
"autoprefixer": "^10.4.7",
|
||||
"babel-loader": "^8.2.5",
|
||||
"babel-plugin-styled-components": "^2.0.7",
|
||||
"cross-env": "^7.0.2",
|
||||
"css-loader": "^3.2.1",
|
||||
"css-loader": "^5.2.7",
|
||||
"eslint": "^7.27.0",
|
||||
"eslint-config-standard": "^16.0.3",
|
||||
"eslint-plugin-import": "^2.23.3",
|
||||
|
|
@ -91,14 +91,18 @@
|
|||
"eslint-plugin-react": "^7.23.2",
|
||||
"eslint-plugin-react-hooks": "^4.2.0",
|
||||
"fork-ts-checker-webpack-plugin": "^6.2.10",
|
||||
"postcss": "^8.2.1",
|
||||
"postcss": "^8.4.14",
|
||||
"postcss-import": "^14.1.0",
|
||||
"postcss-loader": "^4.0.0",
|
||||
"postcss-nesting": "^10.1.8",
|
||||
"postcss-preset-env": "^7.7.1",
|
||||
"redux-devtools-extension": "^2.13.8",
|
||||
"source-map-loader": "^1.0.1",
|
||||
"style-loader": "^1.2.1",
|
||||
"svg-url-loader": "^6.0.0",
|
||||
"terser-webpack-plugin": "^3.0.6",
|
||||
"source-map-loader": "^1.1.3",
|
||||
"style-loader": "^2.0.0",
|
||||
"svg-url-loader": "^7.1.1",
|
||||
"terser-webpack-plugin": "^4.2.3",
|
||||
"ts-essentials": "^9.1.2",
|
||||
"twin.macro": "^2.0.7",
|
||||
"twin.macro": "^2.8.2",
|
||||
"typescript": "^4.2.4",
|
||||
"webpack": "^4.43.0",
|
||||
"webpack-assets-manifest": "^3.1.1",
|
||||
|
|
@ -120,5 +124,15 @@
|
|||
"last 2 versions",
|
||||
"firefox esr",
|
||||
"not dead"
|
||||
]
|
||||
],
|
||||
"babelMacros": {
|
||||
"twin": {
|
||||
"preset": "styled-components"
|
||||
},
|
||||
"styledComponents": {
|
||||
"pure": true,
|
||||
"displayName": true,
|
||||
"fileName": 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;
|
||||
|
|
@ -9,12 +9,13 @@ import AuthenticationRouter from '@/routers/AuthenticationRouter';
|
|||
import { SiteSettings } from '@/state/settings';
|
||||
import ProgressBar from '@/components/elements/ProgressBar';
|
||||
import { NotFound } from '@/components/elements/ScreenBlock';
|
||||
import tw, { GlobalStyles as TailwindGlobalStyles } from 'twin.macro';
|
||||
import tw from 'twin.macro';
|
||||
import GlobalStylesheet from '@/assets/css/GlobalStylesheet';
|
||||
import { history } from '@/components/history';
|
||||
import { setupInterceptors } from '@/api/interceptors';
|
||||
import AuthenticatedRoute from '@/components/elements/AuthenticatedRoute';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import '@/assets/tailwind.css';
|
||||
|
||||
interface ExtendedWindow extends Window {
|
||||
SiteConfiguration?: SiteSettings;
|
||||
|
|
@ -56,7 +57,6 @@ const App = () => {
|
|||
return (
|
||||
<>
|
||||
<GlobalStylesheet/>
|
||||
<TailwindGlobalStyles/>
|
||||
<StoreProvider store={store}>
|
||||
<ProgressBar/>
|
||||
<div css={tw`mx-auto w-auto`}>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,6 @@ 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.
|
||||
|
|
|
|||
|
|
@ -1,27 +1,6 @@
|
|||
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' ],
|
||||
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: {
|
||||
const colors = require('tailwindcss/colors');
|
||||
|
||||
const gray = {
|
||||
50: 'hsl(216, 33%, 97%)',
|
||||
100: 'hsl(214, 15%, 91%)',
|
||||
200: 'hsl(210, 16%, 82%)',
|
||||
|
|
@ -32,57 +11,26 @@ module.exports = {
|
|||
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%)',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
content: [
|
||||
'./resources/scripts/**/*.{js,ts,tsx}',
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
header: ['"IBM Plex Sans"', '"Roboto"', 'system-ui', 'sans-serif'],
|
||||
},
|
||||
colors: {
|
||||
black: '#131a20',
|
||||
// "primary" and "neutral" are deprecated, prefer the use of "blue" and "gray"
|
||||
// in new code.
|
||||
primary: colors.blue,
|
||||
gray: gray,
|
||||
neutral: gray,
|
||||
cyan: colors.cyan,
|
||||
},
|
||||
fontSize: {
|
||||
'2xs': '0.625rem',
|
||||
},
|
||||
|
|
@ -95,6 +43,8 @@ module.exports = {
|
|||
},
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/forms'),
|
||||
require('@tailwindcss/forms')({
|
||||
strategy: 'class',
|
||||
}),
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -26,12 +26,30 @@ module.exports = {
|
|||
rules: [
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
exclude: /node_modules/,
|
||||
exclude: /node_modules|\.spec\.tsx?$/,
|
||||
loader: 'babel-loader',
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [ 'style-loader', 'css-loader' ],
|
||||
use: [
|
||||
{ loader: 'style-loader' },
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
modules: {
|
||||
auto: true,
|
||||
localIdentName: isProduction ? '[name]_[hash:base64:8]' : '[path][name]__[local]',
|
||||
localIdentContext: path.join(__dirname, 'resources/scripts/components'),
|
||||
},
|
||||
sourceMap: !isProduction,
|
||||
importLoaders: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: { sourceMap: !isProduction },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(png|jp(e?)g|gif)$/,
|
||||
|
|
|
|||
Loading…
Reference in a new issue