Add postcss-import settings

remirror · Oct 7, 2020 · 0510096 · 0510096
1 parent 4658d45
commit 0510096
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 2 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/support/package.json b/support/package.json
@@ -24,6 +24,7 @@
     "lodash.groupby": "^4.6.0",
     "lodash.isequal": "^4.5.0",
     "postcss": "^7.0.34",
+    "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "postcss-nested": "^4.2.3",
     "type-fest": "^0.17.0",

diff --git a/support/scripts/linaria.js b/support/scripts/linaria.js
@@ -16,6 +16,7 @@ const chalk = require('chalk');
 const { baseDir } = require('./helpers');
 const prettier = require('prettier');
 const postcssNested = require('postcss-nested');
+const postcssImport = require('postcss-import');
 const autoprefixer = require('autoprefixer');
 const postcss = require('postcss');
 const { camelCase, pascalCase } = require('case-anything');
@@ -113,7 +114,10 @@ async function formatContents(contents, parser = 'css') {
  * @param {string?} [to] - the output path for the transformation
  */
 async function processCss(css, from, to) {
-  const result = await postcss([postcssNested, autoprefixer]).process(css, { from, to });
+  const result = await postcss([postcssImport, postcssNested, autoprefixer]).process(css, {
+    from,
+    to,
+  });
   return result.css;
 }
 

diff --git a/support/website/plugins/monaco-editor.js b/support/website/plugins/monaco-editor.js
@@ -36,7 +36,7 @@ function monacoEditorPlugin(_context, _options) {
           }
 
           item.options.plugins = () => {
-            return [require('postcss-nested'), require('autoprefixer')];
+            return [require('postcss-import'), require('postcss-nested'), require('autoprefixer')];
           };
         }
       }