fix: add development flag back and externalize our published componen…

…t classes (#129)

Co-authored-by: AnnaRybkina <anna.rybkina@schibsted.com>
Co-authored-by: BalbinaK <balbuhhha@gmail.com>

README.md

@@ -4,10 +4,15 @@
 
 ## plugin API
 
-### skipPreflight
+### development
 
 - `boolean`
-- Internal use only, omits preflights from the build
+- Internal use only - force preflights(resets.css + transform resets) to be excluded and no externalized classes will be processed
+
+### omitComponentClasses
+
+- `boolean`
+- if true forces component classes to be excluded from the process. Styling for the classes already used in component classes won't be generated.
 
 ### usePixels
 

dev.js

@@ -23,7 +23,7 @@ const {
   },
 });
 
-const uno = createGenerator({ presets: [presetWarp( { ...options, skipPreflight: true } )] });
+const uno = createGenerator({ presets: [presetWarp( { ...options, development: true } )] });
 const devClasses = ['m-16!', 'opacity-50'];
 const classes = cliClasses ?? devClasses;
 const result = await uno.generate(classes);

package.json

@@ -55,6 +55,9 @@
     "vite": "^4.2.0",
     "vitest": "^0.29.3"
   },
+  "peerDependencies": {
+    "@warp-ds/component-classes": "1.0.0-alpha.110"
+  },
   "eslintConfig": {
     "extends": "@warp-ds"
   },

src/plugin.js

@@ -1,32 +1,35 @@
+import { classes } from '@warp-ds/component-classes/classes';
 import { preflights } from '#preflights';
 import { rules } from '#rules';
 import { shortcuts } from '#shortcuts';
 import { variants } from '#variants';
 import { useTheme } from '#theme';
 import { postprocess } from '#postprocess';
-
 /**
  * @typedef PluginOptions
  * @type {Object}
- * @property {boolean} skipPreflight // internal use only - force preflights to be excluded
- * @property {boolean} externalizeClasses - force external or 'core' classes to be included/excluded
+ * @property {boolean} development // internal use only - force preflights to be excluded and no external classes will be processed
+ * @property {boolean} externalizeClasses - if true forces external or 'core' classes to be excluded from the process.
+ * @property {boolean} omitComponentClasses - if true forces component classes to be excluded from the process.
+ * @property {Array} externalClasses - list of classes that will not be processed
  * @property {boolean} usePixels - use pixel spacing instead of rem
  */
 
 // TODO: improve generic type passed here
 /** @type {import('@unocss/core').Preset<object>} */
 export function presetWarp (options = {}) {
   checkEnvironment();
-  const externalizeClasses = options.externalizeClasses;
-  const externalClasses = options.externalClasses ?? []; // will possibly be our own list in the future
+  const externalizeClasses = options.externalizeClasses ?? !options.development; // 'true' by default
+  const safeExternalClasses = options.externalClasses || [];
+  const excludedClasses = options.omitComponentClasses ? [...classes, ...safeExternalClasses] : safeExternalClasses;
   const theme = useTheme(options);
   return {
     name: '@warp-ds/uno',
     theme,
     rules,
     variants,
-    preflights: options.skipPreflight ? [] : preflights,
-    postprocess: postprocess(externalizeClasses, externalClasses),
+    preflights: options.development ? [] : preflights,
+    postprocess: postprocess(externalizeClasses, excludedClasses),
     shortcuts,
   };
 }

test/_helpers.js

@@ -2,10 +2,10 @@ import { createGenerator } from '@unocss/core';
 import { beforeEach } from 'vitest';
 import { presetWarp } from '#plugin';
 
-export const getGenerator = (opts = {}) => createGenerator({ presets: [presetWarp({ ...opts, skipPreflight: true })] });
+export const getGenerator = (opts = {}) => createGenerator({ presets: [presetWarp({ ...opts, development: true })] });
 export const setup = (opts = {}) => {
   beforeEach(t => {
-    t.uno = getGenerator({ ...opts, skipPreflight: true });
+    t.uno = getGenerator({ ...opts, development: true });
   });
 };
 

vite.config.js

@@ -4,7 +4,7 @@ import { presetWarp } from '#plugin';
 
 export default defineConfig({
   plugins: [
-    UnoCSS({ presets: [presetWarp({ skipPreflight: true })] }),
+    UnoCSS({ presets: [presetWarp({ development: true })] }),
   ],
   test: {
     include: ['./test/*.js'],