How to use babel-plugin-styled-components - 8 common examples

id = addDefault(program, 'styled-components', { nameHint: 'styled' });
      customImportName = id;
    } else {
      id = addNamed(program, refName, 'styled-components', { nameHint: refName });
    }

    // update references with the new identifiers
    references[refName].forEach(referencePath => {
      // eslint-disable-next-line no-param-reassign
      referencePath.node.name = id.name;
    });
  });

  // SECOND STEP : apply babel-plugin-styled-components to the file
  const stateWithOpts = { ...state, opts: config, customImportName };
  traverse(program.parent, babelPlugin({ types: t }).visitor, undefined, stateWithOpts);
}

id = addDefault(program, 'styled-components', { nameHint: 'styled' });
      customImportName = id;
    } else {
      id = addNamed(program, refName, 'styled-components', { nameHint: refName });
    }

    // update references with the new identifiers
    references[refName].forEach(referencePath => {
      // eslint-disable-next-line no-param-reassign
      referencePath.node.name = id.name;
    });
  });

  // SECOND STEP : apply babel-plugin-styled-components to the file
  const stateWithOpts = { ...state, opts: config, customImportName };
  program.traverse(babelPlugin({ types: t }).visitor, stateWithOpts);
}

const { node } = path;
  const {
    tag,
    quasi: { quasis, expressions }
  } = node;

  // Ignore nodes generated by this visitor, to prevent infinite loops
  if (replacementNodes.has(node)) return;

  // Ignore templates tagged with anything other than `styled(x)`
  // Inspired by https://github.com/TrevorBurnham/babel-plugin-namespace-styled-components
  if (!isStyled(t)(tag, state)) return;
  if (isKeyframesHelper(t)(tag, state)) return;
  if (isPureHelper(t)(tag, state)) return;
  if (isHelper(t)(tag, state)) return;
  if (isCSSHelper(t)(tag, state)) return;
  if (isInjectGlobalHelper(t)(tag, state)) return;
  if (tag.property && tag.property.name === 'keyframes') return; // Maintain backward compatibility with styled.keyframes

  // Convert the tagged template to a string, with ${} expressions replaced with placeholders
  const originalStyleString = quasis
    .map((quasi, i) => {
      const rawValue = quasi.value.raw;
      const nextQuasi = quasis[i + 1];
      const rawValueWithoutWhiteSpace = rawValue.replace(/[\n\r\s]/g, '');

      // When there is no associated expression, we can return the plain string
      if (!expressions[i]) {
        return rawValue;
      }

      // In cases where the expression would result in invalid css, we need to add

const { node } = path;
  const {
    tag,
    quasi: { quasis, expressions }
  } = node;

  // Ignore nodes generated by this visitor, to prevent infinite loops
  if (replacementNodes.has(node)) return;

  // Ignore templates tagged with anything other than `styled(x)`
  // Inspired by https://github.com/TrevorBurnham/babel-plugin-namespace-styled-components
  if (!isStyled(t)(tag, state)) return;
  if (isKeyframesHelper(t)(tag, state)) return;
  if (isPureHelper(t)(tag, state)) return;
  if (isHelper(t)(tag, state)) return;
  if (isCSSHelper(t)(tag, state)) return;
  if (isInjectGlobalHelper(t)(tag, state)) return;
  if (tag.property && tag.property.name === 'keyframes') return; // Maintain backward compatibility with styled.keyframes

  // Convert the tagged template to a string, with ${} expressions replaced with placeholders
  const originalStyleString = quasis
    .map((quasi, i) => {
      const rawValue = quasi.value.raw;
      const nextQuasi = quasis[i + 1];
      const rawValueWithoutWhiteSpace = rawValue.replace(/[\n\r\s]/g, '');

      // When there is no associated expression, we can return the plain string
      if (!expressions[i]) {
        return rawValue;
      }

const {
    tag,
    quasi: { quasis, expressions }
  } = node;

  // Ignore nodes generated by this visitor, to prevent infinite loops
  if (replacementNodes.has(node)) return;

  // Ignore templates tagged with anything other than `styled(x)`
  // Inspired by https://github.com/TrevorBurnham/babel-plugin-namespace-styled-components
  if (!isStyled(t)(tag, state)) return;
  if (isKeyframesHelper(t)(tag, state)) return;
  if (isPureHelper(t)(tag, state)) return;
  if (isHelper(t)(tag, state)) return;
  if (isCSSHelper(t)(tag, state)) return;
  if (isInjectGlobalHelper(t)(tag, state)) return;
  if (tag.property && tag.property.name === 'keyframes') return; // Maintain backward compatibility with styled.keyframes

  // Convert the tagged template to a string, with ${} expressions replaced with placeholders
  const originalStyleString = quasis
    .map((quasi, i) => {
      const rawValue = quasi.value.raw;
      const nextQuasi = quasis[i + 1];
      const rawValueWithoutWhiteSpace = rawValue.replace(/[\n\r\s]/g, '');

      // When there is no associated expression, we can return the plain string
      if (!expressions[i]) {
        return rawValue;
      }

      // In cases where the expression would result in invalid css, we need to add
      // a fake value.

export default (path, state) => {
  const { cssNamespace } = getCssNamespace(state);

  const { node } = path;
  const {
    tag,
    quasi: { quasis, expressions }
  } = node;

  // Ignore nodes generated by this visitor, to prevent infinite loops
  if (replacementNodes.has(node)) return;

  // Ignore templates tagged with anything other than `styled(x)`
  // Inspired by https://github.com/TrevorBurnham/babel-plugin-namespace-styled-components
  if (!isStyled(t)(tag, state)) return;
  if (isKeyframesHelper(t)(tag, state)) return;
  if (isPureHelper(t)(tag, state)) return;
  if (isHelper(t)(tag, state)) return;
  if (isCSSHelper(t)(tag, state)) return;
  if (isInjectGlobalHelper(t)(tag, state)) return;
  if (tag.property && tag.property.name === 'keyframes') return; // Maintain backward compatibility with styled.keyframes

  // Convert the tagged template to a string, with ${} expressions replaced with placeholders
  const originalStyleString = quasis
    .map((quasi, i) => {
      const rawValue = quasi.value.raw;
      const nextQuasi = quasis[i + 1];
      const rawValueWithoutWhiteSpace = rawValue.replace(/[\n\r\s]/g, '');

      // When there is no associated expression, we can return the plain string
      if (!expressions[i]) {
        return rawValue;

const { cssNamespace } = getCssNamespace(state);

  const { node } = path;
  const {
    tag,
    quasi: { quasis, expressions }
  } = node;

  // Ignore nodes generated by this visitor, to prevent infinite loops
  if (replacementNodes.has(node)) return;

  // Ignore templates tagged with anything other than `styled(x)`
  // Inspired by https://github.com/TrevorBurnham/babel-plugin-namespace-styled-components
  if (!isStyled(t)(tag, state)) return;
  if (isKeyframesHelper(t)(tag, state)) return;
  if (isPureHelper(t)(tag, state)) return;
  if (isHelper(t)(tag, state)) return;
  if (isCSSHelper(t)(tag, state)) return;
  if (isInjectGlobalHelper(t)(tag, state)) return;
  if (tag.property && tag.property.name === 'keyframes') return; // Maintain backward compatibility with styled.keyframes

  // Convert the tagged template to a string, with ${} expressions replaced with placeholders
  const originalStyleString = quasis
    .map((quasi, i) => {
      const rawValue = quasi.value.raw;
      const nextQuasi = quasis[i + 1];
      const rawValueWithoutWhiteSpace = rawValue.replace(/[\n\r\s]/g, '');

      // When there is no associated expression, we can return the plain string
      if (!expressions[i]) {
        return rawValue;
      }

export default (path, state) => {
  const { cssNamespace } = getCssNamespace(state);

  const { node } = path;
  const {
    tag,
    quasi: { quasis, expressions }
  } = node;

  // Ignore nodes generated by this visitor, to prevent infinite loops
  if (replacementNodes.has(node)) return;

  // Ignore templates tagged with anything other than `styled(x)`
  // Inspired by https://github.com/TrevorBurnham/babel-plugin-namespace-styled-components
  if (!isStyled(t)(tag, state)) return;
  if (isKeyframesHelper(t)(tag, state)) return;
  if (isPureHelper(t)(tag, state)) return;
  if (isHelper(t)(tag, state)) return;
  if (isCSSHelper(t)(tag, state)) return;
  if (isInjectGlobalHelper(t)(tag, state)) return;
  if (tag.property && tag.property.name === 'keyframes') return; // Maintain backward compatibility with styled.keyframes

  // Convert the tagged template to a string, with ${} expressions replaced with placeholders
  const originalStyleString = quasis
    .map((quasi, i) => {
      const rawValue = quasi.value.raw;
      const nextQuasi = quasis[i + 1];
      const rawValueWithoutWhiteSpace = rawValue.replace(/[\n\r\s]/g, '');

      // When there is no associated expression, we can return the plain string
      if (!expressions[i]) {