cacao-css 5.5.0 → 6.0.0

package/scripts/v6/convert-breakpoints.js

@@ -0,0 +1,65 @@
+/* ===========================================================================
+    Convert the breakpoint variables 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 breakpoints
+ *
+ * @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 breakpoints = {
+        '--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',
+    };
+
+    // Replace the breakpoint classes
+    Object.keys(breakpoints).forEach((key) => {
+        fileContents = fileContents.replaceAll(key, breakpoints[key]);
+    });
+
+    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 convertBreakpoints = (args) => {
+    fancyLog(chalk.magenta('Converting breakpoints', 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 breakpoints'));
+    });
+};
+
+export default convertBreakpoints;

package/scripts/v6/convert-classes.js

@@ -0,0 +1,100 @@
+/* ===========================================================================
+    Convert the CSS class names in templates 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 class names
+ *
+ * @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;
+
+    // Replace the breakpoint classes
+    fileContents = fileContents.replace('-xxs', '-2xs');
+    fileContents = fileContents.replace('-xxl', '-2xl');
+
+    // Convert aspect ratio classes
+    fileContents = fileContents.replace(/aspect-([a-z]+)-(\d+-\d+)/g, 'aspect-$2-$1');
+
+    // Convert grid column classes
+    fileContents = fileContents.replace(/col-([a-z]+)-(\d+-\d+)/g, 'col-$2-$1');
+
+    // Convert gutter classes
+    fileContents = fileContents.replace(/g-([a-z]+)-(\d+)/g, 'g-$2-$1');
+    fileContents = fileContents.replace(/gx-([a-z]+)-(\d+)/g, 'gx-$2-$1');
+    fileContents = fileContents.replace(/gy-([a-z]+)-(\d+)/g, 'gy-$2-$1');
+
+    // Convert height classes
+    fileContents = fileContents.replace(/h-([a-z]+)-(\d+-\d+)/g, 'h-$2-$1');
+    fileContents = fileContents.replace(/h-([a-z]+)-(\d+)/g, 'h-$2-$1');
+
+    // Convert margin classes
+    fileContents = fileContents.replace(/m-([a-z]+)-(\d+)/g, 'm-$2-$1');
+    fileContents = fileContents.replace(/mb-([a-z]+)-(\d+)/g, 'mb-$2-$1');
+    fileContents = fileContents.replace(/me-([a-z]+)-(\d+)/g, 'me-$2-$1');
+    fileContents = fileContents.replace(/mx-([a-z]+)-(\d+)/g, 'mx-$2-$1');
+    fileContents = fileContents.replace(/ms-([a-z]+)-(\d+)/g, 'ms-$2-$1');
+    fileContents = fileContents.replace(/mt-([a-z]+)-(\d+)/g, 'mt-$2-$1');
+    fileContents = fileContents.replace(/my-([a-z]+)-(\d+)/g, 'my-$2-$1');
+
+    // Convert padding classes
+    fileContents = fileContents.replace(/p-([a-z]+)-(\d+)/g, 'p-$2-$1');
+    fileContents = fileContents.replace(/pb-([a-z]+)-(\d+)/g, 'pb-$2-$1');
+    fileContents = fileContents.replace(/pe-([a-z]+)-(\d+)/g, 'pe-$2-$1');
+    fileContents = fileContents.replace(/px-([a-z]+)-(\d+)/g, 'px-$2-$1');
+    fileContents = fileContents.replace(/ps-([a-z]+)-(\d+)/g, 'ps-$2-$1');
+    fileContents = fileContents.replace(/pt-([a-z]+)-(\d+)/g, 'pt-$2-$1');
+    fileContents = fileContents.replace(/py-([a-z]+)-(\d+)/g, 'py-$2-$1');
+
+    // Convert pull classes
+    fileContents = fileContents.replace(/pull-([a-z]+)-(\d+-\d+)/g, 'pull-$2-$1');
+    fileContents = fileContents.replace(/pull-([a-z]+)-(\d+)/g, 'pull-$2-$1');
+
+    // Convert push classes
+    fileContents = fileContents.replace(/push-([a-z]+)-(\d+-\d+)/g, 'push-$2-$1');
+    fileContents = fileContents.replace(/push-([a-z]+)-(\d+)/g, 'push-$2-$1');
+
+    // Convert width classes
+    fileContents = fileContents.replace(/w-([a-z]+)-(\d+-\d+)/g, 'w-$2-$1');
+    fileContents = fileContents.replace(/w-([a-z]+)-(\d+)/g, 'w-$2-$1');
+
+    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 CSS class names', 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 CSS class names'));
+    });
+};
+
+export default convertClasses;

package/scripts/v6/convert-imports.js

@@ -0,0 +1,62 @@
+/* ===========================================================================
+    Convert the older imports to the Cacao V6 format
+=========================================================================== */
+
+import chalk from 'chalk';
+import fancyLog from 'fancy-log';
+import fs from 'fs-extra';
+import logSymbols from 'log-symbols';
+
+const convertImports = (args) => {
+    fancyLog(chalk.magenta('Converting Cacao imports', chalk.cyan(args.file)));
+
+    // Get the file to convert
+    const { file } = args;
+
+    // Read the file
+    let fileContents = fs.readFileSync(file, 'utf8');
+
+    // Fix the import path
+    fileContents = fileContents.replaceAll('../../node_modules/', '');
+    fileContents = fileContents.replaceAll('cacao-css/src/', 'cacao-css/dist/');
+
+    // Fix the media query file import path
+    fileContents = fileContents.replace('dist/config.css', 'dist/media.css');
+
+    // Fix the reset and base import paths
+    fileContents = fileContents.replace('/reset/reset.css', '/reset.css');
+    fileContents = fileContents.replace('/base/base.css', '/base.css');
+
+    // Fix the "Layout" import path
+    fileContents = fileContents.replace('/* Layout */', '/* Clearfix */');
+    fileContents = fileContents.replace('/layout/core/layout.css', '/clearfix/clearfix.css');
+    fileContents = fileContents.replace('/layout/layout.css', '/clearfix/clearfix.css');
+
+    // Fix the "size" import path
+    fileContents = fileContents.replace(/@import 'cacao-css\/dist\/size\/size.css';/g, '@import \'cacao-css/dist/height/height-1.css\';\n@import \'cacao-css/dist/width/width-1.css\';');
+    fileContents = fileContents.replace(/@import 'cacao-css\/dist\/size\/(.*)\/size.css';/g, '@import \'cacao-css/dist/height/$1/height-1.css\';\n@import \'cacao-css/dist/width/$1/width-1.css\';');
+    fileContents = fileContents.replaceAll('/* Size ', '/* Height and width ');
+
+    // Fix the breakpoint paths
+    fileContents = fileContents.replaceAll('/xxs/', '/2xs/');
+    fileContents = fileContents.replaceAll('/xxl/', '/2xl/');
+
+    // Fix grid import paths
+    fileContents = fileContents.replace(/\/grid\/(.*)\/col-(.*).css/g, '/grid-column/$1/col-$2.css');
+
+    // Remove the "/core/" path
+    fileContents = fileContents.replaceAll('/core/', '/');
+
+    // Remove commented out imports
+    fileContents = fileContents.replace(/\/\* @import .*\*\//g, '');
+
+    // Remove duplicate line breaks
+    fileContents = fileContents.replace(/\n{3,}/g, '\n\n');
+
+    // Write the new file
+    fs.writeFileSync(file, fileContents);
+
+    fancyLog(logSymbols.success, chalk.green('Finished converting Cacao imports'));
+};
+
+export default convertImports;

package/scripts/v6/index.js

@@ -0,0 +1,64 @@
+#! /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';
+import convertImports from './convert-imports.js';
+import convertBreakpoints from './convert-breakpoints.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 4 or 5 to version 6');
+program.version(thisPackageJson.version);
+
+/**
+ * Convert the media query breakpoint variables to the Cacao V6 format
+ *
+ * cacao-convert-v6 breakpoints -d src/css
+ */
+program
+    .command('breakpoints')
+    .description('Convert the media query breakpoint variables in CSS to V6 format')
+    .requiredOption('-d, --dir <path>', 'The root path for the CSS files. The path should be relative to the root of the project.')
+    .action(async (args) => {
+        convertBreakpoints(args);
+    });
+
+/**
+ * Convert the CSS class names in templates to the Cacao V6 format
+ *
+ * cacao-convert-v6 classes -d src/templates
+ */
+program
+    .command('classes')
+    .description('Convert the CSS class names in templates 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);
+    });
+
+/**
+ * Convert the older imports to the Cacao V6 format
+ *
+ * cacao-convert-v6 imports -f src/css/main.css
+ */
+program
+    .command('imports')
+    .description('Convert the CSS imports to V6 format')
+    .requiredOption('-f, --file <file>', 'The file to convert. The path should be relative to the root of the project.')
+    .action(async (args) => {
+        convertImports(args);
+    });
+
+// Parse the command line arguments
+program.parse();

