From 94fab4f26428e37bf06c146fad908a939cd8783a Mon Sep 17 00:00:00 2001 From: Jan Vogt Date: Fri, 26 Mar 2021 10:16:34 +0100 Subject: [PATCH 1/2] Make tailwind working Before this change using @tailwind directive in styled-jsx component lead to styled-jsx-plugin-postcss] postcss failed with TypeError [ERR_INVALID_ARG_TYPE]: The "url" argument must be of type string. Received type boolean (false) According to postcss documentation (https://postcss.org/api/#processoptions) the 'from' option should be a string of the filename. We should get this filename as options.babel.filename (See: https://github.com/vercel/styled-jsx#plugin-options). Since we don't use the source maps they are now disabled as well. --- processor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/processor.js b/processor.js index caef4f6..1ca51df 100644 --- a/processor.js +++ b/processor.js @@ -15,6 +15,6 @@ module.exports = function processor(src, options) { loaderPromises[options.path || 'auto'] = loaderPromise return loaderPromise - .then((plugins) => postcss(plugins).process(src, { from: false })) + .then((plugins) => postcss(plugins).process(src, { from: options.babel.filename, map: false })) .then((result) => result.css) } From 0c9d33e248bbe53699d52cb079ea1737134b0534 Mon Sep 17 00:00:00 2001 From: Jan Vogt Date: Sat, 3 Apr 2021 21:36:52 +0200 Subject: [PATCH 2/2] Fallback if for missing .babel --- processor.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/processor.js b/processor.js index 1ca51df..3685dcf 100644 --- a/processor.js +++ b/processor.js @@ -3,6 +3,9 @@ const loader = require('postcss-load-config') const loaderPromises = {} +const safeFilenameFromOptions = options => + (options.babel || {}).filename || "unknown filename" + module.exports = function processor(src, options) { options = options || {} @@ -15,6 +18,6 @@ module.exports = function processor(src, options) { loaderPromises[options.path || 'auto'] = loaderPromise return loaderPromise - .then((plugins) => postcss(plugins).process(src, { from: options.babel.filename, map: false })) + .then((plugins) => postcss(plugins).process(src, { from: safeFilenameFromOptions(options), map: false })) .then((result) => result.css) }