fix: remove @warp-ds/css dep to fix circular dependency (#149)

Co-authored-by: AnnaRybkina <37986637+AnnaRybkina@users.noreply.github.com>

README.md

@@ -14,11 +14,6 @@
 - `boolean`
 - If true forces resets to be excluded from preflights
 
-### 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
 
 - `boolean`

dev.js

@@ -20,9 +20,6 @@ const {
     usePixels: {
       type: 'boolean',
     },
-    omitComponentClasses: {
-      type: 'boolean',
-    },
     skipResets: {
       type: 'boolean',
     },

package.json

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

src/plugin.js

@@ -1,4 +1,3 @@
-import { classes } from '@warp-ds/css/component-classes/classes';
 import { preflights } from '#preflights';
 import { rules } from '#rules';
 import { shortcuts } from '#shortcuts';
@@ -11,7 +10,6 @@ import { postprocess } from '#postprocess';
  * @property {boolean} development // internal use only - force preflights(transform + resets) to be excluded and no external classes will be processed
  * @property {boolean} skipResets // force resets to be excluded from preflights
  * @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
  */
@@ -23,16 +21,15 @@ import { postprocess } from '#postprocess';
 export function presetWarp(options = {}) {
   checkEnvironment();
   const externalizeClasses = options.externalizeClasses ?? !options.development; // 'true' by default
-  const safeExternalClasses = options.externalClasses || [];
-  const excludedClasses = options.omitComponentClasses ? [...classes, ...safeExternalClasses] : safeExternalClasses;
+  const externalClasses = options.externalClasses || [];
   const theme = useTheme(options);
   return {
     name: '@warp-ds/uno',
     theme,
     rules,
     variants,
     preflights: options.development ? [] : preflights(options.skipResets),
-    postprocess: postprocess(externalizeClasses, excludedClasses),
+    postprocess: postprocess(externalizeClasses, externalClasses),
     shortcuts,
   };
 }

test/__snapshots__/external-classes.js.snap

@@ -0,0 +1,23 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`external classes > externalized class of mt-32 should be excluded from the css 1`] = `
+"/* layer: default */
+.mb-24{margin-bottom:2.4rem;}
+.mt-16{margin-top:1.6rem;}"
+`;
+
+exports[`external classes > externalized class of mt-32 should be included if used with modifier 1`] = `
+"/* layer: default */
+.active\\\\:mt-32:active{margin-top:3.2rem;}
+@media (min-width: 480px){
+.sm\\\\:mt-32{margin-top:3.2rem;}
+}
+@media (min-width: 768px){
+.md\\\\:mt-32{margin-top:3.2rem;}
+}"
+`;
+
+exports[`external classes > externalized classes of mt-32 and mb-32 should be excluded from the css 1`] = `
+"/* layer: default */
+.mt-16{margin-top:1.6rem;}"
+`;

test/external-classes.js

@@ -0,0 +1,22 @@
+import { setup } from './_helpers.js';
+import { describe, expect, test } from 'vitest';
+
+setup({ externalizeClasses: true, externalClasses: ["mt-32", "mb-32"] });
+
+describe('external classes', () => {
+  test('externalized classes of mt-32 and mb-32 should be excluded from the css', async ({ uno }) => {
+    const classes = ['mt-16', 'mt-32', 'mb-32'];
+    const { css } = await uno.generate(classes);
+    expect(css).toMatchSnapshot();
+  });
+  test('externalized class of mt-32 should be excluded from the css', async ({ uno }) => {
+    const classes = ['mt-16', 'mt-32', 'mb-24'];
+    const { css } = await uno.generate(classes);
+    expect(css).toMatchSnapshot();
+  });
+  test('externalized class of mt-32 should be included if used with modifier', async ({ uno }) => {
+    const classes = ['sm:mt-32', 'md:mt-32', 'active:mt-32'];
+    const { css } = await uno.generate(classes);
+    expect(css).toMatchSnapshot();
+  });
+});