Support for Drupal subthemes

[miloskroulik]

It's unclear, if wingsuit supports/intends to support subthemes in Drupal. I need to have an ability to have customized tailwind.json file for each of them.

I added my subtheme to apps directory (so it's sibling to drupal directory. However, Drupal dev: and build: package.json commands hardcode drupal directory and apps/drupal/webpack.config.js in turn passes drupal as appNameId.

I tried to modify apps/drupal/webpack.config.js like this:

const wingsuitCore = require('@wingsuit-designsystem/core');
const path = require("path");
const app = path.basename(process.env.INIT_CWD)

const appConfig = wingsuitCore.resolveConfig(app, process.env.NODE_ENV);
const finalConfig = wingsuitCore.getAppPack(appConfig);
module.exports = finalConfig;

However, this results in error, which seems to indicate that loader for twig files isn't used (this is printed for all twig files):

WARNING in ./source/default/patterns/01-atoms/button/button.twig 1:1
Module parse failed: Unexpected character '#' (1:1)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> {#
|   Defaults
| #}
 @ ./source/default sync \.(mp4|svg|png|jpg|jpeg|webp|gif|woff|woff2|yml|yaml|twig)$ ./patterns/01-atoms/button/button.twig
 @ ./apps/myapp/assets.js

EDIT: It looks like there is a 1:1 mapping between apps and presets (in other way: there is expectation, that there will be only one Drupal "app" per wingsuit.config.js. Is that true?

[christianwiedemann]

You need to provide the "type" in "resolveConfig" if the appName is different from the app type.

const wingsuitCore = require('@wingsuit-designsystem/core');
const path = require("path");
const app = path.basename(process.env.INIT_CWD)

const appConfig = wingsuitCore.resolveConfig(`${app}:drupal`, process.env.NODE_ENV);
const finalConfig = wingsuitCore.getAppPack(appConfig);
module.exports = finalConfig;

[miloskroulik]

Thanks, that seems to be working fine.

[miloskroulik]

Sorry, I was too quick. I modified apps/mytheme/config/silo/tailwind.json and ran yarn dev:drupal while in apps/mytheme with the config you've provided. However the changes done didn't appear on the site even after the watch proccess has been restarted. How can I test that correct config file has been used and applied?

[christianwiedemann]

Hi, not sure what you want to do.

Each file under silo is generated by wingsuit and will be overwritten. So changing this file doesn't make sense.

Do you need different tailwind configs for each site?

[miloskroulik]

Yes, basically - more precisely, I need to have a different tailwing config per theme. Sorry for not being more clear.

[christianwiedemann]

Right now you can provide an env variable in your package.json like:

"dev:storybook": "cross-env-shell WS_APP=APP_NAME \"start-storybook --config-dir apps/storybook --static-dir apps/storybook/public\"",

Then in your postcss config you can include the right config.

something like:

let tailwindConfig = 'path';
if (process.env.WS_APP === 'app_1') {
path = './path/totheme/tailwindconfig.js';
}

module.exports = {
  plugins: {
    '@tailwindcss/jit': {config: path },
    'postcss-nested': {},
    autoprefixer: {},
  },
};

In Wingsuit 1.1 wingsuit will provide an webpack alias wsapp. So this will work

module.exports = {
  plugins: {
    '@tailwindcss/jit': {config: 'wsapp/tailwind.config.js' },
    'postcss-nested': {},
    autoprefixer: {},
  },
};

Hope this will help.

[christianwiedemann]

I released 1.1 yesterday. Now you can use the wsapp webpack alias. Will close this issue.