Merge pull request #640 from quantified-uncertainty/sam-website-css-attempt

Sam's attempt at getting component css into the website

.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

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",
@@ -55,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 .",

packages/components/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+    cssnano: {},
+  },
+};

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: {

packages/website/docusaurus.config.js

@@ -19,27 +19,7 @@ const config = {
   organizationName: "quantified-uncertainty", // Usually your GitHub org/user name.
   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"
-              ),
-            },
-          },
-        };
-      },
-    }),
-  ],
+  plugins: [],
 
   presets: [
     [
@@ -61,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"),
+          ],
         },
       }),
     ],

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 ../"
 

packages/website/src/css/custom.css

@@ -4,10 +4,6 @@
  * 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;

packages/website/tailwind.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  content: ["./src/**/*.{html,tsx,ts,js,jsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [require("@tailwindcss/forms")],
+};

packages/website/webpack.config.js

@@ -0,0 +1 @@
+module.exports = {};

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" "*"