Contrib.social
Created on 3 July 2024, 4 months ago
Updated 5 August 2024, 3 months ago

I'm working on a project which imports components from a published component library as separate Drupal libraries with a sprinkling of customisation. I'll probably combine some of them later but for now each one is separate, and some of them will remain separate because they have some hefty CSS attached to them. No I can't switch the library, it's a client requirement.

Since vite/rollup don't really work with .scss files, even the components where we don't add JS need a JS file which basically consists of importing our .scss file for the same component. It builds fine.

Problem is, because vite is building esm files and the package.json says "type": "module" each of the JS files gets its own script tag in the DOM. Most of those JS files are completely empty when built, just one line break.

I can reduce the number of empty JS files by combining some or all of the smaller libraries but that doesn't help me with the big ones.

If those empty JS files got aggregated, they would basically disappear.

Is there a way I can flag JS entrypoints in the library definition to either ensure they are aggregated despite being esm, or to *only* use their assets entry? Or is there a completely different way to approach this?

vite.config.js in case it helps:

import { defineConfig } from 'vite'
import { globSync } from 'glob'
import { resolve } from 'path'
import { watchAndRun } from 'vite-plugin-watch-and-run'

export default defineConfig(({ mode }) => {
  const env = mode === 'production' ? '"production"' : '"development"'

  const inputs = globSync('./src/**/entry.js').reduce((acc, input) => {
    const library = input.match(/\/([^\/]+)\/entry\.js$/)[1]
    acc[library] = resolve(__dirname, input)
    return acc
  }, {})

  return {
    build: {
      cssCodeSplit: true,
      manifest: true,
      rollupOptions: {
        input: inputs,
        external: ['Drupal', 'once'],
      },
    },
    css: { devSourcemap: true },
    define: { 'process.env.NODE_ENV': env },
    plugins: [
      watchAndRun([
        {
          name: 'twig-reload',
          watchKind: ['add', 'unlink'],
          watch: resolve('./templates/**/*.twig'),
          run: 'drush cr',
          delay: 300,
        },
      ]),
    ],
  }
})
💬 Support request
Status

Closed: works as designed

Version

1.0

Component

Code

Created by

🇦🇺Australia darvanen Sydney, Australia

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @darvanen
  • Comment 4 months ago →
    🇦🇺Australia darvanen Sydney, Australia

    I thought about creating a patch for an "assets-only" flag on entrypoints in the library definition, but I wasn't sure it would be accepted as a direction for the module.

  • Comment 3 months ago →
    🇵🇱Poland wotnak

    As far as I'm aware, the current Vite version works fine with scss entrypoints.
    Example:

    # theme.libraries.yml
global-styling:
  vite: true
  css:
    theme:
      scss/style.scss: {}

    // vite.config.js
import { defineConfig } from "vite";
import multiInput from "rollup-plugin-multi-input";

export default defineConfig(({ mode }) => {
  return {
    plugins: [multiInput()],
    build: {
      manifest: true,
      rollupOptions: {
        input: ["scss/**/*.scss", "!scss/**/_*.scss"],
      },
    },
  };
});

    It builds fine and produces vite manifest that is correctly handled by drupal/vite module:

    // dist/.vite/manifest.json
{
  ...
  "scss/style.scss": {
    "file": "assets/scss/style-DYjrZ8Ot.css",
    "src": "scss/style.scss",
    "isEntry": true
  },
  ...
}
  • Status changed to Closed: works as designed 3 months ago
  • Comment 3 months ago →
    🇦🇺Australia darvanen Sydney, Australia

    Right you are!

    I had trouble with scss entrypoints in the past but I think that might have been due to using both `lib` and `rollupOptions` in the same config which I've discovered clash.

    Thanks for pointing me back in the right direction!

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024