Load PostCSS config

package.json

@@ -52,6 +52,7 @@
     "lodash": "^4.17.14",
     "postcss": "^7.0.17",
     "postcss-icss-selectors": "^2.0.3",
+    "postcss-load-config": "^2.1.0",
     "reserved-words": "^0.1.2",
     "sass": "^1.22.4"
   },

src/@types/postcss-load.config.d.ts

@@ -0,0 +1,15 @@
+declare module 'postcss-load-config' {
+  interface PostCSSConfig {
+    plugins: any[];
+    options?: any;
+  }
+
+  interface Load {
+    (context: object, path?: string, options?: object): Promise<PostCSSConfig>;
+    sync(context: object, path?: string, options?: object): PostCSSConfig;
+  }
+
+  const load: Load;
+
+  export = load;
+}

src/helpers/__tests__/cssSnapshots.test.ts

@@ -1,7 +1,9 @@
 import { readFileSync } from 'fs';
 import { IICSSExports } from 'icss-utils';
 import { join } from 'path';
-import { createExports, getClasses, getFileType } from '../cssSnapshots';
+import * as postcss from 'postcss';
+import * as postcssIcssSelectors from 'postcss-icss-selectors';
+import { createExports, getClasses } from '../cssSnapshots';
 
 const testFileNames = [
   'test.module.css',
@@ -11,14 +13,16 @@ const testFileNames = [
   'empty.module.scss',
 ];
 
+const processor = postcss([postcssIcssSelectors({ mode: 'local' })]);
+
 describe('utils / cssSnapshots', () => {
   testFileNames.forEach((fileName) => {
     let classes: IICSSExports;
     const fullFileName = join(__dirname, 'fixtures', fileName);
     const testFile = readFileSync(fullFileName, 'utf8');
 
     beforeAll(() => {
-      classes = getClasses(testFile, fullFileName);
+      classes = getClasses(processor, testFile, fullFileName);
     });
 
     describe(`with file '${fileName}'`, () => {

src/helpers/cssSnapshots.ts

@@ -1,6 +1,5 @@
 import { extractICSS, IICSSExports } from 'icss-utils';
 import * as postcss from 'postcss';
-import * as postcssIcssSelectors from 'postcss-icss-selectors';
 import * as ts_module from 'typescript/lib/tsserverlibrary';
 import * as less from 'less';
 import * as sass from 'sass';
@@ -9,7 +8,6 @@ import { transformClasses } from './classTransforms';
 import { Options } from '../options';
 
 const NOT_CAMELCASE_REGEXP = /[\-_]/;
-const processor = postcss(postcssIcssSelectors({ mode: 'local' }));
 
 const classNameToProperty = (className: string) => `'${className}': string;`;
 const classNameToNamedExport = (className: string) =>
@@ -35,7 +33,11 @@ export const getFileType = (fileName: string) => {
 const getFilePath = (fileName: string) =>
   fileName.substring(0, fileName.lastIndexOf('/'));
 
-export const getClasses = (css: string, fileName: string) => {
+export const getClasses = (
+  processor: postcss.Processor,
+  css: string,
+  fileName: string,
+) => {
   try {
     const fileType = getFileType(fileName);
     let transformedCss = '';
@@ -58,7 +60,7 @@ export const getClasses = (css: string, fileName: string) => {
 
     const processedCss = processor.process(transformedCss);
 
-    return extractICSS(processedCss.root).icssExports;
+    return processedCss.root ? extractICSS(processedCss.root).icssExports : {};
   } catch (e) {
     return {};
   }
@@ -92,12 +94,13 @@ export default classes;
 
 export const getDtsSnapshot = (
   ts: typeof ts_module,
+  processor: postcss.Processor,
   fileName: string,
   scriptSnapshot: ts.IScriptSnapshot,
   options: Options,
 ) => {
   const css = scriptSnapshot.getText(0, scriptSnapshot.getLength());
-  const classes = getClasses(css, fileName);
+  const classes = getClasses(processor, css, fileName);
   const dts = createExports(classes, options);
   return ts.ScriptSnapshot.fromString(dts);
 };

src/index.ts

@@ -1,14 +1,49 @@
 import * as fs from 'fs';
 import * as path from 'path';
+import * as loadPostCssConfig from 'postcss-load-config';
 import * as ts_module from 'typescript/lib/tsserverlibrary';
+
 import { createMatchers } from './helpers/createMatchers';
 import { isCSSFn } from './helpers/cssExtensions';
 import { getDtsSnapshot } from './helpers/cssSnapshots';
 import { Options } from './options';
 
+import * as postcss from 'postcss';
+import * as postcssIcssSelectors from 'postcss-icss-selectors';
+
+const removePlugin = postcss.plugin('remove-mixins', () => (css) => {
+  css.walkRules((rule) => {
+    rule.walkAtRules((atRule) => {
+      if (atRule.name === 'mixin') {
+        atRule.remove();
+      }
+    });
+  });
+});
+
+function getPostCssConfig(dir: string) {
+  try {
+    return loadPostCssConfig.sync({}, dir);
+  } catch (error) {
+    return { plugins: [] };
+  }
+}
+
 function init({ typescript: ts }: { typescript: typeof ts_module }) {
   let _isCSS: isCSSFn;
+
   function create(info: ts.server.PluginCreateInfo) {
+    const postcssConfig = getPostCssConfig(info.project.getCurrentDirectory());
+
+    const processor = postcss([
+      removePlugin(),
+      ...postcssConfig.plugins.filter(
+        // Postcss mixins plugin might be async and will break the postcss sync output.
+        (plugin) => !['postcss-mixins'].includes(plugin.postcssPlugin),
+      ),
+      postcssIcssSelectors({ mode: 'local' }),
+    ]);
+
     // User options for plugin.
     const options: Options = info.config.options || {};
 
@@ -24,7 +59,13 @@ function init({ typescript: ts }: { typescript: typeof ts_module }) {
       ...rest
     ): ts.SourceFile => {
       if (isCSS(fileName)) {
-        scriptSnapshot = getDtsSnapshot(ts, fileName, scriptSnapshot, options);
+        scriptSnapshot = getDtsSnapshot(
+          ts,
+          processor,
+          fileName,
+          scriptSnapshot,
+          options,
+        );
       }
       const sourceFile = _createLanguageServiceSourceFile(
         fileName,
@@ -47,6 +88,7 @@ function init({ typescript: ts }: { typescript: typeof ts_module }) {
       if (isCSS(sourceFile.fileName)) {
         scriptSnapshot = getDtsSnapshot(
           ts,
+          processor,
           sourceFile.fileName,
           scriptSnapshot,
           options,

yarn.lock

@@ -943,7 +943,7 @@ [email protected], core-util-is@~1.0.0:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
   integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
 
-cosmiconfig@^5.2.0:
+cosmiconfig@^5.0.0, cosmiconfig@^5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
   integrity sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==
@@ -1698,6 +1698,13 @@ image-size@~0.5.0:
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
   integrity sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=
 
+import-cwd@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
+  integrity sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=
+  dependencies:
+    import-from "^2.1.0"
+
 import-fresh@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
@@ -1706,6 +1713,13 @@ import-fresh@^2.0.0:
     caller-path "^2.0.0"
     resolve-from "^3.0.0"
 
+import-from@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/import-from/-/import-from-2.1.0.tgz#335db7f2a7affd53aaa471d4b8021dee36b7f3b1"
+  integrity sha1-M1238qev/VOqpHHUuAId7ja387E=
+  dependencies:
+    resolve-from "^3.0.0"
+
 import-local@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
@@ -3240,6 +3254,14 @@ postcss-icss-selectors@^2.0.3:
     lodash "^4.17.4"
     postcss "^6.0.2"
 
+postcss-load-config@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.1.0.tgz#c84d692b7bb7b41ddced94ee62e8ab31b417b003"
+  integrity sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==
+  dependencies:
+    cosmiconfig "^5.0.0"
+    import-cwd "^2.0.0"
+
 postcss@^6.0.2:
   version "6.0.23"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"