[ { "path": ".github/CONTRIBUTING.md", "content": "# Contributing\n\n## Reporting Issues and Asking Questions\n\nBefore opening an issue, please search the issue tracker to make sure your issue hasn't already been reported. Please note that your issue may be closed if it doesn't include the information requested in the issue template.\n\n## Getting started\n\nVisit the issue tracker to find a list of open issues that need attention.\n\nFork, then clone the repo:\n\n```\ngit clone https://github.com/your-username/styleq.git\n```\n\nMake sure you have npm@>=7 and node@>=0.12.15 installed. Then install the package dependencies:\n\n```\nnpm install\n```\n\n## Automated tests\n\nTo run the linter:\n\n```\nnpm run lint\n```\n\nTo run flow:\n\n```\nnpm run flow\n```\n\nTo run all the unit tests:\n\n```\nnpm run tests\n```\n\n…in watch mode:\n\n```\nnpm run tests -- --watch\n```\n\n## Compile and build\n\nTo compile the source code:\n\n```\nnpm run build\n```\n\n### New Features\n\nPlease open an issue with a proposal for a new feature or refactoring before starting on the work. We don't want you to waste your efforts on a pull request that we won't want to accept.\n\n## Pull requests\n\n**Before submitting a pull request**, please make sure the following is done:\n\n1. Fork the repository and create your branch from `main`.\n2. If you've added code that should be tested, add tests!\n3. If you've changed APIs, update the documentation.\n4. Ensure the tests pass (`npm run test`).\n\nYou can now submit a pull request, referencing any issues it addresses.\n\nPlease try to keep your pull request focused in scope and avoid including unrelated commits.\n\nAfter you have submitted your pull request, we'll try to get back to you as soon as possible. We may suggest some changes or improvements.\n\nThank you for contributing!\n" }, { "path": ".github/workflows/benchmarks.yml", "content": "name: benchmarks\n\non: [pull_request]\n\njobs:\n size:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n with:\n fetch-depth: 50\n - uses: actions/setup-node@v4\n with:\n node-version: '20.x'\n - name: 'Setup temporary files'\n run: |\n echo \"BASE_JSON=$(mktemp)\" >> $GITHUB_ENV\n echo \"PATCH_JSON=$(mktemp)\" >> $GITHUB_ENV\n - name: 'Benchmark base'\n run: |\n git checkout -f ${{ github.event.pull_request.base.sha }}\n npm install --ignore-scripts --loglevel error\n npm run build\n if npm run benchmark:size -- -o ${{ env.BASE_JSON }}; then\n echo \"Ran successfully on base branch\"\n else\n echo \"{}\" > ${{ env.BASE_JSON }} # Empty JSON as default\n echo \"Benchmark script not found on base branch, using default values\"\n fi\n - name: 'Benchmark patch'\n run: |\n git checkout -f ${{ github.event.pull_request.head.sha }}\n npm install --ignore-scripts --loglevel error\n npm run benchmark:size -- -o ${{ env.PATCH_JSON }}\n echo \"Ran successfully on patch branch\"\n - name: 'Collect results'\n id: collect\n run: |\n echo \"table<> $GITHUB_OUTPUT\n npm run benchmark:compare -- ${{ env.BASE_JSON }} ${{ env.PATCH_JSON }} >> markdown\n cat markdown >> $GITHUB_OUTPUT\n echo \"EOF\" >> $GITHUB_OUTPUT\n - name: 'Post comment'\n uses: edumserrano/find-create-or-update-comment@v3\n with:\n issue-number: ${{ github.event.pull_request.number }}\n body-includes: ''\n comment-author: 'github-actions[bot]'\n body: |\n \n ### workflow: benchmarks/size\n Comparison of minified (terser) and compressed (brotli) size results, measured in bytes. Smaller is better.\n ${{ steps.collect.outputs.table }}\n edit-mode: replace\n\n perf:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n with:\n fetch-depth: 50\n - uses: actions/setup-node@v4\n with:\n node-version: '20.x'\n - name: 'Setup temporary files'\n run: |\n echo \"BASE_JSON=$(mktemp)\" >> $GITHUB_ENV\n echo \"PATCH_JSON=$(mktemp)\" >> $GITHUB_ENV\n - name: 'Benchmark base'\n run: |\n git checkout -f ${{ github.event.pull_request.base.sha }}\n npm install --ignore-scripts --loglevel error\n npm run build\n if npm run benchmark:perf -- -o ${{ env.BASE_JSON }}; then\n echo \"Ran successfully on base branch\"\n else\n echo \"{}\" > ${{ env.BASE_JSON }} # Empty JSON as default\n echo \"Benchmark script not found on base branch, using default values\"\n fi\n - name: 'Benchmark patch'\n run: |\n git checkout -f ${{ github.event.pull_request.head.sha }}\n npm install --ignore-scripts --loglevel error\n npm run benchmark:perf -- -o ${{ env.PATCH_JSON }}\n echo \"Ran successfully on patch branch\"\n - name: 'Collect results'\n id: collect\n run: |\n echo \"table<> $GITHUB_OUTPUT\n npm run benchmark:compare -- ${{ env.BASE_JSON }} ${{ env.PATCH_JSON }} >> markdown\n cat markdown >> $GITHUB_OUTPUT\n echo \"EOF\" >> $GITHUB_OUTPUT\n - name: 'Post comment'\n uses: edumserrano/find-create-or-update-comment@v3\n with:\n issue-number: ${{ github.event.pull_request.number }}\n body-includes: ''\n comment-author: 'github-actions[bot]'\n body: |\n \n ### workflow: benchmarks/perf\n Comparison of performance test results, measured in operations per second. Larger is better.\n ${{ steps.collect.outputs.table }}\n edit-mode: replace\n" }, { "path": ".github/workflows/tests.yml", "content": "name: tests\n\non:\n push:\n branches:\n - \"main\"\n pull_request:\n types: [opened, synchronize, reopened]\n\njobs:\n # Type checks\n\n flow:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - uses: actions/setup-node@v4\n with:\n node-version: '20.x'\n - run: npm install\n - run: npm run flow\n\n # Code format\n\n format:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - uses: actions/setup-node@v4\n with:\n node-version: '20.x'\n - run: npm install\n - run: npm run prettier:report\n\n lint:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - uses: actions/setup-node@v4\n with:\n node-version: '20.x'\n - run: npm install\n - run: npm run lint:report\n\n # Unit tests\n\n test:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - uses: actions/setup-node@v4\n with:\n node-version: '20.x'\n - run: npm install\n - run: npm run jest\n" }, { "path": ".gitignore", "content": "coverage\ndist\nlogs\nnode_modules\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) Nicolas Gallagher\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "# styleQ · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/necolas/styleq/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/styleq.svg?style=flat)](https://www.npmjs.com/package/styleq) [![Build Status](https://github.com/necolas/styleq/workflows/tests/badge.svg)](https://github.com/necolas/styleq/actions) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/necolas/styleq/blob/master/.github/CONTRIBUTING.md)\n\n**styleQ** is a quick, small JavaScript runtime for merging the HTML class names produced by CSS compilers.\n\n* High performance merging for initial render.\n* Built-in memoization for updates.\n* Merges static and dynamic styles.\n* Supports various CSS compiler designs.\n* 0.7 KB gzipped runtime.\n\n## Use\n\nInstall:\n\n```\nnpm install styleq\n```\n\nImport:\n\n```js\nimport { styleq } from 'styleq';\n```\n\n## API\n\n### styleq(...styles)\n\nMerges style objects and produces a DOM `className` string and inline `style` object (camelCase property names).\n\n```js\nconst [ className, inlineStyle ] = styleq(styles.root, { opacity });\n```\n\nThe `styleq` function efficiently merges deeply nested arrays of both extracted and inline style objects.\n\n* Compiled styles must set the `$$css` property to `true` for production. And may be a string for development.\n* Any style object without the `$$css` property is treated as an **inline style**.\n* Compiled styles must be static for best performance.\n* Compiled style object keys do not need to match CSS property names; any string is allowed.\n* Compiled style object values must be an **HTML class string**.\n\n```js\n/* Generated output */\n\nconst styles = {\n root: {\n // Needed by the runtime\n $$css: true,\n // Atomic CSS classes\n display: 'display-flex-class',\n alignItems: 'alignItems-center-class'\n },\n other: {\n // String values for $$css are concatenated and can be used for dev debugging.\n // Compilers are encouraged to provide file and line info.\n $$css: 'path/to/file:10',\n // Atomic CSS classes\n display: 'display-flex-class',\n alignItems: 'alignItems-center-class'\n },\n};\n\nconst [ className, inlineStyle, dataStyleSrc ] = styleq(styles.root, props.style);\n```\n\n### styleq.factory(options) => styleq\n\nA factory for creating custom merging functions, tailored to the design of specific compilers.\n\n```js\nconst compilerStyleq = styleq.factory(options);\n```\n\nOptions are used to configure the merging function.\n\n```js\ntype Options = {\n // control memoization\n disableCache: boolean = false;\n // control className/style merge strategy\n disableMix: boolean = false;\n // transform individual styles at runtime before merging\n transform: ?(style) => compiledStyle;\n}\n```\n\n#### `disableCache`\n\n**Memoization is enabled by default**. This option can be used to disable it. Memoization relies on a tree of WeakMaps keyed on static compiled styles. This allows the runtime to efficiently store chunks of merged styles, making re-computation very cheap. However, checking the WeakMap for memoized data when there is none significantly adds to the cost of initially computing the result. Therefore, if initial computations need to be as fast as possible (e.g., your use case involves few repeat merges), memoization should be disabled.\n\n```js\nconst styleqNoCache = styleq.factory({ disableCache: true });\n```\n\n#### `disableMix`\n\n**Inline styles are merged together with static styles by default**, but can be merged independently if preferred. Both static and inline styles can be passed to `styleq` for merging. By default, the properties defined by static and inline styles are merged together. The performance of this option is still excellent, but merging with inline styles often means memoization cannot be used as effectively. In certain circumstances, this merging strategy can result in better performance, as the deduplication of styles can reduce the number of CSS rules applied to the element (which improves browser layout times).\n\nIf mixing is diabled, the static and inline styles will be treated as values for different attributes: either `className` OR `style` respectively. If an inline style sets a property that is later set by a static style, *both* the static class name and dynamic style property will be set. In practice this means that inline style declarations override those of static styles, whatever their position in the styles array passed to `styleq`. Therefore, memoization of class name merges is not changed by inline styles, and so provides the best general performance.\n\n```js\nconst styleqNoMix = styleq.factory({ disableMix: true });\n```\n\n#### `transform`\n\n**Styles can be transformed before merging** by using the `transform` function. The runtime loop is extremely performance sensitive as class name merges can happen 1000s of times during a screen render, whether on the server or client. The `transform` function is used to change style objects before styleQ merges them. For example, if a compiler needs runtime information before selecting a compiled style.\n\n```js\n// compiler/useStyleq\nimport { styleq } from 'styleq';\nimport { localizeExtractedStyle } from './localizeExtractedStyle';\nimport { useLocaleContext } from './useLocaleContext'\nimport { useMemo } from 'react';\n\nexport function useStyleq(styles) {\n // Runtime context provides subtree writing direction\n const { direction } = useLocaleContext();\n const isRTL = direction === 'rtl';\n // Create a custom styleq for localization transform\n const styleqWithPolyfills = useMemo(\n () => styleq.factory({\n transform(style) {\n // Memoize results in the transform\n return localizeExtractedStyle(style, isRTL);\n }\n }),\n [ isRTL ]\n );\n const styleProps = styleqWithPolyfills(styles);\n // Add vendor prefixes to inline styles\n if (styleProps[1]) {\n styleProps[1] = prefixAll(styleProps[1]);\n }\n return styleProps;\n}\n```\n\nWARNING: Transforming compiled styles to support runtime dynamism is possible without negatively effecting performance, however, transforms must be done carefully to avoid creating merge operations that cannot be efficiently memoized. `WeakMap` is recommended for memoizing the result of transforms, so that static objects are passed to styleq.\n\n## Notes for compiler authors\n\nCSS compilers implementing different styling models can all target styleQ to deliver excellent runtime performance. styleQ can be used at build time and runtime (for server and client) to generate `className` and `style` values.\n\nExamples of how various compiler features and designs can supported with styleQ are discussed below.\n\n* [Supporting zero-conflict styles](#supporting-zero-conflict-styles)\n* [Supporting arbitrary selectors](#supporting-arbitrary-selectors)\n* [Supporting high-performance layouts](#supporting-high-performance-layouts)\n* [Supporting high-performance inline styles](#supporting-high-performance-inline-styles)\n* [Supporting themes](#supporting-themes)\n* [Polyfilling logical properties and values](#polyfilling-logical-properties-and-values)\n* [Implementing utility styles](#implementing-utility-styles)\n\n### Supporting zero-conflict styles\n\nZero-conflict styles provide developers with guarantees that component style is encapsulated and not implicitly altered by styles defined by other components. A compiler designed around zero-conflict styles will generally output \"atomic CSS\" and produce smaller CSS style sheets that avoid all specificity and source order conflicts.\n\nTypically, a zero-conflict design involves excluding support for descendant selectors (i.e., any selector that targets an element other than the element receiving the class name). And shortform properties are either disallowed, restricted, or automatically expanded to longform properties. If pseudo-classes (e.g., `:focus`) are supported, the compiler must guarantee the order of precedence between pseudo-classes in the CSS style sheet (e.g., `:focus` rules appear before `:active` rules). If Media Queries are supported, they too must be carefully ordered.\n\nInput:\n\n```js\nimport * as compiler from 'compiler';\n\nconst styles = compiler.create({\n root: {\n margin: 10,\n opacity: 0.7,\n ':focus': {\n opacity: 0.8\n },\n ':active': {\n opacity: 1.0\n }\n }\n});\n```\n\nOutput:\n\n```js\ninsertOrExtract('.margin-left-10 { margin-left:10px; }', 0);\ninsertOrExtract('.margin-top-10 { margin-top:10px; }', 0);\ninsertOrExtract('.margin-right-10 { margin-right:10px; }', 0);\ninsertOrExtract('.margin-bottom-10 { margin-bottom:10px; }', 0);\ninsertOrExtract('.opacity-07 { opacity:0.7; }', 0);\n// Pseudo-class insertion order is after class selector rules\ninsertOrExtract('.focus-opacity-08:focus { opacity:0.8; }', 1.0);\ninsertOrExtract('.active-opacity-1:active { opacity:1; }', 1.1);\n\nconst styles = {\n root: {\n $$css: true,\n marginLeft: 'margin-left-10',\n marginTop: 'margin-top-10',\n marginRight: 'margin-right-10',\n marginBottom: 'margin-bottom-10',\n opacity: 'opacity-07',\n __focus$opacity: 'focus-opacity-08',\n __active$opacity: 'active-opacity-1'\n }\n};\n```\n\n### Supporting arbitrary selectors\n\nThe runtime can be used by compilers that support arbitrary selectors, e.g., by concatenating (hashing, etc.) the selector string and property to create a unique key for that selector-property combination. (Note that supporting arbitrary CSS selectors trades flexibility for zero-conflict styles.)\n\nInput:\n\n```js\nimport * as compiler from 'compiler';\n\nconst styles = compiler.create({\n root: {\n ':focus a[data-prop]': {\n opacity: 1\n }\n }\n});\n```\n\nOutput:\n\n```js\ninsertOrExtract('.xjrodmsp-opacity-1:focus a[data-prop] { opacity:1.0; }');\n\nconst styles = {\n root: {\n $$css: true,\n '__xjrodmsp-opacity-1': 'xjrodmsp-opacity-1'\n }\n};\n```\n\n### Supporting high-performance layouts\n\nAtomic CSS has tradeoffs. Once an element has many HTML class names each pointing to different CSS rules, browser layout times slow down. In some cases, compilers may choose to flatten multiple declarations into \"traditional\" CSS. For example, a component library may optimize the \"reset\" styles for its core components by flattening those styles, and then inserting those rules into the CSS style sheet before all the atomic CSS. That way atomic CSS will always override the reset rules, and the layout performance of the core components will be significantly improved.\n\nInput:\n\n```jsx\nimport { createResetStyle } from 'compiler';\n\nfunction View(props) {\n return (\n
\n );\n}\n\nconst reset = createResetStyle({\n display: 'flex',\n alignItems: 'stretch',\n flexDirection: 'row',\n ...\n});\n```\n\nOutput:\n\n```jsx\nimport { styleq } from 'compiler/styleq';\n\n// Compiler inserts Reset CSS rules before Atomic CSS rules.\ninsertOrExtract('.reset- { display:flex; align-items:stretch; flex-direction:row', 0);\n\nfunction View(props) {\n const [ className, inlineStyle ] = styleq(reset, props.css);\n return (\n
\n );\n}\n\nconst reset = {\n $$css: true,\n // Compiler decides that only one reset is allowed per element.\n // Each reset rule created is set to the '__reset' key.\n __reset: 'reset-',\n};\n```\n\n### Supporting high-performance inline styles\n\nA compiler may provide a single API for defining static and dynamic values, and maximize the number of compiled styles by replacing dynamic values with unique CSS custom properties that are then set by inline styles. This compiler design decouples static and inline property merges, and makes the best use of runtime memoization.\n\nInput:\n\n```jsx\n// @jsx createElement\nimport { createElement } from 'compiler';\n\nfunction Fade(props) {\n return (\n \n );\n}\n```\n\nOutput:\n\n```jsx\n// Custom styleq with mixing disabled\nimport { customStyleq } from 'compiler/customStyleq';\n\n// The opacity value is a unique CSS custom property\ninsertOrExtract('.backgroundColor-blue { background-color:blue; }');\ninsertOrExtract('.opacity-var-xyz { opacity:var(--opacity-xyz); }');\n\n// A compiled style is generated, including the 'opacity' property\nconst compiledStyle = {\n $$css: true,\n backgroundColor: 'backgroundColor-blue',\n opacity: 'opacity-var-xyz'\n};\n\nfunction Fade(props) {\n const [ className, style ] = customStyleq(\n // The dynamic value is set to the custom property.\n // With static/dynamic mixing disabled, the position of the inline style\n // is irrelevant. However, with mixing enabled, the best performance is\n // achieved by placing inline styles earlier in the queue.\n { '--opacity-xyz': props.opacity },\n compiledStyle,\n props.css\n );\n\n return (\n \n );\n}\n```\n\n\n### Supporting themes\n\nCompilers implementing themes via CSS custom properties should avoid creating atomic CSS rules for each theme property. As mentioned above, this can slow down browser layout and flattening theme styles into a single rule is preferred. Theme classes can be deduplicated by using the same key for all themes in the generated style object.\n\nInput:\n\n```js\nimport * as compiler from 'compiler';\n\nconst [themeVars, themeStyle] = compiler.createDefaultTheme({\n color: {\n primary: '#fff',\n secondary: '#f5d90a'\n ...\n },\n space: {},\n size: {}\n});\n\nconst className = compiler.merge(themeStyle, props.style);\n```\n\nOutput:\n\n```js\nimport { styleq } from 'compiler/styleq';\n\ninsertOrExtract(\n ':root, .theme-default { --theme-default-color-primary:#fff; --theme-default-color-secondary:#f5d90a; }'\n);\n\nconst themeVars = {\n color: {\n primary: 'var(--theme-default-color-primary)',\n secondary: 'var(--theme-default-color-secondary)'\n ...\n }\n};\n\nconst themeStyle = {\n $$css: true,\n __theme: 'theme-default'\n};\n\nconst [ className ] = styleq(themeStyle, props.style);\n```\n\n### Polyfilling features at runtime\n\nA compiler might want to provide polyfills or other runtime transforms, e.g., [CSS logical properties and values](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties). Using the `transform` option is one way to implement this kind of functionality.\n\nInput:\n\n```js\nimport { StyleSheet } from 'compiler';\n\nfunction Box() {\n return
\n}\n\nconst styles = StyleSheet.create({\n root: {\n float: 'inline-start',\n }\n});\n```\n\nOutput:\n\n```js\n// See the 'useStyleq' example in the API docs above\nimport { useStyleq } from 'compiler/useStyleq';\n\ninsertOrExtract('.float-left { float:left; }');\ninsertOrExtract('.float-right { float:right; }');\n\nfunction Box() {\n const [ className ] = useStyleq(styles.view, styles.root);\n return
\n}\n\nconst styles = {\n root: {\n $$css: true,\n // Compiler defines a custom key to mark this style object\n // for processessing by the localized transform.\n $$css$localize: true,\n // [ LTR, RTL ]\n float: [ 'float-left', 'float-right' ]\n }\n}\n```\n\nIn this case, `useStyleq` is a function defined by the compiler which transforms `$$css` styles into the correct class name for a given writing direction. Take care to memoize the transform so that the same result is always used in merges. For example:\n\n```js\nconst cache = new WeakMap();\nconst markerProp = '$$css$localize';\n\n/**\n * The compiler polyfills logical properties and values, generating a class\n * name for both writing directions. The style objects are annotated by\n * the compiler as needing this runtime transform. The results are memoized.\n *\n * { '$$css$localize': true, float: [ 'float-left', 'float-right' ] }\n * => { float: 'float-left' }\n */\n\nfunction compileStyle(style, isRTL) {\n // Create a new compiled style for styleq\n const compiledStyle = {};\n for (const prop in style) {\n if (prop !== markerProp) {\n const value = style[prop];\n if (Array.isArray(value)) {\n compiledStyle[prop] = isRTL ? value[1] : value[0];\n } else {\n compiledStyle[prop] = value;\n }\n }\n }\n return compiledStyle;\n}\nexport function localizeStyle(style, isRTL) {\n if (style[markerProp] != null) {\n const compiledStyleIndex = isRTL ? 1 : 0;\n // Check the cache in case we've already seen this object\n if (cache.has(style)) {\n const cachedStyles = cache.get(style);\n let compiledStyle = cachedStyles[compiledStyleIndex];\n if (compiledStyle == null) {\n // Update the missing cache entry\n compiledStyle = compileStyle(style, isRTL);\n cachedStyles[compiledStyleIndex] = compiledStyle;\n cache.set(style, cachedStyles);\n }\n return compiledStyle;\n }\n\n // Create a new compiled style for styleq\n const compiledStyle = compileStyle(style, isRTL);\n const cachedStyles = new Array(2);\n cachedStyles[compiledStyleIndex] = compiledStyle;\n cache.set(style, cachedStyles);\n return compiledStyle;\n }\n return style;\n}\n```\n\n### Implementing utility styles\n\nCompilers that produce \"utility\" CSS rules can use styleQ to dedupe utilities across categories, i.e., higher-level styling abstractions such as \"size\", \"spacing\", \"color scheme\", etc. The keys of extracted styles can match the utility categories.\n\nInput:\n\n```js\nimport { oocss } from 'compiler';\n\nconst View = (props) => (\n // This compiler targets strings for named \"utilities\"\n
\n);\n\nconst StyledView = (props) => (\n \n);\n```\n\nOutput:\n\n```js\nimport { styleq } from 'styleq';\n\ninsertOrExtract('.cs-1 { --primary-color:#000; --secondary-color:#eee }', 2);\ninsertOrExtract('.cs-2 { --primary-color:#fff; --secondary-color:#333 }', 2);\ninsertOrExtract('.p-1 { padding:10px }', 0);\ninsertOrExtract('.p-2 { padding:20px }', 0);\ninsertOrExtract('.s-1 { height:100px; width:100px }', 1);\n\n// Each utility class is categorized. For example, only a single 'colorScheme'\n// rule will be applied to each element.\nconst oocss1 = {\n $$css: true,\n __cs: 'cs-1',\n __p: 'p-1',\n __s: 's-1'\n};\n\nconst View = (props) => (\n
\n);\n\nconst oocss2 = {\n $$css: true,\n __cs: 'cs-2',\n __p: 'p-2'\n}\n\nconst StyledView = (props) => (\n \n);\n```\n\n## License\n\nstyleq is [MIT licensed](./LICENSE).\n" }, { "path": "benchmark/compare.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nconst fs = require('fs');\n\nfunction readJsonFile(filePath) {\n try {\n const fileContents = fs.readFileSync(filePath, 'utf8');\n const data = JSON.parse(fileContents);\n return data;\n } catch (error) {\n console.error(`Error reading file ${filePath}:`, error);\n return null;\n }\n}\n\nfunction mergeData(base, patch) {\n const merged = {};\n function addToMerged(data, fileIndex) {\n Object.keys(data).forEach((key) => {\n if (merged[key] == null) {\n merged[key] = {};\n }\n Object.keys(data[key]).forEach((subKey) => {\n if (merged[key][subKey] == null) {\n merged[key][subKey] = {};\n }\n merged[key][subKey][fileIndex] = data[key][subKey];\n });\n });\n }\n if (base != null) {\n addToMerged(base, 1);\n }\n if (patch != null) {\n addToMerged(patch, 2);\n }\n return merged;\n}\n\nfunction generateComparisonData(results) {\n const baseResult = parseInt(results[1], 10);\n const patchResult = parseInt(results[2], 10);\n const isValidBase = !isNaN(baseResult);\n const isValidPatch = !isNaN(patchResult);\n let icon = '',\n ratioFixed = '';\n\n if (isValidBase && isValidPatch) {\n const ratio = patchResult / baseResult;\n ratioFixed = ratio.toFixed(2);\n if (ratio < 0.95 || ratio > 1.05) {\n icon = '**!!**';\n } else if (ratio < 1) {\n icon = '-';\n } else if (ratio > 1) {\n icon = '+';\n }\n }\n\n return {\n baseResult: isValidBase ? baseResult.toLocaleString() : '',\n patchResult: isValidPatch ? patchResult.toLocaleString() : '',\n ratio: ratioFixed,\n icon\n };\n}\n\nfunction generateMarkdownTable(mergedData) {\n const rows = [];\n rows.push('| **Results** | **Base** | **Patch** | **Ratio** | |');\n rows.push('| :--- | ---: | ---: | ---: | ---: |');\n Object.keys(mergedData).forEach((suiteName) => {\n rows.push('| | | | |');\n rows.push(`| **${suiteName}** | | | | |`);\n Object.keys(mergedData[suiteName]).forEach((test) => {\n const results = mergedData[suiteName][test];\n const { baseResult, patchResult, ratio, icon } =\n generateComparisonData(results);\n rows.push(\n `| · ${test} | ${baseResult} | ${patchResult} | ${ratio} | ${icon} |`\n );\n });\n });\n return rows.join('\\n');\n}\n\n/**\n * Compare up to 2 different benchmark runs\n */\nconst args = process.argv.slice(2);\nconst baseResults = args[0] ? readJsonFile(args[0]) : null;\nconst patchResults = args[1] ? readJsonFile(args[1]) : null;\nconst mergedData = mergeData(baseResults, patchResults);\nconst markdownTable = generateMarkdownTable(mergedData);\n\nconsole.log(markdownTable);\n" }, { "path": "benchmark/performance.js", "content": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nconst fs = require('fs');\nconst Benchmark = require('benchmark');\nconst yargs = require('yargs/yargs');\nconst { hideBin } = require('yargs/helpers');\nconst { styleq } = require('../dist/styleq');\n\n/**\n * CLI\n */\n\n// run.js --outfile filename.js\nconst argv = yargs(hideBin(process.argv)).option('outfile', {\n alias: 'o',\n type: 'string',\n description: 'Output file',\n demandOption: false\n}).argv;\nconst outfile = argv.outfile;\n\n/**\n * Test helpers\n */\n\nfunction createSuite(name, options) {\n const suite = new Benchmark.Suite(name);\n const test = (...args) => suite.add(...args);\n\n function jsonReporter(suite) {\n const benchmarks = [];\n\n suite.on('cycle', (event) => {\n benchmarks.push(event.target);\n });\n\n suite.on('error', (event) => {\n throw new Error(String(event.target.error));\n });\n\n suite.on('complete', () => {\n const timestamp = Date.now();\n const result = benchmarks.map((bench) => {\n if (bench.error) {\n return {\n name: bench.name,\n id: bench.id,\n error: bench.error\n };\n }\n\n return {\n name: bench.name,\n id: bench.id,\n samples: bench.stats.sample.length,\n deviation: bench.stats.rme.toFixed(2),\n ops: bench.hz.toFixed(bench.hz < 100 ? 2 : 0),\n timestamp\n };\n });\n options.callback(result, suite.name);\n });\n }\n\n jsonReporter(suite);\n return { suite, test };\n}\n\n/**\n * Test setup\n */\n\nconst aggregatedResults = {};\nconst options = {\n callback(data, suiteName) {\n const testResults = data.reduce((acc, test) => {\n const { name, ops } = test;\n acc[name] = ops;\n return acc;\n }, {});\n\n aggregatedResults[suiteName] = testResults;\n }\n};\n\nconsole.log('Running performance benchmark, please wait...');\n\nconst { suite, test } = createSuite('styleq', options);\n\n/**\n * Additional test subjects\n */\nconst transformCache = new WeakMap();\nconst transform = (style) => {\n // Check the cache in case we've already seen this object\n if (transformCache.has(style)) {\n const flexStyle = transformCache.get(style);\n return flexStyle;\n }\n // Create a new compiled style for styleq\n const flexStyle = { ...style, display: 'display-flex' };\n transformCache.set(style, flexStyle);\n return flexStyle;\n};\n\nconst styleqNoCache = styleq.factory({ disableCache: true });\nconst styleqNoMix = styleq.factory({ disableMix: true });\nconst styleqTransform = styleq.factory({ transform });\n\n/**\n * Fixtures\n */\n\nconst basicStyleFixture1 = {\n $$css: true,\n backgroundColor: 'backgroundColor-1',\n color: 'color-1'\n};\n\nconst basicStyleFixture2 = {\n $$css: true,\n backgroundColor: 'backgroundColor-2',\n color: 'color-2'\n};\n\nconst bigStyleFixture = {\n $$css: true,\n backgroundColor: 'backgroundColor-3',\n borderColor: 'borderColor-3',\n borderStyle: 'borderStyle-3',\n borderWidth: 'borderWidth-3',\n boxSizing: 'boxSizing-3',\n display: 'display-3',\n listStyle: 'listStyle-3',\n marginBottom: 'marginBottom-3',\n marginInlineEnd: 'marginInlineEnd-3',\n marginInlineStart: 'marginInlineStart-3',\n marginLeft: 'marginLeft-3',\n marginRight: 'marginRight-3',\n marginTop: 'marginTop-3',\n paddingBottom: 'paddingBottom-3',\n paddingInlineEnd: 'paddingInlineEnd-3',\n paddingInlineStart: 'paddingInlineStart-3',\n paddingLeft: 'paddingLeft-3',\n paddingRight: 'paddingRight-3',\n paddingTop: 'paddingTop-3',\n textAlign: 'textAlign-3',\n textDecoration: 'textDecoration-3',\n whiteSpace: 'whiteSpace-3',\n wordWrap: 'wordWrap-3',\n zIndex: 'zIndex-3'\n};\n\nconst bigStyleWithPseudosFixture = {\n $$css: true,\n backgroundColor: 'backgroundColor-4',\n border: 'border-4',\n color: 'color-4',\n cursor: 'cursor-4',\n display: 'display-4',\n fontFamily: 'fontFamily-4',\n fontSize: 'fontSize-4',\n lineHeight: 'lineHeight-4',\n marginEnd: 'marginEnd-4',\n marginStart: 'marginStart-4',\n paddingEnd: 'paddingEnd-4',\n paddingStart: 'paddingStart-4',\n textAlign: 'textAlign-4',\n textDecoration: 'textDecoration-4',\n ':focus$color': 'focus$color-4',\n ':focus$textDecoration': 'focus$textDecoration-4',\n ':active$transform': 'active$transform-4',\n ':active$transition': 'active$transition-4'\n};\n\nconst complexNestedStyleFixture = [\n bigStyleFixture,\n false,\n false,\n false,\n false,\n [\n {\n $$css: true,\n cursor: 'cursor-a',\n touchAction: 'touchAction-a'\n },\n false,\n {\n $$css: true,\n outline: 'outline-b'\n },\n [\n {\n $$css: true,\n cursor: 'cursor-c',\n touchAction: 'touchAction-c'\n },\n false,\n false,\n {\n $$css: true,\n textDecoration: 'textDecoration-d',\n ':focus$textDecoration': 'focus$textDecoration-d'\n },\n false,\n [\n bigStyleWithPseudosFixture,\n {\n $$css: true,\n display: 'display-e',\n width: 'width-e'\n },\n [\n {\n $$css: true,\n ':active$transform': 'active$transform-f'\n }\n ]\n ]\n ]\n ]\n];\n\n/**\n * Performance tests\n */\n\n// SMALL OBJECT\n\ntest('small object', () => {\n styleq(basicStyleFixture1);\n});\n\ntest('small object (cache miss)', () => {\n styleq({ ...basicStyleFixture1 });\n});\n\ntest('small object (cache disabled)', () => {\n styleqNoCache({ ...basicStyleFixture1 });\n});\n\n// LARGE OBJECT\n\ntest('large object', () => {\n styleq(bigStyleFixture);\n});\n\ntest('large object (cache miss)', () => {\n styleq({ ...bigStyleFixture });\n});\n\ntest('large object (cache disabled)', () => {\n styleqNoCache({ ...bigStyleFixture });\n});\n\n// SMALL MERGE\n\ntest('small merge', () => {\n styleq(basicStyleFixture1, basicStyleFixture2);\n});\n\ntest('small merge (cache miss)', () => {\n styleq({ ...basicStyleFixture1 }, { ...basicStyleFixture2 });\n});\n\ntest('small merge (cache disabled)', () => {\n styleqNoCache(basicStyleFixture1, basicStyleFixture2);\n});\n\n// LARGE MERGE\n\ntest('large merge', () => {\n styleq([complexNestedStyleFixture]);\n});\n\ntest('large merge (cache disabled)', () => {\n styleqNoCache([complexNestedStyleFixture]);\n});\n\ntest('large merge (transform)', () => {\n styleqTransform([complexNestedStyleFixture]);\n});\n\n// INLINE STYLES\n\ntest('small inline style', () => {\n styleq({ backgroundColor: 'red' });\n});\n\ntest('large inline style', () => {\n styleq({\n backgroundColor: 'red',\n borderColor: 'red',\n borderStyle: 'solid',\n borderWidth: '1px',\n boxSizing: 'border-bx',\n display: 'flex',\n listStyle: 'none',\n marginTop: '0',\n marginEnd: '0',\n marginBottom: '0',\n marginStart: '0',\n paddingTop: '0',\n paddingEnd: '0',\n paddingBottom: '0',\n paddingStart: '0',\n textAlign: 'start',\n textDecoration: 'none',\n whiteSpace: 'pre',\n zIndex: '0'\n });\n});\n\ntest('merged inline style', () => {\n styleq(\n {\n backgroundColor: 'blue',\n borderColor: 'blue',\n display: 'block'\n },\n {\n backgroundColor: 'red',\n borderColor: 'red',\n borderStyle: 'solid',\n borderWidth: '1px',\n boxSizing: 'border-bx',\n display: 'flex',\n listStyle: 'none',\n marginTop: '0',\n marginEnd: '0',\n marginBottom: '0',\n marginStart: '0',\n paddingTop: '0',\n paddingEnd: '0',\n paddingBottom: '0',\n paddingStart: '0',\n textAlign: 'start',\n textDecoration: 'none',\n whiteSpace: 'pre',\n zIndex: '0'\n }\n );\n});\n\ntest('merged inline style (mix disabled)', () => {\n styleqNoMix(\n {\n backgroundColor: 'blue',\n borderColor: 'blue',\n display: 'block'\n },\n {\n backgroundColor: 'red',\n borderColor: 'red',\n borderStyle: 'solid',\n borderWidth: '1px',\n boxSizing: 'border-bx',\n display: 'flex',\n listStyle: 'none',\n marginTop: '0',\n marginEnd: '0',\n marginBottom: '0',\n marginStart: '0',\n paddingTop: '0',\n paddingEnd: '0',\n paddingBottom: '0',\n paddingStart: '0',\n textAlign: 'start',\n textDecoration: 'none',\n whiteSpace: 'pre',\n zIndex: '0'\n }\n );\n});\n\nsuite.run();\n\n/**\n * Print results\n */\n\nconst aggregatedResultsString = JSON.stringify(aggregatedResults, null, 2);\n\n// Print / Write results\nconst now = new Date();\nconst year = now.getFullYear();\nconst month = String(now.getMonth() + 1).padStart(2, '0'); // Month is 0-indexed\nconst day = String(now.getDate()).padStart(2, '0');\nconst hours = String(now.getHours()).padStart(2, '0');\nconst minutes = String(now.getMinutes()).padStart(2, '0');\nconst timestamp = `${year}${month}${day}-${hours}${minutes}`;\n\nconst dirpath = `${process.cwd()}/logs`;\nconst filepath = `${dirpath}/perf-${timestamp}.json`;\nif (!fs.existsSync(dirpath)) {\n fs.mkdirSync(dirpath);\n}\nconst outpath = outfile || filepath;\nfs.writeFileSync(outpath, `${aggregatedResultsString}\\n`);\n\nconsole.log(aggregatedResultsString);\nconsole.log('Results written to', outpath);\n" }, { "path": "benchmark/size.js", "content": "/**\n * Copyright (c) Nicolas Gallagher\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nconst brotliSizePkg = require('brotli-size');\nconst fs = require('fs');\nconst path = require('path');\nconst yargs = require('yargs/yargs');\nconst { hideBin } = require('yargs/helpers');\nconst { minify_sync } = require('terser');\n\n// run.js --outfile filename.js\nconst argv = yargs(hideBin(process.argv)).option('outfile', {\n alias: 'o',\n type: 'string',\n description: 'Output file',\n demandOption: false\n}).argv;\nconst outfile = argv.outfile;\n\nconst files = [path.join(__dirname, '../dist/styleq.js')];\n\nconsole.log('Running benchmark-size, please wait...');\n\nconst sizes = files.map((file) => {\n const code = fs.readFileSync(file, 'utf8');\n const result = minify_sync(code).code;\n const minified = Buffer.byteLength(result, 'utf8');\n const compressed = brotliSizePkg.sync(result);\n return { file, compressed, minified };\n});\n\nconst aggregatedResults = {};\nsizes.forEach((entry) => {\n const { file, minified, compressed } = entry;\n const filename = file.split('dist/')[1];\n aggregatedResults[filename] = {\n compressed,\n minified\n };\n});\n\nconst aggregatedResultsString = JSON.stringify(aggregatedResults, null, 2);\n\n// Print / Write results\nconst now = new Date();\nconst year = now.getFullYear();\nconst month = String(now.getMonth() + 1).padStart(2, '0'); // Month is 0-indexed\nconst day = String(now.getDate()).padStart(2, '0');\nconst hours = String(now.getHours()).padStart(2, '0');\nconst minutes = String(now.getMinutes()).padStart(2, '0');\nconst timestamp = `${year}${month}${day}-${hours}${minutes}`;\n\nconst dirpath = `${process.cwd()}/logs`;\nconst filepath = `${dirpath}/size-${timestamp}.json`;\nif (!fs.existsSync(dirpath)) {\n fs.mkdirSync(dirpath);\n}\nconst outpath = outfile || filepath;\nfs.writeFileSync(outpath, `${aggregatedResultsString}\\n`);\n\nconsole.log(aggregatedResultsString);\nconsole.log('Results written to', outpath);\n" }, { "path": "configs/.babelrc", "content": "{\n \"assumptions\": {\n \"iterableIsArray\": true\n },\n \"presets\": [\n [\"@babel/preset-env\", {\n \"exclude\": [\n \"@babel/plugin-transform-typeof-symbol\"\n ],\n \"targets\": {\n \"browsers\": \"> 0%\",\n \"esmodules\": false,\n \"ie\": \"11\"\n },\n \"modules\": \"commonjs\"\n }],\n \"@babel/preset-flow\"\n ],\n \"plugins\": [\n \"babel-plugin-syntax-hermes-parser\"\n ]\n}\n" }, { "path": "configs/.eslintrc", "content": "{\n // babel parser to support ES6/7 features\n \"parser\": \"hermes-eslint\",\n \"parserOptions\": {\n \"ecmaVersion\": 7,\n \"ecmaFeatures\": {\n \"experimentalObjectRestSpread\": true,\n \"jsx\": true\n },\n \"requireConfigFile\": false,\n \"sourceType\": \"module\"\n },\n \"extends\": [\n \"plugin:ft-flow/recommended\",\n \"prettier\"\n ],\n \"env\": {\n \"browser\": true,\n \"es6\": true,\n \"jest\": true,\n \"node\": true\n },\n \"ignorePatterns\": [\n \"coverage/\",\n \"dist/\",\n \"logs/\",\n \"node_modules/\"\n ],\n \"globals\": {},\n \"rules\": {\n \"camelcase\": 0,\n \"constructor-super\": 2,\n \"default-case\": [2, { \"commentPattern\": \"^no default$\" }],\n \"eqeqeq\": [2, \"allow-null\"],\n \"handle-callback-err\": [2, \"^(err|error)$\" ],\n \"new-cap\": [2, { \"newIsCap\": true, \"capIsNew\": false }],\n \"no-alert\": 1,\n \"no-array-constructor\": 2,\n \"no-caller\": 2,\n \"no-case-declarations\": 2,\n \"no-class-assign\": 2,\n \"no-cond-assign\": 2,\n \"no-const-assign\": 2,\n \"no-control-regex\": 2,\n \"no-debugger\": 2,\n \"no-delete-var\": 2,\n \"no-dupe-args\": 2,\n \"no-dupe-class-members\": 2,\n \"no-dupe-keys\": 2,\n \"no-duplicate-case\": 2,\n \"no-empty-character-class\": 2,\n \"no-empty-pattern\": 2,\n \"no-eval\": 2,\n \"no-ex-assign\": 2,\n \"no-extend-native\": 2,\n \"no-extra-bind\": 2,\n \"no-extra-boolean-cast\": 2,\n \"no-fallthrough\": 2,\n \"no-floating-decimal\": 2,\n \"no-func-assign\": 2,\n \"no-implied-eval\": 2,\n \"no-inner-declarations\": [2, \"functions\"],\n \"no-invalid-regexp\": 2,\n \"no-irregular-whitespace\": 2,\n \"no-iterator\": 2,\n \"no-label-var\": 2,\n \"no-labels\": [2, { \"allowLoop\": false, \"allowSwitch\": false }],\n \"no-lone-blocks\": 2,\n \"no-loop-func\": 2,\n \"no-multi-str\": 2,\n \"no-native-reassign\": 2,\n \"no-negated-in-lhs\": 2,\n \"no-new\": 2,\n \"no-new-func\": 2,\n \"no-new-object\": 2,\n \"no-new-require\": 2,\n \"no-new-symbol\": 2,\n \"no-new-wrappers\": 2,\n \"no-obj-calls\": 2,\n \"no-octal\": 2,\n \"no-octal-escape\": 2,\n \"no-path-concat\": 2,\n \"no-proto\": 2,\n \"no-redeclare\": 2,\n \"no-regex-spaces\": 2,\n \"no-return-assign\": [2, \"except-parens\"],\n \"no-script-url\": 2,\n \"no-self-assign\": 2,\n \"no-self-compare\": 2,\n \"no-sequences\": 2,\n \"no-shadow-restricted-names\": 2,\n \"no-sparse-arrays\": 2,\n \"no-this-before-super\": 2,\n \"no-throw-literal\": 2,\n \"no-undef\": 0,\n \"no-undef-init\": 2,\n \"no-unexpected-multiline\": 2,\n \"no-unmodified-loop-condition\": 2,\n \"no-unneeded-ternary\": [2, { \"defaultAssignment\": false }],\n \"no-unreachable\": 2,\n \"no-unsafe-finally\": 2,\n \"no-unused-vars\": [2, { \"vars\": \"all\", \"args\": \"none\" }],\n \"no-useless-call\": 2,\n \"no-useless-computed-key\": 2,\n \"no-useless-concat\": 2,\n \"no-useless-constructor\": 2,\n \"no-useless-escape\": 2,\n \"no-var\": 2,\n \"no-with\": 2,\n \"prefer-const\": 2,\n \"prefer-rest-params\": 0,\n \"quotes\": [2, \"single\", \"avoid-escape\"],\n \"radix\": 2,\n \"use-isnan\": 2,\n \"valid-typeof\": 2,\n \"yoda\": [2, \"never\"],\n\n // flow\n \"ft-flow/space-after-type-colon\": 0,\n \"ft-flow/generic-spacing\": 0\n }\n}\n" }, { "path": "configs/.flowconfig", "content": "[version]\n0.252.0\n\n[ignore]\n.*/coverage/.*\n.*/dist/.*\n.*/logs/.*\n\n[options]\ncasting_syntax=as\nsuppress_type=$FlowFixMe\n\n[strict]\nnonstrict-import\nsketchy-null\nunclear-type\nuntyped-import\nuntyped-type-import\n" }, { "path": "configs/.prettierignore", "content": "coverage\ndist\nlogs\nnode_modules\n" }, { "path": "package.json", "content": "{\n \"version\": \"0.2.1\",\n \"name\": \"styleq\",\n \"main\": \"styleq.js\",\n \"module\": \"dist/styleq.js\",\n \"sideEffects\": false,\n \"license\": \"MIT\",\n \"description\": \"A quick JavaScript runtime for Atomic CSS compilers.\",\n \"repository\": \"https://github.com/necolas/styleq\",\n \"author\": \"Nicolas Gallagher\",\n \"files\": [\n \"dist\",\n \"*.js\",\n \"*.ts\"\n ],\n \"scripts\": {\n \"benchmark:compare\": \"node benchmark/compare.js\",\n \"benchmark:perf\": \"npm run build && node benchmark/performance.js\",\n \"benchmark:size\": \"npm run build && node benchmark/size.js\",\n \"build\": \"babel src --out-dir dist --config-file ./configs/.babelrc\",\n \"flow\": \"flow --flowconfig-name ./configs/.flowconfig\",\n \"jest\": \"jest ./test\",\n \"lint\": \"npm run lint:report -- --fix\",\n \"lint:report\": \"eslint src/**/*.js --config ./configs/.eslintrc\",\n \"prepare\": \"npm run test && npm run build\",\n \"prettier\": \"prettier --write \\\"**/*.js\\\" --ignore-path ./configs/.prettierignore\",\n \"prettier:report\": \"prettier --check \\\"**/*.js\\\" --ignore-path ./configs/.prettierignore\",\n \"test\": \"npm run flow && npm run prettier:report && npm run lint:report && npm run jest\"\n },\n \"devDependencies\": {\n \"@babel/cli\": \"^7.25.9\",\n \"@babel/core\": \"^7.26.0\",\n \"@babel/eslint-parser\": \"^7.25.9\",\n \"@babel/preset-env\": \"^7.25.4\",\n \"@babel/preset-flow\": \"^7.24.7\",\n \"@babel/types\": \"^7.26.0\",\n \"babel-plugin-syntax-hermes-parser\": \"^0.25.0\",\n \"benchmark\": \"^2.1.4\",\n \"brotli-size\": \"^4.0.0\",\n \"eslint\": \"^8.57.0\",\n \"eslint-config-prettier\": \"^8.9.0\",\n \"eslint-plugin-ft-flow\": \"^3.0.7\",\n \"flow-bin\": \"^0.252.0\",\n \"hermes-eslint\": \"^0.25.0\",\n \"jest\": \"^29.7.0\",\n \"prettier\": \"^3.3.3\",\n \"prettier-plugin-hermes-parser\": \"0.25.0\",\n \"terser\": \"^5.3.0\",\n \"yargs\": \"17.7.2\"\n },\n \"jest\": {\n \"snapshotFormat\": {\n \"printBasicPrototype\": false\n },\n \"transform\": {\n \"\\\\.js$\": [\n \"babel-jest\",\n {\n \"configFile\": \"./configs/.babelrc\"\n }\n ]\n }\n },\n \"prettier\": {\n \"plugins\": [\n \"prettier-plugin-hermes-parser\"\n ],\n \"singleQuote\": true,\n \"trailingComma\": \"none\",\n \"overrides\": [\n {\n \"files\": [\n \"*.js\",\n \"*.jsx\",\n \"*.flow\"\n ],\n \"options\": {\n \"parser\": \"hermes\"\n }\n }\n ]\n }\n}\n" }, { "path": "src/styleq.js", "content": "/**\n * Copyright (c) Nicolas Gallagher\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow strict\n */\n\n'use strict';\n\nimport type {\n IStyleq,\n Styleq,\n StyleqOptions,\n CompiledStyle,\n InlineStyle,\n Styles\n} from '../styleq.js.flow';\n\ntype Cache = WeakMap<\n CompiledStyle,\n [\n // className\n string,\n // style\n $ReadOnlyArray,\n // debug string\n string,\n Cache\n ]\n>;\n\nconst cache: Cache = new WeakMap();\nconst compiledKey: '$$css' = '$$css';\n\nfunction createStyleq(options?: StyleqOptions): Styleq {\n let disableCache;\n let disableMix;\n let transform;\n\n if (options != null) {\n disableCache = options.disableCache === true;\n disableMix = options.disableMix === true;\n transform = options.transform;\n }\n\n return function styleq() {\n // Keep track of property commits to the className\n const definedProperties: Array = [];\n // The className and inline style to build up\n let className = '';\n let inlineStyle: null | InlineStyle = null;\n // The debug string to build up\n let debugString = '';\n // The current position in the cache graph\n let nextCache = disableCache ? null : cache;\n\n // This way of creating an array from arguments is fastest\n const styles: Array = new Array(arguments.length);\n for (let i = 0; i < arguments.length; i++) {\n styles[i] = arguments[i];\n }\n\n // Iterate over styles from last to first\n while (styles.length > 0) {\n const possibleStyle = styles.pop();\n // Skip empty items\n if (possibleStyle == null || possibleStyle === false) {\n continue;\n }\n // Push nested styles back onto the stack to be processed\n if (Array.isArray(possibleStyle)) {\n for (let i = 0; i < possibleStyle.length; i++) {\n styles.push(possibleStyle[i]);\n }\n continue;\n }\n\n // Process an individual style object\n const style =\n transform != null ? transform(possibleStyle) : possibleStyle;\n\n if (style.$$css != null) {\n // Build up the class names defined by this object\n let classNameChunk = '';\n\n // Check the cache to see if we've already done this work\n if (nextCache != null && nextCache.has(style)) {\n // Cache: read\n const cacheEntry = nextCache.get(style);\n if (cacheEntry != null) {\n classNameChunk = cacheEntry[0];\n debugString = cacheEntry[2];\n // $FlowIgnore\n definedProperties.push.apply(definedProperties, cacheEntry[1]);\n nextCache = cacheEntry[3];\n }\n }\n // Update the chunks with data from this object\n else {\n // The properties defined by this object\n const definedPropertiesChunk = [];\n for (const prop in style) {\n const value = style[prop];\n if (prop === compiledKey) {\n // Updating the debug string only happens once for each style in\n // the stack.\n const compiledKeyValue = style[prop];\n if (compiledKeyValue !== true) {\n debugString = debugString\n ? compiledKeyValue + '; ' + debugString\n : compiledKeyValue;\n }\n continue;\n }\n // Each property value is used as an HTML class name\n // { 'debug.string': 'debug.string', opacity: 's-jskmnoqp' }\n if (typeof value === 'string' || value === null) {\n // Only add to chunks if this property hasn't already been seen\n if (!definedProperties.includes(prop)) {\n definedProperties.push(prop);\n if (nextCache != null) {\n definedPropertiesChunk.push(prop);\n }\n if (typeof value === 'string') {\n classNameChunk += classNameChunk ? ' ' + value : value;\n }\n }\n }\n // If we encounter a value that isn't a string or `null`\n else {\n console.error(\n `styleq: ${prop} typeof ${String(\n value\n )} is not \"string\" or \"null\".`\n );\n }\n }\n // Cache: write\n if (nextCache != null) {\n // Create the next WeakMap for this sequence of styles\n const weakMap: Cache = new WeakMap();\n nextCache.set(style, [\n classNameChunk,\n definedPropertiesChunk,\n debugString,\n weakMap\n ]);\n nextCache = weakMap;\n }\n }\n\n // Order of classes in chunks matches property-iteration order of style\n // object. Order of chunks matches passed order of styles from first to\n // last (which we iterate over in reverse).\n if (classNameChunk) {\n className = className\n ? classNameChunk + ' ' + className\n : classNameChunk;\n }\n }\n\n // ----- DYNAMIC: Process inline style object -----\n else {\n if (disableMix) {\n if (inlineStyle == null) {\n inlineStyle = {};\n }\n inlineStyle = Object.assign(\n {} as { ...InlineStyle },\n style,\n inlineStyle\n );\n } else {\n let subStyle: null | { ...InlineStyle } = null;\n for (const prop in style) {\n const value = style[prop];\n if (value !== undefined) {\n if (!definedProperties.includes(prop)) {\n if (value != null) {\n if (inlineStyle == null) {\n inlineStyle = {};\n }\n if (subStyle == null) {\n subStyle = {};\n }\n (subStyle as { ...InlineStyle })[prop] = value;\n }\n definedProperties.push(prop);\n // Cache is unnecessary overhead if results can't be reused.\n nextCache = null;\n }\n }\n }\n if (subStyle != null) {\n inlineStyle = Object.assign(subStyle, inlineStyle);\n }\n }\n }\n }\n\n const styleProps = [className, inlineStyle, debugString];\n return styleProps;\n };\n}\n\nconst styleq: IStyleq = createStyleq() as $FlowFixMe;\nstyleq.factory = createStyleq;\n\nexport { styleq };\n" }, { "path": "styleq.d.ts", "content": "/**\n * Copyright (c) Nicolas Gallagher\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n" }, { "path": "styleq.js", "content": "/**\n * Copyright (c) Nicolas Gallagher\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nmodule.exports = require('./dist/styleq');\n" }, { "path": "styleq.js.flow", "content": "/**\n * Copyright (c) Nicolas Gallagher\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow strict\n */\n\nexport type CompiledStyle = $ReadOnly<{\n $$css: true | string,\n [key: string]: string,\n}>;\n\nexport type InlineStyle = $ReadOnly<{\n $$css?: empty,\n [key: string]: number | string,\n}>;\n\nexport type EitherStyle = CompiledStyle | InlineStyle;\n\nexport type StylesArray<+T> = T | $ReadOnlyArray>;\nexport type Styles = StylesArray;\nexport type Style<+T = EitherStyle> = StylesArray;\n\nexport type StyleqOptions = {\n disableCache?: boolean,\n disableMix?: boolean,\n transform?: (EitherStyle) => EitherStyle,\n};\n\nexport type StyleqResult = [string, InlineStyle | null, string];\nexport type Styleq = (styles: Styles) => StyleqResult;\n\nexport type IStyleq = {\n (...styles: $ReadOnlyArray): StyleqResult,\n factory: (options?: StyleqOptions) => Styleq,\n};\n" }, { "path": "test/styleq-transform.test.js", "content": "/**\n * Copyright (c) Nicolas Gallagher\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nimport { styleq } from '../src/styleq';\n\n/**\n * This compiler example polyfills logical properties and values, generating a\n * class name for both writing directions. The style objects are annotated by\n * the compiler as needing this runtime transform. The results are memoized.\n *\n * { '$$css$localize': true, float: [ 'float-left', 'float-right' ] }\n * => { float: 'float-left' }\n */\n\nconst cache = new WeakMap();\n\nconst markerProp = '$$css$localize';\n\nfunction compileStyle(style, isRTL) {\n // Create a new compiled style for styleq\n const compiledStyle = {};\n for (const prop in style) {\n if (prop !== markerProp) {\n const value = style[prop];\n if (Array.isArray(value)) {\n compiledStyle[prop] = isRTL ? value[1] : value[0];\n } else {\n compiledStyle[prop] = value;\n }\n }\n }\n return compiledStyle;\n}\n\nfunction localizeStyle(style, isRTL) {\n if (style[markerProp] != null) {\n const compiledStyleIndex = isRTL ? 1 : 0;\n // Check the cache in case we've already seen this object\n if (cache.has(style)) {\n const cachedStyles = cache.get(style);\n let compiledStyle = cachedStyles[compiledStyleIndex];\n if (compiledStyle == null) {\n // Update the missing cache entry\n compiledStyle = compileStyle(style, isRTL);\n cachedStyles[compiledStyleIndex] = compiledStyle;\n cache.set(style, cachedStyles);\n }\n return compiledStyle;\n }\n\n // Create a new compiled style for styleq\n const compiledStyle = compileStyle(style, isRTL);\n const cachedStyles = new Array(2);\n cachedStyles[compiledStyleIndex] = compiledStyle;\n cache.set(style, cachedStyles);\n return compiledStyle;\n }\n return style;\n}\n\ndescribe('transform: styles', () => {\n let isRTL = false;\n const styleqWithLocalization = styleq.factory({\n transform(style) {\n return localizeStyle(style, isRTL);\n }\n });\n\n const fixture = {\n $$css: true,\n $$css$localize: true,\n marginStart: ['margin-left-0px', 'margin-right-0px'],\n marginEnd: ['margin-right-10px', 'margin-left-10px']\n };\n\n test('supports style transforms', () => {\n isRTL = false;\n const [classNameLtr, styleLtr] = styleqWithLocalization(fixture, {\n opacity: 1\n });\n expect(classNameLtr).toEqual('margin-left-0px margin-right-10px');\n expect(styleLtr).toEqual({ opacity: 1 });\n\n isRTL = true;\n const [classNameRtl, styleRtl] = styleqWithLocalization(fixture, {\n opacity: 1\n });\n expect(classNameRtl).toEqual('margin-right-0px margin-left-10px');\n expect(styleRtl).toEqual({ opacity: 1 });\n });\n\n test('memoizes results', () => {\n const firstStyle = localizeStyle(fixture, false);\n const secondStyle = localizeStyle(fixture, false);\n expect(firstStyle).toBe(secondStyle);\n });\n});\n" }, { "path": "test/styleq.test.js", "content": "/**\n * Copyright (c) Nicolas Gallagher\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nimport { styleq } from '../src/styleq';\n\nconst styleqNoCache = styleq.factory({ disableCache: true });\nconst styleqNoMix = styleq.factory({ disableMix: true });\n\nfunction stringifyInlineStyle(inlineStyle) {\n let str = '';\n Object.keys(inlineStyle).forEach((prop) => {\n const value = inlineStyle[prop];\n str += `${prop}:${value};`;\n });\n return str;\n}\n\ndescribe('styleq()', () => {\n describe('invalid values', () => {\n beforeAll(() => {\n jest.spyOn(global.console, 'error').mockImplementation((msg) => {\n throw new Error(msg);\n });\n });\n afterAll(() => {\n global.console.error.mockRestore();\n });\n\n test('warns if extracted property values are not strings or null', () => {\n expect(() => styleq({ $$css: true, a: 1 })).toThrow();\n expect(() => styleq({ $$css: true, a: undefined })).toThrow();\n expect(() => styleq({ $$css: true, a: false })).toThrow();\n expect(() => styleq({ $$css: true, a: true })).toThrow();\n expect(() => styleq({ $$css: true, a: {} })).toThrow();\n expect(() => styleq({ $$css: true, a: [] })).toThrow();\n expect(() => styleq({ $$css: true, a: new Date() })).toThrow();\n });\n });\n\n test('combines different class names', () => {\n const style = { $$css: true, a: 'aaa', b: 'bbb' };\n expect(styleqNoCache(style)[0]).toBe('aaa bbb');\n expect(styleq(style)[0]).toBe('aaa bbb');\n });\n\n test('combines different class names in order', () => {\n const a = { $$css: true, a: 'a', ':focus$aa': 'focus$aa' };\n const b = { $$css: true, b: 'b' };\n const c = { $$css: true, c: 'c', ':focus$cc': 'focus$cc' };\n expect(styleqNoCache([a, b, c])[0]).toBe('a focus$aa b c focus$cc');\n expect(styleq([a, b, c])[0]).toBe('a focus$aa b c focus$cc');\n });\n\n test('dedupes class names for the same key', () => {\n const a = { $$css: true, backgroundColor: 'backgroundColor-a' };\n const b = { $$css: true, backgroundColor: 'backgoundColor-b' };\n const c = { $$css: true, backgroundColor: 'backgoundColor-c' };\n expect(styleqNoCache([a, b])[0]).toEqual('backgoundColor-b');\n expect(styleq([a, b])[0]).toEqual('backgoundColor-b');\n // Tests memoized result of [a,b] is correct\n expect(styleq([c, a, b])[0]).toEqual('backgoundColor-b');\n });\n\n test('dedupes class names with \"null\" value', () => {\n const a = { $$css: true, backgroundColor: 'backgroundColor-a' };\n const b = { $$css: true, backgroundColor: null };\n expect(styleqNoCache([a, b])[0]).toEqual('');\n expect(styleq([a, b])[0]).toEqual('');\n });\n\n test('dedupes class names in complex merges', () => {\n const styles = {\n a: {\n $$css: true,\n backgroundColor: 'backgroundColor-a',\n borderColor: 'borderColor-a',\n borderStyle: 'borderStyle-a',\n borderWidth: 'borderWidth-a',\n boxSizing: 'boxSizing-a',\n display: 'display-a',\n listStyle: 'listStyle-a',\n marginTop: 'marginTop-a',\n marginEnd: 'marginEnd-a',\n marginBottom: 'marginBottom-a',\n marginStart: 'marginStart-a',\n paddingTop: 'paddingTop-a',\n paddingEnd: 'paddingEnd-a',\n paddingBottom: 'paddingBottom-a',\n paddingStart: 'paddingStart-a',\n textAlign: 'textAlign-a',\n textDecoration: 'textDecoration-a',\n whiteSpace: 'whiteSpace-a',\n wordWrap: 'wordWrap-a',\n zIndex: 'zIndex-a'\n },\n b: {\n $$css: true,\n cursor: 'cursor-b',\n touchAction: 'touchAction-b'\n },\n c: {\n $$css: true,\n outline: 'outline-c'\n },\n d: {\n $$css: true,\n cursor: 'cursor-d',\n touchAction: 'touchAction-d'\n },\n e: {\n $$css: true,\n textDecoration: 'textDecoration-e',\n ':focus$textDecoration': 'focus$textDecoration-e'\n },\n f: {\n $$css: true,\n backgroundColor: 'backgroundColor-f',\n color: 'color-f',\n cursor: 'cursor-f',\n display: 'display-f',\n marginEnd: 'marginEnd-f',\n marginStart: 'marginStart-f',\n textAlign: 'textAlign-f',\n textDecoration: 'textDecoration-f',\n ':focus$color': 'focus$color-f',\n ':focus$textDecoration': 'focus$textDecoration-f',\n ':active$transform': 'active$transform-f',\n ':active$transition': 'active$transition-f'\n },\n g: {\n $$css: true,\n display: 'display-g',\n width: 'width-g'\n },\n h: {\n $$css: true,\n ':active$transform': 'active$transform-h'\n }\n };\n\n // This tests that repeat results are the same, and that memoized chunks\n // are correctly recorded. The second test reuses chunks from the first.\n\n // ONE\n const one = [\n styles.a,\n false,\n [\n styles.b,\n false,\n styles.c,\n [styles.d, false, styles.e, false, [styles.f, styles.g], [styles.h]]\n ]\n ];\n const oneValue = styleq(one)[0];\n const oneRepeat = styleq(one)[0];\n // Check the memoized result is correct\n expect(oneValue).toEqual(oneRepeat);\n expect(oneValue).toMatchInlineSnapshot(\n `\"borderColor-a borderStyle-a borderWidth-a boxSizing-a listStyle-a marginTop-a marginBottom-a paddingTop-a paddingEnd-a paddingBottom-a paddingStart-a whiteSpace-a wordWrap-a zIndex-a outline-c touchAction-d backgroundColor-f color-f cursor-f marginEnd-f marginStart-f textAlign-f textDecoration-f focus$color-f focus$textDecoration-f active$transition-f display-g width-g active$transform-h\"`\n );\n\n // TWO\n const two = [\n styles.d,\n false,\n [\n styles.c,\n false,\n styles.b,\n [styles.a, false, styles.e, false, [styles.f, styles.g], [styles.h]]\n ]\n ];\n const twoValue = styleq(two)[0];\n const twoRepeat = styleq(two)[0];\n // Check the memoized result is correct\n expect(twoValue).toEqual(twoRepeat);\n expect(twoValue).toMatchInlineSnapshot(\n `\"outline-c touchAction-b borderColor-a borderStyle-a borderWidth-a boxSizing-a listStyle-a marginTop-a marginBottom-a paddingTop-a paddingEnd-a paddingBottom-a paddingStart-a whiteSpace-a wordWrap-a zIndex-a backgroundColor-f color-f cursor-f marginEnd-f marginStart-f textAlign-f textDecoration-f focus$color-f focus$textDecoration-f active$transition-f display-g width-g active$transform-h\"`\n );\n });\n\n test('dedupes inline styles', () => {\n const [, inlineStyle] = styleq([{ a: 'a' }, { a: 'aa' }]);\n expect(inlineStyle).toEqual({ a: 'aa' });\n const [, inlineStyle2] = styleq([{ a: 'a' }, { a: null }]);\n expect(inlineStyle2).toEqual(null);\n });\n\n test('preserves order of stringified inline style', () => {\n const [, inlineStyle] = styleq([{ font: 'inherit', fontSize: 12 }]);\n const str = stringifyInlineStyle(inlineStyle);\n expect(str).toMatchInlineSnapshot(`\"font:inherit;fontSize:12;\"`);\n\n const [, inlineStyle2] = styleq([{ font: 'inherit' }, { fontSize: 12 }]);\n const str2 = stringifyInlineStyle(inlineStyle2);\n expect(str2).toMatchInlineSnapshot(`\"font:inherit;fontSize:12;\"`);\n });\n\n test('dedupes class names and inline styles', () => {\n const a = { $$css: true, a: 'a', ':focus$a': 'focus$a' };\n const b = { $$css: true, b: 'b' };\n const binline = { b: 'b', bb: null };\n const binlinealt = { b: null };\n\n const [className1, inlineStyle1] = styleq([a, b, binline]);\n expect(className1).toBe('a focus$a');\n expect(inlineStyle1).toEqual({ b: 'b' });\n\n const [className2, inlineStyle2] = styleq([a, binline, b]);\n expect(className2).toBe('a focus$a b');\n expect(inlineStyle2).toEqual(null);\n\n const [className3, inlineStyle3] = styleq([a, b, binlinealt]);\n expect(className3).toBe('a focus$a');\n expect(inlineStyle3).toEqual(null);\n });\n\n test('disableMix dedupes inline styles', () => {\n const [, inlineStyle] = styleqNoMix([{ a: 'a' }, { a: 'aa' }]);\n expect(inlineStyle).toEqual({ a: 'aa' });\n const [, inlineStyle2] = styleqNoMix([{ a: 'a' }, { a: null }]);\n expect(inlineStyle2).toEqual({ a: null });\n });\n\n test('disableMix preserves order of stringified inline style', () => {\n const [, inlineStyle] = styleqNoMix([{ font: 'inherit', fontSize: 12 }]);\n const str = stringifyInlineStyle(inlineStyle);\n expect(str).toMatchInlineSnapshot(`\"font:inherit;fontSize:12;\"`);\n\n const [, inlineStyle2] = styleqNoMix([\n { font: 'inherit' },\n { fontSize: 12 }\n ]);\n const str2 = stringifyInlineStyle(inlineStyle2);\n expect(str2).toMatchInlineSnapshot(`\"font:inherit;fontSize:12;\"`);\n });\n\n test('disableMix does not dedupe class names and inline styles', () => {\n const a = { $$css: true, a: 'a', ':focus$a': 'focus$a' };\n const b = { $$css: true, b: 'b' };\n const binline = { b: 'b', bb: null };\n\n // Both should produce: [ 'a hover$a b', { b: 'b' } ]\n expect(styleqNoMix([a, b, binline])).toEqual(styleqNoMix([a, binline, b]));\n });\n\n test('supports generating debug strings', () => {\n const a = { $$css: 'path/to/a:1', a: 'aaa' };\n const b = { $$css: 'path/to/b:2', b: 'bbb' };\n const c = { $$css: 'path/to/c:3', b: 'ccc' };\n const [, , debugString] = styleq([a]);\n expect(debugString).toBe('path/to/a:1');\n const [, , dataStyleSrc] = styleq([a, [b, c]]);\n expect(dataStyleSrc).toBe('path/to/a:1; path/to/b:2; path/to/c:3');\n const [, , dataStyleSrcNoCache] = styleqNoCache([a, [b, c]]);\n expect(dataStyleSrcNoCache).toBe('path/to/a:1; path/to/b:2; path/to/c:3');\n });\n});\n" } ]