How to use icss-utils - 10 common examples

// Will strip `~` from imports, unless followed by a slash.
          data: css.replace(/(@import ['"])~(?!\/)/gm, '$1'),
          indentedSyntax: fileType === FileTypes.sass,
          includePaths: [filePath, 'node_modules', ...(includePaths || [])],
          ...sassOptions,
        })
        .css.toString();
    } else {
      transformedCss = css;
    }

    const processedCss = processor.process(transformedCss, {
      from: fileName,
    });

    return processedCss.root ? extractICSS(processedCss.root).icssExports : {};
  } catch (e) {
    console.log(e);
    logger.error(e);
    return {};
  }
};

module.exports = postcss.plugin(plugin, (options = {}) => (css, result) => {
  const { icssImports, icssExports } = extractICSS(css);
  const generateScopedName =
    options.generateScopedName ||
    genericNames("[name]__[local]---[hash:base64:5]");
  const input = (css && css.source && css.source.input) || {};
  const aliases = {};
  walkRules(css, rule => {
    const getAlias = name => {
      if (aliases[name]) {
        return aliases[name];
      }
      // icss-value contract
      const valueMsg = getValue(result.messages, name);
      if (valueMsg) {
        aliases[valueMsg.name] = name;
        return name;
      }

const addDefinition = atRule => {
      let matches;
      while ((matches = matchValueDefinition.exec(atRule.params))) {
        let [, /*match*/ key, value] = matches;
        // Add to the definitions, knowing that values can refer to each other
        definitions[key] = ICSSUtils.replaceValueSymbols(value, definitions);
        atRule.remove();
      }
    };

};
    try {
      rule.selector = localizeSelectors(
        rule.selector,
        options.mode === "global" ? "global" : "local",
        getAlias
      );
    } catch (e) {
      throw rule.error(e.message);
    }
  });
  result.messages.push(...getMessages(aliases));
  // contracts
  const composedExports = composeExports(result.messages);
  const exports = Object.assign({}, icssExports, composedExports);
  css.prepend(createICSSRules(icssImports, exports));
});

it well get picked up by the replacement stuff */
    const exportDeclarations = Object.keys(definitions).map(key =>
      postcss.decl({
        value: definitions[key],
        prop: key,
        raws: { before: '\n  ' }
      })
    );

    /* If we have no definitions, don't continue */
    if (!Object.keys(definitions).length) {
      return;
    }

    /* Perform replacements */
    ICSSUtils.replaceSymbols(css, definitions);

    /* Add export rules if any */
    if (exportDeclarations.length > 0) {
      const exportRule = postcss.rule({
        selector: ':export',
        raws: { after: '\n' }
      });
      exportRule.append(exportDeclarations);
      css.prepend(exportRule);
    }

    /* Add import rules */
    importAliases.reverse().forEach(({ path, imports }) => {
      const importRule = postcss.rule({
        selector: `:import(${path})`,
        raws: { after: '\n' }

return function(css) {
    const { icssImports } = extractICSS(css, false);
    const localAliasMap = getImportLocalAliases(icssImports);

    css.walkAtRules(function(atrule) {
      if (/keyframes$/i.test(atrule.name)) {
        const globalMatch = /^\s*:global\s*\((.+)\)\s*$/.exec(atrule.params);
        const localMatch = /^\s*:local\s*\((.+)\)\s*$/.exec(atrule.params);
        let globalKeyframes = globalMode;
        if (globalMatch) {
          if (pureMode) {
            throw atrule.error(
              '@keyframes :global(...) is not allowed in pure mode'
            );
          }
          atrule.params = globalMatch[1];
          globalKeyframes = true;
        } else if (localMatch) {

() => function process(css, result) {
    const { icssExports, icssImports } = extractICSS(css)

    if (Object.keys(icssImports).length) {
      console.log('Found imports, do we need to process them?')
      console.log(JSON.stringify(icssExports, null, 2))
    }

    Object.entries(icssExports).forEach(([key, value]) => {
      result.messages.push({
        plugin,
        type: 'export',
        item: { key, value },
      });
    });
  }
)

values.nodes[0].nodes.shift()
        var mediaQuery = Tokenizer.stringifyValues(values)

        if (isUrlRequest(url, options.root)) {
          url = loaderUtils.urlToRequest(url, options.root)
        }

        importItems.push({
          url: url,
          mediaQuery: mediaQuery
        })
        rule.remove()
      })
    }

    var icss = icssUtils.extractICSS(css)
    exports = icss.icssExports
    Object.keys(icss.icssImports).forEach(function (key) {
      var url = loaderUtils.parseString(key)
      Object.keys(icss.icssImports[key]).forEach(function (prop) {
        imports['$' + prop] = importItems.length
        importItems.push({
          url: url,
          export: icss.icssImports[key][prop]
        })
      })
    })

    Object.keys(exports).forEach(function (exportName) {
      exports[exportName] = replaceImportsInString(exports[exportName])
    })

module.exports = postcss.plugin(plugin, () => (css, result) => {
  const { icssImports, icssExports } = extractICSS(css);
  const valuesExports = {};
  const getAliasName = createGenerator();
  const addExports = (node, name, value) => {
    if (isForbidden(name)) {
      result.warn(`Dot and hash symbols are not allowed in value "${name}"`, {
        node
      });
    }
    if (valuesExports[name]) {
      result.warn(`"${name}" value already declared`, { node });
    }
    valuesExports[name] = replaceValueSymbols(value, valuesExports);
  };

  css.walkAtRules("value", atrule => {
    if (atrule.params.indexOf("@value") !== -1) {

return;
				}
				values.nodes[0].nodes.shift();
				var mediaQuery = Tokenizer.stringifyValues(values);
				if(loaderUtils.isUrlRequest(url, options.root) && options.mode === "global") {
					url = loaderUtils.urlToRequest(url, options.root);
				}
				importItems.push({
					url: url,
					mediaQuery: mediaQuery
				});
				rule.remove();
			});
		}

		var icss = icssUtils.extractICSS(css);
		exports = icss.icssExports;
		Object.keys(icss.icssImports).forEach(function(key) {
			var url = loaderUtils.parseString(key);
			Object.keys(icss.icssImports[key]).forEach(function(prop) {
				imports["$" + prop] = importItems.length;
				importItems.push({
					url: url,
					export: icss.icssImports[key][prop]
				});
			})
		});

		Object.keys(exports).forEach(function(exportName) {
			exports[exportName] = replaceImportsInString(exports[exportName]);
		});