Comments (11)
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
orpre-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.
Related Issues (20)
- Rename modules `.legacy` to something else
- Swap precss for multiple postcss packages
- Custom Gulp Tasks
- Pass Request Header Into Imports
- Importing issue for css files HOT 1
- Watching any file in kiln-plugins replaces /js/_kiln-plugins.js with the contents of that file HOT 1
- Server & Client Service Compilation Docs HOT 4
- Docs
- Commands Documentation
- ClayCli Configuration
- [Idea] Pub/Sub Tree Mapper HOT 1
- Issues running the test
- Color Scheme for Docusaurus
- Add a github action to doc's deploy process HOT 1
- Webpack
- Add docs to clayplatform.com HOT 9
- Files not being removed on subsequent compiles HOT 1
- infinite loop in `findURI` with tld and no trailing `/`
- Updates needed for Autoprefixer
- Vue compilation incomplete
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from claycli.