Short-stack OpenProps 2024
ready to rat-tat rock & roll.
Rip It Up / Ready Teddy
Re-installing Short-Stack OpenProps in 2024
I revisited Shortstack OpenProps hoping to get a clean installation. I want to explore the OpenProps custom property library as a potential portion of my design system.
I found that dependency problems dating from 2022 persist. Shortstack OpenProps stopped working properly when Rollup 3.0 was released. Rollup 3.0 had a peer dependency conflict with Rollup-plugin-terser.
The latest Terser was released three days ago. It is not the same as Rollup-plugin-terser. I hoped that the Rollup 3.0 / Rollup-plugin-terser conflict would be resolved by now.
Dependencies
Browsersync seems to be working. I had to update caniuse.lite. That update conflicted with the Terser / Rollup peer dependency problem. My programming skills are intermediate. I do not relish the idea of fixing this two-years-old issue. I hope someone has fixed the dependency issues and has written a tutorial/blog report on it.
Adam Argyle sent a note to me in 2022 suggesting that I try using Vite OpenProps instead of ShortStack OpenProps. I plan to try that also.
Solution Found:
Before hanging up the project I did a search for “Terser, Rollup-plugin-terser, and Rollup 3.0 dependency conflict” and found a solution here: Peer dependency conflict from the rollup-plugin-terser package, Feb 4, 2023
I followed directions and fixed the rollup/terser issue. I made detailed notes for myself.
Back to square one
I find myself referring back to my 2022 version of shortstack OpenProps to retread previously burned ground.
Now that it’s working I start by wrangling the layout on the index.html file. The layout is a grid layout in columns. The header on the left, beside that is the body, and next the footer.
This layout is within an @media query landscape declaration. Why anyone would want to put that type of layout – or ANY type of layout in a landscape media query is beyond me.
I looked for a cheet sheet for the OpenProps Custom Properties. I may make my own. OpenProps is released as a minified, unreadable CSS within a NPM module. In order to get an unminified CSS it is necessary to go to the OpenProps Github repo, download the repo and extract the source CSS files.
I did that and I’ve added my own CSS file at the bottom of the index.css file. It will serve as my new pair of glasses. I will want to undo certain opinionated property declarations.
Now that I have that installed I don’t need the NPM module. I will have to occasionally go to the Github repo and download updates.
Custom Property Libraries
I want to try other custom property libraries.
I’m looking for the custom property library that I want to follow. I am most interested in how custom properties are named.
I study a variety of tutorials by Kevin Powell and make CSS and layout patterns. I notice how he names lists of custom properties.
This week I read a blog post by Andy Bell about his CSS project boilerplate, which he says is derived from Tailwind. I’m going to download it from his repo and see how it works. Andy Bell says his boilerplate eliminates some of the Tailwind cruft.
I also have a file full of basic old fashioned CSS stylesheets that I want to test.
There is so much work to do. Even the tiniest things. It amazes me that after all these years I do not have a solid pattern for a button.