chore: lint

wtto00 · Oct 19, 2024 · 82d0f60 · 82d0f60
1 parent 6fbc2e0
commit 82d0f60
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@ This is a fork of [unocss-preset-theme](https://github.com/unpreset/unocss-prese
 
 Just modify the following part:
 
-- [fix: safelist] Media query style in safelist config。[unocss-preset-theme #69](https://github.com/unpreset/unocss-preset-theme/pull/69)
+- fix: generated self-referencing CSS variables. [unocss-preset-theme #82](https://github.com/unpreset/unocss-preset-theme/pull/82)
 
 ## Installation
 
@@ -19,12 +19,12 @@ Usually you just need to set your `light theme` to `unocss` and your `dark theme
 Just like this
 
 ```typescript
-import Unocss from 'unocss/vite';
-import type { Theme } from 'unocss/preset-uno';
-import { presetUno } from 'unocss';
-import presetTheme from '@wtto00/unocss-preset-theme';
-import type { Theme } from '@unocss/preset-uno';
-import type { Preset } from 'unocss';
+import Unocss from 'unocss/vite'
+import type { Theme } from 'unocss/preset-uno'
+import { presetUno } from 'unocss'
+import presetTheme from '@wtto00/unocss-preset-theme'
+import type { Theme } from '@unocss/preset-uno'
+import type { Preset } from 'unocss'
 
 Unocss<Theme>({
   // Configure light themes
@@ -40,7 +40,7 @@ Unocss<Theme>({
       },
     }) as Preset<Theme>,
   ],
-});
+})
 ```
 
 This will be the final generated css

diff --git a/examples/media/index.html b/examples/media/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/examples/media/src/App.tsx b/examples/media/src/App.tsx
@@ -20,7 +20,6 @@ function App() {
       <div className="card">
         <button onClick={() => setCount(count => count + 1)}>
           count is
-          {' '}
           {count}
         </button>
         <p>
@@ -31,9 +30,7 @@ function App() {
           and save to test HMR
         </p>
       </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
+      <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
     </div>
   )
 }

diff --git a/package.json b/package.json
@@ -71,7 +71,7 @@
     "*": [
       "prettier --write --ignore-unknown"
     ],
-    "*.{js,mjs,jsx,ts,mts,tsx,vue}": [
+    "*.{js,mjs,jsx,ts,mts,tsx,vue,md}": [
       "eslint --fix"
     ],
     "*.{ts,mts,tsx}": [

diff --git a/playground/src/App.vue b/playground/src/App.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
+import { reactive } from 'vue';
 
 const theme = reactive({
   dark: false,
   compact: false,
-})
+});
 
 const onTheme: any = () => {
-  theme.dark = !theme.dark
-}
+  theme.dark = !theme.dark;
+};
 const onCompact: any = () => {
-  theme.compact = !theme.compact
-}
+  theme.compact = !theme.compact;
+};
 </script>
 
 <template>
@@ -39,19 +39,11 @@ const onCompact: any = () => {
       </div>
 
       <div class="mt-10 flex flex-col">
-        <h1 class="text-text text-xl font-bold mb-sm">
-          Preview
-        </h1>
-        <p class="text-text text-base">
-          This is a long text
-        </p>
-        <p class="text-primary/50 bg-container/20 text-base">
-          The color opacity is 0.5
-        </p>
+        <h1 class="text-text text-xl font-bold mb-sm">Preview</h1>
+        <p class="text-text text-base">This is a long text</p>
+        <p class="text-primary/50 bg-container/20 text-base">The color opacity is 0.5</p>
       </div>
-      <p class="text-text">
-        You can see all the css in <span class="font-bold">Devtools</span>
-      </p>
+      <p class="text-text">You can see all the css in <span class="font-bold">Devtools</span></p>
     </div>
   </div>
 </template>

diff --git a/src/index.ts b/src/index.ts
@@ -69,7 +69,11 @@ export function presetTheme<T extends Record<string, any>>(options: PresetThemeO
                     if (isColor) {
                       const cssColor = parseCssColor(themeValue)
                       if (cssColor?.alpha !== undefined && cssColor?.alpha !== null) {
-                        if (new RegExp(`var\\(${escapeStringRegexp(`${prefix}-${preKeys.join('-')}-${configKey}--alpha`)}, 1\\)`).test(cssColor.alpha.toString())) {
+                        if (
+                          new RegExp(
+                            `var\\(${escapeStringRegexp(`${prefix}-${preKeys.join('-')}-${configKey}--alpha`)}, 1\\)`,
+                          ).test(cssColor.alpha.toString())
+                        ) {
                           const values = themeValues.get(name)
                           if (values)
                             themeAlphaValue = values.theme[themeKey][`${name}--alpha`]
@@ -79,7 +83,12 @@ export function presetTheme<T extends Record<string, any>>(options: PresetThemeO
                         }
                       }
                       if (cssColor?.components) {
-                        if (cssColor.components.length === 1 && new RegExp(`var\\(${escapeStringRegexp(`${prefix}-${preKeys.join('-')}-${configKey}`)}\\)`).test(cssColor.components[0].toString())) {
+                        if (
+                          cssColor.components.length === 1
+                          && new RegExp(
+                            `var\\(${escapeStringRegexp(`${prefix}-${preKeys.join('-')}-${configKey}`)}\\)`,
+                          ).test(cssColor.components[0].toString())
+                        ) {
                           const values = themeValues.get(name)
                           if (values)
                             themeValue = values.theme[themeKey][name]
@@ -90,7 +99,11 @@ export function presetTheme<T extends Record<string, any>>(options: PresetThemeO
                       }
                     }
                     else {
-                      if (new RegExp(`var\\(${escapeStringRegexp(`${prefix}-${preKeys.join('-')}-${configKey}`)}\\)`).test(themeValue)) {
+                      if (
+                        new RegExp(
+                          `var\\(${escapeStringRegexp(`${prefix}-${preKeys.join('-')}-${configKey}`)}\\)`,
+                        ).test(themeValue)
+                      ) {
                         const values = themeValues.get(name)
                         if (values) {
                           themeValue = values.theme[themeKey][name]
@@ -126,8 +139,13 @@ export function presetTheme<T extends Record<string, any>>(options: PresetThemeO
             curTheme[configKey] = wrapVar(name)
             if (isColor) {
               const cssColor = parseCssColor(val) || val
-              if (typeof cssColor !== 'string')
-                curTheme[configKey] = wrapCSSFunction(cssColor.type, curTheme[configKey], wrapVar(`${name}--alpha`, '1'))
+              if (typeof cssColor !== 'string') {
+                curTheme[configKey] = wrapCSSFunction(
+                  cssColor.type,
+                  curTheme[configKey],
+                  wrapVar(`${name}--alpha`, '1'),
+                )
+              }
             }
           }
           else {

diff --git a/tests/index.test.ts b/tests/index.test.ts
@@ -295,9 +295,7 @@ describe('theme', () => {
       },
     )
 
-    const { css } = await uno.generate(
-      'text-rgba text-rgba/50',
-    )
+    const { css } = await uno.generate('text-rgba text-rgba/50')
     expect(css).toMatchInlineSnapshot(`
       "/* layer: preflights */
       *,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}