A dynamic CSS variable injection and style constraint method based on design tokens
By generating a token injection permission table and limiting the scope of component instances in the page document object, combined with reverse verification of browser-calculated style values, the instability of CSS variable injection in traditional methods is solved, achieving stability and consistency of page style.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- XIAMEN JINIU SOFTWARE TECH CO LTD
- Filing Date
- 2026-06-24
- Publication Date
- 2026-07-21
AI Technical Summary
In traditional dynamic CSS variable injection methods based on design tokens, there is a lack of runtime matching and verification between the token's purpose and component type, component state, and style attributes. This makes it difficult to maintain a stable interface style after configuration changes, and can easily lead to cross-component references, declaration level out-of-bounds issues, and disordered rule coverage.
By generating a token injection permission table, parsing the token name, value, purpose, style attributes, component type, component state, declaration level, and overriding order permission, generating CSS variable candidate declarations, limiting the scope of component instances in the page document object, and finally performing reverse verification by calculating style values in the browser, a closed-loop process is formed.
Effectively compress mismatched references, prevent out-of-bounds declarations and disordered overriding, ensure the stability and consistency of page style, and reduce instability caused by cross-component references.
Smart Images
Figure CN122431671A_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the field of application software development technology, and in particular to a method for dynamic CSS variable injection and style constraint based on design tokens. Background Technology
[0002] The field of application software development technology involves the generation, parsing, and loading of computer program interface style resources, front-end component description files, style sheet rules, and runtime configuration data. Among these, the traditional dynamic CSS variable injection and style constraint method based on design tokens involves saving design tokens such as color, font size, spacing, and rounded corners as configuration files or database records in the front-end project. Build tools, scripts, or browser runtime programs read the token key-value pairs, generating corresponding CSS variable declarations, style selectors, and component style references. These variables are then written into the client runtime environment through the page document object, style sheet nodes, or component rendering process.
[0003] Traditional front-end engineering typically saves design tokens as key-value configurations. Build scripts or browser programs directly generate CSS variable declarations based on these key-value pairs. The variable writing process mainly relies on the order of selector and style sheet nodes. There is a lack of runtime matching and validation between token usage, component type, component state, and style attributes. After configuration changes are entered into the page, cross-component references, declaration level out-of-bounds, rule overriding disorder, inconsistencies between browser-calculated styles and design token values, and difficulty in maintaining stable interface style constraints are all common problems. Summary of the Invention
[0004] To achieve the above objectives, the present invention adopts the following technical solution: a dynamic CSS variable injection and style constraint method based on design tokens, comprising the following steps: Obtain the design token record, parse the token name, token value, token purpose, style attribute permission, component type permission, component state permission, declaration level permission, and overriding order permission, and generate a token injection permission table; Read the component description file, extract the component type name, component state name, style slot name, target style attribute name and token reference name, match the token injection permission table based on the token reference name, and generate CSS variable candidate declarations when the extracted information satisfies the token injection permission table; Based on the CSS variable candidate declaration, locate the component instance scope in the page document object, calculate the number of levels from the component instance scope to the component root identifier, and generate a CSS variable scope declaration when the number of levels does not exceed the declaration level permission and the existing style rule overriding order does not exceed the overriding order permission. Write the CSS variable scope declaration to the corresponding stylesheet location, read the calculated style value after browser rendering, generate a CSS variable activation record when the calculated style value is consistent with the Token value, and delete the CSS variable scope declaration and generate a style constraint cancellation record when the calculated style value is inconsistent with the Token value.
[0005] As a further aspect of the present invention, the process of obtaining design token records, parsing token name, token value, token purpose, style attribute permission, component type permission, component state permission, declaration level permission, and overriding order permission, and generating a token injection permission table includes: Obtain the original field set of the design Token record, create a token index according to the token name field, and associate the token value field and the token purpose field with the token index to generate the token basic item; The token basic item is parsed to obtain the style attribute permission, component type permission, component state permission, declaration level permission, and overriding order permission. The number of parsed fields and the number of missing fields in the permission content are counted. The permission integrity parameter is calculated. When the permission integrity parameter reaches the preset integrity threshold, the permission content is written into the same permission line. When the permission integrity parameter does not reach the preset integrity threshold, the corresponding token is marked as non-injectable. The Token injection permission table is generated.
[0006] As a further aspect of the present invention, the process of parsing the licensed content includes: Retrieve the license object names from the style attribute license, component type license, and component state license. Match the license object names with the preset style attribute dictionary, preset component type dictionary, and preset state dictionary respectively. If the match fails, delete the corresponding license object name and generate the first license set. Obtain the numerical boundaries in the declaration level license and the overriding order license, compare the numerical boundaries with the preset level boundary and the preset order boundary, and associate the first license set with the numerical boundaries when the comparison result meets the boundary conditions to generate a license verification item.
[0007] As a further aspect of the present invention, the process of reading the component description file, extracting the component type name, component state name, style slot name, target style attribute name, and token reference name, and generating CSS variable candidate declarations when the extracted information satisfies the Token injection permission table based on the token reference name includes: Read the component description record in the component description file, parse the component type field, component state field, style slot field, target style attribute field and token reference field in the component description record, and perform null value filtering and field type validation on the parsed field values to generate component style description items; Based on the token reference name, the corresponding permission line is retrieved in the Token Injection Permission Table. The component type name, component state name, and target style attribute name in the component style description item are matched with the corresponding permission line respectively. When the match is successful, the style slot name, target style attribute name, and token reference name are associated to generate the CSS variable candidate declaration.
[0008] As a further aspect of the present invention, the generation process of the component style description item includes: Get the slot affiliation relationship between the component type field and the style slot field, limit the style slot field to the slot directory preset by the corresponding component type field, and delete the corresponding component description record when the style slot field does not match the slot directory, and generate a slot validation item; Obtain the state attribute relationship between the component state field and the target style attribute field, compare the state attribute relationship with the preset state attribute table, and when the comparison is successful, associate the slot verification item with the token reference field to generate the component style description item.
[0009] As a further aspect of the present invention, the process of generating a CSS variable scope declaration, which involves locating the component instance range within the page document object based on the CSS variable candidate declaration, calculating the number of levels from the component instance range to the component root identifier, and ensuring that the number of levels does not exceed the permitted declaration level and the existing style rule overriding order does not exceed the permitted overriding order, includes: Get the style slot name, target style property name and token reference name from the CSS variable candidate declaration, retrieve the page element with the corresponding slot identifier in the page document object based on the style slot name, and traverse the page element up to the component root identifier corresponding to the component type name to generate the component instance scope; Calculate the number of parent-child levels traversed from the component instance scope to the component root identifier to obtain the level number. Compare the level number with the declared level permission and compare the existing style rule overriding order with the overriding order permission. When both comparison results satisfy the permission boundary, bind the CSS variable candidate declaration to the component instance scope to generate the CSS variable scope declaration.
[0010] As a further aspect of the present invention, the process of generating the component instance range includes: Retrieve candidate page elements from the page document object that match the style slot name, read the component instance identifier, component type identifier, and component state identifier of the candidate page elements, and perform consistency matching between the component type identifier and the component type name in the CSS variable candidate declaration to generate the first element set; Delete candidate page elements whose component state identifiers and component state names do not match in the first element set, and perform an upward hierarchical traversal on the remaining candidate page elements until the component root identifier is hit, thereby generating the component instance range.
[0011] As a further aspect of the present invention, the process of writing the CSS variable scope declaration into the corresponding stylesheet location, reading the calculated style value after browser rendering, generating a CSS variable activation record when the calculated style value matches the Token value, and deleting the CSS variable scope declaration and generating a style constraint revocation record when the calculated style value does not match the Token value includes: Get the writable style location, scope selector, CSS variable name and Token value corresponding to the CSS variable scope declaration, write the CSS variable scope declaration to the writable style location, and record the style declaration content before writing and the style declaration content after writing, and generate writing validation items. The browser is triggered to render and refresh the component instance scope, reads the calculated style value corresponding to the target style attribute name, compares the calculated style value with the token value for consistency, and generates the CSS variable effective record based on the written verification item when the comparison result is consistent. When the comparison result is inconsistent, the CSS variable scope declaration is deleted and the style constraint cancellation record is generated.
[0012] As a further aspect of the present invention, the process of generating the written verification item includes: Read the stylesheet identifier, rule index, and declaration block boundary corresponding to the writable style location, match the stylesheet identifier with the stylesheet collection currently mounted on the page document object, and lock the declaration block corresponding to the rule index when the match is successful, and generate the style writing target; The CSS variable scope declaration is written to the style writing target. After writing is completed, the CSS variable name and CSS variable value in the declaration block are read, and the reading result is compared with the style declaration content before writing to generate the writing verification item.
[0013] As a further aspect of the present invention, the process of generating the CSS variable validity record includes: When the calculated style value is consistent with the Token value, obtain the component instance identifier, component type name, component state name, style slot name, target style attribute name and token reference name corresponding to the component instance scope, and read the writing time and style sheet location of the CSS variable scope declaration to generate the effective basic item; Associate the effective basic item with the corresponding feasible declaration level permission and overriding order permission in the Token injection permission table, and write it into the effective record storage area to generate the CSS variable effective record.
[0014] Compared with the prior art, the advantages and positive effects of the present invention are as follows: In this invention, the design token record is parsed into a token injection permission table. The token purpose, style attribute permission, component type permission, component state permission, declaration level permission, and overriding order permission are simultaneously involved in the variable injection judgment. The token reference name in the component description file is matched to generate CSS variable candidate declarations. The component instance node level and style rule overriding order limit the writing position. The CSS variable scope declaration only enters the style sheet node. The style value is calculated and then checked with the token value. If the values are consistent, a CSS variable effective record is formed. If the values are inconsistent, deletion and style constraint revocation records are triggered. The impact of mismatched references, out-of-bounds declarations, and overriding disorder on the page style is compressed. Attached Figure Description
[0015] To more clearly illustrate the technical solutions in the embodiments of the present invention, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.
[0016] Figure 1 This is the overall flowchart of the dynamic style variable injection and style constraint method of the present invention; Figure 2 Flowchart for generating the token injection license table for this invention; Figure 3 This is a flowchart of the component description matching and candidate declaration generation process of the present invention; Figure 4 Flowchart for component instance location and variable scope generation in this invention; Figure 5 This is a flowchart illustrating the style variable writing verification and exception cancellation process for this invention. Detailed Implementation
[0017] The technical solution of the present invention will now be described with reference to the accompanying drawings.
[0018] This embodiment provides a dynamic CSS variable injection and style constraint method based on design tokens. In the actual operation process where the page theme style needs to be synchronously constrained to the component style as the design token changes, this method continuously processes the design token record, component description file, page document object, style sheet location, and calculated style value after browser rendering. This ensures that the writing of CSS variables is not only controlled by the token name, but also constrained by style attributes, component type, component state, declaration level, and overriding order.
[0019] In the process of dynamic CSS variable injection, if style declarations are generated solely based on token reference names, it is easy for unsuitable tokens to enter incorrect style properties, incorrect component states, or incorrect component scopes, and invalid writes may occur when existing style rules have a strong overriding order. This embodiment first generates a token injection permission table, then performs matching and validation on the component description file, subsequently limits the scope of component instances in the page document object, and finally performs reverse validation using the browser's calculated style values, thus forming a closed-loop process for writing, rendering, and undoing. Example
[0020] Please see Figure 1 and Figure 2 S1: Obtain the design token record, parse the token name, token value, token purpose, style attribute permission, component type permission, component state permission, declaration level permission, and overriding order permission, and generate a token injection permission table.
[0021] The Design Token record refers to a data record used to describe the basic values of a page style and their usage boundaries. It must contain at least the following fields: Token Name, Token Value, Token Purpose, and Permission. The Token Name field uniquely points to a referenceable Token. The Token Value field carries the CSS style value corresponding to the Token. The Token Purpose field explains the business meaning of the Token when used for color, size, spacing, font, or other style applications. Style attribute permission refers to the set of target style attributes that the Token is allowed to apply to. Component type permission refers to the set of component type names that the Token is allowed to access. Component state permission refers to the set of component state names that the Token is allowed to access. Declaration level permission refers to the hierarchical boundary that CSS variable declarations can be limited downwards or upwards relative to the component root identifier. Overriding order permission refers to the acceptable overriding position boundary of CSS variable declarations within existing style rules.
[0022] The Token Injection Permission Table refers to the field-based validation results indexed by the same token name, including token values, token uses, and various permission contents. Each permission row in this table corresponds to a token name and records whether the token is in an injectable state. An injectable state indicates that the token has the property permission, type permission, state permission, hierarchy permission, and overriding order permission required for subsequent generation of CSS variable candidate declarations. A non-injectable state indicates that the token has missing key permission fields, the permission object cannot be identified, or boundary validation failed; subsequent steps will not generate CSS variable candidate declarations when retrieving this token.
[0023] In one embodiment, S1 includes obtaining the original field set of the design Token record, normalizing the fields in the original field set used to represent the token name, removing blank interference and invalid reference markers, and building a token index according to the processed token name. After the token index is built, the token value field and token purpose field of the same original field set are associated with the token index to generate token base items. The token base item refers to the basic data item that uses the token name as the retrieval entry point and carries the token value and token purpose, and its output goes to the permission parsing process in the same step.
[0024] In one embodiment, when parsing the style attribute permission, component type permission, component state permission, declaration level permission, and overriding order permission corresponding to the token base item, the system first checks whether each permission field has a recognizable field name and readable field content. The permission integrity parameter is an intermediate verification parameter formed by parsing the state and missing states of the permission fields under the same token base item. Its data source is the parsing results of each permission field, and its function is to determine whether the token is sufficient to be written into the permission line. The preset integrity threshold is derived from the pre-setting of necessary permission fields in the style constraint rules. This setting is used to require a token to have executable constraints in terms of attributes, type, state, level, and overriding order, without being limited by specific numerical values.
[0025] When the permission completeness parameter reaches the preset completeness threshold, style attribute permission, component type permission, component state permission, declaration level permission, and override order permission are written into the same permission line, and this permission line is associated with the token base item to form the injectable Token injection permission table content. When the permission completeness parameter does not reach the preset completeness threshold, the corresponding token is marked as non-injectable, and the token name, missing field status, and reason for non-injectability are retained, so that even if the subsequent component description file references the token, it will not enter the CSS variable candidate declaration generation process.
[0026] In one embodiment, the parsing process of the license content includes obtaining the license object name from the style attribute license, component type license, and component state license. The license object name refers to the canonicalized name in the license field used to express the target style attribute, component type, or component state. For the license object name in the style attribute license, it is matched against a preset style attribute dictionary. The preset style attribute dictionary is a set of style attribute names formed before the execution of this method, used to limit the CSS attribute names that can be constrained by the Token. For the license object name in the component type license, it is matched against a preset component type dictionary. The preset component type dictionary is a set of component type names that this method is allowed to recognize. For the license object name in the component state license, it is matched against a preset state dictionary. The preset state dictionary is a set of component state names that this method is allowed to recognize.
[0027] When a licensed object name fails to match the corresponding dictionary, the licensed object name is removed from the license content, and this removal status is recorded. The retained licensed object names are categorized into the first license set according to their respective license fields. The first license set refers to the style attributes, component types, and component state license content retained after dictionary matching; its output is used to associate with declaration-level licenses and overriding order licenses.
[0028] In one embodiment, when parsing declaration level permissions and overriding order permissions, fields expressing boundary meanings are read. The numerical boundary in the declaration level permission represents the maximum number of parent nodes allowed to be traversed upwards (e.g., preset to 3 or 5 levels), and is used as a level boundary state to limit the range of parent and child levels allowed when a candidate declaration applies to a component instance. The numerical boundary in the overriding order permission represents the threshold of CSS selector specificity weight or the order index of style declarations in the DOM tree, and is used as an order boundary state to limit the acceptable overriding relationship between existing style rules and the CSS variable declarations to be written. The preset level boundary originates from the structural constraints between the component root identifier and style slots, and the preset order boundary originates from the constraints on declaration order, rule position, and target attribute overriding relationships in the page style overriding governance rules. The extracted level boundary state and order boundary state are compared with the preset level boundary and preset order boundary, respectively. When the comparison result meets the boundary conditions, the first permission set is associated with the numerical boundary to generate a permission verification item. The permission verification item refers to an injectable judgment item that simultaneously possesses object permission and boundary permission. It is written into the Token injection permission table and called by S2.
[0029] In one embodiment, if the same token name corresponds to multiple original field sets, after creating the same index according to the token name, the permitted content that can pass the field type validation simultaneously is first merged. For conflicting permitted content, content that satisfies the preset dictionary matching and has a complete boundary state is retained, while permitted object names that conflict but whose ownership cannot be determined are not included in the first permitted set. Through this process, the same token name has a definite permitted line during subsequent matching, avoiding contradictory injection boundaries for the same token in different component description records.
[0030] In this embodiment, by performing field indexing, permission integrity judgment, dictionary matching, and boundary association processing on the design token record, the token name, token value, token purpose, and permission boundary can form a searchable relationship in the same permission line, so that subsequent CSS variable candidate declarations can only be generated from injectable tokens.
[0031] Please see Figure 1 and Figure 3 S2: Read the component description file, extract the component type name, component state name, style slot name, target style attribute name and token reference name, match the token reference name with the Token injection permission table, and generate CSS variable candidate declarations when the extracted information satisfies the Token injection permission table.
[0032] The component description file is a data file that describes the style configuration relationships of components. Its content includes component description records. A component description record is a data item used to describe the correspondence between a component type, a component state, a style slot, a target style property, and a token reference. The style slot name is the name of the locatable location within the component that carries the style declaration, such as the name used to distinguish the component root, text area, icon area, border area, or interactive area, but the specific scope of this name is limited by the preset slot directory. The token reference name is a reference field in the component description record that points to the design token record, and it is matched with the token name in the token injection permission table. CSS variable candidate declarations are declarations to be written after the field validation of the component description record and matching with the permission line. They include the style slot name, the target style property name, the token reference name, and the token value and permission boundary state provided by the permission line.
[0033] In one embodiment, when reading component description records from a component description file, the component type field, component state field, style slot field, target style attribute field, and token reference field are first parsed. Null value filtering is performed on the parsed field values to prevent component description records lacking component type name, component state name, style slot name, target style attribute name, or token reference name from entering the candidate declaration processing. Field type validation is performed on the field values that pass the null value filtering, ensuring that the component type name, component state name, style slot name, target style attribute name, and token reference name all have a matching name status and proceed to the next step. After null value filtering and field type validation, a component style description item is generated. The component style description item is an intermediate item that describes the relationship between component type, component state, style slot, target style attribute, and token reference; its output is used to retrieve the Token injection permission table.
[0034] In one embodiment, the process of generating a component style description item includes obtaining the slot attribution relationship between the component type field and the style slot field. The slot attribution relationship refers to the range of style slot names allowed to appear for a given component type name. The preset slot directory refers to the set of slot names corresponding to the component type name, used to limit the legal attribution of the style slot field in the component description record. The style slot field is restricted to the preset slot directory corresponding to the component type field. When the style slot field does not match the slot directory, the corresponding component description record is deleted, and no component style description item is generated. For component description records that match the slot directory, a slot validation item is generated. The slot validation item is an intermediate item that verifies the attribution relationship between the component type name and the style slot name; its output is used for state attribute relationship comparison.
[0035] In one embodiment, the state attribute relationship between the component state field and the target style attribute field is obtained. The state attribute relationship refers to the target style attribute name that is allowed to be constrained by the Token in a certain component state. The preset state attribute table is a pre-established set of allowed relationships between component state names and target style attribute names, derived from component style constraint rules. The state attribute relationship is compared with the preset state attribute table. If the comparison passes, the slot verification item is associated with the token reference field to generate a component style description item. If the comparison fails, the corresponding component description record is deleted, preventing references that do not match the component state and target style attribute from being retrieved in the Token injection permission table.
[0036] In one embodiment, the corresponding permission line is retrieved from the Token Injection Permission Table based on the token reference name. If no permission line is found, or if the retrieved permission line is in an uninjectable state, no CSS variable candidate declaration is generated for that component style description item. If an injectable permission line is found, the component type name in the component style description item is matched with the component type permission in the corresponding permission line, the component state name is matched with the component state permission in the corresponding permission line, and the target style attribute name is matched with the style attribute permission in the corresponding permission line. The above matching is performed in the order that the attribute, type, and state must all be permissible. If any match fails, the generation of candidate declarations for that component style description item ends.
[0037] In one embodiment, when the component type name, component state name, and target style property name all match the corresponding permission line, the style slot name, target style property name, and token reference name are associated, along with the Token value, declaration level permission, and override order permission from the corresponding permission line, to generate a CSS variable candidate declaration. This candidate declaration serves only as an intermediate result to be located and written, and is not directly written to the stylesheet. If the same component style description item corresponds to multiple token reference names, permission line retrieval and matching are performed according to the token reference names, and only references that meet the permission requirements are generated as corresponding CSS variable candidate declarations.
[0038] In one embodiment, if duplicate component description records exist in the component description file, the component type name, component state name, style slot name, target style attribute name, and token reference name are first compared to see if they are completely identical. For completely identical duplicate records, only one that can be matched via the permission line is retained; the other duplicate records are not further processed. If duplicate records differ in the target style attribute name or token reference name, they are respectively entered into permission line matching, and subsequent override order permissioning and calculated style verification determine whether they take effect. This process ensures that duplicate content in the component description file does not directly cause duplicate writing.
[0039] In this embodiment, by verifying the fields of the component description record, verifying the slot ownership, comparing the state attributes, and matching the token injection permission table, the CSS variable candidate declarations are made to satisfy both the internal structural constraints of the component and the boundaries of token usage before they are generated. This allows the subsequent page document object location process to obtain candidate declarations with clear sources and well-defined boundaries.
[0040] Please see Figure 1 and Figure 4S3: Based on the CSS variable candidate declaration, locate the scope of component instances in the page document object, calculate the number of levels from the component instance scope to the component root identifier, and generate a CSS variable scope declaration when the number of levels does not exceed the declaration level permission and the existing style rule overriding order does not exceed the overriding order permission.
[0041] The page document object refers to the traversable document structure formed when the browser renders the page. The component instance scope refers to the range determined by traversing upwards from the page element corresponding to the style slot name to the component root identifier; it limits the boundaries of component instances that CSS variable declarations can affect. The component root identifier is the identifier used to mark the outermost level of a component instance, establishing a consistent relationship with the component type name. The hierarchy number refers to the parent-child hierarchy states traversed from the candidate page elements in the component instance scope to the component root identifier; it is not calculated using a formula but is formed by traversing each level and recording the traversed states. The CSS variable scope declaration refers to the declaration to be written after binding CSS variable candidate declarations to the component instance scope; it includes the scope selector, CSS variable name, token value, target style property name, and corresponding stylesheet position candidate information.
[0042] In one embodiment, the style slot name, target style property name, and token reference name are obtained from the CSS variable candidate declaration, and the component type name, component state name, declaration level permission, and overriding order permission carried in the candidate declaration are read simultaneously. Based on the style slot name, page elements with corresponding slot identifiers are retrieved from the page document object. Candidate page elements refer to page elements in the page document object whose slot identifiers match the style slot name; they also need to be further verified to determine whether they belong to the component type and component state pointed to by the candidate declaration.
[0043] In one embodiment, the process of generating the component instance scope includes reading the component instance identifier, component type identifier, and component state identifier of the candidate page elements. The component instance identifier is used to distinguish different component instances; the component type identifier is the identifier of the component type to which the page element belongs; and the component state identifier is the identifier of the current component state of the page element. The component type identifier is matched against the component type name in the CSS variable candidate declaration. Candidate page elements that match are added to the first element set, while candidate page elements that do not match are no longer included in subsequent hierarchical traversal. The first element set is a set of page elements whose slot identifier and component type are consistent with the CSS variable candidate declaration, and its output is used for state consistency filtering.
[0044] In one embodiment, candidate page elements whose component state identifiers do not match the component state names are deleted from the first element set. The remaining candidate page elements are then traversed upwards through the hierarchy. This upward traversal refers to reading parent page elements level by level from the candidate page element along the parent-child relationship until the component root identifier is hit. If a root identifier that does not match the component type name is hit during the traversal, the processing of that candidate page element ends, and no component instance scope is generated. If the traversal reaches the component root identifier and that root identifier matches the component type name, the candidate page element, the traversed parent-child hierarchy, and the component root identifier are collectively recorded as the component instance scope.
[0045] In one embodiment, when calculating the number of levels from the component instance scope to the component root identifier, a step-by-step recording is performed for the confirmed candidate page elements. Each time a parent-child hierarchy is traversed, the traversal status is added to the level traversal record until the component root identifier is reached. The resulting level traversal record is compared with the declared level permissions. The declared level permissions, as boundary states in the permission line, are used to determine whether CSS variable declarations are allowed to apply to the current candidate page element's location. When the level traversal record does not exceed the declared level permissions, the overriding order comparison begins. When the level traversal record exceeds the declared level permissions, no CSS variable scope declaration is generated, and the candidate declaration is recorded as being stopped from processing due to the level boundary not being satisfied.
[0046] In one embodiment, the existing style rule coverage order refers to the coverage relationship between existing style declarations related to the target style property name and component instance scope in the currently mounted stylesheets of the page document object and the CSS variable declaration to be written. When reading the existing style rule coverage order, the component instance scope, target style property name, and style slot name are used as search conditions to locate the declaration position and coverage status in the existing style rules. This coverage status is compared with the coverage order permission. If the existing style rule coverage order does not exceed the coverage order permission, the CSS variable candidate declaration is bound to the component instance scope, and a CSS variable scope declaration is generated. If the existing style rule coverage order exceeds the coverage order permission, no CSS variable scope declaration is generated, and the candidate declaration is recorded as being stopped from processing due to the coverage boundary not being met.
[0047] In one embodiment, when generating CSS variable scope declarations, a scope selector is formed based on the component instance scope. A scope selector is a selection expression that limits a CSS variable declaration to the current component instance; it originates from the hierarchical relationship between the component instance identifier, the component root identifier, and the style slot identifier. The CSS variable name is derived from the normalized result of the token reference name, and the token value is derived from the corresponding permitted token value in the token injection permission table. The target style property name is used to subsequently read the browser's calculated style value and to verify whether the token value is actually applied to the target style property.
[0048] In one embodiment, if no candidate page element matching the style slot name is found in the page document object, the CSS variable candidate declaration remains unpositioned and is not written to the stylesheet. If a candidate page element is found but the component type identifier or component status identifier is inconsistent, the positioning result of the corresponding candidate page element is deleted. If the style slot identifier changes during the positioning process of the page document object, the slot identifier is retrieved again using the changed page document object, and the result of the re-retrieval is used as the basis for generating the component instance scope. Through this process, the CSS variable scope declaration is generated only when a clear component instance scope exists in the page document object.
[0049] In this embodiment, by matching the candidate CSS variable declarations with the slot identifier, component type identifier, component state identifier, component root identifier, declaration level permission, and overriding order permission in the page document object in sequence, the scope declaration of CSS variables is bound only to the component instance scope that satisfies the structural affiliation and overriding boundary, thereby giving subsequent style writing a definite scope and reducing cross-component erroneous writing.
[0050] Please see Figure 1 and Figure 5 S4: Write the CSS variable scope declaration to the writable style location, read the calculated style value after browser rendering, generate a CSS variable effective record when the calculated style value is consistent with the Token value, and delete the CSS variable scope declaration and generate a style constraint cancellation record when the calculated style value is inconsistent with the Token value.
[0051] The writable style location refers to the stylesheet location allowed by the CSS variable scope declaration, which is jointly defined by the stylesheet identifier, rule index, and declaration block boundary. The stylesheet identifier points to the stylesheet currently mounted on the page document object, the rule index points to the location of the target style rule in that stylesheet, and the declaration block boundary specifies the declaration area where CSS variable names and values can be written. The write validation item records the intermediate validation results of the style declaration content before and after writing, as well as the difference comparison status. The calculated style value refers to the final effective style value read by the browser for the target style property name within the component instance scope after rendering and refreshing. The CSS variable effectiveness record is a retrospective record formed when the calculated style value matches the Token value. The style constraint revocation record is a revocation retrospective record formed after deleting the CSS variable scope declaration when the calculated style value and Token value are inconsistent.
[0052] In one embodiment, the writable style location, scope selector, CSS variable name, and token value corresponding to the CSS variable scope declaration are obtained. Before writing the CSS variable scope declaration to the writable style location, the pre-writing style declaration content corresponding to that location is read. The pre-writing style declaration content refers to the CSS variable name, target style property name, and other declaration content that already exist in the declaration block before the CSS variable scope declaration enters the declaration block. After writing is completed, the post-writing style declaration content is read. The post-writing style declaration content refers to the declaration content that is already included in the declaration block after this CSS variable scope declaration. The differences between the content before and after writing are compared to generate a write validation item.
[0053] In one embodiment, the process of generating the write validation item includes reading the stylesheet identifier, rule index, and declaration block boundary corresponding to the writable style location. The stylesheet identifier is matched against the set of stylesheets currently mounted on the page document object. If the match fails, it indicates that the writable style location is no longer within the writable range of the current page document object; writing is stopped and the location invalidation status is recorded. If the match succeeds, the declaration block corresponding to the rule index is locked, and the style write target is generated. The style write target refers to the declaration block scope that the current CSS variable scope declaration will enter, which is determined by the stylesheet identifier, rule index, and declaration block boundary.
[0054] In one embodiment, the CSS variable scope declaration is written to the style writing target. After writing is complete, the CSS variable name and CSS variable value in the declaration block are read, and the reading result is compared with the style declaration content before writing. If the comparison shows that the corresponding CSS variable name has been added or updated in the declaration block, and the value of the CSS variable name is consistent with the Token value, then the writing verification item is marked as writing complete. If the comparison cannot confirm that the CSS variable name has entered the declaration block, or the CSS variable value after writing is inconsistent with the Token value, then the writing content is deleted and the writing verification fails, and this state does not enter the CSS variable effectiveness record generation process.
[0055] In one embodiment, after the validation item is written, the browser is triggered to refresh the rendering of the component instance scope. After the rendering refresh is complete, the computed style value corresponding to the target style property name is read. When reading the computed style value, the component instance scope, scope selector, and target style property name are used as reading conditions to avoid reading the same property value in other component instance scopes. The computed style value is compared with the token value for consistency. This consistency comparison does not use a formula, but rather performs text normalization and semantic equivalence verification on the final property value returned by the browser and the corresponding feasible token value in the token injection permission table according to the same CSS value standard. Normalization processing includes removing writing differences that do not change the meaning of the CSS value and retaining differences that change the rendering result.
[0056] When the calculated style value matches the token value, a CSS variable effectiveness record is generated based on the written validation items. The process of generating the CSS variable effectiveness record includes obtaining the component instance identifier, component type name, component state name, style slot name, target style property name, and token reference name corresponding to the component instance scope, and reading the write time and stylesheet location of the CSS variable scope declaration to generate the effectiveness base item. The effectiveness base item refers to the record basis used to indicate that the current CSS variable scope declaration has taken effect within the specified component instance scope; its output is used to associate permission boundaries.
[0057] In one embodiment, the effective base item is associated with the corresponding declaration level permission and overriding order permission in the Token injection permission table, and written to the effective record storage area to generate a CSS variable effective record. The effective record storage area is a record area used to store CSS variable effective records, containing the token reference name, component instance scope, target style property name, location written to the stylesheet, calculated style consistency status, declaration level permission, and overriding order permission. This record is subsequently used to trace why a CSS variable declaration could be written and why it was confirmed to be effective.
[0058] When the calculated style value and the token value are inconsistent, the CSS variable scope declaration is deleted and a style constraint revocation record is generated. When deleting a CSS variable scope declaration, the stylesheet identifier, rule index, declaration block boundary, and CSS variable name in the written validation item are used to locate the content being written, and only the scope declaration of the CSS variable written in this instance is revoked. The style constraint revocation record includes the component instance identifier, component type name, component state name, style slot name, target style property name, token reference name, token value, calculated style value, stylesheet writing location, and revocation reason. Revocation reasons include inconsistent calculated styles, being overridden by existing style rules after writing, changes in declaration block state, or changes in the page document object scope. This record allows subsequent processing of the same token reference to identify the previous revocation state and re-execute permission matching, scope positioning, and calculated style validation.
[0059] In one embodiment, if the computed style value corresponding to the target style property name cannot be read after rendering refresh, a CSS variable activation record is not generated. In this case, the CSS variable scope declaration is first deleted, then a style constraint revocation record is generated, and the revocation reason is recorded as computed style value being unreadable. If the read computed style value is synonymous with the Token value but written differently, it is normalized according to the CSS value definition before consistency is judged. If inconsistency persists after normalization, revocation is performed. If the stylesheet's mounting changes after being written, the currently mounted stylesheet set is reread; if the original writing position cannot be located, the position failure status in the revocation record is retained, enabling subsequent tracing to distinguish between rendering inconsistencies and stylesheet position changes.
[0060] In one embodiment, both CSS variable activation records and style constraint revocation records are associated with token reference names, but their subsequent uses differ. CSS variable activation records indicate that the CSS variable scope declaration has been written according to the permission boundaries and confirmed by the computed styles. Style constraint revocation records indicate that although the CSS variable scope declaration has been written or positioned, it has not been confirmed by the rendered computed styles. When processing the same component instance scope subsequently, the system first checks if any unrevoked revocation records exist. If so, it re-executes the token injection permission table matching and overriding order permission comparison, without directly using the previously written state.
[0061] In this embodiment, by comparing the differences in declaration content before and after writing, reading the browser's calculated style values, comparing consistency, generating effectiveness records, and handling inconsistencies, the CSS variable injection result must be confirmed by the rendered style values, thus forming a closed-loop verification between the token value, scope declaration, and final calculated style. By associating the effectiveness base item with declaration level permissions and overriding order permissions, each CSS variable effectiveness record can be traced back to the corresponding permission line, thus extending style constraints not only to pre-write verification but also to post-write verification and exception reversal.
[0062] The above description is merely a specific embodiment of the present invention, but the scope of protection of the present invention is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the technical scope disclosed in the present invention should be included within the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be determined by the scope of the claims.
Claims
1. A method for dynamic CSS variable injection and style constraint based on design tokens, characterized in that, Includes the following steps: Obtain the design token record, parse the token name, token value, token purpose, style attribute permission, component type permission, component state permission, declaration level permission, and overriding order permission, and generate a token injection permission table; Read the component description file, extract the component type name, component state name, style slot name, target style attribute name and token reference name, match the token injection permission table based on the token reference name, and generate CSS variable candidate declarations when the extracted information satisfies the token injection permission table; Based on the CSS variable candidate declaration, locate the component instance scope in the page document object, calculate the number of levels from the component instance scope to the component root identifier, and generate a CSS variable scope declaration when the number of levels does not exceed the declaration level permission and the existing style rule overriding order does not exceed the overriding order permission. Write the CSS variable scope declaration to the corresponding stylesheet location, read the calculated style value after browser rendering, generate a CSS variable activation record when the calculated style value is consistent with the Token value, and delete the CSS variable scope declaration and generate a style constraint cancellation record when the calculated style value is inconsistent with the Token value.
2. The method for dynamic CSS variable injection and style constraint based on design tokens according to claim 1, characterized in that, The process of obtaining design token records, parsing token name, token value, token purpose, style attribute permission, component type permission, component state permission, declaration level permission, and override order permission, and generating a token injection permission table includes: Obtain the original field set of the design Token record, create a token index according to the token name field, and associate the token value field and the token purpose field with the token index to generate the token basic item; The token basic item is parsed to obtain the style attribute permission, component type permission, component state permission, declaration level permission, and overriding order permission. The number of parsed fields and the number of missing fields in the permission content are counted. The permission integrity parameter is calculated. When the permission integrity parameter reaches the preset integrity threshold, the permission content is written into the same permission line. When the permission integrity parameter does not reach the preset integrity threshold, the corresponding token is marked as non-injectable. The Token injection permission table is generated.
3. The method for dynamic CSS variable injection and style constraint based on design tokens according to claim 2, characterized in that, The process of parsing the licensed content includes: Retrieve the license object names from the style attribute license, component type license, and component state license. Match the license object names with the preset style attribute dictionary, preset component type dictionary, and preset state dictionary respectively. If the match fails, delete the corresponding license object name and generate the first license set. Obtain the numerical boundaries in the declaration level license and the overriding order license, compare the numerical boundaries with the preset level boundary and the preset order boundary, and associate the first license set with the numerical boundaries when the comparison result meets the boundary conditions to generate a license verification item.
4. The method for dynamic CSS variable injection and style constraint based on design tokens according to claim 1, characterized in that, The process of reading the component description file, extracting the component type name, component state name, style slot name, target style property name, and token reference name, and generating CSS variable candidate declarations when the extracted information matches the token injection permission table based on the token reference name includes: Read the component description record in the component description file, parse the component type field, component state field, style slot field, target style attribute field and token reference field in the component description record, and perform null value filtering and field type validation on the parsed field values to generate component style description items; Based on the token reference name, the corresponding permission line is retrieved in the Token Injection Permission Table. The component type name, component state name, and target style attribute name in the component style description item are matched with the corresponding permission line respectively. When the match is successful, the style slot name, target style attribute name, and token reference name are associated to generate the CSS variable candidate declaration.
5. The method for dynamic CSS variable injection and style constraint based on design tokens according to claim 4, characterized in that, The process of generating the component style description item includes: Get the slot affiliation relationship between the component type field and the style slot field, limit the style slot field to the slot directory preset by the corresponding component type field, and delete the corresponding component description record when the style slot field does not match the slot directory, and generate a slot validation item; Obtain the state attribute relationship between the component state field and the target style attribute field, compare the state attribute relationship with the preset state attribute table, and when the comparison is successful, associate the slot verification item with the token reference field to generate the component style description item.
6. The method for dynamic CSS variable injection and style constraint based on design tokens according to claim 1, characterized in that, Based on the CSS variable candidate declaration, the scope of component instances in the page document object is located. The number of levels from the component instance scope to the component root identifier is calculated. When the number of levels does not exceed the declaration level permission and the existing style rule overriding order does not exceed the overriding order permission, the process of generating the CSS variable scope declaration includes: Get the style slot name, target style property name and token reference name from the CSS variable candidate declaration, retrieve the page element with the corresponding slot identifier in the page document object based on the style slot name, and traverse the page element up to the component root identifier corresponding to the component type name to generate the component instance scope; Calculate the number of parent-child levels traversed from the component instance scope to the component root identifier to obtain the level number. Compare the level number with the declared level permission and compare the existing style rule overriding order with the overriding order permission. When both comparison results satisfy the permission boundary, bind the CSS variable candidate declaration to the component instance scope to generate the CSS variable scope declaration.
7. The method for dynamic CSS variable injection and style constraint based on design tokens according to claim 6, characterized in that, The process of generating the component instance scope includes: Retrieve candidate page elements from the page document object that match the style slot name, read the component instance identifier, component type identifier, and component state identifier of the candidate page elements, and perform consistency matching between the component type identifier and the component type name in the CSS variable candidate declaration to generate the first element set; Delete candidate page elements whose component state identifiers and component state names do not match in the first element set, and perform an upward hierarchical traversal on the remaining candidate page elements until the component root identifier is hit, thereby generating the component instance range.
8. The method for dynamic CSS variable injection and style constraint based on design tokens according to claim 1, characterized in that, The process of writing the CSS variable scope declaration to the corresponding stylesheet location, reading the calculated style value after browser rendering, generating a CSS variable activation record when the calculated style value matches the Token value, and deleting the CSS variable scope declaration and generating a style constraint revocation record when the calculated style value does not match the Token value includes: Get the writable style location, scope selector, CSS variable name and Token value corresponding to the CSS variable scope declaration, write the CSS variable scope declaration to the writable style location, and record the style declaration content before writing and the style declaration content after writing, and generate writing validation items. The browser is triggered to render and refresh the component instance scope, reads the calculated style value corresponding to the target style attribute name, compares the calculated style value with the token value for consistency, and generates the CSS variable effective record based on the written verification item when the comparison result is consistent. When the comparison result is inconsistent, the CSS variable scope declaration is deleted and the style constraint cancellation record is generated.
9. A method for dynamic CSS variable injection and style constraint based on design tokens according to claim 8, characterized in that, The process of generating the written verification item includes: Read the stylesheet identifier, rule index, and declaration block boundary corresponding to the writable style location, match the stylesheet identifier with the stylesheet collection currently mounted on the page document object, and lock the declaration block corresponding to the rule index when the match is successful, and generate the style writing target; The CSS variable scope declaration is written to the style writing target. After writing is completed, the CSS variable name and CSS variable value in the declaration block are read, and the reading result is compared with the style declaration content before writing to generate the writing verification item.
10. A method for dynamic CSS variable injection and style constraint based on design tokens according to claim 8, characterized in that, The process of generating the CSS variable activation record includes: When the calculated style value is consistent with the Token value, obtain the component instance identifier, component type name, component state name, style slot name, target style attribute name and token reference name corresponding to the component instance scope, and read the writing time and style sheet location of the CSS variable scope declaration to generate the effective basic item; Associate the effective basic item with the corresponding feasible declaration level permission and overriding order permission in the Token injection permission table, and write it into the effective record storage area to generate the CSS variable effective record.