From 906534615a2ceb9e4e1acc108fa52e8e97349b30 Mon Sep 17 00:00:00 2001 From: Sam Nolan Date: Sun, 5 Jun 2022 06:48:31 +0000 Subject: [PATCH 1/4] BROKEN: Sam's attempt at getting component css into the website --- packages/components/package.json | 4 +++- packages/components/postcss.config.js | 7 +++++++ packages/components/webpack.config.js | 8 +++++--- packages/website/docusaurus.config.js | 19 ------------------- packages/website/src/css/custom.css | 5 +---- packages/website/webpack.config.js | 1 + yarn.lock | 6 +++--- 7 files changed, 20 insertions(+), 30 deletions(-) create mode 100644 packages/components/postcss.config.js create mode 100644 packages/website/webpack.config.js diff --git a/packages/components/package.json b/packages/components/package.json index 1cb55141..e6927c72 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -42,6 +42,8 @@ "@types/styled-components": "^5.1.24", "@types/webpack": "^5.28.0", "cross-env": "^7.0.3", + "mini-css-extract-plugin": "^2.6.0", + "postcss-loader": "^7.0.0", "react-scripts": "^5.0.1", "style-loader": "^3.3.1", "tailwindcss": "^3.0.24", @@ -94,6 +96,6 @@ "@types/react": "17.0.43" }, "source": "./src/index.ts", - "main": "./dist/src/index.js", + "main": "./dist/bundle.js", "types": "./dist/src/index.d.ts" } diff --git a/packages/components/postcss.config.js b/packages/components/postcss.config.js new file mode 100644 index 00000000..18eb64ac --- /dev/null +++ b/packages/components/postcss.config.js @@ -0,0 +1,7 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + cssnano: {}, + } +} diff --git a/packages/components/webpack.config.js b/packages/components/webpack.config.js index d0c93be0..ff3fa1f6 100644 --- a/packages/components/webpack.config.js +++ b/packages/components/webpack.config.js @@ -1,24 +1,26 @@ const path = require("path"); +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { mode: "production", devtool: "source-map", profile: true, - entry: "./src/index.ts", + entry: ["./src/index.ts", "./src/tailwind.css"], module: { rules: [ { test: /\.tsx?$/, loader: "ts-loader", - options: { projectReferences: true, transpileOnly: true }, + options: { projectReferences: true }, exclude: /node_modules/, }, { test: /\.css$/i, - use: ["style-loader", "css-loader"], + use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"], }, ], }, + plugins: [new MiniCssExtractPlugin()], resolve: { extensions: [".js", ".tsx", ".ts"], alias: { diff --git a/packages/website/docusaurus.config.js b/packages/website/docusaurus.config.js index ca7b3a8c..91e0926d 100644 --- a/packages/website/docusaurus.config.js +++ b/packages/website/docusaurus.config.js @@ -20,25 +20,6 @@ const config = { projectName: "squiggle", // Usually your repo name. plugins: [ - "docusaurus-tailwindcss", - () => ({ - configureWebpack(config, isServer, utils, content) { - return { - resolve: { - alias: { - "@quri/squiggle-components": path.resolve( - __dirname, - "../components/src" - ), - "@quri/squiggle-lang": path.resolve( - __dirname, - "../squiggle-lang/src/js" - ), - }, - }, - }; - }, - }), ], presets: [ diff --git a/packages/website/src/css/custom.css b/packages/website/src/css/custom.css index b07d10f7..5670ac59 100644 --- a/packages/website/src/css/custom.css +++ b/packages/website/src/css/custom.css @@ -1,13 +1,10 @@ +@import("@quri/squiggle-components/dist/main.css") /** * Any CSS included here will be global. The classic template * bundles Infima by default. Infima is a CSS framework designed to * work well for content-centric websites. */ -@tailwind base; -@tailwind components; -@tailwind utilities; - /* You can override the default Infima variables here. */ :root { --ifm-color-primary: #2488df; diff --git a/packages/website/webpack.config.js b/packages/website/webpack.config.js new file mode 100644 index 00000000..0558c172 --- /dev/null +++ b/packages/website/webpack.config.js @@ -0,0 +1 @@ +module .exports = {} diff --git a/yarn.lock b/yarn.lock index 52d00695..2b9021a6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4341,9 +4341,9 @@ "@types/react" "*" "@types/react@*", "@types/react@^18.0.1", "@types/react@^18.0.9": - version "18.0.10" - resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.10.tgz#5692944d4a45e204fb7a981eb1388afe919cf4d0" - integrity sha512-dIugadZuIPrRzvIEevIu7A1smqOAjkSMv8qOfwPt9Ve6i6JT/FQcCHyk2qIAxwsQNKZt5/oGR0T4z9h2dXRAkg== + version "18.0.11" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.11.tgz#94c9b62020caff17d117374d724de853ec711d21" + integrity sha512-JxSwm54IgMW4XTR+zFF5QpNx4JITmFbB4WHR2J0vg9RpjNeyqEMlODXsD2e64br6GX70TL0UYjZJETpyyC1WdA== dependencies: "@types/prop-types" "*" "@types/scheduler" "*" From cd8a92e91f2b9fb2d25e3a2d20846a5419f192e9 Mon Sep 17 00:00:00 2001 From: Sam Nolan Date: Mon, 6 Jun 2022 04:24:38 +0000 Subject: [PATCH 2/4] Add css into docusaurus --- packages/components/package.json | 4 ++-- packages/components/postcss.config.js | 4 ++-- packages/website/docusaurus.config.js | 8 +++++--- packages/website/src/css/custom.css | 1 - packages/website/tailwind.config.js | 7 +++++++ packages/website/webpack.config.js | 2 +- 6 files changed, 17 insertions(+), 9 deletions(-) create mode 100644 packages/website/tailwind.config.js diff --git a/packages/components/package.json b/packages/components/package.json index e6927c72..b5cdec3c 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -57,7 +57,7 @@ }, "scripts": { "start": "cross-env REACT_APP_FAST_REFRESH=false && start-storybook -p 6006 -s public", - "build": "tsc -b && build-storybook -s public", + "build": "tsc -b && tailwindcss -i ./src/tailwind.css -o ./dist/main.css && build-storybook -s public", "bundle": "webpack", "all": "yarn bundle && yarn build", "lint": "prettier --check .", @@ -96,6 +96,6 @@ "@types/react": "17.0.43" }, "source": "./src/index.ts", - "main": "./dist/bundle.js", + "main": "./dist/src/index.js", "types": "./dist/src/index.d.ts" } diff --git a/packages/components/postcss.config.js b/packages/components/postcss.config.js index 18eb64ac..3691aac9 100644 --- a/packages/components/postcss.config.js +++ b/packages/components/postcss.config.js @@ -3,5 +3,5 @@ module.exports = { tailwindcss: {}, autoprefixer: {}, cssnano: {}, - } -} + }, +}; diff --git a/packages/website/docusaurus.config.js b/packages/website/docusaurus.config.js index 91e0926d..330002ef 100644 --- a/packages/website/docusaurus.config.js +++ b/packages/website/docusaurus.config.js @@ -19,8 +19,7 @@ const config = { organizationName: "quantified-uncertainty", // Usually your GitHub org/user name. projectName: "squiggle", // Usually your repo name. - plugins: [ - ], + plugins: [], presets: [ [ @@ -42,7 +41,10 @@ const config = { "https://github.com/quantified-uncertainty/squiggle/tree/develop/packages/website/", }, theme: { - customCss: require.resolve("./src/css/custom.css"), + customCss: [ + require.resolve("./src/css/custom.css"), + require.resolve("@quri/squiggle-components/dist/main.css"), + ], }, }), ], diff --git a/packages/website/src/css/custom.css b/packages/website/src/css/custom.css index 5670ac59..02c5ff6b 100644 --- a/packages/website/src/css/custom.css +++ b/packages/website/src/css/custom.css @@ -1,4 +1,3 @@ -@import("@quri/squiggle-components/dist/main.css") /** * Any CSS included here will be global. The classic template * bundles Infima by default. Infima is a CSS framework designed to diff --git a/packages/website/tailwind.config.js b/packages/website/tailwind.config.js new file mode 100644 index 00000000..f100dc69 --- /dev/null +++ b/packages/website/tailwind.config.js @@ -0,0 +1,7 @@ +module.exports = { + content: ["./src/**/*.{html,tsx,ts,js,jsx}"], + theme: { + extend: {}, + }, + plugins: [require("@tailwindcss/forms")], +}; diff --git a/packages/website/webpack.config.js b/packages/website/webpack.config.js index 0558c172..f053ebf7 100644 --- a/packages/website/webpack.config.js +++ b/packages/website/webpack.config.js @@ -1 +1 @@ -module .exports = {} +module.exports = {}; From 8174715d1760999fc1d683863a2b4cfda6d7febf Mon Sep 17 00:00:00 2001 From: Sam Nolan Date: Mon, 6 Jun 2022 04:32:00 +0000 Subject: [PATCH 3/4] Build components before website in CI --- .github/workflows/ci.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 7124406e..382dd55b 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -154,5 +154,7 @@ jobs: run: cd ../../ && yarn - name: Build rescript in squiggle-lang run: cd ../squiggle-lang && yarn build + - name: Build components + run: cd ../components && yarn build - name: Build website assets run: yarn build From 966213bfd10c447ea32d1f126b296fc4680362a8 Mon Sep 17 00:00:00 2001 From: Sam Nolan Date: Mon, 6 Jun 2022 04:38:13 +0000 Subject: [PATCH 4/4] Fix Netlify build commands --- packages/website/netlify.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/netlify.toml b/packages/website/netlify.toml index 1827c88e..cb064992 100644 --- a/packages/website/netlify.toml +++ b/packages/website/netlify.toml @@ -1,6 +1,6 @@ [build] base = "packages/website/" - command = "cd ../squiggle-lang && yarn build && cd ../website && yarn build" + command = "cd ../squiggle-lang && yarn build && cd ../components && yarn build && cd ../website && yarn build" publish = "build/" ignore = "node -e 'process.exitCode = process.env.BRANCH.includes(\"dependabot\") ? 0 : 1' && git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF ../"