Share CSS Styles Among Lightning Web Components (Nested CSS) - not working

I’m trying to create a consistent look and feel for Lightning web components by using a common CSS module.
For this, I have followed the solutions given in the summer 20 release notes and the LWC developer docs

Now, if I’m creating css file in the below structure

cssLibrary
   ├──cssLibrary.css
   └──cssLibrary.js-meta.xml

then, when I’m calling this cssLibrary in my main component c:compositionBasics as @import 'c/cssLibrary',
I’m getting the error

**force-appmaindefaultlwccompositionBasicscompositionBasics.js  No MODULE named markup://c:cssLibrary found : [markup://c:compositionBasics]**

while, if I’m creating the files as (added JS and HTML files as well, just like any other lwc component)

cssLibrary
   ├──cssLibrary.css
   └──cssLibrary.js-meta.xml
   ├──cssLibrary.js
   └──cssLibrary.html

then I’m able to save the compositionBasics component (NO errors) but my CSS is not getting reflected.

Note: detailed code can be found in https://github.com/trailheadapps/lwc-recipes/tree/master/force-app/main/default/lwc/compositionBasics (My folder structure of compositionBasics is also exactly same)

Please help! Do let me know if I’m missing anything in here. Also let me know if for nesting a css @import 'c/cssLibrary'; is not a correct way.

Best,
Rumit