From 6e7331374888d0446cc83c008ff4b96b0aeb24bf Mon Sep 17 00:00:00 2001 From: talksik Date: Thu, 17 Mar 2022 10:27:42 -0400 Subject: [PATCH] beautiful works with tailwind webpack --- packages/desktop2/package.json | 5 ++ packages/desktop2/postcss.config.js | 3 ++ packages/desktop2/src/app.tsx | 5 +- packages/desktop2/src/index.css | 5 +- packages/desktop2/tailwind.config.js | 7 +++ packages/desktop2/webpack.main.config.js | 6 +-- packages/desktop2/webpack.plugins.js | 2 +- packages/desktop2/webpack.renderer.config.js | 23 +++++++-- packages/desktop2/webpack.rules.js | 11 ++-- yarn.lock | 53 +++++++++++++++++++- 10 files changed, 104 insertions(+), 16 deletions(-) create mode 100644 packages/desktop2/postcss.config.js create mode 100644 packages/desktop2/tailwind.config.js diff --git a/packages/desktop2/package.json b/packages/desktop2/package.json index 172042e..e054479 100644 --- a/packages/desktop2/package.json +++ b/packages/desktop2/package.json @@ -74,13 +74,18 @@ "@typescript-eslint/eslint-plugin": "^5.0.0", "@typescript-eslint/parser": "^5.0.0", "@vercel/webpack-asset-relocator-loader": "1.7.0", + "autoprefixer": "^10.4.4", "css-loader": "^6.0.0", "electron": "17.1.2", "eslint": "^8.0.1", "eslint-plugin-import": "^2.25.0", "fork-ts-checker-webpack-plugin": "^6.0.1", + "mini-css-extract-plugin": "^2.6.0", "node-loader": "^2.0.0", + "postcss": "^8.4.12", + "postcss-loader": "^6.2.1", "style-loader": "^3.0.0", + "tailwindcss": "^3.0.23", "ts-loader": "^9.2.2", "typescript": "~4.5.4" }, diff --git a/packages/desktop2/postcss.config.js b/packages/desktop2/postcss.config.js new file mode 100644 index 0000000..116848f --- /dev/null +++ b/packages/desktop2/postcss.config.js @@ -0,0 +1,3 @@ +module.exports = { + plugins: [require("tailwindcss"), require("autoprefixer")], +}; diff --git a/packages/desktop2/src/app.tsx b/packages/desktop2/src/app.tsx index 1b389a7..5a8ef9b 100644 --- a/packages/desktop2/src/app.tsx +++ b/packages/desktop2/src/app.tsx @@ -4,7 +4,10 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; function render() { - ReactDOM.render(

Hello from React!

, document.getElementById("root")); + ReactDOM.render( +

Hello from React!

, + document.getElementById("root") + ); } render(); diff --git a/packages/desktop2/src/index.css b/packages/desktop2/src/index.css index f013d8b..e757dd6 100644 --- a/packages/desktop2/src/index.css +++ b/packages/desktop2/src/index.css @@ -4,5 +4,8 @@ body { margin: auto; max-width: 38rem; padding: 2rem; - background-color: black; } + +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/packages/desktop2/tailwind.config.js b/packages/desktop2/tailwind.config.js new file mode 100644 index 0000000..26cde68 --- /dev/null +++ b/packages/desktop2/tailwind.config.js @@ -0,0 +1,7 @@ +module.exports = { + content: ["./src/**/*.{js,jsx,ts,tsx}"], + theme: { + extend: {}, + }, + plugins: [], +}; diff --git a/packages/desktop2/webpack.main.config.js b/packages/desktop2/webpack.main.config.js index 3913746..159d712 100644 --- a/packages/desktop2/webpack.main.config.js +++ b/packages/desktop2/webpack.main.config.js @@ -3,12 +3,12 @@ module.exports = { * This is the main entry point for your application, it's the first file * that runs in the main process. */ - entry: './src/index.ts', + entry: "./src/index.ts", // Put your normal webpack config below here module: { - rules: require('./webpack.rules'), + rules: require("./webpack.rules"), }, resolve: { - extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'], + extensions: [".js", ".ts", ".jsx", ".tsx", ".css", ".json"], }, }; diff --git a/packages/desktop2/webpack.plugins.js b/packages/desktop2/webpack.plugins.js index 0aebcd9..a6a1536 100644 --- a/packages/desktop2/webpack.plugins.js +++ b/packages/desktop2/webpack.plugins.js @@ -1,3 +1,3 @@ -const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); +const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin"); module.exports = [new ForkTsCheckerWebpackPlugin()]; diff --git a/packages/desktop2/webpack.renderer.config.js b/packages/desktop2/webpack.renderer.config.js index 36f4fb0..753e39d 100644 --- a/packages/desktop2/webpack.renderer.config.js +++ b/packages/desktop2/webpack.renderer.config.js @@ -1,9 +1,24 @@ -const rules = require('./webpack.rules'); -const plugins = require('./webpack.plugins'); +const rules = require("./webpack.rules"); +const plugins = require("./webpack.plugins"); + +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); + +const path = require("path"); rules.push({ test: /\.css$/, - use: [{ loader: 'style-loader' }, { loader: 'css-loader' }], + use: [ + { loader: "style-loader" }, + { loader: "css-loader" }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + config: path.join(__dirname, "postcss.config.js"), + }, + }, + }, + ], }); module.exports = { @@ -12,6 +27,6 @@ module.exports = { }, plugins: plugins, resolve: { - extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'], + extensions: [".js", ".ts", ".jsx", ".tsx", ".css"], }, }; diff --git a/packages/desktop2/webpack.rules.js b/packages/desktop2/webpack.rules.js index 174b320..4b4ccf2 100644 --- a/packages/desktop2/webpack.rules.js +++ b/packages/desktop2/webpack.rules.js @@ -1,18 +1,21 @@ +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +const path = require("path"); + module.exports = [ // Add support for native node modules { // We're specifying native_modules in the test because the asset relocator loader generates a // "fake" .node file which is really a cjs file. test: /native_modules\/.+\.node$/, - use: 'node-loader', + use: "node-loader", }, { test: /\.(m?js|node)$/, parser: { amd: false }, use: { - loader: '@vercel/webpack-asset-relocator-loader', + loader: "@vercel/webpack-asset-relocator-loader", options: { - outputAssetBase: 'native_modules', + outputAssetBase: "native_modules", }, }, }, @@ -20,7 +23,7 @@ module.exports = [ test: /\.tsx?$/, exclude: /(node_modules|\.webpack)/, use: { - loader: 'ts-loader', + loader: "ts-loader", options: { transpileOnly: true, }, diff --git a/yarn.lock b/yarn.lock index d322964..d8efe34 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3350,6 +3350,18 @@ autoprefixer@^10.4.2: picocolors "^1.0.0" postcss-value-parser "^4.2.0" +autoprefixer@^10.4.4: + version "10.4.4" + resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.4.tgz#3e85a245b32da876a893d3ac2ea19f01e7ea5a1e" + integrity sha512-Tm8JxsB286VweiZ5F0anmbyGiNI3v3wGv3mz9W+cxEDYB/6jbnj6GM9H9mK3wIL8ftgl+C07Lcwb8PG5PCCPzA== + dependencies: + browserslist "^4.20.2" + caniuse-lite "^1.0.30001317" + fraction.js "^4.2.0" + normalize-range "^0.1.2" + picocolors "^1.0.0" + postcss-value-parser "^4.2.0" + aws-sign2@~0.7.0: version "0.7.0" resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8" @@ -3699,6 +3711,17 @@ browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.16.6, browserslist@^4 node-releases "^2.0.2" picocolors "^1.0.0" +browserslist@^4.20.2: + version "4.20.2" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.2.tgz#567b41508757ecd904dab4d1c646c612cd3d4f88" + integrity sha512-CQOBCqp/9pDvDbx3xfMi+86pr4KXIf2FDkTTdeuYw8OxS9t898LA1Khq57gtufFILXpfgsSx5woNgsBgvGjpsA== + dependencies: + caniuse-lite "^1.0.30001317" + electron-to-chromium "^1.4.84" + escalade "^3.1.1" + node-releases "^2.0.2" + picocolors "^1.0.0" + bser@2.1.1: version "2.1.1" resolved "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz" @@ -3873,6 +3896,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001297, caniuse-lite@^1.0.30001313: resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001314.tgz" integrity sha512-0zaSO+TnCHtHJIbpLroX7nsD+vYuOVjl3uzFbJO1wMVbuveJA0RK2WcQA9ZUIOiO0/ArMiMgHJLxfEZhQiC0kw== +caniuse-lite@^1.0.30001317: + version "1.0.30001317" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001317.tgz#0548fb28fd5bc259a70b8c1ffdbe598037666a1b" + integrity sha512-xIZLh8gBm4dqNX0gkzrBeyI86J2eCjWzYAs40q88smG844YIrN4tVQl/RhquHvKEKImWWFIVh1Lxe5n1G/N+GQ== + case-sensitive-paths-webpack-plugin@^2.4.0: version "2.4.0" resolved "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz" @@ -5181,6 +5209,11 @@ electron-to-chromium@^1.4.76: resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.82.tgz" integrity sha512-Ks+ANzLoIrFDUOJdjxYMH6CMKB8UQo5modAwvSZTxgF+vEs/U7G5IbWFUp6dS4klPkTDVdxbORuk8xAXXhMsWw== +electron-to-chromium@^1.4.84: + version "1.4.86" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.86.tgz#90fe4a9787f48d6522957213408e08a8126b2ebc" + integrity sha512-EVTZ+igi8x63pK4bPuA95PXIs2b2Cowi3WQwI9f9qManLiZJOD1Lash1J3W4TvvcUCcIR4o/rgi9o8UicXSO+w== + electron-winstaller@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/electron-winstaller/-/electron-winstaller-5.0.0.tgz#0db968f34d498b16c69566a40848f562e70e7bcc" @@ -6019,7 +6052,7 @@ forwarded@0.2.0: resolved "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz" integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow== -fraction.js@^4.1.2: +fraction.js@^4.1.2, fraction.js@^4.2.0: version "4.2.0" resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz" integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA== @@ -8379,6 +8412,13 @@ mini-css-extract-plugin@^2.4.5: dependencies: schema-utils "^4.0.0" +mini-css-extract-plugin@^2.6.0: + version "2.6.0" + resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.6.0.tgz#578aebc7fc14d32c0ad304c2c34f08af44673f5e" + integrity sha512-ndG8nxCEnAemsg4FSgS+yNyHKgkTB4nPKqCOgh65j3/30qqC5RaSQQXMm++Y6sb6E1zRSxPkztj9fqxhS1Eo6w== + dependencies: + schema-utils "^4.0.0" + minimalistic-assert@^1.0.0: version "1.0.1" resolved "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz" @@ -9405,7 +9445,7 @@ postcss-load-config@^3.1.0: postcss-loader@^6.2.1: version "6.2.1" - resolved "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz" + resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-6.2.1.tgz#0895f7346b1702103d30fdc66e4d494a93c008ef" integrity sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q== dependencies: cosmiconfig "^7.0.0" @@ -9743,6 +9783,15 @@ postcss@^8.3.5, postcss@^8.4.4, postcss@^8.4.6, postcss@^8.4.7, postcss@^8.4.8: picocolors "^1.0.0" source-map-js "^1.0.2" +postcss@^8.4.12: + version "8.4.12" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.12.tgz#1e7de78733b28970fa4743f7da6f3763648b1905" + integrity sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg== + dependencies: + nanoid "^3.3.1" + picocolors "^1.0.0" + source-map-js "^1.0.2" + prelude-ls@^1.2.1: version "1.2.1" resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"