Easy standardized configuration in this configuration hell of custom plugins. tsconfig is used to define project aliases to folders (even to single file). Why aliases? importmap is used to resolve imports to get paths of cdns for js libraries.
importmaps are fixed with package.json dependencies versions with mustache.render and used to resolve (rewrite names to uri paths) modules by @snowpack/babel-plugin-package-import at resolve-alias stage
Transform-plugins to resolve project alias & extensions:
- tsconfig-paths-module-resolver
- add-import-extension and Babel plugins for SystemJs & HTML import in components configs:
- babel-plugin-transform-html-import-to-string
- babel-plugin-replace-import-extension to correct
.html.jsimport to.htmlfor html-plugin - @snowpack/babel-plugin-package-import to map node_modules imports with importmap format
- babel-plugin-system-import-transformer
That's why we should use custom Babel configurations (or separated environments) and not default
babel.config.json!
Jest can run ES modules with two Babel ways:
- Run jest as usual commonjs by
package.json > scripts:"test": "jest --runInBand --no-cache"and jest-esm-transformer with"transform"setting for jest config and without babel config. - Native esm by
package.json > scripts:"test": "set NODE_ENV=envJest&&node -r esm ./node_modules/jest/bin/jest.js --runInBand --no-cache"without any"transform"setting butbabel.config.json:{"env": {"envJest": {"presets": ["@babel/preset-env"]}}}
Jest is not ready for esm and uses Babel transformations spec-files to CommonJs.
"@jest/globals" for strict esm *.spec.* files, to free from option "testEnvironment": "jsdoc".
rules:
- eslint-plugin-jest + eslint-plugin-jest-formatting - rules for Jest tests
- eslint-config-airbnb-base - common dev community rules
- eslint-plugin-vue for vue components but can't lint vue html templates if they are non-SFC.
- eslint-plugin-import - rules about esm imports
imports:
- eslint-import-resolver-typescript resolve alias/paths for project modules which configured in tsconfig.json
- eslint-import-resolver-node used with resolver-typescript, both instead of using eslint-import-resolver-alias
Nowadays is very popular CSS-in-JS, it is not our case (Babel plugins for CSS aren't suitable). This project use classic practice without importing css files into js.
Alias solutions (isn't used):
- css-aliases only to get resolved path, not inlining files content
- css-import-resolve
- postcss-import-alias-resolver
But I don't need another config "aliases" format, I need tsconfig paths support! Found tsconfig format compatible solution for sass (but I don't use SASS here): sass-extended-importer.
For *.css files with @import tsconfig paths I made utility script tsconfig-path-resolver.js based on:
- arg for cli set config path;
- find-root for utility paths independence;
- readdirp to get all paths by file extension mask;
- tsconfig-paths for resolving paths by tsconfig settings. Utility isn't inlining content from resolved path files, only paths rewrited.
This project isn't used any bundlers, all steps realised as npm scripts. Therefore, separate core modules are used for minifying.
- JS: minify-all-js based on terser & node-minify for recursive files iteration, which is not supported by terser nowadays.
- CSS: This project is used optimizer & inliner clean-css.
- StylusCSS: I like possibilities of inbrowser transforming with Stylus and don't like to make CSS syntax so complex like JS do. Stylus has glob import and can compress StylusCSS but only for
*.stylfiles configured with CSSO plugin. Another (modern) solution is PostCSS which has these two abilities too. By the way, Stylus resolver is not extensionable :( - In complex may be used suggested by terser issue solution: ucompress
Not using scoped CSS, prior to BEM methodology in iAMCss interpretation (also see main.css). Native CSS-variables used with iAMCss theming (theming live demo) and iAMCss naming. CSSO about variables.
What recommendations to complement BEM/iAMCss, do we have?
- WAI WCAG accessibility of your CSS
- mdcss comments convention (as
*.mdfiles format), can be used as a plugin for postcss or gulp - CSS Guidelines 2.2.5 by Harry Roberts, 28.12.2020. A lot of conventions don't make sense with iAMCss!
- Google HTML/CSS Style Guide
- GitHub primer for SCSS
- Idiomatic CSS by @necolas last updated 2015.02.06
- Code smells in CSS
- My opinion (rus) to avoid TailwindCSS, because it is bad (eng) AtomicCSS reincarnation
- ITCSS tailwindy 🤮 boilerplate
- SMACSS 2012.08.21. A lot of conventions don't make sense with iAMCss!
Based on trends, Stylelint has no competitors! Bunch of configs favorited here, some of them:
- stylelint-a11y check the accessibility of your CSS for users.
- stylelint-config-standard checks Google styleguide, @mdo's codeguide and Airbnb's Styleguide.
- stylelint-no-unresolved-module to check urls of @import keywords with webpack alias feature.
- GitHub primer for SASS
- stylelint-config-idiomatic-order or stylelint-config-property-sort-order-smacss
- stylelint-config-sass-guidelines for CSS Guidelin.es instead of using sass-lint
- stylelint-plugin-stylus
- postcss-bem-linter
- stylelint-itcss for tailwindy ITCSS 🤮
This browser isn't supported es-modules from the box, therefeore this project is used two deploying ways: esm-build and sys-build (SystemJS). Also is not supported css-variables, therefore this project is used ie11-custom-properties polyfill with known bugs: 92 (inline @import files workaround) and IE can't use initial value (workaround postcss-initial).
- vue-template-compiler. This project isn't used .vue files...