Reference: some automated css tool that could help with analysis:

per Skye
https://github.com/tonyganch/gonzales-pe

per Nelson (used before, didn't work then, but maybe will work now?)
https://github.com/tomgenoni/cssdig-chrome
https://github.com/katiefenn/parker/tree/master/docs
https://github.com/CSSLint/csslint

from claycli.

I'm going to make a deck around the latest implementation idea, so we can run it by other devs and designers.

from claycli.

Style compilation will be postcss, and will use these rules:

• files live in styleguides/<styleguide-name>/components/
• files are named <component-name>.css or <component-name>_<variation-name>.css
• files compile separately to public/css/<component-name>.<styleguide-name>.css or <component-name>_<variation-name>.<styleguide-name>.css
• contents of files are wrapped in .component-name { /* contents */ } or .component-name_variation-name { /* contents */ }, which prevents scope violations
• css writers are encouraged to use & { /* styles */ } to style the root element, as well as for contextual styling (e.g. .some-layout & { /* styles */ }

TODO:

• linting rules
• what postcss plugins should we use?
• what abstractions should we preserve to create design-centric / visual styleguides? (e.g. colors, typography, etc)

from claycli.

In service of that last question, @amycheng is going to run some automated analysis of the current compiled styles to determine what kinds of similarities exist between components in a single styleguide. This will help inform design when they want to dictate what their styleguides should look like.

from claycli.

Reference: Writing plugins for design tools

There was some discussion on using Sketch files to generate css styleguides instead of generating css styleguides from css derived from Sketch files. I'll need to see if there are any existing plugins that generate styleguide. JavaScript is used for extensions in both Sketch and Zeplin, so there's that!

Just dumping some links here:

https://github.com/zeplin/zeplin-extension-documentation
https://medium.com/@marianomike/the-beginners-guide-to-writing-sketch-plugins-part-1-28a5e3f01c68
http://developer.sketchapp.com/
http://airbnb.io/react-sketchapp/
https://github.com/sskyy/blade

from claycli.

Features we want for Post-CSS

• mixins
• variables
• nesting

from claycli.

Reference: CSS Linting and clean-up

• the first pass at generating styleguides resulted in css files that triggers linting errors. this is because they are simply concatenated postprocessed sass files that have errors like a selector being defined multiple times. I disabled the existing css linter because of this buuuuut we should probably have a css linter
• @byronhulcher was looking into this tool to see if we can automate the process of cleaning up the css files.
• @nelsonpecora suggested using this linter. Maybe we can couple this with lint-staged to only lint css files we're about to push? This can be part of either pre-commit or pre-push git hooks
• combining automated clean-up and visual regression testing could account for unreliability of automated clean-up

from claycli.

For linting stuff, I think the general approach should be twofold:

• add strict linting rules for all of our files
• add a whitelist containing all current components, thus preventing devs from having to update whole files when editing them

Note that this approach presupposes that either:

• devs will at some point explicitly work on burning down the technical debt (haha. hahaha. haha. hah) or
• the collections / article redesign processes, in combination with the upcoming ideas about sunsetting components, will mean that new, compliant components will be written and the old ones will be deprecated

from claycli.

@byronhulcher had some luck with clean-css-cli:

cleancss -O1 'all:off' -O2 'all:on;restructureRules:off;' --format 'breaks:afterAtRule=on,afterBlockBegins=on,afterBlockEnds=on,afterComment=on,afterProperty=on,afterRuleBegins=on,afterRuleEnds=on,beforeBlockEnds=on,betweenSelectors=on;indentBy:2;indentWith:space;spaces:aroundSelectorRelation=on,beforeBlockBegins=on,beforeValue=on;' mediaplay-image.css 

One problem was that it was conservative in merging media query blocks. But I think the following tools (coupled with visual regression) will take use the rest of the way there:

https://www.npmjs.com/package/group-css-media-queries
https://github.com/hail2u/node-css-mqpacker
https://www.npmjs.com/package/postcss-combine-duplicated-selectors

from claycli.

another thing to remove from the compiled css are vendor prefixes (our linter doesn't allow it since, autoprefixer adds them if needed). We'll need to use that plugin to remove them (per https://stackoverflow.com/questions/21179385/how-do-you-remove-vendor-prefixes).

from claycli.

SASS → CSS cleaning scripts and linting rules are written. Further development of our style compilation will be done in #43

from claycli.