CSS task

[chadian]

• [ ] source maps
• [ ] sass compilation

[krambuhl]

Pulling in discussions of Post css from slack.

https://github.com/assetsjs/postcss-assets (how to use: https://css-tricks.com/images-in-postcss) https://github.com/postcss/postcss-import (would give us some of the same features as eyeglass)

[elseloop]

We should also replicate the existing media-query combining that happens in the current build. Phoenix presently uses gulp-minify-css, which is apparently now deprecated (huzzah? whoops?) and the author's GitHub account is gone and his tweets aren't public anymore, so yeah. Anyway, gulp-clean-css (a wrapper for clean-css) is the recommended replacement and does all of the same goodness and more.

[stoff]

Depends on #24

[elseloop]

Based on conversations:

• we'll be recommending and scaffolding a PostCSS solution
• but will also write a Sass task and make available Sass boilerplate (new issue to come)

[krambuhl]

@stoff while tackling this issue, can you please export the list of plugins that end up getting used for post-css along with the task. This would allow us to share this configuration with the task-lint-styles package without duplication.

const plugins = [
  nested(),
  variables()
];

function compile(opts) {
  return function() {
    return gulp.src(opts.src)
      .pipe(plugins)
      .pipe(gulp.dest(opt.dest));
  }
}

module.exports = {
  plugins: plugins,
  compile: compile
};

[elseloop]

Speaking with @devinrayolsen about the common need to add dev-only stylesheets to projects, for secondary applications of the codebase or other stand-alone uses like, for example, off-site theming deliverables (PGE and OHSU have several examples of these), he floated an idea of being able to skip partials or other stylesheets during production builds, via a comment or front-matter like block in the file itself. This would save you from having to go into the build to delineate multiple build sources/outputs and allow your focus to remain in the files you're working in, without having to break out and touch the build or to create increasingly complicated folder structures to denote the various build needs. (We were talking specifically about styles, but this could easily be applicable to JS as well I imagine.)

A quick Google didn't lead me to any existing PostCSS or Gulp utilities to pull this off (which leads me to worry I'm not thinking this through entirely), but I wanted to get the idea down in this issue while it was still fresh in my mind.

[krambuhl]

Can this be read as the need for conditional imports/requires? Like ENV=production outputting a different stylesheet/js from ENV=develop?

[elseloop]

Yeah, I think sounds right.

[elseloop]

Pulling this in from #9:

There are some good PostCSS resources outlined in this CSS-Tricks article we might want to look into further. Spriting SVGs from the stylesheet usage (this is an option handled by the SVG task for #8), some file path helpers for images in stylesheets, data uri encoding images in stylesheet, etc.

@stoff do you think you want to handle all of the stylesheet-related PostCSS stuff all at once as part of this task or would it be sensible to you to have multiple tasks?

[elseloop]

I just saw this and think it looks cool so I'm putting it here with no further judgement or expectations:

https://simplaio.github.io/rucksack/

That is all.

[elseloop]

Closing as sufficiently implemented in new Webpack setup.