cacao-css 6.1.0 → 6.3.0

package/dist/typography/3xs/combined-import.css

@@ -0,0 +1,9 @@
+/* =========================================================================== *
+   Typography utilities - 3xs - imports all the 3xs typography utility files
+ * =========================================================================== */
+
+@import './align.css';
+@import './break.css';
+@import './style.css';
+@import './transform.css';
+@import './weight.css';

package/dist/typography/4xl/combined-import.css

@@ -0,0 +1,9 @@
+/* =========================================================================== *
+   Typography utilities - 4xl - imports all the 4xl typography utility files
+ * =========================================================================== */
+
+@import './align.css';
+@import './break.css';
+@import './style.css';
+@import './transform.css';
+@import './weight.css';

package/dist/typography/5xl/combined-import.css

@@ -0,0 +1,9 @@
+/* =========================================================================== *
+   Typography utilities - 5xl - imports all the 5xl typography utility files
+ * =========================================================================== */
+
+@import './align.css';
+@import './break.css';
+@import './style.css';
+@import './transform.css';
+@import './weight.css';

package/dist/typography/combined-import.css

@@ -0,0 +1,9 @@
+/* =========================================================================== *
+   Typography utilities - imports all the  typography utility files
+ * =========================================================================== */
+
+@import './align.css';
+@import './break.css';
+@import './style.css';
+@import './transform.css';
+@import './weight.css';

package/dist/typography/lg/combined-import.css

@@ -0,0 +1,9 @@
+/* =========================================================================== *
+   Typography utilities - lg - imports all the lg typography utility files
+ * =========================================================================== */
+
+@import './align.css';
+@import './break.css';
+@import './style.css';
+@import './transform.css';
+@import './weight.css';

package/dist/typography/md/combined-import.css

@@ -0,0 +1,9 @@
+/* =========================================================================== *
+   Typography utilities - md - imports all the md typography utility files
+ * =========================================================================== */
+
+@import './align.css';
+@import './break.css';
+@import './style.css';
+@import './transform.css';
+@import './weight.css';

package/dist/typography/sm/combined-import.css

@@ -0,0 +1,9 @@
+/* =========================================================================== *
+   Typography utilities - sm - imports all the sm typography utility files
+ * =========================================================================== */
+
+@import './align.css';
+@import './break.css';
+@import './style.css';
+@import './transform.css';
+@import './weight.css';

package/dist/typography/xl/combined-import.css

@@ -0,0 +1,9 @@
+/* =========================================================================== *
+   Typography utilities - xl - imports all the xl typography utility files
+ * =========================================================================== */
+
+@import './align.css';
+@import './break.css';
+@import './style.css';
+@import './transform.css';
+@import './weight.css';

package/dist/typography/xs/combined-import.css

@@ -0,0 +1,9 @@
+/* =========================================================================== *
+   Typography utilities - xs - imports all the xs typography utility files
+ * =========================================================================== */
+
+@import './align.css';
+@import './break.css';
+@import './style.css';
+@import './transform.css';
+@import './weight.css';

package/dist/width/2xl/combined-import.css

@@ -0,0 +1,18 @@
+/* =========================================================================== *
+   Width utilities - 2xl - imports all the 2xl width utility files
+ * =========================================================================== */
+
+@import './width-0.css';
+@import './width-1.css';
+@import './width-10.css';
+@import './width-11.css';
+@import './width-12.css';
+@import './width-2.css';
+@import './width-3.css';
+@import './width-4.css';
+@import './width-5.css';
+@import './width-6.css';
+@import './width-7.css';
+@import './width-8.css';
+@import './width-9.css';
+@import './width-auto.css';

package/dist/width/2xs/combined-import.css

@@ -0,0 +1,18 @@
+/* =========================================================================== *
+   Width utilities - 2xs - imports all the 2xs width utility files
+ * =========================================================================== */
+
+@import './width-0.css';
+@import './width-1.css';
+@import './width-10.css';
+@import './width-11.css';
+@import './width-12.css';
+@import './width-2.css';
+@import './width-3.css';
+@import './width-4.css';
+@import './width-5.css';
+@import './width-6.css';
+@import './width-7.css';
+@import './width-8.css';
+@import './width-9.css';
+@import './width-auto.css';

