Implement reset css

Author: owjs3901

.changeset/breezy-ghosts-kiss.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/reset-css": major
+---
+
+reset css

apps/landing/next.config.ts

@@ -15,6 +15,6 @@ export default withMDX(
       pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
       output: 'export',
     },
-    { include: ['@devup-ui/components'] },
+    { include: ['@devup-ui/components', '@devup-ui/reset-css'] },
   ),
 )

apps/landing/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@devup-ui/components": "workspace:*",
     "@devup-ui/react": "workspace:*",
+    "@devup-ui/reset-css": "workspace:*",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "@next/mdx": "^15.3.5",
@@ -24,8 +25,7 @@
     "react-dom": "^19.1.0",
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^15.6.1",
-    "remark-gfm": "^4.0.1",
-    "sanitize.css": "^13.0.0"
+    "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
     "@devup-ui/next-plugin": "workspace:*",

apps/landing/src/app/layout.tsx

@@ -1,6 +1,5 @@
-import 'sanitize.css'
-
 import { css, globalCss, ThemeScript } from '@devup-ui/react'
+import { resetCss } from '@devup-ui/reset-css'
 import type { Metadata } from 'next'
 
 import { Footer } from '../components/Footer'
@@ -24,6 +23,8 @@ export const metadata: Metadata = {
   },
 }
 
+resetCss()
+
 globalCss({
   imports: ['https://cdn.jsdelivr.net/gh/joungkyun/font-d2coding/d2coding.css'],
   table: {

libs/extractor/src/extract_style/constant.rs

@@ -18,5 +18,7 @@ pub(super) static MAINTAIN_VALUE_PROPERTIES: phf::Set<&str> = phf_set! {
     "gridRow",
     "gridRowStart",
     "gridRowEnd",
-    "animationIterationCount"
+    "animationIterationCount",
+    "tabSize",
+    "MozTabSize"
 };

libs/extractor/src/lib.rs

@@ -2531,7 +2531,7 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
             extract(
                 "test.jsx",
                 r#"import {Flex} from '@devup-ui/core'
-        <Flex opacity={1} zIndex={2} fontWeight={900} scale={2} flex={1} lineHeight={1} />
+        <Flex opacity={1} zIndex={2} fontWeight={900} scale={2} flex={1} lineHeight={1} tabSize={4} MozTabSize={4} />
         "#,
                 ExtractOption {
                     package: "@devup-ui/core".to_string(),

libs/extractor/src/snapshots/extractor__tests__maintain_value.snap

@@ -1,9 +1,18 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={1} zIndex={2} fontWeight={900} scale={2} flex={1} lineHeight={1} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={1} zIndex={2} fontWeight={900} scale={2} flex={1} lineHeight={1} tabSize={4} MozTabSize={4} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "MozTabSize",
+                value: "4",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
         Static(
             ExtractStaticStyle {
                 property: "display",
@@ -60,6 +69,15 @@ ToBTreeSet {
                 style_order: None,
             },
         ),
+        Static(
+            ExtractStaticStyle {
+                property: "tabSize",
+                value: "4",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
         Static(
             ExtractStaticStyle {
                 property: "zIndex",
@@ -70,5 +88,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0 d1 d2 d3 d4 d5 d6\" />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0 d1 d2 d3 d4 d5 d6 d7 d8\" />;\n",
 }

packages/react/src/__tests__/index.test.ts

@@ -14,6 +14,7 @@ describe('export', () => {
 
       css: expect.any(Function),
       globalCss: expect.any(Function),
+      keyframes: expect.any(Function),
 
       ThemeScript: expect.any(Function),
 

packages/react/src/index.ts

@@ -16,4 +16,5 @@ export { css } from './utils/css'
 export { getTheme } from './utils/get-theme'
 export { globalCss } from './utils/global-css'
 export { initTheme } from './utils/init-theme'
+export { keyframes } from './utils/keyframes'
 export { setTheme } from './utils/set-theme'

packages/react/src/utils/__tests__/keyframes.test.ts

@@ -0,0 +1,19 @@
+import { keyframes } from '../keyframes'
+
+describe('keyframes', () => {
+  it('should return animation', () => {
+    expect(() =>
+      keyframes({
+        from: {
+          opacity: 0,
+        },
+        to: {
+          opacity: 1,
+        },
+      }),
+    ).toThrowError('Cannot run on the runtime')
+    expect(() => keyframes`from{opacity:0}to{opacity:1}`).toThrowError(
+      'Cannot run on the runtime',
+    )
+  })
+})