fix: handle .cjs & .mjs extensions

[layershifter]

Motivation

Fixes #1177.

Summary

This PR adds .cjs & .mjs to the list of default ones, so Linaria will handle them and load them properly.

Before

  linaria:module:00001 [eval-cache] ❌ module:00002 is going to be initialized +0ms
  linaria:module:00002 [init] /private/var/folders/v4/l_41mr81261dpdvcdldkgdbh0000gn/T/nextjs-98284-78vGr91L2kUL/node_modules/@griffel/react/colors.cjs +1s
  linaria:module:00002 [evaluated] the whole exports was overridden with '/private/var/folders/v4/l_41mr81261dpdvcdldkgdbh0000gn/T/nextjs-98284-78vGr91L2kUL/node_modules/@griffel/react/colors.cjs' +0ms

After

  linaria:module:00001 [require] @griffel/react/colors.cjs -> /private/var/folders/v4/l_41mr81261dpdvcdldkgdbh0000gn/T/nextjs-98284-78vGr91L2kUL/node_modules/@griffel/react/colors.cjs +0ms
  linaria:module:00001 [eval-cache] ❌ module:00002 is going to be initialized +0ms
  linaria:module:00002 [init] /private/var/folders/v4/l_41mr81261dpdvcdldkgdbh0000gn/T/nextjs-98284-78vGr91L2kUL/node_modules/@griffel/react/colors.cjs +1s
  linaria:module:00002 [code-cache] ✅ +0ms
  linaria:module:00002 [evaluate:fragment-01] 
  linaria:module:00002 	module.exports = {
  linaria:module:00002 	  red: 'pink',
  linaria:module:00002 	} +1ms
  linaria:module:00002 [evaluated] the whole exports was overridden with { red: 'pink' } +0ms

Test plan

I didn't find a proper place to test it, it seems that module.test.ts is nearest, so I modified it.

[changeset-bot]

🦋 Changeset detected

Latest commit: 95f2598

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 15 packages

Name	Type
@linaria/babel-preset	Patch
@linaria/testkit	Patch
@linaria/cli	Patch
@linaria/esbuild	Patch
linaria	Patch
@linaria/rollup	Patch
@linaria/stylelint	Patch
@linaria/vite	Patch
@linaria/webpack4-loader	Patch
@linaria/webpack5-loader	Patch
esbuild-example	Patch
rollup-example	Patch
vite-example	Patch
vpssr-linaria-solid-example	Patch
@linaria/webpack-loader	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[layershifter]

rules are not used in Module, so I removed it and the evaluator() as it caused a false expectation that a required file will be evaluated.

[layershifter]

Hm... Getting an interesting failure now:

rollup-example:build: [!] (plugin linaria) SyntaxError: /Users/olfedias/WebstormProjects/linaria/packages/atomic/dist/index.mjs: Invalid usage of `styled` tag
rollup-example:build:   13 |   css_default as css,
rollup-example:build:   14 |   cx,
rollup-example:build: > 15 |   styled
rollup-example:build:      |   ^^^^^^
rollup-example:build:   16 | };
rollup-example:build:   17 | //# sourceMappingURL=index.mjs.map
rollup-example:build: ../../packages/atomic/dist/index.mjs

In code:

import { styled } from "@linaria/react";
import { cx } from "@linaria/core";
export {
  css_default as css,
  cx,
  styled
};

It seems that styled identifier triggers the problem, will look into it.

[layershifter]

Naive fix for the problem is to add a check to packages/babel/src/utils/processTemplateExpression.ts:

const processTemplateExpression = (
  p: NodePath<Identifier>,
  fileContext: IFileContext,
  options: Pick<
    StrictOptions,
    'classNameSlug' | 'displayName' | 'evaluate' | 'tagResolver'
  >,
  emit: (processor: BaseProcessor) => void
) => {
+ if (p.parentPath.isExportSpecifier()) return;
  if (processed.has(p.node)) return;

  const tagProcessor = getTagProcessor(p, fileContext, options);

I don't see any case when ImportSpecifier could be used in any way.