index.js

/*
  MIT License http://www.opensource.org/licenses/mit-license.php
  Author Tobias Koppers @sokra
*/
import { getOptions, stringifyRequest } from 'loader-utils';
import postcss from 'postcss';
import postcssPkg from 'postcss/package.json';
import validateOptions from 'schema-utils';
import { satisfies } from 'semver';

import CssSyntaxError from './CssSyntaxError';
import Warning from './Warning';
import schema from './options.json';
import { icssParser, importParser, urlParser } from './plugins';
import {
  normalizeOptions,
  shouldUseModulesPlugins,
  shouldUseImportPlugin,
  shouldUseURLPlugin,
  getPreRequester,
  getExportCode,
  getFilter,
  getImportCode,
  getModuleCode,
  getModulesPlugins,
  normalizeSourceMap,
  sortImports,
} from './utils';

export default async function loader(content, map, meta) {
  const rawOptions = getOptions(this);

  validateOptions(schema, rawOptions, {
    name: 'CSS Loader',
    baseDataPath: 'options',
  });

  const plugins = [];
  const callback = this.async();

  let options;

  try {
    options = normalizeOptions(rawOptions, this);
  } catch (error) {
    callback(error);

    return;
  }

  const needUseModulesPlugins = shouldUseModulesPlugins(options);

  if (needUseModulesPlugins) {
    plugins.push(...getModulesPlugins(options, this));
  }

  if (shouldUseImportPlugin(options)) {
    const resolver = this.getResolve({
      mainFields: ['css', 'style', 'main', '...'],
      mainFiles: ['index', '...'],
      extensions: ['.css'],
      restrictions: [/\.css$/i],
      conditionNames: ['style'],
    });

    plugins.push(
      importParser({
        context: this.context,
        rootContext: this.rootContext,
        filter: getFilter(options.import, this.resourcePath),
        resolver,
        urlHandler: (url) =>
          stringifyRequest(
            this,
            getPreRequester(this)(options.importLoaders) + url
          ),
      })
    );
  }

  if (shouldUseURLPlugin(options)) {
    const urlResolver = this.getResolve({
      mainFields: ['asset'],
      conditionNames: ['asset'],
      extensions: [],
    });

    plugins.push(
      urlParser({
        context: this.context,
        rootContext: this.rootContext,
        filter: getFilter(options.url, this.resourcePath),
        resolver: urlResolver,
        urlHandler: (url) => stringifyRequest(this, url),
      })
    );
  }

  if (needUseModulesPlugins) {
    const icssResolver = this.getResolve({
      mainFields: ['css', 'style', 'main', '...'],
      mainFiles: ['index', '...'],
      extensions: [],
      conditionNames: ['style'],
    });

    plugins.push(
      icssParser({
        context: this.context,
        rootContext: this.rootContext,
        resolver: icssResolver,
        urlHandler: (url) =>
          stringifyRequest(
            this,
            getPreRequester(this)(options.importLoaders) + url
          ),
      })
    );
  }

  // Reuse CSS AST (PostCSS AST e.g 'postcss-loader') to avoid reparsing
  if (meta) {
    const { ast } = meta;

    if (
      ast &&
      ast.type === 'postcss' &&
      satisfies(ast.version, `^${postcssPkg.version}`)
    ) {
      // eslint-disable-next-line no-param-reassign
      content = ast.root;
    }
  }

  let result;

  try {
    result = await postcss(plugins).process(content, {
      from: this.resourcePath,
      to: this.resourcePath,
      map: options.sourceMap
        ? {
            // Some loaders (example `"postcss-loader": "1.x.x"`) always generates source map, we should remove it
            prev: map ? normalizeSourceMap(map) : null,
            inline: false,
            annotation: false,
          }
        : false,
    });
  } catch (error) {
    if (error.file) {
      this.addDependency(error.file);
    }

    callback(
      error.name === 'CssSyntaxError' ? new CssSyntaxError(error) : error
    );

    return;
  }

  for (const warning of result.warnings()) {
    this.emitWarning(new Warning(warning));
  }

  const imports = [];
  const apiImports = [];
  const replacements = [];
  const exports = [];

  for (const message of result.messages) {
    // eslint-disable-next-line default-case
    switch (message.type) {
      case 'import':
        imports.push(message.value);
        break;
      case 'api-import':
        apiImports.push(message.value);
        break;
      case 'replacement':
        replacements.push(message.value);
        break;
      case 'export':
        exports.push(message.value);
        break;
    }
  }

  imports.sort(sortImports);
  apiImports.sort(sortImports);

  const importCode = getImportCode(this, imports, options);
  const moduleCode = getModuleCode(result, apiImports, replacements, options);
  const exportCode = getExportCode(exports, replacements, options);

  callback(null, `${importCode}${moduleCode}${exportCode}`);
}