package/.editorconfig

@@ -1,16 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-[*]
-charset=utf-8
-end_of_line=lf
-insert_final_newline=true
-indent_style=space
-indent_size=4
-trim_trailing_whitespace = true
-
-[*.{diff,md}]
-trim_trailing_whitespace = false

package/.prettierignore

@@ -1,10 +0,0 @@
-# Put files to ignore by Prettier here. https://prettier.io/docs/en/ignore.html
-
-# Ignore markdown files. They conflict with other markdown formatting rules.
-*.md
-
-# Ignore package-lock
-package-lock.json
-
-# Ignore HTML files. Specifically template html files
-*.html

package/.prettierrc.json

@@ -1,13 +0,0 @@
-{
-    "arrowParens": "always",
-    "semi": true,
-    "singleQuote": true,
-    "overrides": [
-        {
-            "files": "*.css",
-            "options": {
-                "printWidth": 120
-            }
-        }
-    ]
-}

package/.stylelintrc

@@ -1,105 +0,0 @@
-{
-    "plugins": [
-        "stylelint-order",
-        "stylelint-selector-bem-pattern"
-    ],
-    "rules": {
-        "plugin/selector-bem-pattern": {
-        "preset": "suit",
-        "utilitySelectors": "^\\.u-(xl-|xs-|sm-|md-|lg-)?(?:[a-z0-9][a-zA-Z0-9]*)+$"
-        },
-        "at-rule-empty-line-before": null,
-        "at-rule-no-vendor-prefix": null,
-        "block-closing-brace-newline-after": "always",
-        "block-closing-brace-newline-before": "always",
-        "block-closing-brace-space-after": null,
-        "block-closing-brace-space-before": null,
-        "block-opening-brace-newline-after": "always",
-        "block-opening-brace-newline-before": null,
-        "block-opening-brace-space-after": null,
-        "block-opening-brace-space-before": "always",
-        "block-no-empty": null,
-        "color-hex-case": "lower",
-        "color-hex-length": null,
-        "color-named": "never",
-        "color-no-hex": null,
-        "color-no-invalid-hex": true,
-        "comment-empty-line-before": ["always", {
-            "ignore": ["stylelint-commands"]
-        }],
-        "comment-whitespace-inside": "always",
-        "custom-media-pattern": null,
-        "custom-property-pattern": null,
-        "declaration-bang-space-after": "never",
-        "declaration-bang-space-before": "always",
-        "declaration-block-no-duplicate-properties": [true,{
-            "ignore": ["consecutive-duplicates-with-different-values"]
-        }],
-        "declaration-block-semicolon-newline-after": "always",
-        "declaration-block-semicolon-newline-before": "never-multi-line",
-        "declaration-block-semicolon-space-after": null,
-        "declaration-block-semicolon-space-before": "never",
-        "declaration-block-single-line-max-declarations": null,
-        "declaration-colon-newline-after": "always-multi-line",
-        "declaration-colon-space-after": "always-single-line",
-        "declaration-colon-space-before": "never",
-        "declaration-block-trailing-semicolon": "always",
-        "declaration-no-important": null,
-        "function-blacklist": null,
-        "function-calc-no-unspaced-operator": true,
-        "function-comma-newline-after": "always-multi-line",
-        "function-comma-newline-before": null,
-        "function-comma-space-after": "always-single-line",
-        "function-comma-space-before": "never",
-        "function-linear-gradient-no-nonstandard-direction": true,
-        "function-parentheses-newline-inside": null,
-        "function-parentheses-space-inside": "never-single-line",
-        "function-url-quotes": "always",
-        "function-whitelist": null,
-        "function-whitespace-after": "always",
-        "indentation": 4,
-        "max-empty-lines": 3,
-        "max-line-length": null,
-        "media-feature-colon-space-after": "always",
-        "media-feature-colon-space-before": "never",
-        "media-feature-name-no-vendor-prefix": null,
-        "media-feature-range-operator-space-after": "always",
-        "media-feature-range-operator-space-before": "always",
-        "media-query-list-comma-newline-after": "always-multi-line",
-        "media-query-list-comma-newline-before": "never-multi-line",
-        "media-query-list-comma-space-after": "always-single-line",
-        "media-query-list-comma-space-before": "never",
-        "media-feature-parentheses-space-inside": "never",
-        "no-eol-whitespace": null,
-        "no-missing-end-of-source-newline": null,
-        "number-leading-zero": "never",
-        "number-max-precision": 6,
-        "number-no-trailing-zeros": true,
-        "length-zero-no-unit": true,
-        "property-blacklist": null,
-        "property-no-vendor-prefix": null,
-        "declaration-property-unit-blacklist": null,
-        "declaration-property-unit-whitelist": null,
-        "property-whitelist": null,
-        "rule-empty-line-before": ["always", {"except": ["first-nested"], "ignore": ["after-comment"]}],
-        "selector-class-pattern": null,
-        "selector-combinator-space-after": "always",
-        "selector-combinator-space-before": "always",
-        "selector-id-pattern": null,
-        "selector-list-comma-newline-after": "always",
-        "selector-list-comma-newline-before": "never-multi-line",
-        "selector-list-comma-space-after": null,
-        "selector-list-comma-space-before": null,
-        "selector-no-vendor-prefix": null,
-        "selector-pseudo-element-colon-notation": "double",
-        "string-quotes": "single",
-        "unit-blacklist": null,
-        "unit-whitelist": null,
-        "value-no-vendor-prefix": null,
-        "value-list-comma-newline-after": "always-multi-line",
-        "value-list-comma-newline-before": "never-multi-line",
-        "value-list-comma-space-after": "always-single-line",
-        "value-list-comma-space-before": "never",
-        "order/properties-alphabetical-order": true
-    }
-}