@compiled/webpack-loader 0.7.2 → 0.8.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@compiled/webpack-loader",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
-  "homepage": "https://compiledcssinjs.com",
+  "homepage": "https://compiledcssinjs.com/docs/pkg-webpack-loader",
   "bugs": "https://github.com/atlassian-labs/compiled/issues/new?assignees=&labels=bug&template=bug_report.md",
   "repository": {
     "type": "git",
@@ -17,15 +17,15 @@
   "files": [
     "css-loader",
     "dist",
-    "src",
-    "README.md"
+    "src"
   ],
   "dependencies": {
-    "@babel/core": "^7.16.0",
-    "@compiled/babel-plugin": "^0.11.0",
-    "@compiled/babel-plugin-strip-runtime": "^0.6.13",
-    "@compiled/css": "^0.7.0",
-    "@compiled/utils": "^0.6.11",
+    "@babel/core": "^7.16.7",
+    "@compiled/babel-plugin": "^0.12.0",
+    "@compiled/babel-plugin-strip-runtime": "^0.11.4",
+    "@compiled/css": "^0.8.1",
+    "@compiled/react": "0.10.2",
+    "@compiled/utils": "^0.6.14",
     "enhanced-resolve": "^5.8.3",
     "loader-utils": "^2.0.2",
     "webpack-sources": "^1.4.3"
@@ -33,9 +33,12 @@
   "devDependencies": {
     "babel-loader": "^8.2.3",
     "css-loader": "^5.2.7",
-    "memfs": "^3.2.4",
-    "mini-css-extract-plugin": "^1.5.0",
-    "webpack": "^5.61.0"
+    "memfs": "^3.4.1",
+    "mini-css-extract-plugin": "^1.6.2",
+    "react": "^17.0.2",
+    "ts-node": "^10.4.0",
+    "tsconfig-paths": "^3.12.0",
+    "webpack": "^5.66.0"
   },
   "peerDependencies": {
     "webpack": ">= 4.46.0"

package/src/__fixtures__/babel.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import BabelCJS from './lib/babel-cjs';
 import BabelESM from './lib/babel-esm';
 

package/src/__fixtures__/binding-not-found.tsx

@@ -1,5 +1,6 @@
+/** @jsx jsx */
+import { jsx, styled } from '@compiled/react';
 import React from 'react';
-import { styled } from '@compiled/react';
 
 const height = '9rem';
 

package/src/__fixtures__/common/css-prop.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
-import '@compiled/react';
+/** @jsx jsx */
+import { jsx } from '@compiled/react';
+
 import { coral } from './colors';
 
 export const Coral = (): JSX.Element => (

package/src/__fixtures__/compiled-error.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { css } from '@compiled/react';
+/** @jsx jsx */
+import { jsx, css } from '@compiled/react';
 
 // @ts-expect-error
 const styles = css(false);

package/src/__fixtures__/important-styles.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import '@compiled/react';
+/** @jsx jsx */
+import { jsx } from '@compiled/react';
 
 const Component = (): JSX.Element => <div css={{ fontSize: '12!important', color: 'blue' }} />;
 

package/src/__fixtures__/lib/babel-cjs.d.ts

@@ -0,0 +1,3 @@
+declare const Component: () => JSX.Element;
+
+export default Component;

package/src/__fixtures__/lib/babel-esm.d.ts

@@ -0,0 +1,3 @@
+declare const Component: () => JSX.Element;
+
+export default Component;

package/src/__fixtures__/loader-alias.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-// @ts-expect-error
-import { styles } from 'loader-alias';
+/** @jsx jsx */
 // @ts-ignore This is a bug where the meta is not updated for the new file import
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { css } from '@compiled/react';
+import { jsx, css } from '@compiled/react';
+// @ts-expect-error
+import { styles } from 'loader-alias';
 
 export const App = (): JSX.Element => <div css={styles} />;

package/src/__fixtures__/local-styles.tsx

@@ -1,13 +1,14 @@
-import React from 'react';
-import { styled } from '@compiled/react';
+/** @jsx jsx */
+import { jsx, styled } from '@compiled/react';
+import { Fragment } from 'react';
 
 const Styled = styled.div({
   color: 'blue',
 });
 
 export const App = (): JSX.Element => (
-  <>
+  <Fragment>
     <div css={{ fontSize: 14 }} />
     <Styled />
-  </>
+  </Fragment>
 );

package/src/__fixtures__/relative-styles.tsx

@@ -1,5 +1,7 @@
-import React from 'react';
-import { css, styled } from '@compiled/react';
+/** @jsx jsx */
+import { jsx, css, styled } from '@compiled/react';
+import { Fragment } from 'react';
+
 import { blueviolet, blue, orange, purple, red, yellow } from './common/colors';
 // @ts-expect-error ↓↓↓ This should not have their styles extracted ↓↓↓
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -30,8 +32,8 @@ const styles = css`
 `;
 
 export const App = (): JSX.Element => (
-  <>
+  <Fragment>
     <div css={styles} />
     <Styled />
-  </>
+  </Fragment>
 );

package/src/__fixtures__/webpack-alias.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-// @ts-expect-error
-import { styles } from 'webpack-alias';
+/** @jsx jsx */
 // @ts-expect-error This is a bug where the meta is not updated for the new file import
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { css } from '@compiled/react';
+import { jsx, css } from '@compiled/react';
+// @ts-expect-error
+import { styles } from 'webpack-alias';
 
 export const App = (): JSX.Element => <div css={styles} />;

package/src/__tests__/compiled-loader.test.tsx

@@ -1,4 +1,5 @@
 import { join } from 'path';
+
 import { bundle as bundleEntry } from './test-utils';
 import type { BundleOptions } from './test-utils';
 

package/src/__tests__/extract-plugin.test.tsx

@@ -1,4 +1,5 @@
 import { join } from 'path';
+
 import { bundle as bundleEntry } from './test-utils';
 import type { BundleOptions } from './test-utils';
 
@@ -23,7 +24,7 @@ describe('CompiledExtractPlugin', () => {
         message: expect.stringContaining("You forgot to add the 'CompiledExtractPlugin' plugin"),
       }),
     ]);
-  });
+  }, 10000);
 
   it('extracts local styles', async () => {
     const actual = await bundle(join(fixturesPath, 'local-styles.tsx'));
@@ -33,7 +34,7 @@ describe('CompiledExtractPlugin', () => {
       ._syaz13q2{color:blue}
       "
     `);
-  });
+  }, 10000);
 
   it('extracts styles imported through a relative path', async () => {
     const actual = await bundle(join(fixturesPath, 'relative-styles.tsx'));
@@ -49,7 +50,7 @@ describe('CompiledExtractPlugin', () => {
       ._30l313q2:hover{color:blue}
       "
     `);
-  });
+  }, 10000);
 
   it('extracts styles imported through a webpack alias', async () => {
     const assets = await bundle(join(fixturesPath, 'webpack-alias.tsx'));
@@ -58,7 +59,7 @@ describe('CompiledExtractPlugin', () => {
       "._syaz13q2{color:blue}
       "
     `);
-  });
+  }, 10000);
 
   it('extracts styles imported through an overridden resolve configuration', async () => {
     const assets = await bundle(join(fixturesPath, 'loader-alias.tsx'), {
@@ -74,20 +75,14 @@ describe('CompiledExtractPlugin', () => {
       "._syaz1if8{color:indigo}
       "
     `);
-  });
+  }, 10000);
 
   it('extracts styles from an async chunk', async () => {
     const actual = await bundle(join(fixturesPath, 'async-styles.ts'));
 
     // Only generate one CSS bundle
-    expect(Object.keys(actual)).toMatchInlineSnapshot(`
-      Array [
-        "main.js",
-        "377.js",
-        "static/compiled-css.css",
-        "377.js.LICENSE.txt",
-      ]
-    `);
+    const cssFiles = Object.keys(actual).filter((key) => key.endsWith('.css'));
+    expect(cssFiles).toHaveLength(1);
 
     // Extract the styles into said bundle
     expect(actual[assetName]).toMatchInlineSnapshot(`
@@ -95,7 +90,7 @@ describe('CompiledExtractPlugin', () => {
       ._syaz1vyr{color:coral}
       "
     `);
-  });
+  }, 10000);
 
   it('extracts styles from a pre-built babel files', async () => {
     const actual = await bundle(join(fixturesPath, 'babel.tsx'));
@@ -111,7 +106,7 @@ describe('CompiledExtractPlugin', () => {
       ._syaz13q2{color:blue}
       "
     `);
-  });
+  }, 10000);
 
   it('extracts important styles', async () => {
     const actual = await bundle(join(fixturesPath, 'important-styles.tsx'));
@@ -121,7 +116,7 @@ describe('CompiledExtractPlugin', () => {
         ._1wybc038{font-size:12!important}
         "
       `);
-  });
+  }, 10000);
 
   it('should find bindings', async () => {
     const actual = await bundle(join(fixturesPath, 'binding-not-found.tsx'));
@@ -152,5 +147,5 @@ describe('CompiledExtractPlugin', () => {
       ._4t3i1jdh{height:9rem}
       "
     `);
-  });
+  }, 10000);
 });

package/src/__tests__/test-utils.tsx

@@ -1,6 +1,7 @@
-import { createFsFromVolume, Volume } from 'memfs';
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { join } from 'path';
+
+import { Volume, createFsFromVolume } from 'memfs';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import webpack from 'webpack';
 
 import { CompiledExtractPlugin } from '../index';

package/src/compiled-loader.tsx

@@ -1,9 +1,10 @@
-import { transformFromAstAsync, parseAsync } from '@babel/core';
-import { toBoolean, createError } from '@compiled/utils';
-import { CachedInputFileSystem, ResolverFactory } from 'enhanced-resolve';
 import fs from 'fs';
-import { getOptions } from 'loader-utils';
 import { dirname, normalize } from 'path';
+
+import { parseAsync, transformFromAstAsync } from '@babel/core';
+import { createError, toBoolean } from '@compiled/utils';
+import { CachedInputFileSystem, ResolverFactory } from 'enhanced-resolve';
+import { getOptions } from 'loader-utils';
 import type { LoaderContext } from 'webpack';
 
 import { pluginName } from './extract-plugin';
@@ -25,6 +26,8 @@ function getLoaderOptions(context: LoaderContext<CompiledLoaderOptions>) {
     importReact = undefined,
     nonce = undefined,
     resolve = {},
+    extensions = undefined,
+    babelPlugins = [],
   }: CompiledLoaderOptions = typeof context.getOptions === 'undefined'
     ? // Webpack v4 flow
       getOptions(context)
@@ -47,6 +50,12 @@ function getLoaderOptions(context: LoaderContext<CompiledLoaderOptions>) {
           resolve: {
             type: 'object',
           },
+          extensions: {
+            type: 'array',
+          },
+          babelPlugins: {
+            type: 'array',
+          },
         },
       });
 
@@ -56,6 +65,8 @@ function getLoaderOptions(context: LoaderContext<CompiledLoaderOptions>) {
     importReact,
     nonce,
     resolve,
+    extensions,
+    babelPlugins,
   };
 }
 
@@ -150,7 +161,8 @@ export default async function compiledLoader(
     }
 
     callback(null, output, result?.map ?? undefined);
-  } catch (e) {
+  } catch (e: unknown) {
+    // @ts-expect-error Not checking for error type
     const error = createError('compiled-loader', 'Unhandled exception')(e.stack);
     callback(error);
   }

package/src/css-loader.tsx

@@ -1,4 +1,5 @@
 import { URLSearchParams } from 'url';
+
 import type { LoaderContext } from 'webpack';
 
 /**
@@ -14,10 +15,13 @@ export default function CSSLoader(this: LoaderContext<void>): string {
  * Moves CSSloader to the end of the loader queue so it runs first.
  */
 export function pitch(this: LoaderContext<void>): void {
-  if (this.loaders[0].path !== __filename) {
+  if (this.loaders[0].pitch !== pitch) {
+    // If the first loader isn't this one - skip.
     return;
   }
 
+  // The first loader is Compiled's css-loader - we need to shift
+  // it to be at the end of the loader chain so it runs first (instead of last).
   const firstLoader = this.loaders.shift();
   this.loaders.push(firstLoader!);
 }

package/src/extract-plugin.tsx

@@ -1,6 +1,7 @@
 import { sort } from '@compiled/css';
-import { toBoolean, createError } from '@compiled/utils';
-import type { Compiler, Compilation } from 'webpack';
+import { createError, toBoolean } from '@compiled/utils';
+import type { Compilation, Compiler } from 'webpack';
+
 import type { CompiledExtractPluginOptions } from './types';
 import {
   getAssetSourceContents,

package/src/types.tsx

@@ -1,3 +1,4 @@
+import type { ParserPlugin } from '@babel/parser';
 import type { ResolveOptions, RuleSetCondition } from 'webpack';
 
 export type { ResolveOptions };
@@ -31,6 +32,16 @@ export interface CompiledLoaderOptions {
    * Override the default `resolve` passed into webpack, which is used to statically evaluate import declarations
    */
   resolve?: ResolveOptions;
+
+  /**
+   * List of file extensions to traverse as code
+   */
+  extensions?: string[];
+
+  /**
+   * List of babel plugins to be applied to evaluated files
+   */
+  babelPlugins?: ParserPlugin[];
 }
 
 export interface CompiledExtractPluginOptions {

package/src/utils.tsx

@@ -1,4 +1,4 @@
-import type { Compiler, Compilation as CompilationType, sources } from 'webpack';
+import type { Compilation as CompilationType, Compiler, sources } from 'webpack';
 
 /**
  * Gets the normal module hook for webpack 4 & webpack 5.

package/CHANGELOG.md

@@ -1,127 +0,0 @@
-# @compiled/webpack-loader
-
-## 0.7.2
-
-### Patch Changes
-
-- Updated dependencies [e015a3a]
-- Updated dependencies [fa6af90]
-  - @compiled/babel-plugin@0.11.0
-
-## 0.7.1
-
-### Patch Changes
-
-- Updated dependencies [b68411c]
-- Updated dependencies [53a3d71]
-  - @compiled/babel-plugin@0.10.0
-
-## 0.7.0
-
-### Minor Changes
-
-- 0b60ae1: Use webpack resolution and add custom `resolve` override
-
-### Patch Changes
-
-- Updated dependencies [0b60ae1]
-- Updated dependencies [2092839]
-  - @compiled/babel-plugin@0.9.0
-
-## 0.6.17
-
-### Patch Changes
-
-- Updated dependencies [53935b3]
-  - @compiled/babel-plugin@0.8.0
-
-## 0.6.16
-
-### Patch Changes
-
-- Updated dependencies [bcb2a68]
-- Updated dependencies [a7ab8e1]
-- Updated dependencies [e1dc346]
-- Updated dependencies [bcb2a68]
-- Updated dependencies [48805ec]
-- Updated dependencies [587e729]
-  - @compiled/babel-plugin@0.7.0
-  - @compiled/css@0.7.0
-
-## 0.6.15
-
-### Patch Changes
-
-- 40bc0d9: Package descriptions have been updated.
-- Updated dependencies [40bc0d9]
-- Updated dependencies [1b1c964]
-- Updated dependencies [1b1c964]
-  - @compiled/babel-plugin@0.6.13
-  - @compiled/babel-plugin-strip-runtime@0.6.13
-  - @compiled/css@0.6.11
-  - @compiled/utils@0.6.11
-
-## 0.6.14
-
-### Patch Changes
-
-- ad512ec: Fixed extraction when `!important` styles were found.
-
-## 0.6.13
-
-### Patch Changes
-
-- 6a7261e: Programmatic babel use now searches upwards for a project root, and if found will use that config. This fixes issues in some monorepo setups.
-- 8a13ee9: The loader now only errors once when running without the webpack extract plugin.
-- Updated dependencies [b92eb6d]
-  - @compiled/babel-plugin-strip-runtime@0.6.11
-
-## 0.6.12
-
-### Patch Changes
-
-- 4032cd4: The `importReact` option now correctly defaults to `true`.
-
-## 0.6.11
-
-### Patch Changes
-
-- 37108e4: Fixed webpack 4 flow throwing unexpectedly.
-- 37108e4: Added missing babel dependency.
-- 37108e4: Fixed css loader entrypoint not making its way to npm.
-- 37108e4: Compiled dependencies are now using carat range.
-- 37108e4: Fixed bug picking up an unexpected asset during webpack compilation.
-- Updated dependencies [992e401]
-- Updated dependencies [37108e4]
-  - @compiled/utils@0.6.10
-  - @compiled/babel-plugin@0.6.10
-  - @compiled/css@0.6.10
-
-## 0.6.10
-
-### Patch Changes
-
-- 660309a: Support for webpack 4 has been added, follow the [extraction guide](https://compiledcssinjs.com/docs/css-extraction-webpack) to get started.
-
-## 0.6.9
-
-### Patch Changes
-
-- 0bb1c11: Added new option `extract` with pairing webpack plugin `CompiledExtractPlugin`.
-  Configuring them will strip all the runtime from your app and extract all styles to an atomic style sheet.
-
-  For help getting started with this feature read the [CSS extraction guide](https://compiledcssinjs.com/docs/css-extraction-webpack) for webpack.
-
-- Updated dependencies [0bb1c11]
-- Updated dependencies [0bb1c11]
-  - @compiled/css@0.6.9
-  - @compiled/utils@0.6.9
-  - @compiled/babel-plugin@0.6.9
-
-## 0.6.8
-
-### Patch Changes
-
-- aea3504: Packages now released with [changesets](https://github.com/atlassian/changesets).
-- Updated dependencies [aea3504]
-  - @compiled/babel-plugin@0.6.8

package/dist/__fixtures__/lib/babel-cjs.d.ts

@@ -1,3 +0,0 @@
-export var __esModule: boolean;
-export default BabelComponent;
-declare function BabelComponent(_ref2: any): any;

package/dist/__fixtures__/lib/babel-cjs.js

@@ -1,129 +0,0 @@
-/* index.js generated by @compiled/babel-plugin v0.6.7 */
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-    value: true,
-});
-exports.default = BabelComponent;
-var _react = require('react');
-var _runtime = require('@compiled/react/runtime');
-var _jsxRuntime = require('react/jsx-runtime');
-var _8 = '._19pk1ul9{margin-top:30px}';
-function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        if (enumerableOnly)
-            symbols = symbols.filter(function (sym) {
-                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-            });
-        keys.push.apply(keys, symbols);
-    }
-    return keys;
-}
-function _objectSpread(target) {
-    for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i] != null ? arguments[i] : {};
-        if (i % 2) {
-            ownKeys(Object(source), true).forEach(function (key) {
-                _defineProperty(target, key, source[key]);
-            });
-        }
-        else if (Object.getOwnPropertyDescriptors) {
-            Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-        }
-        else {
-            ownKeys(Object(source)).forEach(function (key) {
-                Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-            });
-        }
-    }
-    return target;
-}
-function _defineProperty(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true,
-        });
-    }
-    else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _objectWithoutProperties(source, excluded) {
-    if (source == null)
-        return {};
-    var target = _objectWithoutPropertiesLoose(source, excluded);
-    var key, i;
-    if (Object.getOwnPropertySymbols) {
-        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-        for (i = 0; i < sourceSymbolKeys.length; i++) {
-            key = sourceSymbolKeys[i];
-            if (excluded.indexOf(key) >= 0)
-                continue;
-            if (!Object.prototype.propertyIsEnumerable.call(source, key))
-                continue;
-            target[key] = source[key];
-        }
-    }
-    return target;
-}
-function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null)
-        return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
-    for (i = 0; i < sourceKeys.length; i++) {
-        key = sourceKeys[i];
-        if (excluded.indexOf(key) >= 0)
-            continue;
-        target[key] = source[key];
-    }
-    return target;
-}
-var _7 = '._19bvftgi{padding-left:8px}';
-var _6 = '._n3tdftgi{padding-bottom:8px}';
-var _5 = '._u5f3ftgi{padding-right:8px}';
-var _4 = '._ca0qftgi{padding-top:8px}';
-var _3 = '._19itlf8h{border:2px solid blue}';
-var _2 = '._1wyb1ul9{font-size:30px}';
-var _ = '._syaz13q2{color:blue}';
-var Button = (0, _react.forwardRef)(function (_ref, ref) {
-    var _ref$as = _ref.as, C = _ref$as === void 0 ? 'button' : _ref$as, style = _ref.style, props = _objectWithoutProperties(_ref, ['as', 'style']);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_runtime.CC, {
-        children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_runtime.CS, {
-                children: [_, _2, _3, _4, _5, _6, _7],
-            }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(C, _objectSpread(_objectSpread({}, props), {}, {
-                style: style,
-                ref: ref,
-                className: (0, _runtime.ax)([
-                    '_syaz13q2 _1wyb1ul9 _19itlf8h _ca0qftgi _u5f3ftgi _n3tdftgi _19bvftgi',
-                    props.className,
-                ]),
-            })),
-        ],
-    });
-});
-function BabelComponent(_ref2) {
-    var children = _ref2.children;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_runtime.CC, {
-        children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_runtime.CS, {
-                children: [_8],
-            }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)('div', {
-                className: (0, _runtime.ax)(['_19pk1ul9']),
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(Button, {
-                    children: children,
-                }),
-            }),
-        ],
-    });
-}
-//# sourceMappingURL=babel-cjs.js.map