feat: add strict option (#532)

acss-io · Nov 23, 2022 · 2041b46 · 2041b46
1 parent b9a1dcf
commit 2041b46
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 4 deletions.
diff --git a/.changeset/sharp-laws-boil.md b/.changeset/sharp-laws-boil.md
@@ -0,0 +1,5 @@
+---
+"atomizer": minor
+---
+
+feat: add strict option
diff --git a/packages/atomizer/README.md b/packages/atomizer/README.md
@@ -40,6 +40,7 @@ Usage: atomizer [options] [path]
     --rtl                               swaps `start` and `end` keyword replacements with `right` and `left`.
     --exclude=[pattern]                 pattern to exclude file to be scanned
     --bump-mq                           increases specificity of media queries a small amount
+    --strict                            bail if missing configs such as breakpoints.
     --verbose                           show additional log info (warnings).
 ```
 

diff --git a/packages/atomizer/bin/atomizer b/packages/atomizer/bin/atomizer
@@ -41,6 +41,7 @@ program
     .option('--rtl', 'swaps `start` and `end` keyword replacements with `right` and `left`')
     .option('--bump-mq', 'increases specificity of media queries a small amount')
     .option('--ie', '[deprecated] no longer used')
+    .option('--strict', 'bail if missing configs such as breakpoints')
     .option('--verbose', 'show additional log info (warnings)')
     .option('--quiet', 'hide processing info')
     .parse(process.argv);

diff --git a/packages/atomizer/index.d.ts b/packages/atomizer/index.d.ts
@@ -20,6 +20,8 @@ declare module 'atomizer' {
         rtl?: boolean;
         /** Path to custom rules file */
         rules?: string;
+        /** Bail if missing declarations such as break points */
+        strict?: boolean;
         /** Show additional log info (warnings) */
         verbose?: boolean;
     }

diff --git a/packages/atomizer/package.json b/packages/atomizer/package.json
@@ -24,8 +24,8 @@
         "*.d.ts"
     ],
     "scripts": {
-        "lint": "eslint --ext .js .",
-        "lint:fix": "eslint --ext .js . --fix",
+        "lint": "eslint --ext .js . && prettier . --check",
+        "lint:fix": "eslint --ext .js . --fix && prettier . --write",
         "test": "jest tests/"
     },
     "bin": {

diff --git a/packages/atomizer/src/atomizer.js b/packages/atomizer/src/atomizer.js
@@ -28,7 +28,9 @@ const GLOBAL_VALUES = {
  * @param {Array<import('atomizer').AtomizerRule>} [rules] List of custom rules
  */
 function Atomizer(options, rules) {
-    this.verbose = (options && options.verbose) || false;
+    options = options || {};
+    this.strict = options.strict || false;
+    this.verbose = options.verbose || false;
     this.rules = [];
     // we have two different objects to avoid name collision
     this.rulesMap = {};
@@ -481,6 +483,8 @@ Atomizer.prototype.parseConfig = function (config, options) {
  */
 Atomizer.prototype.getCss = function (config, options) {
     const jss = {};
+    const isStrict = this.strict;
+    const isVerbose = this.verbose;
     let content = '';
     let breakPoints;
 
@@ -532,6 +536,20 @@ Atomizer.prototype.getCss = function (config, options) {
                 }
 
                 const breakPoint = breakPoints && breakPoints[treeo.breakPoint];
+                if (treeo.breakPoint && !breakPoint) {
+                    const message = [
+                        `Class \`${treeo.className}\` contains breakpoint \`${treeo.breakPoint}\` which does not exist and must be manually added to your config file:`,
+                        '"breakPoints": {',
+                        `    "${treeo.breakPoint}": <YOUR-CUSTOM-VALUE>`,
+                        '}',
+                    ].join('\n');
+                    if (isStrict) {
+                        console.error('Error:', message);
+                        process.exit(1);
+                    } else if (isVerbose) {
+                        console.warn('Warning:', message);
+                    }
+                }
 
                 // this is where we start writing the selector
                 selector = Atomizer.escapeSelector(treeo.className);

diff --git a/packages/atomizer/src/build.js b/packages/atomizer/src/build.js
@@ -80,7 +80,7 @@ module.exports.buildAtomicCss = function (files, config = {}, options = {}, done
     }
 
     // Instantiate Atomizer
-    const atomizer = new Atomizer({ verbose: !!options.verbose });
+    const atomizer = new Atomizer({ strict: !!options.strict, verbose: !!options.verbose });
 
     // Custom rulesets
     const rulesFiles = options.rules;

diff --git a/packages/atomizer/tests/atomizer.test.js b/packages/atomizer/tests/atomizer.test.js
@@ -362,6 +362,24 @@ describe('Atomizer()', () => {
         });
     });
     describe('getCss()', () => {
+        it('should bail if a breakpoint is missing in strict mode', () => {
+            const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+            const processExit = jest.spyOn(process, 'exit').mockImplementation(() => {});
+
+            new Atomizer({ strict: true }).getCss({ classNames: ['W(100%)--sm'] });
+
+            expect(consoleError).toHaveBeenCalledWith(
+                'Error:',
+                expect.stringContaining(
+                    'Class `W(100%)--sm` contains breakpoint `sm` which does not exist and must be manually added to your config file'
+                )
+            );
+            consoleError.mockRestore();
+
+            expect(processExit).toHaveBeenCalledWith(1);
+            processExit.mockRestore();
+        });
+
         it('returns expected css for custom classes with break points', () => {
             // set rules here so if helper change, we don't fail the test
             const atomizer = new Atomizer();