CSS and assets

Module JS/CSS files#

Put the files under Resources/assets/ and introduce them with Resources/config/importmap.php:

return [
    'example' => ['path' => 'Resources/assets/example.js', 'entrypoint' => true],
    'example-css' => ['path' => 'Resources/assets/example.css', 'type' => 'css', 'entrypoint' => true],
];

In the template: {{ importmap(['example-css', 'example']) }}. If the module is not active or the file does not exist, the entry is silently skipped.

Local libraries#

Scripts are not called from outside (CDN). Put the library inside Resources/assets/vendor/ and import it relatively from JS:

import hljs from './vendor/highlight.esm.min.js';

• Prefer the ES module build. UMD packages (those that use self) can be imported as a side effect and usually live under self.<name>.
• Keep the library licence (MIT, BSD…) in the file header.

Tailwind and module classes#

The core stylesheet is produced by Tailwind at build time and scans templates. For your module to use Tailwind classes:

• Templates must be under Resources/views/**/*.twig (this is the scan path).
• In local development, when you change a template, run tailwind:build --minify and asset-map:compile; if public/assets stays old, new classes do not appear.
• The release script also scans the templates of modules that do not go into git; still, using a plain CSS file for the module's own look (e.g. the docs module) gives independence from the core stylesheet.

CSP#

Use csp_nonce_attr() for inline <script> and <style>.