Luckybeard CLI

Luckybeard CLI is a cli tool-chain specifically created to assist developers. It makes use of various tools

Installation

Install Luckybeard CLI with npm

  npm install -g luckybeard

Usage/Examples

luckybeard list-components
luckybeard generate-components

Config file

The config for the cli can be configured in a .lb.mjs file in the root of your project. The file will look like this:

export default {
  theme: {
    filePath: "temp", // Optional: The path to where your source file is
    fileName: "source.json", // Optional: Override the default file name we look for. Default: source.json
    themeDir: "temp/out", // Optional: The path where we want to output the results of the theme generate
    verbose: false, // Optional: Sets whether we log verbose information about the program as we run it
  },
};

Disclaimer

luckybeard is used as-is and the author takes no responsibility for any loss or damages.

Implementation steps

• [x] 1st the responsive object will contain all of its modes right before the final value, i.e. responsive.screen.breakpoints = {desktop: 123, mobile: 11} instead of responsive.screen.breakpoints = 12
• [x] Once that object is built when generating the types, take the current version of the object, find the responsive key and each of its descendants that contain all of the modes as a child, then set the value equal to the first child so that we can determine the type correctly
• [x] generate the types using the temporary object theming.d.ts
• [x] now let's generate a ts export which is theme: ThemeType = {} and replace each of its values with its css selector equivalent
• [x] generate a css file - each theme has its own [data-theme="mode"] selector with nested media queries for responsiveness.
• [x] generate a css file containing all of the media queries for the responsive objects
• [ ] make sure that font names can work as Figree instead of "Figtgree", we might have to generate string values as strings with quotes

Future optimizations

• [ ] optimize css generation by reducing media queries
• [ ] generate css snippets or look at other means of intellisense when writing out css within css/scss files
• [ ] tidy up functions and move them out to other files as theming/index.ts has become quite bloated
• [ ] look at error handling during css generation
• [ ] write tests to validate that output is correct
• [ ] add better type support for things like modes, figma variables etc.

Deployment

Bump the npm version in the package then build and publish

deno run build
npm publish