First of all, I had to fix many dependencies which had some vulnerabilities, as a warning came up when I cloned my old repo on my new machine and ran npm install
So after running an audit npm audit I was confident I could upgrade all dependencies without anything breaking, I ran npm audit fix --force
The next big step for me was to add SASS to the app – I am currently using Styled Component and I remember when I started this project I was desperate to use SASS as it’s my favourite pre-compiler but for whatever reason I couldn’t use it?
So I’ve installed SASS npm install node-sass and I’ve followed this guide https://scotch.io/tutorials/using-sass-in-create-react-app-v2 but the first challenge I find is that I had fonts setup nicely using JS:
const fontMontserrat = 'Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif';
const fontDroid = '"Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif';
const fonts = {
Montserrat: fontMontserrat,
Droid: fontDroid,
};
export default fonts;
So I might leave some generic styled component code at app level with some global rules for fonts? We’ll see…
The other interesting aspect of styled component is that I picked Styled Grid https://www.npmjs.com/package/styled-grid a responsive react grid for styled components… One thing I am not going to write from scratch is a grid so I am considering leaving it there for now… Again, we’ll see…
I soon find myself down a rabbit hole and it’s frankly 10pm and I should probably drop this and watch some TV then catch an early night, but the beauty (if you want to call it that) of styled components, is how you can construct the CSS as a long string using template literals, assign it to a variable, export and import that variable anywhere you want and you have portable CSS – I like this because you can choose where to use it, ben then you could set up CSS rules to be extended in SASS anyway, so maybe this isn’t quite rocket science… but this is what I had
const BtnStyles = .......; export BtnStyles; ...
import BtnStyles from './BtnStyles';
const Btn = styled.button`
${ BtnStyles }
`;
and I decided to migrate the CSS in its own .scss file…
Wait, I remember another beautiful reason to use styled components… before create the const
Btn, the CSS contained the variableBtnStyles could be literally used on ANY HTML tag – now that’s cool! I think I specifically set this up this way because you might want both a <input type="button"> and an <a> to LOOK as if they were both the same button!But we can achieve this in CSS too with classes, what a ground breaking concept, eh?
So I’m still moving this to a SASS file.
As predicted, I started then get tired. I committed and pushed today’s changes https://github.com/morena/kodes-generator-react and obviously everything is broken, especially as I have moved Btn to another folder and not updated all references to it.
I think it’s a good starting point for the first day, let’s hope I keep this up!
Recent Comments