Simple Lens extension that modifies basic "Hello World" sample by using CSS Modules styling method and assisting typescript-plugin-css-modules plugin to enable types.

CSS Modules is a technique which help to securely encapsulate extention styles and keep them scoped locally. It provides an easy way to access CSS rules and changes class names on build to unique ones.

Please follow the instructions in the documentation for extension styling details.

mkdir -p ~/.k8slens/extensions
git clone https://github.com/lensapp/lens-extension-samples.git
ln -s $(pwd)/lens-extension-samples/styling-css-modules-sample ~/.k8slens/extensions/styling-css-modules-sample

To build the extension you can use make or run the npm commands manually:

cd lens-extension-samples/styling-css-modules-sample
make build

OR

cd lens-extension-samples/styling-css-modules-sample
npm install
npm run build

If you want to watch for any source code changes and automatically rebuild the extension you can use:

cd lens-extension-samples/styling-css-modules-sample
npm run dev

Open Lens application and navigate to a cluster. You should see "Styling with Emotion" in a menu.

rm ~/.k8slens/extensions/styling-css-modules-sample

Restart Lens application.