package/dist/width/3xl/combined-import.css

@@ -0,0 +1,18 @@
+/* =========================================================================== *
+   Width utilities - 3xl - imports all the 3xl width utility files
+ * =========================================================================== */
+
+@import './width-0.css';
+@import './width-1.css';
+@import './width-10.css';
+@import './width-11.css';
+@import './width-12.css';
+@import './width-2.css';
+@import './width-3.css';
+@import './width-4.css';
+@import './width-5.css';
+@import './width-6.css';
+@import './width-7.css';
+@import './width-8.css';
+@import './width-9.css';
+@import './width-auto.css';

package/dist/width/3xs/combined-import.css

@@ -0,0 +1,18 @@
+/* =========================================================================== *
+   Width utilities - 3xs - imports all the 3xs width utility files
+ * =========================================================================== */
+
+@import './width-0.css';
+@import './width-1.css';
+@import './width-10.css';
+@import './width-11.css';
+@import './width-12.css';
+@import './width-2.css';
+@import './width-3.css';
+@import './width-4.css';
+@import './width-5.css';
+@import './width-6.css';
+@import './width-7.css';
+@import './width-8.css';
+@import './width-9.css';
+@import './width-auto.css';

package/dist/width/4xl/combined-import.css

@@ -0,0 +1,18 @@
+/* =========================================================================== *
+   Width utilities - 4xl - imports all the 4xl width utility files
+ * =========================================================================== */
+
+@import './width-0.css';
+@import './width-1.css';
+@import './width-10.css';
+@import './width-11.css';
+@import './width-12.css';
+@import './width-2.css';
+@import './width-3.css';
+@import './width-4.css';
+@import './width-5.css';
+@import './width-6.css';
+@import './width-7.css';
+@import './width-8.css';
+@import './width-9.css';
+@import './width-auto.css';

package/dist/width/5xl/combined-import.css

@@ -0,0 +1,18 @@
+/* =========================================================================== *
+   Width utilities - 5xl - imports all the 5xl width utility files
+ * =========================================================================== */
+
+@import './width-0.css';
+@import './width-1.css';
+@import './width-10.css';
+@import './width-11.css';
+@import './width-12.css';
+@import './width-2.css';
+@import './width-3.css';
+@import './width-4.css';
+@import './width-5.css';
+@import './width-6.css';
+@import './width-7.css';
+@import './width-8.css';
+@import './width-9.css';
+@import './width-auto.css';

package/dist/width/combined-import.css

@@ -0,0 +1,18 @@
+/* =========================================================================== *
+   Width utilities - imports all the  width utility files
+ * =========================================================================== */
+
+@import './width-0.css';
+@import './width-1.css';
+@import './width-10.css';
+@import './width-11.css';
+@import './width-12.css';
+@import './width-2.css';
+@import './width-3.css';
+@import './width-4.css';
+@import './width-5.css';
+@import './width-6.css';
+@import './width-7.css';
+@import './width-8.css';
+@import './width-9.css';
+@import './width-auto.css';

package/dist/width/lg/combined-import.css

@@ -0,0 +1,18 @@
+/* =========================================================================== *
+   Width utilities - lg - imports all the lg width utility files
+ * =========================================================================== */
+
+@import './width-0.css';
+@import './width-1.css';
+@import './width-10.css';
+@import './width-11.css';
+@import './width-12.css';
+@import './width-2.css';
+@import './width-3.css';
+@import './width-4.css';
+@import './width-5.css';
+@import './width-6.css';
+@import './width-7.css';
+@import './width-8.css';
+@import './width-9.css';
+@import './width-auto.css';

package/dist/width/md/combined-import.css

@@ -0,0 +1,18 @@
+/* =========================================================================== *
+   Width utilities - md - imports all the md width utility files
+ * =========================================================================== */
+
+@import './width-0.css';
+@import './width-1.css';
+@import './width-10.css';
+@import './width-11.css';
+@import './width-12.css';
+@import './width-2.css';
+@import './width-3.css';
+@import './width-4.css';
+@import './width-5.css';
+@import './width-6.css';
+@import './width-7.css';
+@import './width-8.css';
+@import './width-9.css';
+@import './width-auto.css';

