cacao-css 6.2.0 → 6.4.0

package/dist/media.css

@@ -51,11 +51,14 @@
  * - And our own usage in building websites
  *
  * Cacao is a mobile-first system.
- * We don't use min-width or max-width because we follow Stylelint's media-feature-rante-notation rule.
+ * We don't use min-width or max-width because we follow Stylelint's media-feature-range-notation rule.
  * https://stylelint.io/user-guide/rules/media-feature-range-notation/
  *
  * We use pixels instead of ems because that is the convention and it helps prevent a Safari bug with how they calculate ems (i.e. they use font-size + zoom level)
  * https://cgamesplay.com/post/2023/05/19/stop-using-em-in-media-queries/
+ *
+ * https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/ is another viewpoint on this and considers users increacing the default
+ * font size in their browser settings. Need to explore this more. 10/26/2024
  */
 
 /* 3xs */

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "cacao-css",
     "description": "A set of composable CSS utilities that provide a solid foundation for website projects.",
-    "version": "6.2.0",
+    "version": "6.4.0",
     "author": "Aptuitiv, Inc <hello@aptuitiv.com>",
     "license": "MIT",
     "repository": {
@@ -13,10 +13,12 @@
         "email": "support@aptuitiv.com"
     },
     "bin": {
+        "cacao-convert-v3": "./scripts/v3/index.js",
         "cacao-convert-v6": "./scripts/v6/index.js"
     },
     "files": [
         "dist",
+        "scripts/v3",
         "scripts/v6"
     ],
     "type": "module",
@@ -25,6 +27,7 @@
         "build-gutters": "node scripts/build gutters",
         "build-imports": "node scripts/build imports",
         "build-margins": "node scripts/build margins",
+        "build-media-queries": "node scripts/build media",
         "build-paddings": "node scripts/build paddings",
         "eslint": "eslint --fix .",
         "watch": "esw -w --color --fix ."

package/scripts/v3/README.md

@@ -0,0 +1,19 @@
+# Cacao V3 conversion scripts
+
+This folder contains scripts to convert a website that was running on Cacao version 3 to run on the latest version of Cacao.
+
+## Update the CSS classes in template files
+
+This will recursively crawl the root directory for your template files and update any Cacao version 3 classes to the correct version 6 class.
+
+For example, if your templates are in `src/templates` you would run:
+
+```bash
+cacao-convert-v3 classes -d src/templates
+```
+
+It may also be good to run this on Javascript in case any utility classes were being set.
+
+```bash
+cacao-convert-v3 classes -d src/js
+```

package/scripts/v3/convert-classes.js

