diff --git a/packages/transformers/css/package.json b/packages/transformers/css/package.json index 9bc2b752aeb..2a4c8aa2186 100644 --- a/packages/transformers/css/package.json +++ b/packages/transformers/css/package.json @@ -26,8 +26,10 @@ "@parcel/utils": "^2.2.1", "nullthrows": "^1.1.1", "postcss": "^8.4.5", - "postcss-modules": "^4.3.0", "postcss-value-parser": "^4.2.0", "semver": "^5.7.1" + }, + "devDependencies": { + "postcss-modules": "^4.3.0" } } diff --git a/packages/transformers/css/src/CSSTransformer.js b/packages/transformers/css/src/CSSTransformer.js index 9ce5e67a600..8aff146b660 100644 --- a/packages/transformers/css/src/CSSTransformer.js +++ b/packages/transformers/css/src/CSSTransformer.js @@ -1,7 +1,7 @@ // @flow import type {Root} from 'postcss'; -import type {FilePath, MutableAsset} from '@parcel/types'; +import type {FilePath, MutableAsset, PluginOptions} from '@parcel/types'; import {hashString} from '@parcel/hash'; import SourceMap from '@parcel/source-map'; @@ -10,8 +10,6 @@ import {createDependencyLocation, remapSourceLocation} from '@parcel/utils'; import postcss from 'postcss'; import nullthrows from 'nullthrows'; import valueParser from 'postcss-value-parser'; -import postcssModules from 'postcss-modules'; -import FileSystemLoader from 'postcss-modules/build/css-loader-core/loader'; import semver from 'semver'; import path from 'path'; @@ -274,10 +272,20 @@ async function compileCSSModules(asset, env, program, resolve, options) { }); } + let postcssModules = await options.packageManager.require( + 'postcss-modules', + asset.filePath, + { + range: '^4.3.0', + saveDev: true, + shouldAutoInstall: options.shouldAutoInstall, + }, + ); + let {root} = await postcss([ postcssModules({ getJSON: (filename, json) => (cssModules = json), - Loader: createLoader(asset, resolve), + Loader: await createLoader(asset, resolve, options), generateScopedName: (name, filename) => `${name}_${hashString( path.relative(options.projectRoot, filename), @@ -329,10 +337,15 @@ async function compileCSSModules(asset, env, program, resolve, options) { return assets; } -function createLoader( +async function createLoader( asset: MutableAsset, resolve: (from: FilePath, to: string) => Promise, + options: PluginOptions, ) { + let {default: FileSystemLoader} = await options.packageManager.require( + 'postcss-modules/build/css-loader-core/loader', + asset.filePath, + ); return class ParcelFileSystemLoader extends FileSystemLoader { async fetch(composesPath, relativeTo) { let importPath = composesPath.replace(/^["']|["']$/g, '');