Configuration

Wingsuit comes with a preset of variables that are suitable for most use cases.

• apps for app-specific configuration. A typical app is Drupal. Here you can configure where your app is located and how you want to compile and store your assets.

• designSystem for design system configuration. The design system is where your patterns are living. Here you can configure everything around them.

• presets is a list of loaded webpack presets. Here you can find more information about webpack bundles.

App details

Each app has the following configurable properties:

• type the type of the app.
• path the path to the app.
• cssMode whether to extract CSS or not.
• designSystem the name of the design system.
• distFolder the path to the dist folder.
• assetBundleFolder the folder to use for assets, under the dist folder.

Design systems details

In the designSystems section you define the folder structure of your design system. Each design system has the following configurable properties:

• path the path to the design system.
• patternFolder the folder to use for patterns, under the design system folder.
• namespaces to configure folder aliases.

Namespaces:

const path = require('path' );

const patterns = path.resolve(__dirname, 'patterns');

module.exports = {
  tokens: path.resolve(__dirname, 'tokens'),
  protons: path.resolve(patterns, '00-protons'),
  atoms: path.resolve(patterns, '01-atoms'),
  molecules: path.resolve(patterns, '02-molecules'),
  organisms: path.resolve(patterns, '03-organisms'),
  templates: path.resolve(patterns, '04-templates'),
  pages: path.resolve(patterns, '05-pages'),
};

You can use namespaces in twig and javascript imports.

{{ include "@atoms/button/button.twig" }}

import "atoms/button";

Environment specific configuration

With environments you can overwrite a configuration value for a specific environment.

Here is an example of overwriting the cssMode for development:

environments: {
  ...
      development: {
        apps: {
          storybook: {
            cssMode: "extract"
          }
        }
      }

Presets details

Check the presets documentation for more infos.