WebDevStudios / wds-block-starter

A block starter for projects.

15 stars 3 forks source link

PostCSS Configuration #9

Closed michealengland closed 4 years ago

michealengland commented 4 years ago

PostCSS Configuration

The following features need to be improved for this plugin to be useable in a production environment.

npm run build should generate minified production ready files
Sass-like features should be tested and verified Note: a bug was found where // comments did caused the build to fail
Cache-busting on styles needs tested
Autoprefixer and additional settings that might be utilized in other WDS projects such as wd_s
Verify that source maps and styles work as expected between npm run start and npm run build

michealengland commented 4 years ago

I made a lot of progress and still have some work to do here before the PR for this issue can be submitted.

WIP Branch

https://github.com/WebDevStudios/wds-block-starter/tree/feature/%239-postcss-config

Feature Testing Branch

https://github.com/WebDevStudios/wds-block-starter/tree/example/%239-postcss-test

Features Added

Setup CSS Nano to apply on production builds and minify styles.
Add PostCSS Safe Parser to prevent incorrect CSS from being transcoded into production builds.
Setup Media Query Packer to extract and organize media queries throughout styles.

Remaining Tasks

Finish testing out Sass features
Fix issue with Spaces / Tabs in Autoprefixer code.