[FX-4590] Setup tailwind (#4050)

toptal · Dec 29, 2023 · d3176e0 · d3176e0
1 parent 5da397a
commit d3176e0
Show file tree

Hide file tree

Showing 12 changed files with 82 additions and 19 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -60,6 +60,26 @@ module.exports = {
 
     const { reactDocgen, reactDocgenTypescriptOptions } = typescriptOptions
 
+    const cssRule = config.module.rules.find(
+      rule => rule.test && rule.test.toString().includes('.css')
+    )
+
+    // Use the 'postcss-loader' to process TailwindCSS
+    cssRule.use.push({
+      loader: 'postcss-loader',
+      options: {
+        postcssOptions: {
+          config: false,
+          plugins: {
+            tailwindcss: {
+              config: require.resolve('../tailwind.config.js'),
+            },
+            autoprefixer: {},
+          },
+        },
+      },
+    })
+
     return {
       ...config,
       module: {
@@ -162,6 +182,10 @@ module.exports = {
             __dirname,
             '../packages/picasso-query-builder/src'
           ),
+          '@toptal/picasso-tailwind': path.resolve(
+            __dirname,
+            '../packages/picasso-tailwind/src'
+          ),
         },
       },
     }

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -2,6 +2,7 @@ import React from 'react'
 import 'github-markdown-css/github-markdown-light.css'
 import 'happo-plugin-storybook/register'
 import { getCheckpoints } from '../packages/picasso/src/test-utils/get-happo-targets/get-checkpoints.ts'
+import './styles.css'
 
 import Picasso from '@toptal/picasso-provider'
 
@@ -62,6 +63,7 @@ const withPicasso = story => (
     fixViewport={false}
     loadFavicon={false}
     preventPageWidthChangeOnScrollbar={false}
+    injectFirst
   >
     {story()}
   </Picasso>

diff --git a/.storybook/styles.css b/.storybook/styles.css
@@ -0,0 +1,5 @@
+/* we can't apply reset.css here as it would override current styles */
+/* @tailwind base; */
+
+@tailwind components;
+@tailwind utilities;
diff --git a/cypress.config.mjs b/cypress.config.mjs
@@ -40,7 +40,7 @@ export default defineConfig({
                     plugins: [
                       '@babel/plugin-proposal-nullish-coalescing-operator',
                       '@babel/plugin-proposal-optional-chaining',
-                      'istanbul'
+                      'istanbul',
                     ],
                   },
                 },
@@ -52,7 +52,20 @@ export default defineConfig({
             },
             {
               test: /\.css$/i,
-              use: ['style-loader', 'css-loader'],
+              use: ['style-loader', 'css-loader', {
+                loader: 'postcss-loader',
+                options: {
+                  postcssOptions: {
+                    config: false,
+                    plugins: {
+                      tailwindcss: {
+                        config: './tailwind.config.js',
+                      },
+                      autoprefixer: {},
+                    },
+                  },
+                },
+              }],
             },
           ],
         },

diff --git a/package.json b/package.json
@@ -89,6 +89,7 @@
     "@toptal/davinci-engine": "^10.9.0",
     "@toptal/davinci-qa": "^16.2.4",
     "@toptal/davinci-syntax": "^21.0.8",
+    "@toptal/picasso-tailwind": "1.0.1",
     "@types/debounce": "^3.0.0",
     "@types/esprima": "^4.0.3",
     "@types/happo-cypress": "^4.1.3",
@@ -121,6 +122,8 @@
     "jest-canvas-mock": "^2.5.0",
     "lerna": "^7.4.2",
     "madge": "^6.1.0",
+    "postcss": "^8.4.32",
+    "postcss-loader": "^7.3.3",
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-ace": "^10.1.0",
@@ -133,6 +136,7 @@
     "react-test-renderer": "^18.2.0",
     "remark-gfm": "^4.0.0",
     "syncpack": "^11.2.1",
+    "tailwindcss": "^3.3.6",
     "thread-loader": "^4.0.2",
     "ts-loader": "^9.5.1",
     "typescript": "~4.7.0",
@@ -150,7 +154,7 @@
     "lodash": "^4.17.21",
     "**/marksy/marked": "^0.7.0",
     "**/find-babel-config/json5": "1",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.32",
     "**/default-browser-id/meow/trim-newlines": "^3",
     "**/@types/unist": "3.0.0",
     "@storybook/react": "^6.5.15",

diff --git a/packages/picasso-tailwind/package.json b/packages/picasso-tailwind/package.json
@@ -27,7 +27,7 @@
     "prepublishOnly": "if [ -d dist-package ]; then cp ./package.json ./dist-package/package.json; fi"
   },
   "devDependencies": {
-    "tailwindcss": "^3.3.5"
+    "tailwindcss": "^3.3.6"
   },
   "peerDependencies": {
     "tailwindcss": "^3.3.5"

diff --git a/packages/picasso/src/CarouselNavigation/styles.ts b/packages/picasso/src/CarouselNavigation/styles.ts
@@ -15,6 +15,7 @@ export default ({ palette, transitions }: Theme) =>
         backgroundColor: palette.blue.main,
         opacity: 0.2,
         '&.active': {
+          backgroundColor: palette.blue.main,
           opacity: 1,
         },
         '&:hover:not(.active)': {

diff --git a/packages/picasso/src/OutlinedInput/styles.ts b/packages/picasso/src/OutlinedInput/styles.ts
@@ -73,6 +73,7 @@ PicassoProvider.override(
       },
       error: {
         backgroundColor: 'transparent',
+        color: palette.common.black,
         '&$focused': {
           '& $notchedOutline': {
             borderWidth: '1px',

diff --git a/packages/picasso/src/test-utils/TestingPicasso.tsx b/packages/picasso/src/test-utils/TestingPicasso.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import Picasso from '@toptal/picasso-provider'
 import type { TextLabelProps } from '@toptal/picasso-shared'
+import './styles.css'
 
 export type Props = TextLabelProps & {
   children: React.ReactNode
@@ -15,6 +16,7 @@ export const TestingPicasso = ({ children, titleCase }: Props) => {
       preventPageWidthChangeOnScrollbar={false}
       titleCase={titleCase}
       disableTransitions
+      injectFirst
     >
       {children}
     </Picasso>

diff --git a/packages/picasso/src/test-utils/styles.css b/packages/picasso/src/test-utils/styles.css
@@ -0,0 +1,5 @@
+/* we can't apply reset.css here as it would override current styles */
+/* @tailwind base; */
+
+@tailwind components;
+@tailwind utilities;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,6 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['packages/**/*.{ts,tsx}'],
+  presets: [require('@toptal/picasso-tailwind')],
+  plugins: [],
+}
diff --git a/yarn.lock b/yarn.lock
@@ -15436,14 +15436,14 @@ json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
   resolved "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz"
   integrity sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==
 
-json5@1, json5@^1.0.1, json5@^2.1.1:
+json5@1, json5@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
   integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
   dependencies:
     minimist "^1.2.0"
 
-[email protected], json5@^2.1.0, json5@^2.1.2, json5@^2.2.0, json5@^2.2.2, json5@^2.2.3, json5@^2.x:
+[email protected], json5@^2.1.0, json5@^2.1.1, json5@^2.1.2, json5@^2.2.0, json5@^2.2.2, json5@^2.2.3, json5@^2.x:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
@@ -17691,10 +17691,10 @@ mz@^2.7.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-nanoid@^3.3.1, nanoid@^3.3.6:
-  version "3.3.6"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
-  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
+nanoid@^3.3.1, nanoid@^3.3.7:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
+  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
 
 nanomatch@^1.2.9:
   version "1.2.13"
@@ -19426,12 +19426,12 @@ postcss-values-parser@^6.0.2:
     is-url-superb "^4.0.0"
     quote-unquote "^1.0.0"
 
-postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6, postcss@^8.1.7, postcss@^8.2.15, postcss@^8.4.19, postcss@^8.4.21, postcss@^8.4.22, postcss@^8.4.23, postcss@^8.4.28, postcss@^8.4.31:
-  version "8.4.31"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
-  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
+postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6, postcss@^8.1.7, postcss@^8.2.15, postcss@^8.4.19, postcss@^8.4.21, postcss@^8.4.22, postcss@^8.4.23, postcss@^8.4.28, postcss@^8.4.31, postcss@^8.4.32:
+  version "8.4.32"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.32.tgz#1dac6ac51ab19adb21b8b34fd2d93a86440ef6c9"
+  integrity sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==
   dependencies:
-    nanoid "^3.3.6"
+    nanoid "^3.3.7"
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
@@ -22720,10 +22720,10 @@ table@^6.8.1:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
-tailwindcss@^3.3.5:
-  version "3.3.5"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.5.tgz#22a59e2fbe0ecb6660809d9cc5f3976b077be3b8"
-  integrity sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==
+tailwindcss@^3.3.6:
+  version "3.3.6"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.6.tgz#4dd7986bf4902ad385d90d45fd4b2fa5fab26d5f"
+  integrity sha512-AKjF7qbbLvLaPieoKeTjG1+FyNZT6KaJMJPFeQyLfIp7l82ggH1fbHJSsYIvnbTFQOlkh+gBYpyby5GT1LIdLw==
   dependencies:
     "@alloc/quick-lru" "^5.2.0"
     arg "^5.0.2"