css-framework/notes.md

Requirements

• html
  • templating
• js
  • babel transpilation
  • source maps
  • minification on production
  • eslint
• css preprocessing
  • nested selectors
  • variables
  • mixins
  • functions
  • autoprefixer
  • imports
  • source maps
  • minification on production
  • stylelint
• live server with hmr
• clean dist directories

NOT INCLUDED

• code splitting

html

• html-webpack-plugin - automatically create index.html or use a template file also takes care of templating - default templating is ejs
• ejs-compiled-loader (for use with the ejs templates) bit of a fuck on getting it to work - issue

js

• @babel/core
  • also takes care of minification in production
• @babel/preset-env
• babel-loader
• eslint
• eslint-webpack-plugin

css

• css-loader
• sass-loader
• style-loader - injects css into dom (defaults to style tags)
• mini-css-extract-plugin - extracts css to separate files
• postcss-loader
• postcss-preset-env takes care of autoprefixing(?) (supposedly nesting too but i needed to install postcss-nested)
• postcss-nested
• postcss-import
• postcss-mixins
• postcss-functions
• cssnano-webpack-plugin
• stylelint
• stylelint-webpack-plugin

other

• clean-webpack-plugin

live server

• webpack-dev-server

Installation notes

Notes

Now, when you import MyImage from '../img/my-image.png', that image will be processed and added to your output directory and the MyImage variable will contain the final url of that image after processing. When using the css-loader, as shown above, a similar process will occur for url('../img/my-image.png') within your CSS. The loader will recognize this is a local file, and replace the '../img/my-image.png' path with the final path to the image in your output directory. The html-loader handles in the same manner.

assets are automatically inlined or exported as a resource based on file size. this default size is 8kb. - can configure see docs.