@lsretail/ls-theme v1.3.0

ls-theme

This packages configures the default layout and functionality of PWA-Studio features:

• Removes the review process in checkout
• Fetching the store logo
• Adds loading indicators to the shipping method checkout step
• Adds the Easy burger theme depending on configurations. To set up the easy burger theme, add BURGER_THEME === true to your .env file and add these lines to the tailwind.config.js file in packages/venia-concept:

const venia = require('@magento/pwa-theme-venia');
// const venia = require('../pwa-theme-venia');
+ const burgerTheme = require('@lsretail/ls-theme/src/burger-theme');
const config = {
    mode: 'jit',
    // Include your custom theme here.
-    presets: [venia],
+    presets: [venia, burgerTheme],
    // Configure how Tailwind statically analyzes your code here.
    // Note that the Tailwind's `jit` mode doesn't actually use PurgeCSS.
    purge: {
        // Include paths to every file that may refer to Tailwind classnames.
        // Classnames not found in these files will be excluded at build time.
        content: [
            './node_modules/@magento/venia-ui/lib/**/*.module.css',
            '../venia-ui/lib/**/*.module.css',
            './src/**/*.module.css',
            './template.html'
        ],
        // Extract Tailwind classnames from source files.
        // Our default matcher only matches targets of CSS Modules' `composes`,
        // not classnames included directly in HTML or JS!
        extractors: [
            {
                extensions: ['css'],
                extractor: content => content.match(matcher) || []
            }
        ]
    },
    // Set the character Tailwind uses when prefixing classnames with variants.
    // CSS Modules doesn't like Tailwind's default `:`, so we use `_`.
    separator: '_',
    theme: {
        extend: {}
    }
};

module.exports = config;

/**
 * Matches declarations that contain tailwind classnames.
 * Only classnames matched by this expression will be included in the build.
 *
 * @example
 * .foo {
 *   composes: mx-auto from global;
 * }
 */
const matcher = /(?<=composes:.*)(\b\S+\b)(?=.*from global;)/g;

Settings:

• Add USE_SIMINIA_THEME=true to your .env file to use the package with a siminia theme.