Fix: outline:none doesn't work and autofill solid is deprecated, r…

…esolved #296 #299

packages/css/src/config/index.ts

@@ -6,7 +6,7 @@ import variables from './variables'
 import rules from './rules'
 import functions from './functions'
 import { CSSDeclarations } from '../types/css-declarations'
-import type { Rule, ValueComponent } from '../rule'
+import type { Rule, RuleOptions, ValueComponent } from '../rule'
 
 const config: Config = {
     mediaQueries,
@@ -51,7 +51,7 @@ export interface Config {
     semantics?: { [key in keyof typeof semantics]?: CSSDeclarations } & { [key: string]: CSSDeclarations }
     variables?: { [key in keyof typeof rules]?: ConfigVariableGroup }
     & { [key: string]: ConfigVariableGroup | ConfigVariable }
-    rules?: { [key in keyof typeof rules | string]?: Rule['options'] }
+    rules?: { [key in keyof typeof rules | string]?: RuleOptions }
     rootSize?: number
     scope?: string
     important?: boolean

packages/css/src/config/rules.ts

@@ -4,6 +4,8 @@ import type { Rule, RuleOptions } from '../rule'
 import { CSSDeclarations } from '../types/css-declarations'
 import { CoreLayer } from '../layer'
 
+export const BORDER_STYLES = ['hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset']
+
 const rules = {
     group: {
         match: /^(?:.+?[*_>~+])?\{.+?\}/,
@@ -994,23 +996,23 @@ const rules = {
     } as RuleOptions,
     // border style
     borderTopStyle: {
-        match: ['b(?:t|order-top(?:-style)?)', ['hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset']],
+        match: ['b(?:t|order-top(?:-style)?)', BORDER_STYLES],
         layer: CoreLayer.Native,
     } as RuleOptions,
     borderBottomStyle: {
-        match: ['b(?:b|order-bottom(?:-style)?)', ['hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset']],
+        match: ['b(?:b|order-bottom(?:-style)?)', BORDER_STYLES],
         layer: CoreLayer.Native,
     } as RuleOptions,
     borderLeftStyle: {
-        match: ['b(?:l|order-left(?:-style)?)', ['hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset']],
+        match: ['b(?:l|order-left(?:-style)?)', BORDER_STYLES],
         layer: CoreLayer.Native,
     } as RuleOptions,
     borderRightStyle: {
-        match: ['b(?:r|order-right(?:-style)?)', ['hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset']],
+        match: ['b(?:r|order-right(?:-style)?)', BORDER_STYLES],
         layer: CoreLayer.Native,
     } as RuleOptions,
     borderXStyle: {
-        match: ['b(?:x|order-x(?:-style)?)', ['hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset']],
+        match: ['b(?:x|order-x(?:-style)?)', BORDER_STYLES],
         layer: CoreLayer.Shorthand,
         declare(value, unit) {
             return {
@@ -1020,7 +1022,7 @@ const rules = {
         }
     } as RuleOptions,
     borderYStyle: {
-        match: ['b(?:y|order-y(?:-style)?)', ['hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset']],
+        match: ['b(?:y|order-y(?:-style)?)', BORDER_STYLES],
         layer: CoreLayer.Shorthand,
         declare(value, unit) {
             return {
@@ -1030,7 +1032,7 @@ const rules = {
         }
     } as RuleOptions,
     borderStyle: {
-        match: ['b(?:order)?(?:-style)?', ['hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset']],
+        match: ['b(?:order)?(?:-style)?', BORDER_STYLES],
         layer: CoreLayer.NativeShorthand
     } as RuleOptions,
     // border width
@@ -1118,61 +1120,31 @@ const rules = {
         match: /^bt:./,
         layer: CoreLayer.Native,
         unit: 'rem',
-        colored: true,
-        transform(value) {
-            if (!/hidden|dotted|dashed|solid|double|groove|ridge|inset|outset/i.test(value)) {
-                value += ' solid'
-            }
-            return value
-        }
+        colored: true
     } as RuleOptions,
     borderBottom: {
         match: /^bb:./,
         layer: CoreLayer.Native,
         unit: 'rem',
-        colored: true,
-        transform(value) {
-            if (!/hidden|dotted|dashed|solid|double|groove|ridge|inset|outset/i.test(value)) {
-                value += ' solid'
-            }
-            return value
-        }
+        colored: true
     } as RuleOptions,
     borderLeft: {
         match: /^bl:./,
         layer: CoreLayer.Native,
         unit: 'rem',
-        colored: true,
-        transform(value) {
-            if (!/hidden|dotted|dashed|solid|double|groove|ridge|inset|outset/i.test(value)) {
-                value += ' solid'
-            }
-            return value
-        }
+        colored: true
     } as RuleOptions,
     borderRight: {
         match: /^br:./,
         layer: CoreLayer.Native,
         unit: 'rem',
-        colored: true,
-        transform(value) {
-            if (!/hidden|dotted|dashed|solid|double|groove|ridge|inset|outset/i.test(value)) {
-                value += ' solid'
-            }
-            return value
-        }
+        colored: true
     } as RuleOptions,
     borderX: {
         match: /^(?:bx|border-x):./,
         unit: 'rem',
         colored: true,
         layer: CoreLayer.Shorthand,
-        transform(value) {
-            if (!/hidden|dotted|dashed|solid|double|groove|ridge|inset|outset/i.test(value)) {
-                value += ' solid'
-            }
-            return value
-        },
         declare(value) {
             return {
                 'border-left': value,
@@ -1185,12 +1157,6 @@ const rules = {
         unit: 'rem',
         colored: true,
         layer: CoreLayer.Shorthand,
-        transform(value) {
-            if (!/hidden|dotted|dashed|solid|double|groove|ridge|inset|outset/i.test(value)) {
-                value += ' solid'
-            }
-            return value
-        },
         declare(value) {
             return {
                 'border-top': value,
@@ -1202,12 +1168,6 @@ const rules = {
         match: /^b:./,
         unit: 'rem',
         colored: true,
-        transform(value) {
-            if (!/hidden|dotted|dashed|solid|double|groove|ridge|inset|outset/i.test(value)) {
-                value += ' solid'
-            }
-            return value
-        },
         layer: CoreLayer.NativeShorthand
     } as RuleOptions,
     backgroundAttachment: {
@@ -1524,7 +1484,7 @@ const rules = {
         variableGroups: ['spacing']
     } as RuleOptions,
     outlineStyle: {
-        match: ['outline', ['none', 'auto', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset']],
+        match: ['outline', ['dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset']],
         layer: CoreLayer.Native
     } as RuleOptions,
     outlineWidth: {
@@ -1537,18 +1497,6 @@ const rules = {
         unit: 'rem',
         layer: CoreLayer.NativeShorthand,
         colored: true,
-        transform(value) {
-            const outlineGlobalValuesRegex =
-                /^(?:inherit|initial|revert|revert-layer|unset)$/i
-            const outlineStyleRegex = /none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset/i
-            const outlineAutoRegex = /auto/i
-
-            if (!outlineGlobalValuesRegex.test(value) && !outlineStyleRegex.test(value) && !outlineAutoRegex.test(value)) {
-                value += ' solid'
-            }
-
-            return value
-        },
         variableGroups: [
             'outlineWidth',
             'outlineStyle',

packages/css/src/core.ts

@@ -1,5 +1,5 @@
 import { extend } from '@techor/extend'
-import { Rule, NativeRule } from './rule'
+import { Rule, NativeRule, RuleOptions } from './rule'
 import type { Config } from './config'
 import { config as defaultConfig } from './config'
 import { SELECTOR_SYMBOLS } from './constants/selector-symbols'
@@ -20,14 +20,14 @@ export interface MasterCSS {
     stylesBy: Record<string, string[]>
     selectors: Record<string, [RegExp, string[]][]>
     variables: Record<
-        string, 
-        Omit<VariableValue, 'value' | 'space'> 
-        & { 
-            value?: any, 
-            space?: any, 
-            usage?: number, 
-            natives?: NativeRule[], 
-            themes?: { [theme: string]: VariableValue } 
+        string,
+        Omit<VariableValue, 'value' | 'space'>
+        & {
+            value?: any,
+            space?: any,
+            usage?: number,
+            natives?: NativeRule[],
+            themes?: { [theme: string]: VariableValue }
         }
     >
     mediaQueries: Record<string, string | number>
@@ -52,8 +52,8 @@ export class MasterCSS {
     readonly countBy = {}
     readonly observing = false
     readonly config: Config
-    private readonly semanticRuleOptions: Rule['options'][] = []
-    private readonly ruleOptions: Rule['options'][] = []
+    private readonly semanticRuleOptions: RuleOptions[] = []
+    private readonly ruleOptions: RuleOptions[] = []
 
     observer: MutationObserver
 
@@ -186,7 +186,7 @@ export class MasterCSS {
                                 }
                             } else {
                                 if (currentTheme) {
-                                    this.variables[name] = { 
+                                    this.variables[name] = {
                                         type: variableValue.type,
                                         space: variableValue['space'],
                                         themes: { [currentTheme]: variableValue }
@@ -384,7 +384,7 @@ export class MasterCSS {
         const rulesEntriesLength = rulesEntries.length
         const colorNames = Object.keys(colorVariableNames)
         rulesEntries
-            .forEach(([id, eachRuleOptions]: [string, Rule['options']], index: number) => {
+            .forEach(([id, eachRuleOptions]: [string, RuleOptions], index: number) => {
                 this.ruleOptions.push(eachRuleOptions)
                 eachRuleOptions.order = this.semanticRuleOptions.length + rulesEntriesLength - 1 - index
                 const match = eachRuleOptions.match
@@ -797,7 +797,7 @@ export class MasterCSS {
      * @param syntax class syntax
      * @returns css text
      */
-    match(syntax: string): Rule['options'] {
+    match(syntax: string): RuleOptions {
         // 1. rules
         for (const eachRuleOptions of this.ruleOptions) {
             if (
@@ -1483,7 +1483,7 @@ export class MasterCSS {
                             addNativeRule(theme, variable.themes[theme])
                         }
                     }
-                  
+
                     let originalNativesCount: number = 0
                     if (this.hasVariablesRule) {
                         originalNativesCount = this.rules[0].natives.length

packages/css/src/rule.ts

@@ -632,10 +632,10 @@ export class Rule {
                             const name = variable.name ?? variableName
                             if (!bypassVariableNames.includes(name)) {
                                 handled = true
-    
+
                                 currentValueComponents.push({ type: 'variable', name: name, alpha })
                             }
-                        } 
+                        }
                     }
                     handleVariable(currentValue)
                     if (!handled && this.colored) {
@@ -871,5 +871,5 @@ export interface MediaQuery {
 
 export interface RuleMeta {
     value?: [string, string | Record<string, string>]
-    config?: Rule['options']
+    config?: RuleOptions
 }

packages/css/tests/border.test.ts

@@ -1,5 +1,25 @@
 import { expectOrderOfRules, testProp } from './css'
 
+test('border', () => {
+    testProp('border:current', 'border-color:currentColor')
+    testProp('border:transparent', 'border-color:transparent')
+    testProp('border:black', 'border-color:rgb(0 0 0)')
+    testProp('border:2|black', 'border:0.125rem rgb(0 0 0)')
+    testProp('border:1', 'border-width:0.0625rem')
+    testProp('border:dashed|black', 'border:dashed rgb(0 0 0)')
+    testProp('border:solid', 'border-style:solid')
+    testProp('border:1rem|solid', 'border:1rem solid')
+    testProp('border:thick|double|black', 'border:thick double rgb(0 0 0)')
+    testProp('border:none', 'border:none')
+    testProp('border:unset', 'border:unset')
+    testProp('border:inherit', 'border:inherit')
+    testProp('border:initial', 'border:initial')
+    testProp('border:revert', 'border:revert')
+    testProp('border:revert-layer', 'border:revert-layer')
+    testProp('border:auto', 'border:auto')
+    testProp('border:auto|1', 'border:auto 0.0625rem')
+})
+
 it('validates border rules', () => {
     testProp(['b:16|solid', 'border:16|solid'], 'border:1rem solid')
     testProp(['bt:16|solid', 'border-top:16|solid'], 'border-top:1rem solid')
@@ -10,7 +30,7 @@ it('validates border rules', () => {
     testProp(['by:16|solid', 'border-y:16|solid'], 'border-top:1rem solid;border-bottom:1rem solid')
 
     testProp(['br:1px|solid|gray'], 'border-right:1px solid rgb(107 106 109)')
-    testProp(['br:1px|gray'], 'border-right:1px rgb(107 106 109) solid')
+    testProp(['br:1px|gray'], 'border-right:1px rgb(107 106 109)')
 })
 
 it('checks border order', () => {

packages/css/tests/outline.test.ts

@@ -4,19 +4,19 @@ test('outline', () => {
     testProp('outline:current', 'outline-color:currentColor')
     testProp('outline:transparent', 'outline-color:transparent')
     testProp('outline:black', 'outline-color:rgb(0 0 0)')
-    testProp('outline:2|black', 'outline:0.125rem rgb(0 0 0) solid')
+    testProp('outline:2|black', 'outline:0.125rem rgb(0 0 0)')
     testProp('outline-offset:1', 'outline-offset:0.0625rem')
     testProp('outline:1', 'outline-width:0.0625rem')
     testProp('outline:dashed|black', 'outline:dashed rgb(0 0 0)')
     testProp('outline:solid', 'outline-style:solid')
     testProp('outline:1rem|solid', 'outline:1rem solid')
     testProp('outline:thick|double|black', 'outline:thick double rgb(0 0 0)')
-    testProp('outline:none', 'outline-style:none')
+    testProp('outline:none', 'outline:none')
     testProp('outline:unset', 'outline:unset')
     testProp('outline:inherit', 'outline:inherit')
     testProp('outline:initial', 'outline:initial')
     testProp('outline:revert', 'outline:revert')
     testProp('outline:revert-layer', 'outline:revert-layer')
-    testProp('outline:auto', 'outline-style:auto')
+    testProp('outline:auto', 'outline:auto')
     testProp('outline:auto|1', 'outline:auto 0.0625rem')
 })