package/dist/width/sm/combined-import.css

@@ -0,0 +1,18 @@
+/* =========================================================================== *
+   Width utilities - sm - imports all the sm width utility files
+ * =========================================================================== */
+
+@import './width-0.css';
+@import './width-1.css';
+@import './width-10.css';
+@import './width-11.css';
+@import './width-12.css';
+@import './width-2.css';
+@import './width-3.css';
+@import './width-4.css';
+@import './width-5.css';
+@import './width-6.css';
+@import './width-7.css';
+@import './width-8.css';
+@import './width-9.css';
+@import './width-auto.css';

package/dist/width/xl/combined-import.css

@@ -0,0 +1,18 @@
+/* =========================================================================== *
+   Width utilities - xl - imports all the xl width utility files
+ * =========================================================================== */
+
+@import './width-0.css';
+@import './width-1.css';
+@import './width-10.css';
+@import './width-11.css';
+@import './width-12.css';
+@import './width-2.css';
+@import './width-3.css';
+@import './width-4.css';
+@import './width-5.css';
+@import './width-6.css';
+@import './width-7.css';
+@import './width-8.css';
+@import './width-9.css';
+@import './width-auto.css';

package/dist/width/xs/combined-import.css

@@ -0,0 +1,18 @@
+/* =========================================================================== *
+   Width utilities - xs - imports all the xs width utility files
+ * =========================================================================== */
+
+@import './width-0.css';
+@import './width-1.css';
+@import './width-10.css';
+@import './width-11.css';
+@import './width-12.css';
+@import './width-2.css';
+@import './width-3.css';
+@import './width-4.css';
+@import './width-5.css';
+@import './width-6.css';
+@import './width-7.css';
+@import './width-8.css';
+@import './width-9.css';
+@import './width-auto.css';

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.1.0",
+    "version": "6.3.0",
     "author": "Aptuitiv, Inc <hello@aptuitiv.com>",
     "license": "MIT",
     "repository": {
@@ -13,17 +13,21 @@
         "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",
     "scripts": {
         "build": "node scripts/build all",
         "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

package/dist/gutter/2xl/variables.css

@@ -1,26 +0,0 @@
-/* =========================================================================== *
-  Variables for the gutter sizes
- * =========================================================================== */
-
-@media (--m-2xl) {
-    /* :where() is used to give the variables no specificity so that they are easily overriden. https://developer.mozilla.org/en-US/docs/Web/CSS/:where     */
-
-    :where(html)-2xl {
-        --gutter-0: 0px;
-        --gutter-1: 10px;
-        --gutter-2: 20px;
-        --gutter-3: 30px;
-        --gutter-4: 40px;
-        --gutter-5: 50px;
-        --gutter-6: 60px;
-        --gutter-7: 70px;
-        --gutter-8: 80px;
-        --gutter-9: 90px;
-        --gutter-10: 100px;
-        --gutter-11: 120px;
-        --gutter-12: 160px;
-        --gutter-13: 240px;
-        --gutter-14: 320px;
-        --gutter-15: 480px;
-    }
-}

package/dist/gutter/2xs/variables.css

@@ -1,26 +0,0 @@
-/* =========================================================================== *
-  Variables for the gutter sizes
- * =========================================================================== */
-
-@media (--m-2xs) {
-    /* :where() is used to give the variables no specificity so that they are easily overriden. https://developer.mozilla.org/en-US/docs/Web/CSS/:where     */
-
-    :where(html)-2xs {
-        --gutter-0: 0px;
-        --gutter-1: 10px;
-        --gutter-2: 20px;
-        --gutter-3: 30px;
-        --gutter-4: 40px;
-        --gutter-5: 50px;
-        --gutter-6: 60px;
-        --gutter-7: 70px;
-        --gutter-8: 80px;
-        --gutter-9: 90px;
-        --gutter-10: 100px;
-        --gutter-11: 120px;
-        --gutter-12: 160px;
-        --gutter-13: 240px;
-        --gutter-14: 320px;
-        --gutter-15: 480px;
-    }
-}