@@ -0,0 +1,136 @@
+/* ===========================================================================
+    Convert the V3 classes to the Cacao V6 format
+=========================================================================== */
+
+import chalk from 'chalk';
+import fancyLog from 'fancy-log';
+import fs from 'fs-extra';
+import logSymbols from 'log-symbols';
+import { basename } from 'path';
+import recursiveReadDir from 'recursive-readdir';
+
+/**
+ * Update the file with the new classes
+ *
+ * @param {string} file The path to the file to update
+ */
+const updateFile = (file) => {
+    // Read the file
+    let fileContents = fs.readFileSync(file, 'utf8');
+    const originalContents = fileContents;
+
+    // Breakpoints to convert
+    const classes = {
+        'u-cf': 'clearfix',
+        'u-cleanContent': 'last-child-sb-0',
+        'u-block': 'block',
+        'u-flexInline': 'inline-flex',
+        'u-flexRowReverse': 'flex-reverse',
+        'u-flexCol': 'flex-col',
+        'u-flexColReverse': 'flex-col-reverse',
+        'u-flexJustifyStart': 'justify-start',
+        'u-flexJustifyEnd': 'justify-end',
+        'u-flexJustifyCenter': 'justify-center',
+        'u-flexJustifyBetween': 'justify-between',
+        'u-flexJustifyAround': 'justify-around',
+        'u-flexAlignItemsStart': 'align-start',
+        'u-flexAlignItemsEnd': 'align-end',
+        'u-flexAlignItemsCenter': 'align-center',
+        'u-flex': 'flex',
+        'u-heightFull': 'h-1-1',
+        'u-hiddenVisually': 'visually-hidden',
+        'u-hidden': 'hidden',
+        'u-inline': 'inline',
+        'u-linkSubtle': 'link-subtle',
+        'u-posAbsolute': 'absolute',
+        'u-posRelative': 'relative',
+        'u-posStatic': 'static',
+        'u-printHide': 'print-hide',
+        'u-printShow': 'print-show',
+        'u-sizeFull': 'w-1-1',
+        'u-styleEm': 'style-italic',
+        'u-textBreak': 'break-word',
+        'u-textBreakAll': 'break-all',
+        'u-textLeft': 'text-start',
+        'u-textLower': 'text-lower',
+        'u-textNoWrap': 'no-wrap',
+        'u-textUpper': 'text-upper',
+        'u-textCenter': 'text-center',
+        'u-textRight': 'text-end',
+        'u-weightNormal': 'weight-normal',
+        'u-weightBold': 'weight-bold',
+        'u-widthFull': 'w-1-1',
+        'Grid--alignBottom': 'align-end',
+        'Grid--alignMiddle': 'align-center',
+        'Grid--alignCenter': 'justify-center',
+        'Grid--alignRight': 'justify-end',
+        'Grid--withGutterSm': 'g-1',
+        'Grid--withGutterLg': 'g-4',
+        'Grid--withGutterXlg': 'g-6',
+        'Grid--withGutterXxlg': 'g-8',
+        'Grid--withGutter': 'g-2',
+        'FlexEmbed-ratio--': 'aspect-',
+        'FlexEmbed-ratio': '',
+        'FlexEmbed-content': '',
+        FlexEmbed: 'embed',
+        'Grid-cell': '',
+        'Image Image--left': 'image-left',
+        'Image--left': 'image-left',
+        'Image Image--right': 'image-right',
+        'Image--right': 'image-right',
+
+    };
+
+    // Replace the classes
+    Object.keys(classes).forEach((key) => {
+        fileContents = fileContents.replaceAll(key, classes[key]);
+    });
+
+    fileContents = fileContents.replace(/u-gutters(\d+)/g, 'px-$1');
+    fileContents = fileContents.replace(/u-guttersMarg(\d+)/g, 'mx-$1');
+    fileContents = fileContents.replace(/u-margTop(\d+)/g, 'mt-$1');
+    fileContents = fileContents.replace(/u-margRight(\d+)/g, 'me-$1');
+    fileContents = fileContents.replace(/u-margBottom(\d+)/g, 'mb-$1');
+    fileContents = fileContents.replace(/u-margLeft(\d+)/g, 'ms-$1');
+    fileContents = fileContents.replace(/u-padTop(\d+)/g, 'pt-$1');
+    fileContents = fileContents.replace(/u-padRight(\d+)/g, 'pe-$1');
+    fileContents = fileContents.replace(/u-padBottom(\d+)/g, 'pb-$1');
+    fileContents = fileContents.replace(/u-padLeft(\d+)/g, 'ps-$1');
+    fileContents = fileContents.replace(/u-rowGap(\d+)/g, 'gy-$1');
+    fileContents = fileContents.replace(/u-spaced(\d+)/g, 'py-$1');
+    fileContents = fileContents.replace(/"Grid"/g, '"grid"');
+    fileContents = fileContents.replace(/"Grid(\s+)/g, '"grid$1');
+
+    // Replace any empty spaces in class attributes
+    fileContents = fileContents.replace(/class="\s+/g, 'class="');
+
+    if (fileContents !== originalContents) {
+        // Write the new file
+        fs.writeFileSync(file, fileContents);
+        fancyLog(logSymbols.success, chalk.green('Updated', chalk.cyan(file)));
+    } else {
+        fancyLog(logSymbols.info, chalk.blue('Skipped', chalk.cyan(file)));
+    }
+};
+
+/**
+ * Convert the class names in the CSS files to the Cacao V6 format
+ *
+ * @param {object} args The command line arguments. "dir" is the directory to convert.
+ */
+const convertClasses = (args) => {
+    fancyLog(chalk.magenta('Converting classes', chalk.cyan(args.dir)));
+
+    // Recursively read the directory and then update the files
+    recursiveReadDir(args.dir).then((files) => {
+        files.sort();
+        files.forEach((file) => {
+            if (basename(file) !== '.DS_Store') {
+                updateFile(file);
+            }
+        });
+        fancyLog(logSymbols.success, chalk.green('Finished converting classes'));
+    });
+};
+
+export default convertClasses;

package/scripts/v3/index.js

@@ -0,0 +1,36 @@
+#! /usr/bin/env node
+
+import { Command } from 'commander';
+import fs from 'fs-extra';
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+import convertClasses from './convert-classes.js';
+
+// Get the directory name of the current module
+// eslint-disable-next-line no-underscore-dangle -- The dangle is used to match the __dirname variable in Node.js
+const __dirname = dirname(dirname(dirname(fileURLToPath(import.meta.url))));
+
+// Get the current package.json information
+const thisPackageJson = fs.readJsonSync(`${__dirname}/package.json`);
+
+// Set up the command line options
+const program = new Command();
+program.description('Convert Cacao CSS versions 3 to the current version');
+program.version(thisPackageJson.version);
+
+/**
+ * Convert the V3 classes to V6 format
+ *
+ * cacao-convert-v3 classes -d src/templates
+ */
+program
+    .command('classes')
+    .description('Convert the V3 classes to V6 format')
+    .requiredOption('-d, --dir <path>', 'The root path for the templates. The path should be relative to the root of the project.')
+    .action(async (args) => {
+        convertClasses(args);
+    });
+
+// Parse the command line arguments
+program.parse();

package/scripts/v6/convert-breakpoints.js

@@ -21,11 +21,21 @@ const updateFile = (file) => {
 
     // Breakpoints to convert
     const breakpoints = {
+        '--c-bp-3xs': '--m-3xs',
+        '--c-bp-xxxs': '--m-3xs',
+        '--c-bp-2xs': '--m-2xs',
+        '--c-bp-xxs': '--m-2xs',
+        '--c-bp-xs': '--m-xs',
         '--c-bp-sm': '--m-sm',
         '--c-bp-md': '--m-md',
         '--c-bp-lg': '--m-lg',
         '--c-bp-xl': '--m-xl',
         '--c-bp-xxl': '--m-2xl',
+        '--c-bp-2xl': '--m-2xl',
+        '--c-bp-xxxl': '--m-3xl',
+        '--c-bp-3xl': '--m-3xl',
+        '--c-bp-4xl': '--m-4xl',
+        '--c-bp-5xl': '--m-5xl',
     };
 
     // Replace the breakpoint classes