@mcxbr/plugins v0.3.1

Plugins for PWA Studio

cssAsyncTransform

Transformação assíncrona de arquivos css

Adicionando ao projeto, tema ou módulo:

Adicionar o projeto as dependências

yarn add @mcxbr/plugins

Importar no targetables file do projeto

const { cssAsyncTransform } = require('@mcxbr/plugins');
var pjson = require('../package.json');

module.exports = (targetables, talonsTarget) => {
  const moduleName = pjson.name;

  /* async transform files */
  cssAsyncTransform(targetables, moduleName, 'customCustomer');
};

Deve-se seguir o path dos arquivos a serem mesclados

myLib/lib/components/ProductFullDetail/productFullDetail.css

Reescrita de class CSS

Adicionar selector css no arquivo para reescreve-lo por completo.

.root {
  max-width: 1000px;
}

Resultado:

.productFullDetail-root-xxx {
  max-width: 1000px;
}

Adicionar novos estilos mesclados aos originais

Adicionar css composes para herdar estilos do seletor:

.root {
  composes: root from '~@magento/venia-ui/lib/components/ProductFullDetail/productFullDetail.css';
  max-width: 1000px;
}

Resultado:

.productFullDetail-root-xxx {
  align-items: start;
  display: grid;
  grid-auto-flow: row;
  grid-template-areas:
    'images title'
    'images errors'
    'images options'
    'images quantity'
    'images cart'
    'images .';
  grid-template-columns: 1.5625fr 1fr;
  grid-template-rows: repeat(5, min-content) 1fr [fold];
  padding: 2.5rem 1rem;
  max-width: 1000px; // this new line
}

targetableAsyncTransform

Transformação de arquivos JS na execução do bundle

Fallback de targetables para modificações em arquivos do projeto. Conheça mais sobre Targetables nas docs do pwa-studio.

Adicionando ao projeto, tema ou módulo:

Adicionar o projeto as dependências

yarn add @mcxbr/plugins

Importar no targetables file do projeto

const { targetableAsyncTransform } = require('@mcxbr/plugins');
var pjson = require('../package.json');

module.exports = (targetables) => {
  const moduleName = pjson.name;

  /* async transform files */
  targetableAsyncTransform(targetables, moduleName);
};

Deve-se seguir o path dos arquivos a serem mesclados com sufixo .targetables.js

Exemplo para adicionar modificações no arquivo productFullDetail.js de @magento/venia-ui:

myLib/lib/components/ProductFullDetail/productFullDetail.targetables.js

Targetables

module.exports = component => {
  component.addImport(
    "import SpecialPrice from '@mcxbr/catalog/lib/components/SpecialPrice';"
  );
  component.insertAfterSource(
    '<p className={classes.productPrice}>',
    `
    \n
    {productDetails.specialPrice && (
      <SpecialPrice
        currencyCode={productDetails.price.currency}
        value={productDetails.specialPrice}
      />
    )}
    `
  );
}