[AssetMapper 6.4] Question about bundle paths for import

[tacman]

[AssetMapper 6.4] Question about bundle paths for import

[tacman]

OK, I think I understand now! Thanks!

FWIW, here it is in action. No build step!

symfony new simple-datatables-demo --webapp --version=next --php=8.2 && cd simple-datatables-demo
composer config minimum-stability dev
composer config extra.symfony.allow-contrib true
composer req symfony/asset-mapper:^6.4
composer req symfony/stimulus-bundle:2.x-dev
composer req survos/simple-datatables-bundle
bin/console make:controller Simple -i
cat > templates/simple.html.twig <<END
{% extends 'base.html.twig' %}

{% block body %}
     <table class="table" {{ stimulus_controller('@survos/simple-datatables-bundle/table', {perPage: 5, sortable: true}) }}>
        <thead>
        <tr>
            <th>abbr</th>
            <th>name</th>
            <th>number</th>
        </thead>
        <tbody>
        {% for j in 1..12 %}
            <tr>
                <td>{{ j |date('2023-' ~ j ~ '-01') |date('M') }}</td>
                <td>{{ j |date('2023-' ~ j ~ '-01') |date('F') }}</td>
                <td>{{ j }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
{% endblock %}
END
symfony server:start -d
symfony open:local --path=/simple

[weaverryan]

If you're putting the CSS in autoimport, you shouldn't need to do anything else. It should output inside the ux_controller_link_tags() function.

But, more generally, if you WERE to import a CSS file from JS, you'd need to use either the relative path to the file or, if your CSS file is in importmap.php (it probably isn't), then you could use the import name there. But inside of JS, asset mapper paths are meaningless. These are really just for using with the asset() Twig function.

[tacman]

Perhaps I need not a namespaced path, but a relative path, like ../syle.css? If so, would that get expanded during the autoimport to vendor/...?

[weaverryan]

Indeed, the css is not in the importmap.php, how is that added? I do have it in my bundle

We add a namspaced path via prepending configuration - good example here - https://github.com/symfony/ux/blob/2.x/src/Autocomplete/src/DependencyInjection/AutocompleteExtension.php#L52-L61

[tacman]

So I did have that logic in my bundle, but it was pointing to the src/Controllers directory. I've fixed it now so that it points to assets and the controllers and css are available.

bin/console debug:asset-map  | grep survos/simple  
  /home/tac/g/survos/surv...atatables-bundle/assets   @survos/simple-datatables  
  @survos/simple-datatabl...atatables_controller.js   /home/tac/g/survos/surv...atatables_controller.js   
  @survos/simple-datatabl...ers/table_controller.js   /home/tac/g/survos/surv...ers/table_controller.js   
  @survos/simple-datatables/package.json              /home/tac/g/survos/surv...dle/assets/package.json   
  @survos/simple-datatables/style.css                 /home/tac/g/survos/surv...bundle/assets/style.css   

What is the format for importing the css from a bundle into the script?

    <script type="module">
        import '@survos/simple-datatables/style.css'

Isn't working, nor my variations on that, do I need some sort of import first?