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 diff --git a/packages/components/package.json b/packages/components/package.json index 1cb55141..b5cdec3c 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", @@ -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 .", diff --git a/packages/components/postcss.config.js b/packages/components/postcss.config.js new file mode 100644 index 00000000..3691aac9 --- /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..330002ef 100644 --- a/packages/website/docusaurus.config.js +++ b/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"), + ], }, }), ], 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 ../" diff --git a/packages/website/src/css/custom.css b/packages/website/src/css/custom.css index b07d10f7..02c5ff6b 100644 --- a/packages/website/src/css/custom.css +++ b/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; 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 new file mode 100644 index 00000000..f053ebf7 --- /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" "*"