Merge pull request #8 from hypothesis/tailwind-support

Add Tailwind to CSS-build task

Author: lyzadanger

lib/sass.js

@@ -5,20 +5,42 @@ import autoprefixer from 'autoprefixer';
 import postcss from 'postcss';
 import sass from 'sass';
 
+/**
+ * @typedef {import('tailwindcss/tailwind-config').TailwindConfig} TailwindConfig
+ */
+const defaultTailwindConfig = /** @type {TailwindConfig} */ ({
+  darkMode: false,
+  theme: {},
+});
+
 /**
  * Build CSS bundles from SASS or CSS inputs.
  *
  * @param {string[]} inputs - An array of CSS or SCSS file paths specifying the
  *   entry points of style bundles. The output files will be written to
  *   `build/styles/[name].css` where `[name]` is the basename of the input file
  *   minus the file extension.
+ * @param {object} [options]
+ *   @param {TailwindConfig} [options.tailwindConfig]
+ *   Optional tailwind config object
  * @return {Promise<void>} Promise for completion of the build.
  */
-export async function buildCSS(inputs) {
+export async function buildCSS(
+  inputs,
+  { tailwindConfig = defaultTailwindConfig } = {}
+) {
   const outDir = 'build/styles';
   const minify = process.env.NODE_ENV === 'production';
   await mkdir(outDir, { recursive: true });
 
+  /** @type {typeof import('tailwindcss')} */
+  let tailwindcss;
+  try {
+    tailwindcss = (await import('tailwindcss')).default;
+  } catch {
+    // Ignored
+  }
+
   await Promise.all(
     inputs.map(async input => {
       const output = `${outDir}/${basename(input, extname(input))}.css`;
@@ -31,9 +53,15 @@ export async function buildCSS(inputs) {
         sourceMap: sourcemapPath,
       });
 
-      const cssProcessor = postcss([autoprefixer()]);
+      const optionalPlugins = [];
+      if (tailwindcss) {
+        optionalPlugins.push(tailwindcss(tailwindConfig));
+      }
+
+      const cssProcessor = postcss([...optionalPlugins, autoprefixer()]);
+
       const postcssResult = await cssProcessor.process(sassResult.css, {
-        from: output,
+        from: input,
         to: output,
         map: {
           inline: false,

package.json

@@ -18,13 +18,15 @@
     "@types/karma": "^6.3.1",
     "@types/node": "^16.11.1",
     "@types/sass": "^1.16.1",
+    "@types/tailwindcss": "^2.2.4",
     "autoprefixer": "^10.3.7",
     "eslint": "^8.0.1",
     "karma": "^6.3.4",
     "postcss": "^8.3.9",
     "prettier": "^2.4.1",
     "rollup": "^2.58.0",
     "sass": "^1.43.2",
+    "tailwindcss": "^2.2.19",
     "typescript": "^4.4.4"
   },
   "dependencies": {
@@ -37,7 +39,13 @@
     "karma": "^6.3.4",
     "postcss": "^8.3.9",
     "rollup": "^2.58.0",
-    "sass": "^1.43.2"
+    "sass": "^1.43.2",
+    "tailwindcss": "^2.2.19"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
   },
   "prettier": {
     "arrowParens": "avoid",