@compiled/webpack-loader 0.9.0 → 0.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/extract-plugin.js
CHANGED
|
@@ -28,7 +28,7 @@ exports.styleSheetName = 'compiled-css';
|
|
|
28
28
|
const getCSSAssets = (assets) => {
|
|
29
29
|
return Object.keys(assets)
|
|
30
30
|
.filter((assetName) => {
|
|
31
|
-
return assetName.
|
|
31
|
+
return assetName.includes(exports.styleSheetName) && assetName.endsWith('.css');
|
|
32
32
|
})
|
|
33
33
|
.map((assetName) => ({ name: assetName, source: assets[assetName], info: {} }));
|
|
34
34
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"extract-plugin.js","sourceRoot":"","sources":["../src/extract-plugin.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,uCAAqC;AACrC,2CAAyD;AAIzD,mCAKiB;AAEJ,QAAA,UAAU,GAAG,uBAAuB,CAAC;AACrC,QAAA,cAAc,GAAG,cAAc,CAAC;AAE7C;;;;;;GAMG;AACH,MAAM,YAAY,GAAG,CAAC,MAA6B,EAAE,EAAE;IACrD,OAAO,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC;SACvB,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE;QACpB,OAAO,SAAS,CAAC,QAAQ,CAAC,
|
|
1
|
+
{"version":3,"file":"extract-plugin.js","sourceRoot":"","sources":["../src/extract-plugin.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@compiled/webpack-loader",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.1",
|
|
4
4
|
"description": "A familiar and performant compile time CSS-in-JS library for React.",
|
|
5
5
|
"homepage": "https://compiledcssinjs.com/docs/pkg-webpack-loader",
|
|
6
6
|
"bugs": "https://github.com/atlassian-labs/compiled/issues/new?assignees=&labels=bug&template=bug_report.md",
|
|
@@ -26,17 +26,17 @@
|
|
|
26
26
|
"@compiled/css": "^0.8.3",
|
|
27
27
|
"@compiled/react": "0.11.0",
|
|
28
28
|
"@compiled/utils": "^0.6.16",
|
|
29
|
-
"enhanced-resolve": "^5.
|
|
29
|
+
"enhanced-resolve": "^5.10.0",
|
|
30
30
|
"loader-utils": "^2.0.2",
|
|
31
31
|
"webpack-sources": "^3.2.3"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
34
|
"babel-loader": "^8.2.4",
|
|
35
35
|
"css-loader": "^6.7.1",
|
|
36
|
-
"memfs": "^3.4.
|
|
36
|
+
"memfs": "^3.4.7",
|
|
37
37
|
"mini-css-extract-plugin": "^1.6.2",
|
|
38
38
|
"react": "^17.0.2",
|
|
39
|
-
"ts-node": "^10.
|
|
39
|
+
"ts-node": "^10.8.2",
|
|
40
40
|
"tsconfig-paths": "^3.14.1",
|
|
41
41
|
"webpack": "^5.71.0"
|
|
42
42
|
},
|
|
@@ -4,7 +4,6 @@ import { bundle as bundleEntry } from './test-utils';
|
|
|
4
4
|
import type { BundleOptions } from './test-utils';
|
|
5
5
|
|
|
6
6
|
describe('CompiledExtractPlugin', () => {
|
|
7
|
-
const assetName = 'static/compiled-css.css';
|
|
8
7
|
const fixturesPath = join(__dirname, '..', '__fixtures__');
|
|
9
8
|
|
|
10
9
|
const bundle = (entry: string, options: Omit<BundleOptions, 'mode'> = {}) =>
|
|
@@ -12,6 +11,13 @@ describe('CompiledExtractPlugin', () => {
|
|
|
12
11
|
...options,
|
|
13
12
|
extract: true,
|
|
14
13
|
mode: 'production',
|
|
14
|
+
}).then((assets) => {
|
|
15
|
+
for (const assetName in assets) {
|
|
16
|
+
if (assetName.includes('compiled-css') && assetName.endsWith('.css')) {
|
|
17
|
+
return assets[assetName];
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
return undefined;
|
|
15
21
|
});
|
|
16
22
|
|
|
17
23
|
it('throws when the plugin is not configured', async () => {
|
|
@@ -31,13 +37,13 @@ describe('CompiledExtractPlugin', () => {
|
|
|
31
37
|
disableCacheGroup: true,
|
|
32
38
|
});
|
|
33
39
|
|
|
34
|
-
expect(actual
|
|
40
|
+
expect(actual).toBe(undefined);
|
|
35
41
|
}, 10000);
|
|
36
42
|
|
|
37
43
|
it('extracts local styles', async () => {
|
|
38
44
|
const actual = await bundle(join(fixturesPath, 'local-styles.tsx'));
|
|
39
45
|
|
|
40
|
-
expect(actual
|
|
46
|
+
expect(actual).toMatchInlineSnapshot(`
|
|
41
47
|
"._1wybdlk8{font-size:14px}
|
|
42
48
|
._syaz13q2{color:blue}
|
|
43
49
|
"
|
|
@@ -49,7 +55,7 @@ describe('CompiledExtractPlugin', () => {
|
|
|
49
55
|
|
|
50
56
|
// This should not contain any styles from the unused relative import ./common/css-prop, which includes
|
|
51
57
|
// {color:coral} or {border:2px solid coral}
|
|
52
|
-
expect(actual
|
|
58
|
+
expect(actual).toMatchInlineSnapshot(`
|
|
53
59
|
"
|
|
54
60
|
._syaz5scu{color:red}
|
|
55
61
|
._syazmu8g{color:blueviolet}
|
|
@@ -63,7 +69,7 @@ describe('CompiledExtractPlugin', () => {
|
|
|
63
69
|
it('extracts styles imported through a webpack alias', async () => {
|
|
64
70
|
const assets = await bundle(join(fixturesPath, 'webpack-alias.tsx'));
|
|
65
71
|
|
|
66
|
-
expect(assets
|
|
72
|
+
expect(assets).toMatchInlineSnapshot(`
|
|
67
73
|
"._syaz13q2{color:blue}
|
|
68
74
|
"
|
|
69
75
|
`);
|
|
@@ -79,21 +85,24 @@ describe('CompiledExtractPlugin', () => {
|
|
|
79
85
|
},
|
|
80
86
|
});
|
|
81
87
|
|
|
82
|
-
expect(assets
|
|
88
|
+
expect(assets).toMatchInlineSnapshot(`
|
|
83
89
|
"._syaz1if8{color:indigo}
|
|
84
90
|
"
|
|
85
91
|
`);
|
|
86
92
|
}, 10000);
|
|
87
93
|
|
|
88
94
|
it('extracts styles from an async chunk', async () => {
|
|
89
|
-
const
|
|
95
|
+
const assets = await bundleEntry(join(fixturesPath, 'async-styles.ts'), {
|
|
96
|
+
extract: true,
|
|
97
|
+
mode: 'production',
|
|
98
|
+
});
|
|
90
99
|
|
|
91
100
|
// Only generate one CSS bundle
|
|
92
|
-
const cssFiles = Object.keys(
|
|
101
|
+
const cssFiles = Object.keys(assets).filter((key) => key.endsWith('.css'));
|
|
93
102
|
expect(cssFiles).toHaveLength(1);
|
|
94
103
|
|
|
95
104
|
// Extract the styles into said bundle
|
|
96
|
-
expect(
|
|
105
|
+
expect(assets[cssFiles[0]]).toMatchInlineSnapshot(`
|
|
97
106
|
"._19it1e35{border:2px solid coral}
|
|
98
107
|
._syaz1vyr{color:coral}
|
|
99
108
|
"
|
|
@@ -103,7 +112,7 @@ describe('CompiledExtractPlugin', () => {
|
|
|
103
112
|
it('extracts styles from a pre-built babel files', async () => {
|
|
104
113
|
const actual = await bundle(join(fixturesPath, 'babel.tsx'));
|
|
105
114
|
|
|
106
|
-
expect(actual
|
|
115
|
+
expect(actual).toMatchInlineSnapshot(`
|
|
107
116
|
"._19pk1ul9{margin-top:30px}
|
|
108
117
|
._19bvftgi{padding-left:8px}
|
|
109
118
|
._n3tdftgi{padding-bottom:8px}
|
|
@@ -119,7 +128,7 @@ describe('CompiledExtractPlugin', () => {
|
|
|
119
128
|
it('extracts important styles', async () => {
|
|
120
129
|
const actual = await bundle(join(fixturesPath, 'important-styles.tsx'));
|
|
121
130
|
|
|
122
|
-
expect(actual
|
|
131
|
+
expect(actual).toMatchInlineSnapshot(`
|
|
123
132
|
"._syaz13q2{color:blue}
|
|
124
133
|
._1wybc038{font-size:12!important}
|
|
125
134
|
"
|
|
@@ -129,7 +138,7 @@ describe('CompiledExtractPlugin', () => {
|
|
|
129
138
|
it('should find bindings', async () => {
|
|
130
139
|
const actual = await bundle(join(fixturesPath, 'binding-not-found.tsx'));
|
|
131
140
|
|
|
132
|
-
expect(actual
|
|
141
|
+
expect(actual).toMatchInlineSnapshot(`
|
|
133
142
|
"._syaz1r31{color:currentColor}
|
|
134
143
|
._ajmmnqa1{-webkit-text-decoration-style:solid;text-decoration-style:solid}
|
|
135
144
|
._1hmsglyw{-webkit-text-decoration-line:none;text-decoration-line:none}
|
|
@@ -68,7 +68,7 @@ export function bundle(
|
|
|
68
68
|
path: outputPath,
|
|
69
69
|
},
|
|
70
70
|
plugins: [
|
|
71
|
-
new MiniCssExtractPlugin({ filename: 'static/[name].css' }),
|
|
71
|
+
new MiniCssExtractPlugin({ filename: 'static/[name].[contenthash].css' }),
|
|
72
72
|
...(disableExtractPlugin
|
|
73
73
|
? []
|
|
74
74
|
: [new CompiledExtractPlugin(disableCacheGroup ? { cacheGroupExclude: true } : {})]),
|
package/src/extract-plugin.ts
CHANGED
|
@@ -23,7 +23,7 @@ export const styleSheetName = 'compiled-css';
|
|
|
23
23
|
const getCSSAssets = (assets: Compilation['assets']) => {
|
|
24
24
|
return Object.keys(assets)
|
|
25
25
|
.filter((assetName) => {
|
|
26
|
-
return assetName.
|
|
26
|
+
return assetName.includes(styleSheetName) && assetName.endsWith('.css');
|
|
27
27
|
})
|
|
28
28
|
.map((assetName) => ({ name: assetName, source: assets[assetName], info: {} }));
|
|
29
29
|
};
|