CSS tooling
(1) Types derived from classes
find, and use exclusively, declared (s)css classes in the components :-)
(a)
https://www.npmjs.com/package/typed-scss-modules
Here is a very nice introduction article: ~~~~~~~~~~~~https://www.skovy.dev/blog/generating-typescript-definitions-for-css-modules-using-sass?seed=eijrl6
(b)
https://github.com/activeguild/vite-plugin-sass-dts~~~~~~~~ (works without a watcher, through vite, less noise overall)
(c)
https://github.com/mrmckeb/typescript-plugin-css-modules
Important: Set vscode tyoescript version to
workspace.Still doesn't work!
What is wrong? This has taken 7 hours already.
As it stands, Astro provides default TS types (client.d.ts) and they basically allow any value for (s)css files. In other words, they are untyped. When I create a stricter type definition, it is sometimes recognized, but still automatic completion doesn't work. Why? What is happening here? Why is this such a mess?
Here is something that seems knowledgable but kind of complex: https://dev.to/kgf/supercharging-css-modules-with-typescript-1gnl
(2) CUBE CSS cascade
Modules with selectors in increasing specificity:
- Composition
- Utility
- Block
- Exception
Leverages the 'cascading' in 'css', doesn't require any preprocessing, and can be used with BEM naming conventions and tailwind or bootstrap utility-classes if the need arises.
(3) Default Formatter
see #15 (closed)
(4) Targeting older browsers
Polyfills can be applied by default. So we can use contemporary CSS techniques such as subgrids and vars, but the output CSS will work in slightly older browsers. It's a delicate balance between obscure, large CSS code, and excluding older browsers from an accessible CSS.