Fix destructuring imports with common js

Author: micantoine

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Svelte preprocess CSS Modules, changelog
 
+## 2.2.1 (May 26, 2022)
+
+### Fixes
+
+- Destructuring import with commonjs
+- Emphasize on named imports instead of default
+
 ## 2.2.0 (Apr 6, 2022)
 
 ### Features

README.md

@@ -745,7 +745,7 @@ To be used with the plugin [`rollup-plugin-svelte`](https://github.com/sveltejs/
 
 ```js
 import svelte from 'rollup-plugin-svelte';
-import cssModules from 'svelte-preprocess-cssmodules';
+import { cssModules } from 'svelte-preprocess-cssmodules';
 
 export default {
   ...
@@ -765,7 +765,7 @@ export default {
 To be used with the loader [`svelte-loader`](https://github.com/sveltejs/svelte-loader).
 
 ```js
-const cssModules = require('svelte-preprocess-cssmodules');
+const { cssModules } = require('svelte-preprocess-cssmodules');
 
 module.exports = {
   ...
@@ -799,7 +799,7 @@ in order to work.
 ```js
 // svelte.config.js
 
-import cssModules from 'svelte-preprocess-cssmodules';
+import { cssModules } from 'svelte-preprocess-cssmodules';
 
 const config = {
   ...
@@ -818,8 +818,8 @@ Svelte is running the preprocessors by phases, going through all *markup* first,
 The CSS Modules preprocessor is doing all its work on the markup phase via `svelte.parse()` which requires the compoment to be a valid standard svelte component (using vanilla js and vanilla css). if any other code (such as typescript or sass) is encountered, an error will be thrown. 
 
 ```js
-const { typescript, scss } = require('svelte-preprocess');
-const { cssModules } = require('svelte-preprocess-cssmodules');
+import { typescript, scss } from 'svelte-preprocess';
+import { cssModules } from 'svelte-preprocess-cssmodules';
 
 ...
 // svelte config:  NOT working!
@@ -834,8 +834,8 @@ const { cssModules } = require('svelte-preprocess-cssmodules');
 As it is extremely common for developers to use `svelte-preprocess` in their application, CSS Modules provides a small utility to easily be incorporated with. `linearPreprocess` will ensure a linear process with the list of preprocessors.
 
 ```js
-const { typescript, scss } = require('svelte-preprocess');
-const { cssModules, linearPreprocess } = require('svelte-preprocess-cssmodules');
+import { typescript, scss } from 'svelte-preprocess';
+import { cssModules, linearPreprocess } from 'svelte-preprocess-cssmodules';
 
 ...
 // svelte config: OK, processing one after another!

example/webpack/webpack.config.js

@@ -1,5 +1,5 @@
 const path = require('path');
-const cssModules = require('../../');
+const { cssModules } = require('../../');
 
 const isProduction = process.env.NODE_ENV === 'production';
 

src/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-multi-assign */
 import { parse, preprocess } from 'svelte/compiler';
 import type { Ast } from 'svelte/types/compiler/interfaces.d';
 import type {
@@ -106,7 +107,7 @@ const markup: MarkupPreprocessor = async ({ content, filename }) => {
  * @param options
  * @returns the css modules preprocessors
  */
-export const cssModules = (options: Partial<PluginOptions>): PreprocessorGroup => {
+const cssModulesPreprocessor = (options: Partial<PluginOptions>): PreprocessorGroup => {
   pluginOptions = {
     ...defaultOptions(),
     ...options,
@@ -126,7 +127,7 @@ export const cssModules = (options: Partial<PluginOptions>): PreprocessorGroup =
  * @param preprocessors list of preprocessors
  * @returns group of `markup` preprocessors
  */
-export const linearPreprocess = (preprocessors: PreprocessorGroup[]): PreprocessorGroup[] => {
+const linearPreprocessor = (preprocessors: PreprocessorGroup[]): PreprocessorGroup[] => {
   return preprocessors.map((p) => {
     return !p.script && !p.style
       ? p
@@ -138,4 +139,12 @@ export const linearPreprocess = (preprocessors: PreprocessorGroup[]): Preprocess
   });
 };
 
-export default module.exports = cssModules;
+// export default cssModulesPreprocessor;
+export default exports = module.exports = cssModulesPreprocessor;
+export const cssModules = cssModulesPreprocessor;
+export const linearPreprocess = linearPreprocessor;
+
+// const cssModulesPreprocessor: any = module.exports = cssModules;
+// cssModulesPreprocessor.cssModules = cssModules;
+// cssModulesPreprocessor.linearPreprocess = linearPreprocess;
+// export default module.exports = cssModules;

tasks/parser.mjs

@@ -35,12 +35,21 @@ const parseDir = (dir) => {
                   }
                 } else if (
                   node.type === 'ExportDefaultDeclaration'
-                  && node.declaration?.left?.type === 'MemberExpression'
-                  && node.declaration.left.object.name === 'module'
-                  && node.declaration.left.property.name === 'exports'
+                  && node.declaration.type === 'AssignmentExpression'
+                  && node.declaration.right.type === 'AssignmentExpression'
+                  && node.declaration.right.left.object.name === 'module'
+                  && node.declaration.right.left.property.name === 'exports'
                 ) {
-                  magicContent.remove(node.declaration.left.start, node.declaration.right.start);
+                  magicContent.remove(node.declaration.left.start, node.declaration.right.right.start);
                 }
+                // } else if (
+                //   node.type === 'ExportDefaultDeclaration'
+                //   && node.declaration?.left?.type === 'MemberExpression'
+                //   && node.declaration.left.object.name === 'module'
+                //   && node.declaration.left.property.name === 'exports'
+                // ) {
+                //   magicContent.remove(node.declaration.left.start, node.declaration.right.start);
+                // }
               }
             });
             const mjsPathname = pathname.replace('/esm', '').replace('.js', '.mjs');