first commit

This commit is contained in:
Stefan Hacker
2026-04-03 09:38:48 +02:00
commit 37ad745546
47450 changed files with 3120798 additions and 0 deletions
File diff suppressed because it is too large Load Diff
+1338
View File
File diff suppressed because it is too large Load Diff
+15
View File
@@ -0,0 +1,15 @@
Fluent UI React - merge-styles
Copyright (c) Microsoft Corporation
All rights reserved.
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license
+579
View File
@@ -0,0 +1,579 @@
# @fluentui/merge-styles
The `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).
The library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.
Simple usage:
```ts
import { mergeStyles, mergeStyleSets } from '@fluentui/merge-styles';
// Produces 'css-0' class name which can be used anywhere
mergeStyles({ background: 'red' });
// Produces a class map for a bunch of rules all at once
mergeStyleSets({
root: { background: 'red' },
child: { background: 'green' },
});
// Returns { root: 'root-0', child: 'child-1' }
```
Both utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.
The basic idea is to provide tools which can take in one or more css styling objects representing the styles for a given element, and return a single class name. If the same set of styling is passed in, the same name returns and nothing is re-registered.
## Motivation
Defining rules at runtime has a number of benefits over traditional build time staticly produced css:
- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.
- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)
- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)
- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.
- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)
- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)
- Reduce the build time overhead of running through CSS preprocessors.
- TypeScript type safety; spell "background" wrong and get build breaks.
## What tradeoffs are there? Are there downsides to using JavaScript to process styling?
In static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.
In runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.
# API
The api surfaces consists of 3 methods and a handful of interfaces:
`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.
`mergeStyleSets(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.
`concatStyleSets(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.
`concatStyleSetsWithProps(props: {}, ...args[]: IStyleSet[]): IStyleSet` - Similar to `concatStyleSet` except that style sets which contain functional evaluation of styles are evaluated prior to concatenating.
Example:
```tsx
const result = concatStyleSetsWithProps<IFooProps, IFooStyles>(
{ foo: 'bar' },
(props: IFooProps) => ({ root: { background: props.foo } }),
(props: IFooProps) => ({ root: { color: props.foo } }),
);
```
## Vocabulary
A **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:
```tsx
let style = {
backgroundColor: 'red',
left: 42,
};
```
Additionally, **style objects** can contain selectors:
```tsx
let style = {
backgroundColor: 'red',
':hover': {
backgroundColor: 'blue';
},
'.parent &': { /* parent selector */ },
'& .child': { /* child selector */ }
};
```
A **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would define this in a **style set**.
```tsx
let styleSet = {
root: { background: 'red' },
button: { margin: 42 },
};
```
## Basic usage
When building a component, you will need a **style set** map of class names to inject into your elements' class attributes.
The recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.
```tsx
import { IStyle, mergeStyleSets } from '@fluentui/merge-styles';
export interface IComponentClassNames {
root: string;
button: string;
buttonIcon: string;
}
export const getClassNames = (): IComponentClassNames => {
return mergeStyleSets({
root: {
background: 'red',
},
button: {
backgroundColor: 'green',
},
buttonIcon: {
margin: 10,
},
});
};
```
The class map can then be used in a component:
```tsx
import { getClassNames } from './MyComponent.classNames';
export const MyComponent = () => {
let { root, button, buttonIcon } = getClassNames();
return (
<div className={root}>
<button className={button}>
<i className={buttonIcon} />
</button>
</div>
);
};
```
## Selectors
### Basic pseudo-selectors (:hover, :active, etc)
Custom selectors can be defined within `IStyle` definitions:
```tsx
{
background: 'red',
':hover': {
background: 'green'
}
}
```
By default, the rule will be appended to the current selector scope. That is, in the above scenario, there will be 2 rules inserted when using `mergeStyles`:
```css
.css-0 {
background: red;
}
.css-0:hover {
background: green;
}
```
### Parent/child selectors
In some cases, you may need to use parent or child selectors. To do so, you can define a selector from scratch and use the `&` character to represent the generated class name. When using the `&`, the current scope is ignored. Example:
```tsx
{
// selector relative to parent
'.ms-Fabric--isFocusVisible &': {
background: 'red'
}
// selector for child
'& .child' {
background: 'green'
}
}
```
This would register the rules:
```css
.ms-Fabric--isFocusVisible .css-0 {
background: red;
}
.css-0 .child {
background: green;
}
```
### Global selectors
While we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.
To register a selector globally, wrap it in a `:global()` wrapper:
```tsx
{
':global(button)': {
overflow: 'visible'
}
}
```
### Media and feature queries
Media queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:
```tsx
mergeStyles({
background: 'red',
'@media(max-width: 600px)': {
background: 'green',
},
'@supports(display: grid)': {
display: 'grid',
},
});
```
Produces:
```css
.css-0 {
background: red;
}
@media (max-width: 600px) {
.css-0 {
background: green;
}
}
@supports (display: grid) {
.css-0 {
display: grid;
}
}
```
### Referencing child elements within the mergeStyleSets scope
One important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:
```tsx
mergeStyleSets({
root: { background: 'red' }
thumb: { background: 'green' }
});
```
Produces:
```css
.root-0 {
background: red;
}
.thumb-1 {
background: green;
}
```
In some cases, you may need to alter a child area by interacting with the parent. For example, when the parent is hovered, change the child background. We recommend using global, non-changing static classnames
to target the parent elements:
```tsx
const classNames = {
root: 'Foo-root',
child: 'Foo-child',
};
mergeStyleSets({
root: [classNames.root, { background: 'lightgreen' }],
child: [
classNames.child,
{
[`.${classNames.root}:hover &`]: {
background: 'green',
},
},
],
});
```
The important part here is that the selector does not have any mutable information. In the example above,
if `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which
would be a performance hit.
## Custom class names
By default when using `mergeStyles`, class names that are generated will use the prefix `css-` followed by a number, creating unique rules where needed. For example, the first class name produced will be 'css-0'.
When using `mergeStyleSets`, class names automatically use the area name as the prefix.
Merging rules like:
```ts
mergeStyleSets({ a: { ... }, b: { ... } })
```
Will produce the class name map:
```ts
{ a: 'a-0', b: 'b-1' }
```
If you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:
```tsx
{
displayName: 'MyComponent',
background: 'red'
}
```
This generates:
```css
.MyComponent-0 {
background: red;
}
```
## Managing conditionals and states
Style objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.
In the following example, the root class generated will be different depending on the `isToggled` state:
```tsx
export const getClassNames = (isToggled: boolean): IComponentClassNames => {
return mergeStyleSets({
root: [
{
background: 'red',
},
isToggled && {
background: 'green',
},
],
});
};
```
## RTL support
By default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir="rtl" flag is present on the `HTML` tag of the page.
There are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.
In rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:
```tsx
mergeStyles({
left: '42px @noflip',
});
```
## Optimizing for performance
Resolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:
1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.
2. Use the `memoizeFunction` function from the `@fluentui/utilities` package to cache the results, given a unique combination of inputs. Example:
```tsx
import { memoizeFunction } from '@fluentui/utilities';
export const getClassNames = memoizeFunction((isToggled: boolean) => {
return mergeStyleSets({
// ...
});
});
```
## Registering fonts
Registering font faces example:
```tsx
import { fontFace } from '@fluentui/merge-styles';
fontFace({
fontFamily: `"Segoe UI"`,
src: `url("//cdn.com/fontface.woff2) format(woff2)`,
fontWeight: 'normal',
});
```
Note that in cases like `fontFamily` you may need to embed quotes in the string as shown above.
## Registering keyframes
Registering animation keyframes example:
```tsx
import { keyframes, mergeStyleSets } from '@fluentui/merge-styles';
let fadeIn = keyframes({
from: {
opacity: 0,
},
to: {
opacity: 1,
},
});
export const getClassNames = () => {
return mergeStyleSets({
root: {
animationName: fadeIn,
},
});
};
```
## Controlling where styles are injected
By default `merge-styles` will initially inject a `style` element into the document head as the first node and then append and new `style` elements as next sibling to the previous one added.
In some cases you may want to control where styles are injected to ensure some stylesheets are more specific than others. To do this, you can add a placeholder `style` element in the head with `data-merge-styles` attribute:
```html
<head>
<style data-merge-styles></style>
</head>
```
Merge styles will ensure that any generated styles are added after the placeholder.
## Server-side rendering
You can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.
Example:
```tsx
import { renderStatic } from '@fluentui/merge-styles/lib/server';
let { html, css } = renderStatic(() => {
return ReactDOM.renderToString(...);
});
```
Caveats for server-side rendering:
- Rules registered in the file scope of code won't be re-evaluated and therefore won't be included in the result. Try to avoid using classes which are not evaluated at runtime.
For example:
```tsx
const rootClass = mergeStyles({ background: 'red' });
const App = () => <div className={rootClass} />;
// App will render, but "rootClass" is a string which won't get re-evaluated in this call.
renderStatic(() => ReactDOM.renderToString(<App/>);
```
- Using `memoizeFunction` around rule calculation can help with excessive rule recalc performance overhead.
- Rehydration on the client may result in mismatched rules. You can apply a namespace on the server side to ensure there aren't name collisions.
## Working with content security policy (CSP)
Some content security policies prevent style injection without a nonce. To set the nonce used by `merge-styles`:
```ts
Stylesheet.getInstance().setConfig({
cspSettings: { nonce: 'your nonce here' },
});
```
If you're working inside a Fluent UI React app ([formerly Office UI Fabric React](https://developer.microsoft.com/en-us/office/blogs/ui-fabric-is-evolving-into-fluent-ui/)), this setting can also be applied using the global `window.FabricConfig.mergeStyles.cspSettings`. Note that this must be set before any Fluent UI React code is loaded, or it may not be applied properly.
```ts
window.FabricConfig = {
mergeStyles: {
cspSettings: { nonce: 'your nonce here' },
},
};
```
## Shadow DOM
`merge-styles` has support for [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM). This feature is opt-in and incrementally adoptable. To enable the feature you need to include two [React Providers](https://react.dev/reference/react/createContext#provider):
1. `MergeStylesRootProvider`: acts as the "global" context for your application. You should have one of these per page.
2. `MergeStylesShadowRootProvider`: a context for each shadow root in your application. You should have one of these per shadow root.
`merge-styles` does not provide an option for creating shadow roots in React as how you get a shadow root doesn't matter, just that you have a reference to one. [`react-shadow`](https://www.npmjs.com/package/react-shadow) is one library that can create shadow roots in React and will be used in examples.
### Shadow DOM example
```tsx
import { PrimaryButton } from '@fluentui/react';
import { MergeStylesRootProvider, MergeStylesShadowRootProvider } from '@fluentui/utilities';
import root from 'react-shadow';
const ShadowRoot = ({ children }) => {
// This is a ref but we're using state to manage it so we can force
// a re-render.
const [shadowRootEl, setShadowRootEl] = React.useState<HTMLElement | null>(null);
return (
<MergeStylesRootProvider>
<root.div className="shadow-root" delegatesFocus ref={setShadowRootEl}>
<MergeStylesShadowRootProvider shadowRoot={shadowRootEl?.shadowRoot}>{children}</MergeStylesShadowRootProvider>
</root.div>
</MergeStylesRootProvider>
);
};
<ShadowRoot>
<PrimaryButton>I'm in the shadow DOM!</PrimaryButton>
</ShadowRoot>
<PrimaryButton>I'm in the light DOM!</PrimaryButton>
```
### Scoping styles for more efficient CSS
You do not _need_ to update your `merge-styles` styles to support shadow DOM but you can make styles more efficient with some updates.
Shadow DOM support is achieved in `merge-styles` by using [constructable stylesheets](https://web.dev/articles/constructable-stylesheets) and is scoped by "stylesheet keys". `merge-styles` creates one stylesheet per key and in Fluent this means each component has its own stylesheet. Each `MergeStylesShadowRootProvider` will only adopt styles for components it contains plus the global sheet (we cannot be certain whether we need this sheet or not so we always adopt it). This means a `MergeStylesShadowRootProvider` that contains a button will only adopt button styles (plus the global styles) but not checkbox styles, making styling within the shadow root more efficient.
If you use `customizable` or `styled` the existing "scope" value provided to these functions is used a unique key. If no key is provided `merge-styles` falls back to a "global" key. This global key is a catch-all and allows us to support code that was written before shadow DOM support was added or code that is called outside of React context.
All `@fluentui/react` styles are scoped via `customizable` and `styled` (and some updates to specific component styles where needed). If your components use these functions and you set the "scope" property your components will automatically be scoped.
If you're using `mergeStyles()` (and other `merge-styles` APIs) directly, your styles will be placed in the global scope and still be available in shadow roots, just not as optimally as possible.
#### Style scoping example
```tsx
import { useMergeStylesHooks } from '@fluentui/react';
import { mergeStyles } from '@fluentui/merge-styles';
import type { ShadowConfig } from '@fluentui/merge-styles';
// This must be globally unique for the application
const MY_COMPONENT_STYLESHEET_KEY: string = 'my-unique-key';
const MyComponent = props => {
const { useWindow, useShadowConfig, useAdoptedStylesheet } = useMergeStylesHooks();
// Make sure multi-window scenarios work (e.g., pop outs)
const win: Window = useWindow();
const shadowConfig: ShadowConfig = useShadowConfig(MY_COMPONENT_STYLESHEET_KEY, win);
const styles = React.useMemo(() => {
// shadowConfig must be the first parameter when it is used
return mergeStyles(shadowConfig, myStyles);
}, [shadowConfig, myStyles]);
useAdoptedStylesheet(MY_COMPONENT_STYLESHEET_KEY);
};
```
+3
View File
@@ -0,0 +1,3 @@
{
"extends": "@fluentui/scripts-api-extractor/api-extractor.common.json"
}
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+649
View File
@@ -0,0 +1,649 @@
## API Report File for "@fluentui/merge-styles"
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
```ts
// @public (undocumented)
export type AddSheetCallback = ({ key, sheet }: {
key: string;
sheet: ExtendedCSSStyleSheet;
}) => void;
// @public (undocumented)
export const cloneCSSStyleSheet: (srcSheet: CSSStyleSheet, targetSheet: CSSStyleSheet) => CSSStyleSheet;
// Warning: (ae-forgotten-export) The symbol "Missing_3" needs to be exported by the entry point index.d.ts
//
// @public
export function concatStyleSets<TStyleSet>(styleSet: TStyleSet | Missing_3): IConcatenatedStyleSet<ObjectOnly<TStyleSet>>;
// Warning: (ae-forgotten-export) The symbol "MissingOrShadowConfig_2" needs to be exported by the entry point index.d.ts
//
// @public
export function concatStyleSets<TStyleSet1, TStyleSet2>(styleSet1: TStyleSet1 | MissingOrShadowConfig_2, styleSet2: TStyleSet2 | Missing_3): IConcatenatedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2>>;
// @public
export function concatStyleSets<TStyleSet1, TStyleSet2, TStyleSet3>(styleSet1: TStyleSet1 | MissingOrShadowConfig_2, styleSet2: TStyleSet2 | Missing_3, styleSet3: TStyleSet3 | Missing_3): IConcatenatedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2> & ObjectOnly<TStyleSet3>>;
// @public
export function concatStyleSets<TStyleSet1, TStyleSet2, TStyleSet3, TStyleSet4>(styleSet1: TStyleSet1 | MissingOrShadowConfig_2, styleSet2: TStyleSet2 | Missing_3, styleSet3: TStyleSet3 | Missing_3, styleSet4: TStyleSet4 | Missing_3): IConcatenatedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2> & ObjectOnly<TStyleSet3> & ObjectOnly<TStyleSet4>>;
// @public
export function concatStyleSets<TStyleSet1, TStyleSet2, TStyleSet3, TStyleSet4, TStyleSet5>(styleSet1: TStyleSet1 | MissingOrShadowConfig_2, styleSet2: TStyleSet2 | Missing_3, styleSet3: TStyleSet3 | Missing_3, styleSet4: TStyleSet4 | Missing_3, styleSet5: TStyleSet5 | Missing_3): IConcatenatedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2> & ObjectOnly<TStyleSet3> & ObjectOnly<TStyleSet4> & ObjectOnly<TStyleSet5>>;
// @public
export function concatStyleSets<TStyleSet1, TStyleSet2, TStyleSet3, TStyleSet4, TStyleSet5, TStyleSet6>(styleSet1: TStyleSet1 | MissingOrShadowConfig_2, styleSet2: TStyleSet2 | Missing_3, styleSet3: TStyleSet3 | Missing_3, styleSet4: TStyleSet4 | Missing_3, styleSet5: TStyleSet5 | Missing_3, styleSet6: TStyleSet6 | Missing_3): IConcatenatedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2> & ObjectOnly<TStyleSet3> & ObjectOnly<TStyleSet4> & ObjectOnly<TStyleSet5> & ObjectOnly<TStyleSet6>>;
// @public
export function concatStyleSets(...styleSets: (IStyleSet | MissingOrShadowConfig_2)[]): IConcatenatedStyleSet<any>;
// Warning: (ae-forgotten-export) The symbol "DeepPartialV2" needs to be exported by the entry point index.d.ts
//
// @public
export function concatStyleSetsWithProps<TStyleProps, TStyleSet extends IStyleSetBase>(styleProps: TStyleProps, ...allStyles: (IStyleFunctionOrObject<TStyleProps, TStyleSet> | undefined)[]): DeepPartialV2<TStyleSet>;
// @public @deprecated
export type DeepPartial<T> = {
[P in keyof T]?: T[P] extends Array<infer U> ? Array<DeepPartial<U>> : T[P] extends object ? DeepPartial<T[P]> : T[P];
};
// @public (undocumented)
export const DEFAULT_SHADOW_CONFIG: ShadowConfig;
// @public (undocumented)
export type ExtendedCSSStyleSheet = CSSStyleSheet & {
bucketName: string;
metadata: Record<string, unknown>;
};
// @public
export function fontFace(font: IFontFace): void;
// @public (undocumented)
export const GLOBAL_STYLESHEET_KEY = "__global__";
// Warning: (ae-forgotten-export) The symbol "IShadowConfig" needs to be exported by the entry point index.d.ts
//
// @public
export type IConcatenatedStyleSet<TStyleSet extends IStyleSetBase> = {
[P in keyof Omit_2<TStyleSet, 'subComponentStyles'>]: IStyle;
} & {
subComponentStyles?: {
[P in keyof TStyleSet['subComponentStyles']]: IStyleFunction<any, any>;
};
} & IShadowConfig;
// @public
export interface ICSPSettings {
nonce?: string;
}
// @public (undocumented)
export type ICSSPixelUnitRule = string | number;
// @public (undocumented)
export type ICSSRule = 'initial' | 'inherit' | 'unset';
// @public
export interface IFontFace extends IRawFontStyle {
fontDisplay?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
fontFeatureSettings?: string;
src?: string;
unicodeRange?: ICSSRule | string;
}
// @public (undocumented)
export type IFontWeight = ICSSRule | 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | 100 | '200' | 200 | '300' | 300 | '400' | 400 | '500' | 500 | '600' | 600 | '700' | 700 | '800' | 800 | '900' | 900;
// @public
export type IKeyframes = Record<string, IRawStyle>;
// @public (undocumented)
export const InjectionMode: {
none: 0;
insertNode: 1;
appendChild: 2;
};
// @public (undocumented)
export type InjectionMode = (typeof InjectionMode)[keyof typeof InjectionMode];
// Warning: (ae-forgotten-export) The symbol "InsertRuleArgs" needs to be exported by the entry point index.d.ts
//
// @public (undocumented)
export type InsertRuleCallback = ({ key, sheet, rule }: InsertRuleArgs) => void;
// @public
export type IProcessedStyleSet<TStyleSet extends IStyleSetBase> = {
[P in keyof Omit_2<TStyleSet, 'subComponentStyles'>]: string;
} & {
subComponentStyles: {
[P in keyof TStyleSet['subComponentStyles']]: __MapToFunctionType<TStyleSet['subComponentStyles'] extends infer J ? (P extends keyof J ? J[P] : never) : never>;
};
} & IShadowConfig;
// @public
export interface IRawFontStyle {
font?: ICSSRule | string;
fontFamily?: ICSSRule | string;
fontKerning?: ICSSRule | string;
// Warning: (ae-forgotten-export) The symbol "ICSSPercentageRule" needs to be exported by the entry point index.d.ts
fontSize?: ICSSRule | 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'larger' | 'smaller' | ICSSPixelUnitRule | ICSSPercentageRule;
fontSizeAdjust?: ICSSRule | 'none' | number | string;
fontStretch?: ICSSRule | 'normal' | 'ultra-condensed' | 'extra-condensed' | 'condensed' | 'semi-condensed' | 'semi-expanded' | 'expanded' | 'extra-expanded' | 'ultra-expanded' | string;
fontStyle?: ICSSRule | 'normal' | 'italic' | 'oblique' | string;
fontSynthesis?: ICSSRule | string;
fontVariant?: ICSSRule | string;
fontVariantAlternates?: ICSSRule | string;
fontWeight?: IFontWeight | string;
}
// @public
export interface IRawStyle extends IRawStyleBase {
[key: string]: any;
displayName?: string;
// @deprecated (undocumented)
selectors?: {
[key: string]: IStyle;
};
}
// @public
export interface IRawStyleBase extends IRawFontStyle {
alignContent?: ICSSRule | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch' | string;
alignItems?: ICSSRule | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch' | string;
alignmentAdjust?: ICSSRule | string;
alignmentBaseline?: ICSSRule | string;
// Warning: (ae-forgotten-export) The symbol "ICSSBaselinePositionRule" needs to be exported by the entry point index.d.ts
// Warning: (ae-forgotten-export) The symbol "ICSSOverflowAndSelfPositionRule" needs to be exported by the entry point index.d.ts
alignSelf?: ICSSRule | 'auto' | 'normal' | 'stretch' | ICSSBaselinePositionRule | ICSSOverflowAndSelfPositionRule | string;
animation?: ICSSRule | string;
animationDelay?: ICSSRule | string;
animationDirection?: ICSSRule | string;
animationDuration?: ICSSRule | string;
animationFillMode?: ICSSRule | 'none' | 'forwards' | 'backwards' | 'both' | string;
animationIterationCount?: ICSSRule | string;
animationName?: ICSSRule | string;
animationPlayState?: ICSSRule | string;
animationTimingFunction?: ICSSRule | string;
appearance?: ICSSRule | string;
backdropFilter?: ICSSRule | string;
backfaceVisibility?: ICSSRule | string;
background?: ICSSRule | string;
backgroundAttachment?: ICSSRule | 'scroll' | 'fixed' | 'local' | string;
backgroundBlendMode?: ICSSRule | string;
backgroundClip?: ICSSRule | 'border-box' | 'padding-box' | 'content-box' | 'text' | string;
backgroundColor?: ICSSRule | string;
backgroundComposite?: ICSSRule | string;
backgroundImage?: ICSSRule | string;
backgroundOrigin?: ICSSRule | string;
backgroundPosition?: ICSSRule | string;
backgroundRepeat?: ICSSRule | string;
backgroundSize?: ICSSRule | string;
border?: ICSSRule | 0 | string;
borderBottom?: ICSSRule | ICSSPixelUnitRule;
borderBottomColor?: ICSSRule | string;
borderBottomLeftRadius?: ICSSRule | ICSSPixelUnitRule;
borderBottomRightRadius?: ICSSRule | ICSSPixelUnitRule;
borderBottomStyle?: ICSSRule | string;
borderBottomWidth?: ICSSRule | ICSSPixelUnitRule;
borderCollapse?: ICSSRule | string;
borderColor?: ICSSRule | string;
borderCornerShape?: ICSSRule | string;
borderImageSource?: ICSSRule | string;
borderImageWidth?: ICSSRule | ICSSPixelUnitRule;
borderLeft?: ICSSRule | ICSSPixelUnitRule;
borderLeftColor?: ICSSRule | string;
borderLeftStyle?: ICSSRule | string;
borderLeftWidth?: ICSSRule | ICSSPixelUnitRule;
borderRadius?: ICSSRule | ICSSPixelUnitRule;
borderRight?: ICSSRule | ICSSPixelUnitRule;
borderRightColor?: ICSSRule | string;
borderRightStyle?: ICSSRule | string;
borderRightWidth?: ICSSRule | ICSSPixelUnitRule;
borderSpacing?: ICSSRule | string;
borderStyle?: ICSSRule | string;
borderTop?: ICSSRule | ICSSPixelUnitRule;
borderTopColor?: ICSSRule | string;
borderTopLeftRadius?: ICSSRule | ICSSPixelUnitRule;
borderTopRightRadius?: ICSSRule | ICSSPixelUnitRule;
borderTopStyle?: ICSSRule | string;
borderTopWidth?: ICSSRule | ICSSPixelUnitRule;
borderWidth?: ICSSRule | ICSSPixelUnitRule;
bottom?: ICSSRule | ICSSPixelUnitRule;
boxDecorationBreak?: ICSSRule | string;
boxShadow?: ICSSRule | string;
boxSizing?: ICSSRule | 'border-box' | 'content-box' | string;
breakAfter?: ICSSRule | string;
breakBefore?: ICSSRule | string;
breakInside?: ICSSRule | string;
clear?: ICSSRule | string;
clipRule?: ICSSRule | string;
color?: ICSSRule | string;
columnCount?: ICSSRule | number | 'auto' | string;
columnFill?: ICSSRule | string;
columnGap?: ICSSRule | string;
columnRule?: ICSSRule | string;
columnRuleColor?: ICSSRule | string;
columnRuleWidth?: ICSSRule | ICSSPixelUnitRule;
columns?: ICSSRule | string;
columnSpan?: ICSSRule | string;
columnWidth?: ICSSRule | ICSSPixelUnitRule;
content?: string;
counterIncrement?: ICSSRule | string;
counterReset?: ICSSRule | string;
cue?: ICSSRule | string;
cueAfter?: ICSSRule | string;
cursor?: ICSSRule | string;
direction?: ICSSRule | string;
// Warning: (ae-forgotten-export) The symbol "ICSSDisplayRule" needs to be exported by the entry point index.d.ts
display?: ICSSRule | ICSSDisplayRule | string;
fill?: ICSSRule | string;
fillOpacity?: ICSSRule | number;
fillRule?: ICSSRule | string;
filter?: ICSSRule | string;
flex?: ICSSRule | string | number;
flexBasis?: ICSSRule | string | number;
flexDirection?: ICSSRule | 'row' | 'row-reverse' | 'column' | 'column-reverse' | string;
flexFlow?: ICSSRule | string;
flexGrow?: ICSSRule | number | string;
flexShrink?: ICSSRule | number | string;
flexWrap?: ICSSRule | 'nowrap' | 'wrap' | 'wrap-reverse' | string;
float?: ICSSRule | string;
flowFrom?: ICSSRule | string;
forcedColorAdjust?: 'auto' | 'none' | string;
gridArea?: ICSSRule | string;
gridAutoColumns?: ICSSRule | string;
gridAutoFlow?: ICSSRule | string;
gridAutoRows?: ICSSRule | string;
gridColumn?: ICSSRule | string;
gridColumnEnd?: ICSSRule | string;
gridColumnGap?: ICSSRule | string;
gridColumnStart?: ICSSRule | string;
gridGap?: ICSSRule | string;
gridRow?: ICSSRule | string;
gridRowEnd?: ICSSRule | string;
gridRowGap?: ICSSRule | string;
gridRowPosition?: ICSSRule | string;
gridRowStart?: ICSSRule | string;
gridTemplate?: ICSSRule | string;
gridTemplateAreas?: ICSSRule | string;
gridTemplateColumns?: ICSSRule | string;
gridTemplateRows?: ICSSRule | string;
height?: ICSSRule | ICSSPixelUnitRule;
hyphenateLimitChars?: ICSSRule | string;
hyphenateLimitLines?: ICSSRule | string;
hyphenateLimitZone?: ICSSRule | string;
hyphens?: ICSSRule | string;
justifyContent?: ICSSRule | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | string;
justifyItems?: ICSSRule | 'normal' | 'stretch' | ICSSBaselinePositionRule | ICSSOverflowAndSelfPositionRule | 'left' | 'right' | 'safe left' | 'safe right' | 'unsafe left' | 'unsafe right' | 'legacy' | 'legacy left' | 'legacy right' | 'legacy center' | string;
justifySelf?: ICSSRule | 'auto' | 'normal' | 'stretch' | ICSSBaselinePositionRule | ICSSOverflowAndSelfPositionRule | 'left' | 'right' | 'safe left' | 'safe right' | 'unsafe left' | 'unsafe right' | string;
left?: ICSSRule | ICSSPixelUnitRule;
letterSpacing?: ICSSRule | string;
lineHeight?: ICSSRule | 'normal' | ICSSPixelUnitRule | ICSSPercentageRule;
listStyle?: ICSSRule | string;
listStyleImage?: ICSSRule | string;
listStylePosition?: ICSSRule | string;
listStyleType?: ICSSRule | string;
margin?: ICSSRule | ICSSPixelUnitRule;
marginBlockEnd?: ICSSRule | ICSSPixelUnitRule;
marginBlockStart?: ICSSRule | ICSSPixelUnitRule;
marginBottom?: ICSSRule | ICSSPixelUnitRule;
marginInlineEnd?: ICSSRule | ICSSPixelUnitRule;
marginInlineStart?: ICSSRule | ICSSPixelUnitRule;
marginLeft?: ICSSRule | ICSSPixelUnitRule;
marginRight?: ICSSRule | ICSSPixelUnitRule;
marginTop?: ICSSRule | ICSSPixelUnitRule;
marqueeDirection?: ICSSRule | string;
marqueeStyle?: ICSSRule | string;
mask?: ICSSRule | string;
maskBorder?: ICSSRule | string;
maskBorderRepeat?: ICSSRule | string;
maskBorderSlice?: ICSSRule | string;
maskBorderSource?: ICSSRule | string;
maskBorderWidth?: ICSSRule | ICSSPixelUnitRule;
maskClip?: ICSSRule | string;
maskOrigin?: ICSSRule | string;
maxFontSize?: ICSSRule | ICSSPixelUnitRule;
maxHeight?: ICSSRule | ICSSPixelUnitRule;
maxWidth?: ICSSRule | ICSSPixelUnitRule;
minHeight?: ICSSRule | ICSSPixelUnitRule;
minWidth?: ICSSRule | ICSSPixelUnitRule;
// Warning: (ae-forgotten-export) The symbol "IMixBlendModes" needs to be exported by the entry point index.d.ts
mixBlendMode?: ICSSRule | IMixBlendModes | string;
MozOsxFontSmoothing?: 'none' | 'antialiased' | 'grayscale' | 'subpixel-antialiased' | string;
MsHighContrastAdjust?: ICSSRule | string;
MsOverflowStyle?: 'auto' | 'none' | 'scrollbar' | '-ms-autohiding-scrollbar' | string;
objectFit?: ICSSRule | 'cover' | 'contain' | 'fill' | 'none' | string;
opacity?: ICSSRule | number | string;
order?: ICSSRule | number | string;
orphans?: ICSSRule | number | string;
outline?: ICSSRule | 0 | string;
outlineColor?: ICSSRule | string;
outlineOffset?: ICSSRule | string;
overflow?: ICSSRule | 'auto' | 'hidden' | 'scroll' | 'visible';
overflowStyle?: ICSSRule | string;
overflowWrap?: ICSSRule | 'normal' | 'break-word' | string;
overflowX?: ICSSRule | 'auto' | 'hidden' | 'scroll' | 'visible' | string;
overflowY?: ICSSRule | 'auto' | 'hidden' | 'scroll' | 'visible' | string;
padding?: ICSSRule | ICSSPixelUnitRule;
paddingBlockEnd?: ICSSRule | ICSSPixelUnitRule;
paddingBlockStart?: ICSSRule | ICSSPixelUnitRule;
paddingBottom?: ICSSRule | ICSSPixelUnitRule;
paddingInlineEnd?: ICSSRule | ICSSPixelUnitRule;
paddingInlineStart?: ICSSRule | ICSSPixelUnitRule;
paddingLeft?: ICSSRule | ICSSPixelUnitRule;
paddingRight?: ICSSRule | ICSSPixelUnitRule;
paddingTop?: ICSSRule | ICSSPixelUnitRule;
pageBreakAfter?: ICSSRule | string;
pageBreakBefore?: ICSSRule | string;
pageBreakInside?: ICSSRule | string;
pause?: ICSSRule | string;
pauseAfter?: ICSSRule | string;
pauseBefore?: ICSSRule | string;
perspective?: ICSSRule | string;
perspectiveOrigin?: ICSSRule | string;
placeContent?: ICSSRule | 'normal' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | ICSSOverflowAndSelfPositionRule | string;
placeItems?: ICSSRule | 'normal' | 'stretch' | ICSSBaselinePositionRule | ICSSOverflowAndSelfPositionRule | string;
placeSelf?: ICSSRule | 'auto' | 'normal' | 'stretch' | ICSSBaselinePositionRule | ICSSOverflowAndSelfPositionRule | string;
pointerEvents?: ICSSRule | string;
position?: ICSSRule | 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
quotes?: ICSSRule | string;
regionFragment?: ICSSRule | string;
resize?: ICSSRule | 'none' | 'both' | 'horizontal' | 'vertical' | 'block' | 'inline' | string;
restAfter?: ICSSRule | string;
restBefore?: ICSSRule | string;
right?: ICSSRule | ICSSPixelUnitRule;
shapeImageThreshold?: ICSSRule | string;
shapeInside?: ICSSRule | string;
shapeMargin?: ICSSRule | string;
shapeOutside?: ICSSRule | string;
speak?: ICSSRule | string;
speakAs?: ICSSRule | string;
stroke?: ICSSRule | string;
strokeLinecap?: ICSSRule | 'butt' | 'round' | 'square' | string;
strokeOpacity?: ICSSRule | number | string;
strokeWidth?: ICSSRule | ICSSPixelUnitRule;
tableLayout?: ICSSRule | string;
tabSize?: ICSSRule | string;
textAlign?: ICSSRule | string;
textAlignLast?: ICSSRule | string;
textDecoration?: ICSSRule | string;
textDecorationColor?: ICSSRule | string;
textDecorationLine?: ICSSRule | string;
textDecorationSkip?: ICSSRule | string;
textDecorationStyle?: ICSSRule | string;
textEmphasis?: ICSSRule | string;
textEmphasisColor?: ICSSRule | string;
textEmphasisStyle?: ICSSRule | string;
textHeight?: ICSSRule | string;
textIndent?: ICSSRule | string;
textOverflow?: ICSSRule | string;
textOverline?: ICSSRule | string;
textOverlineColor?: ICSSRule | string;
textOverlineMode?: ICSSRule | string;
textOverlineStyle?: ICSSRule | string;
textOverlineWidth?: ICSSRule | ICSSPixelUnitRule;
textRendering?: ICSSRule | string;
textShadow?: ICSSRule | string;
textSizeAdjust?: 'none' | 'auto' | ICSSPercentageRule | ICSSRule;
textTransform?: ICSSRule | string;
textUnderlinePosition?: ICSSRule | string;
textUnderlineStyle?: ICSSRule | string;
top?: ICSSRule | ICSSPixelUnitRule;
touchAction?: ICSSRule | string;
transform?: ICSSRule | string;
transformOrigin?: ICSSRule | string;
transformOriginZ?: ICSSRule | string;
transformStyle?: ICSSRule | string;
transition?: ICSSRule | string;
transitionDelay?: ICSSRule | string;
transitionDuration?: ICSSRule | string;
transitionProperty?: ICSSRule | string;
transitionTimingFunction?: ICSSRule | string;
unicodeBidi?: ICSSRule | string;
userFocus?: ICSSRule | string;
userInput?: ICSSRule | string;
userSelect?: ICSSRule | 'none' | 'auto' | 'text' | 'all' | 'contain' | string;
verticalAlign?: ICSSRule | string;
visibility?: ICSSRule | string;
voiceBalance?: ICSSRule | string;
voiceDuration?: ICSSRule | string;
voiceFamily?: ICSSRule | string;
voicePitch?: ICSSRule | string;
voiceRange?: ICSSRule | string;
voiceRate?: ICSSRule | string;
voiceStress?: ICSSRule | string;
voiceVolume?: ICSSRule | string;
WebkitBackdropFilter?: ICSSRule | string;
WebkitFontSmoothing?: 'none' | 'antialiased' | 'grayscale' | 'subpixel-antialiased' | string;
WebkitOverflowScrolling?: 'auto' | 'touch' | string;
WebkitTapHighlightColor?: string;
WebkitTextSizeAdjust?: 'none' | 'auto' | ICSSPercentageRule | ICSSRule | string;
whiteSpace?: ICSSRule | string;
widows?: ICSSRule | number | string;
width?: ICSSRule | ICSSPixelUnitRule;
wordBreak?: ICSSRule | string;
wordSpacing?: ICSSRule | string;
wordWrap?: ICSSRule | string;
wrapFlow?: ICSSRule | string;
wrapMargin?: ICSSRule | string;
writingMode?: ICSSRule | string;
zIndex?: ICSSRule | 'auto' | number | string;
zoom?: ICSSRule | 'auto' | number | ICSSPercentageRule;
}
// @public
export interface ISerializedStylesheet {
// (undocumented)
classNameToArgs: Stylesheet['_classNameToArgs'];
// (undocumented)
counter: Stylesheet['_counter'];
// (undocumented)
keyToClassName: Stylesheet['_keyToClassName'];
// (undocumented)
preservedRules: Stylesheet['_preservedRules'];
// (undocumented)
rules: Stylesheet['_rules'];
}
// @public
export type IStyle = IStyleBase | IStyleBaseArray;
// @public (undocumented)
export type IStyleBase = IRawStyle | string | false | null | undefined;
// @public (undocumented)
export interface IStyleBaseArray extends Array<IStyle> {
}
// @public
export type IStyleFunction<TStylesProps, TStyleSet extends IStyleSetBase> = (props: TStylesProps) => DeepPartialV2<TStyleSet>;
// @public
export type IStyleFunctionOrObject<TStylesProps, TStyleSet extends IStyleSetBase> = IStyleFunction<TStylesProps, TStyleSet> | DeepPartialV2<TStyleSet>;
// @public
export type IStyleSet<TStyleSet extends IStyleSetBase = {
[key: string]: any;
}> = {
[P in keyof Omit_2<TStyleSet, 'subComponentStyles'>]: IStyle;
} & {
subComponentStyles?: {
[P in keyof TStyleSet['subComponentStyles']]: IStyleFunctionOrObject<any, any>;
};
} & IShadowConfig;
// @public
export interface IStyleSetBase {
// (undocumented)
[key: string]: any;
// (undocumented)
subComponentStyles?: any;
}
// @public
export interface IStyleSheetConfig {
classNameCache?: {
[key: string]: string;
};
cspSettings?: ICSPSettings;
defaultPrefix?: string;
injectionMode?: InjectionMode;
// (undocumented)
inShadow?: boolean;
namespace?: string;
// @deprecated
onInsertRule?: (rule: string) => void;
rtl?: boolean;
// (undocumented)
stylesheetKey?: string;
// (undocumented)
window?: Window;
}
// @public
export function keyframes(timeline: IKeyframes): string;
// @public (undocumented)
export const makeShadowConfig: (stylesheetKey: string, inShadow: boolean, window?: Window) => ShadowConfig;
// Warning: (ae-forgotten-export) The symbol "StyleArgWithShadow" needs to be exported by the entry point index.d.ts
// Warning: (ae-forgotten-export) The symbol "IStyleOptions" needs to be exported by the entry point index.d.ts
//
// @public
export function mergeCss(args: StyleArgWithShadow | StyleArgWithShadow[], options?: IStyleOptions): string;
// Warning: (ae-forgotten-export) The symbol "Missing_2" needs to be exported by the entry point index.d.ts
//
// @public
export function mergeCssSets<TStyleSet>(styleSets: [TStyleSet | Missing_2], options?: IStyleOptions): IProcessedStyleSet<ObjectOnly<TStyleSet>>;
// Warning: (ae-forgotten-export) The symbol "MissingOrShadowConfig" needs to be exported by the entry point index.d.ts
//
// @public
export function mergeCssSets<TStyleSet1, TStyleSet2>(styleSets: [TStyleSet1 | MissingOrShadowConfig, TStyleSet2 | Missing_2], options?: IStyleOptions): IProcessedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2>>;
// @public
export function mergeCssSets<TStyleSet1, TStyleSet2, TStyleSet3>(styleSets: [TStyleSet1 | MissingOrShadowConfig, TStyleSet2 | Missing_2, TStyleSet3 | Missing_2], options?: IStyleOptions): IProcessedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2> & ObjectOnly<TStyleSet3>>;
// @public
export function mergeCssSets<TStyleSet1, TStyleSet2, TStyleSet3, TStyleSet4>(styleSets: [TStyleSet1 | MissingOrShadowConfig, TStyleSet2 | Missing_2, TStyleSet3 | Missing_2, TStyleSet4 | Missing_2], options?: IStyleOptions): IProcessedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2> & ObjectOnly<TStyleSet3> & ObjectOnly<TStyleSet4>>;
// @public
export function mergeCssSets<TStyleSet>(styleSet: [TStyleSet | Missing_2], options?: IStyleOptions): IProcessedStyleSet<ObjectOnly<TStyleSet>>;
// Warning: (ae-forgotten-export) The symbol "StyleArg" needs to be exported by the entry point index.d.ts
//
// @public (undocumented)
export function mergeStyles(...args: StyleArg[]): string;
// @public (undocumented)
export function mergeStyles(shadowConfig: ShadowConfig, ...args: StyleArg[]): string;
// @public
export function mergeStyleSets<TStyleSet>(styleSet: TStyleSet | Missing_2): IProcessedStyleSet<ObjectOnly<TStyleSet>>;
// @public
export function mergeStyleSets<TStyleSet1, TStyleSet2>(styleSet1: TStyleSet1 | Missing_2, styleSet2: TStyleSet2 | Missing_2): IProcessedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2>>;
// @public
export function mergeStyleSets<TStyleSet1, TStyleSet2, TStyleSet3>(styleSet1: TStyleSet1 | Missing_2, styleSet2: TStyleSet2 | Missing_2, styleSet3: TStyleSet3 | Missing_2): IProcessedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2> & ObjectOnly<TStyleSet3>>;
// @public
export function mergeStyleSets<TStyleSet1, TStyleSet2, TStyleSet3, TStyleSet4>(styleSet1: TStyleSet1 | Missing_2, styleSet2: TStyleSet2 | Missing_2, styleSet3: TStyleSet3 | Missing_2, styleSet4: TStyleSet4 | Missing_2): IProcessedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2> & ObjectOnly<TStyleSet3> & ObjectOnly<TStyleSet4>>;
// @public
export function mergeStyleSets(...styleSets: Array<IStyleSet | MissingOrShadowConfig>): IProcessedStyleSet<any>;
// @public (undocumented)
export function mergeStyleSets(shadowConfig: ShadowConfig, ...styleSets: Array<IStyleSet | Missing_2>): IProcessedStyleSet<any>;
// @public (undocumented)
export type ObjectOnly<TArg> = TArg extends {} ? TArg : {};
// Warning: (ae-forgotten-export) The symbol "Diff" needs to be exported by the entry point index.d.ts
//
// @public @deprecated (undocumented)
type Omit_2<U, K extends keyof U> = Pick<U, Diff<keyof U, K>>;
export { Omit_2 as Omit }
// @public
export function setRTL(isRTL: boolean): void;
// @public (undocumented)
export interface ShadowConfig {
// (undocumented)
__isShadowConfig__: true;
// (undocumented)
inShadow: boolean;
// (undocumented)
stylesheetKey: string;
// (undocumented)
window?: Window;
}
// @public (undocumented)
export class ShadowDomStylesheet extends Stylesheet {
constructor(config?: IStyleSheetConfig, serializedStylesheet?: ISerializedStylesheet);
// (undocumented)
protected _createStyleElement(): HTMLStyleElement;
// (undocumented)
getAdoptedSheets(): Map<string, ExtendedCSSStyleSheet>;
// (undocumented)
protected _getCacheKey(key: string): string;
// (undocumented)
static getInstance(shadowConfig?: ShadowConfig): ShadowDomStylesheet;
// (undocumented)
insertRule(rule: string, preserve?: boolean): void;
// (undocumented)
onAddSheet(callback: AddSheetCallback): Function;
}
// @public
export class Stylesheet {
constructor(config?: IStyleSheetConfig, serializedStylesheet?: ISerializedStylesheet);
argsFromClassName(className: string): IStyle[] | undefined;
cacheClassName(className: string, key: string, args: IStyle[], rules: string[]): void;
classNameFromKey(key: string): string | undefined;
// (undocumented)
protected _config: IStyleSheetConfig;
// (undocumented)
protected _createStyleElement(): HTMLStyleElement;
// (undocumented)
protected _getCacheKey(key: string): string;
getClassName(displayName?: string): string;
getClassNameCache(): {
[key: string]: string;
};
static getInstance(shadowConfig?: ShadowConfig): Stylesheet;
getRules(includePreservedRules?: boolean): string;
insertedRulesFromClassName(className: string): string[] | undefined;
insertRule(rule: string, preserve?: boolean, stylesheetKey?: string): void;
// (undocumented)
protected _insertRuleIntoSheet(sheet: CSSStyleSheet | undefined | null, rule: string): boolean;
// (undocumented)
protected _lastStyleElement?: HTMLStyleElement;
onInsertRule(callback: Function | InsertRuleCallback): Function;
onReset(callback: Function): Function;
reset(): void;
// (undocumented)
resetKeys(): void;
serialize(): string;
setConfig(config?: IStyleSheetConfig): void;
}
// @public (undocumented)
export const SUPPORTS_CONSTRUCTABLE_STYLESHEETS: boolean;
// @public (undocumented)
export const SUPPORTS_MODIFYING_ADOPTED_STYLESHEETS: boolean;
// Warnings were encountered during analysis:
//
// lib/IStyleSet.d.ts:62:5 - (ae-forgotten-export) The symbol "__MapToFunctionType" needs to be exported by the entry point index.d.ts
// (No @packageDocumentation comment for this package)
```
+5
View File
@@ -0,0 +1,5 @@
import { preset, task } from '@fluentui/scripts-tasks';
preset();
task('build', 'build:react-with-umd');
+14
View File
@@ -0,0 +1,14 @@
/**
* TypeScript type to return a deep partial object (each property can be undefined, recursively.)
* @deprecated - This type will hit infinite type instantiation recursion. Please use {@link DeepPartialV2}
*/
export type DeepPartial<T> = {
[P in keyof T]?: T[P] extends Array<infer U> ? Array<DeepPartial<U>> : T[P] extends object ? DeepPartial<T[P]> : T[P];
};
interface IDeepPartialArray<T> extends Array<DeepPartialV2<T>> {
}
type DeepPartialObject<T> = {
[Key in keyof T]?: DeepPartialV2<T[Key]>;
};
export type DeepPartialV2<T> = T extends Function ? T : T extends Array<infer U> ? IDeepPartialArray<U> : T extends object ? DeepPartialObject<T> : T;
export {};
+5
View File
@@ -0,0 +1,5 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
});
//# sourceMappingURL=DeepPartial.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"DeepPartial.js","sourceRoot":"../src/","sources":["DeepPartial.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * TypeScript type to return a deep partial object (each property can be undefined, recursively.)\n * @deprecated - This type will hit infinite type instantiation recursion. Please use {@link DeepPartialV2}\n */\nexport type DeepPartial<T> = {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n [P in keyof T]?: T[P] extends Array<infer U> ? Array<DeepPartial<U>> : T[P] extends object ? DeepPartial<T[P]> : T[P];\n};\n\ninterface IDeepPartialArray<T> extends Array<DeepPartialV2<T>> {}\n\ntype DeepPartialObject<T> = {\n [Key in keyof T]?: DeepPartialV2<T[Key]>;\n};\n\nexport type DeepPartialV2<T> = T extends Function\n ? T\n : T extends Array<infer U>\n ? IDeepPartialArray<U>\n : T extends object\n ? DeepPartialObject<T>\n : T;\n"]}
+5
View File
@@ -0,0 +1,5 @@
import { IRawStyle } from './IRawStyle';
/**
* Keyframe definition.
*/
export type IKeyframes = Record<string, IRawStyle>;
+5
View File
@@ -0,0 +1,5 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
});
//# sourceMappingURL=IKeyframes.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"IKeyframes.js","sourceRoot":"../src/","sources":["IKeyframes.ts"],"names":[],"mappings":"","sourcesContent":["import { IRawStyle } from './IRawStyle';\n/**\n * Keyframe definition.\n */\nexport type IKeyframes = Record<string, IRawStyle>;\n"]}
+27
View File
@@ -0,0 +1,27 @@
import type { IRawStyleBase } from './IRawStyleBase';
import type { IStyle } from './IStyle';
/**
* IRawStyle extends a raw style object, but allows selectors to be defined
* under the selectors node.
* @public
* {@docCategory IRawStyle}
*/
export interface IRawStyle extends IRawStyleBase {
/**
* Allow css variables, strings, objects. While we should have more strict typing
* here, partners are broken in many unpredictable cases where typescript can't infer
* the right typing. Loosening the typing to both allow for css variables and other things.
*/
[key: string]: any;
/**
* Display name for the style.
*/
displayName?: string;
/**
* @deprecated - The selectors wrapper is no longer required. You may add selectors as siblings to other
* style properties, like most css-in-js libraries support.
*/
selectors?: {
[key: string]: IStyle;
};
}
+5
View File
@@ -0,0 +1,5 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
});
//# sourceMappingURL=IRawStyle.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"IRawStyle.js","sourceRoot":"../src/","sources":["IRawStyle.ts"],"names":[],"mappings":"","sourcesContent":["import type { IRawStyleBase } from './IRawStyleBase';\nimport type { IStyle } from './IStyle';\n\n/**\n * IRawStyle extends a raw style object, but allows selectors to be defined\n * under the selectors node.\n * @public\n * {@docCategory IRawStyle}\n */\n\nexport interface IRawStyle extends IRawStyleBase {\n /**\n * Allow css variables, strings, objects. While we should have more strict typing\n * here, partners are broken in many unpredictable cases where typescript can't infer\n * the right typing. Loosening the typing to both allow for css variables and other things.\n */\n [key: string]: any;\n\n /**\n * Display name for the style.\n */\n displayName?: string;\n\n /**\n * @deprecated - The selectors wrapper is no longer required. You may add selectors as siblings to other\n * style properties, like most css-in-js libraries support.\n */\n selectors?: {\n [key: string]: IStyle;\n };\n}\n"]}
File diff suppressed because it is too large Load Diff
+5
View File
@@ -0,0 +1,5 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
});
//# sourceMappingURL=IRawStyleBase.js.map
File diff suppressed because one or more lines are too long
+17
View File
@@ -0,0 +1,17 @@
import type { IRawStyle } from './IRawStyle';
/**
* {@docCategory IStyleBase}
*/
export type IStyleBase = IRawStyle | string | false | null | undefined;
/**
* {@docCategory IStyleBaseArray}
*/
export interface IStyleBaseArray extends Array<IStyle> {
}
/**
* IStyleObject extends a raw style objects, but allows selectors to be defined
* under the selectors node.
* @public
* {@docCategory IStyle}
*/
export type IStyle = IStyleBase | IStyleBaseArray;
+5
View File
@@ -0,0 +1,5 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
});
//# sourceMappingURL=IStyle.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"IStyle.js","sourceRoot":"../src/","sources":["IStyle.ts"],"names":[],"mappings":"","sourcesContent":["import type { IRawStyle } from './IRawStyle';\n\n/**\n * {@docCategory IStyleBase}\n */\nexport type IStyleBase = IRawStyle | string | false | null | undefined;\n\n/**\n * {@docCategory IStyleBaseArray}\n */\nexport interface IStyleBaseArray extends Array<IStyle> {}\n\n/**\n * IStyleObject extends a raw style objects, but allows selectors to be defined\n * under the selectors node.\n * @public\n * {@docCategory IStyle}\n */\nexport type IStyle = IStyleBase | IStyleBaseArray;\n"]}
+13
View File
@@ -0,0 +1,13 @@
import { IStyleSetBase } from './IStyleSet';
import type { DeepPartialV2 as DeepPartial } from './DeepPartial';
/**
* A style function takes in styleprops and returns a partial styleset.
* {@docCategory IStyleFunction}
*/
export type IStyleFunction<TStylesProps, TStyleSet extends IStyleSetBase> = (props: TStylesProps) => DeepPartial<TStyleSet>;
/**
* Represents either a style function that takes in style props and returns a partial styleset,
* or a partial styleset object.
* {@docCategory IStyleFunctionOrObject}
*/
export type IStyleFunctionOrObject<TStylesProps, TStyleSet extends IStyleSetBase> = IStyleFunction<TStylesProps, TStyleSet> | DeepPartial<TStyleSet>;
+5
View File
@@ -0,0 +1,5 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
});
//# sourceMappingURL=IStyleFunction.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"IStyleFunction.js","sourceRoot":"../src/","sources":["IStyleFunction.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyleSetBase } from './IStyleSet';\nimport type { DeepPartialV2 as DeepPartial } from './DeepPartial';\n\n/**\n * A style function takes in styleprops and returns a partial styleset.\n * {@docCategory IStyleFunction}\n */\nexport type IStyleFunction<TStylesProps, TStyleSet extends IStyleSetBase> = (\n props: TStylesProps,\n) => DeepPartial<TStyleSet>;\n\n/**\n * Represents either a style function that takes in style props and returns a partial styleset,\n * or a partial styleset object.\n * {@docCategory IStyleFunctionOrObject}\n */\nexport type IStyleFunctionOrObject<TStylesProps, TStyleSet extends IStyleSetBase> =\n | IStyleFunction<TStylesProps, TStyleSet>\n | DeepPartial<TStyleSet>;\n"]}
+8
View File
@@ -0,0 +1,8 @@
import type { ShadowConfig } from './shadowConfig';
import type { Stylesheet } from './Stylesheet';
export interface IStyleOptions {
rtl?: boolean;
specificityMultiplier?: number;
shadowConfig?: ShadowConfig;
stylesheet?: Stylesheet;
}
+5
View File
@@ -0,0 +1,5 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
});
//# sourceMappingURL=IStyleOptions.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"IStyleOptions.js","sourceRoot":"../src/","sources":["IStyleOptions.ts"],"names":[],"mappings":"","sourcesContent":["import type { ShadowConfig } from './shadowConfig';\nimport type { Stylesheet } from './Stylesheet';\n\nexport interface IStyleOptions {\n rtl?: boolean;\n specificityMultiplier?: number;\n shadowConfig?: ShadowConfig;\n stylesheet?: Stylesheet;\n}\n"]}
+68
View File
@@ -0,0 +1,68 @@
import { IStyle } from './IStyle';
import { IStyleFunctionOrObject, IStyleFunction } from './IStyleFunction';
import type { ShadowConfig } from './shadowConfig';
/**
* @deprecated Use `Exclude` provided by TypeScript instead.
*/
export type Diff<T extends keyof any, U extends keyof any> = ({
[P in T]: P;
} & {
[P in U]: never;
} & {
[x: string]: never;
})[T];
/**
* @deprecated Use the version provided by TypeScript instead.
*/
type _Omit<U, K extends keyof U> = Pick<U, Diff<keyof U, K>>;
export type { _Omit as Omit };
/**
* Helper function whose role is supposed to express that regardless if T is a style object or style function,
* it will always map to a style function.
*/
export type __MapToFunctionType<T> = Extract<T, Function> extends never ? (...args: any[]) => Partial<T> : Extract<T, Function>;
/**
* Used for 'extends IStyleSetBase' type constraints when an IStyleSet type argument is needed.
*/
export interface IStyleSetBase {
[key: string]: any;
subComponentStyles?: any;
}
/**
* A style set is a dictionary of display areas to IStyle objects.
* It may optionally contain style functions for sub components in the special `subComponentStyles`
* property.
*/
export type IStyleSet<TStyleSet extends IStyleSetBase = {
[key: string]: any;
}> = {
[P in keyof _Omit<TStyleSet, 'subComponentStyles'>]: IStyle;
} & {
subComponentStyles?: {
[P in keyof TStyleSet['subComponentStyles']]: IStyleFunctionOrObject<any, any>;
};
} & IShadowConfig;
/**
* A concatenated style set differs from `IStyleSet` in that subComponentStyles will always be a style function.
*/
export type IConcatenatedStyleSet<TStyleSet extends IStyleSetBase> = {
[P in keyof _Omit<TStyleSet, 'subComponentStyles'>]: IStyle;
} & {
subComponentStyles?: {
[P in keyof TStyleSet['subComponentStyles']]: IStyleFunction<any, any>;
};
} & IShadowConfig;
/**
* A processed style set is one which the set of styles associated with each area has been converted
* into a class name. Additionally, all subComponentStyles are style functions.
*/
export type IProcessedStyleSet<TStyleSet extends IStyleSetBase> = {
[P in keyof _Omit<TStyleSet, 'subComponentStyles'>]: string;
} & {
subComponentStyles: {
[P in keyof TStyleSet['subComponentStyles']]: __MapToFunctionType<TStyleSet['subComponentStyles'] extends infer J ? (P extends keyof J ? J[P] : never) : never>;
};
} & IShadowConfig;
type IShadowConfig = {
__shadowConfig__?: ShadowConfig;
};
+5
View File
@@ -0,0 +1,5 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
});
//# sourceMappingURL=IStyleSet.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"IStyleSet.js","sourceRoot":"../src/","sources":["IStyleSet.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle } from './IStyle';\nimport { IStyleFunctionOrObject, IStyleFunction } from './IStyleFunction';\nimport type { ShadowConfig } from './shadowConfig';\n\n/**\n * @deprecated Use `Exclude` provided by TypeScript instead.\n */\nexport type Diff<T extends keyof any, U extends keyof any> = ({ [P in T]: P } & { [P in U]: never } & {\n [x: string]: never;\n})[T];\n\n/**\n * @deprecated Use the version provided by TypeScript instead.\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated, @typescript-eslint/naming-convention\ntype _Omit<U, K extends keyof U> = Pick<U, Diff<keyof U, K>>;\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport type { _Omit as Omit };\n\n/**\n * Helper function whose role is supposed to express that regardless if T is a style object or style function,\n * it will always map to a style function.\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type __MapToFunctionType<T> = Extract<T, Function> extends never\n ? (...args: any[]) => Partial<T>\n : Extract<T, Function>;\n\n/**\n * Used for 'extends IStyleSetBase' type constraints when an IStyleSet type argument is needed.\n */\nexport interface IStyleSetBase {\n [key: string]: any;\n subComponentStyles?: any;\n}\n\n/**\n * A style set is a dictionary of display areas to IStyle objects.\n * It may optionally contain style functions for sub components in the special `subComponentStyles`\n * property.\n */\nexport type IStyleSet<TStyleSet extends IStyleSetBase = { [key: string]: any }> = {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n [P in keyof _Omit<TStyleSet, 'subComponentStyles'>]: IStyle;\n} & {\n subComponentStyles?: { [P in keyof TStyleSet['subComponentStyles']]: IStyleFunctionOrObject<any, any> };\n} & IShadowConfig;\n\n/**\n * A concatenated style set differs from `IStyleSet` in that subComponentStyles will always be a style function.\n */\nexport type IConcatenatedStyleSet<TStyleSet extends IStyleSetBase> = {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n [P in keyof _Omit<TStyleSet, 'subComponentStyles'>]: IStyle;\n} & {\n subComponentStyles?: { [P in keyof TStyleSet['subComponentStyles']]: IStyleFunction<any, any> };\n} & IShadowConfig;\n\n/**\n * A processed style set is one which the set of styles associated with each area has been converted\n * into a class name. Additionally, all subComponentStyles are style functions.\n */\nexport type IProcessedStyleSet<TStyleSet extends IStyleSetBase> = {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n [P in keyof _Omit<TStyleSet, 'subComponentStyles'>]: string;\n} & {\n subComponentStyles: {\n [P in keyof TStyleSet['subComponentStyles']]: __MapToFunctionType<\n TStyleSet['subComponentStyles'] extends infer J ? (P extends keyof J ? J[P] : never) : never\n >;\n };\n} & IShadowConfig;\n\ntype IShadowConfig = {\n __shadowConfig__?: ShadowConfig;\n};\n"]}
+1
View File
@@ -0,0 +1 @@
export type ObjectOnly<TArg> = TArg extends {} ? TArg : {};
+5
View File
@@ -0,0 +1,5 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
});
//# sourceMappingURL=ObjectOnly.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"ObjectOnly.js","sourceRoot":"../src/","sources":["ObjectOnly.ts"],"names":[],"mappings":"","sourcesContent":["export type ObjectOnly<TArg> = TArg extends {} ? TArg : {};\n"]}
+24
View File
@@ -0,0 +1,24 @@
import { Stylesheet } from './Stylesheet';
import type { ExtendedCSSStyleSheet, ISerializedStylesheet, IStyleSheetConfig } from './Stylesheet';
import type { ShadowConfig } from './shadowConfig';
export declare const SUPPORTS_CONSTRUCTABLE_STYLESHEETS: boolean;
export declare const SUPPORTS_MODIFYING_ADOPTED_STYLESHEETS: boolean;
export type AddSheetCallback = ({ key, sheet }: {
key: string;
sheet: ExtendedCSSStyleSheet;
}) => void;
export declare class ShadowDomStylesheet extends Stylesheet {
private _onAddSheetCallbacks;
private _adoptableSheets;
private _sheetCounter;
static getInstance(shadowConfig?: ShadowConfig): ShadowDomStylesheet;
constructor(config?: IStyleSheetConfig, serializedStylesheet?: ISerializedStylesheet);
getAdoptedSheets(): Map<string, ExtendedCSSStyleSheet>;
onAddSheet(callback: AddSheetCallback): Function;
insertRule(rule: string, preserve?: boolean): void;
protected _getCacheKey(key: string): string;
protected _createStyleElement(): HTMLStyleElement;
private _makeCSSStyleSheet;
private _addAdoptableStyleSheet;
private _getAdoptableStyleSheet;
}
+192
View File
@@ -0,0 +1,192 @@
define(["require", "exports", "tslib", "./Stylesheet", "./shadowConfig"], function (require, exports, tslib_1, Stylesheet_1, shadowConfig_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ShadowDomStylesheet = exports.SUPPORTS_MODIFYING_ADOPTED_STYLESHEETS = exports.SUPPORTS_CONSTRUCTABLE_STYLESHEETS = void 0;
exports.SUPPORTS_CONSTRUCTABLE_STYLESHEETS = typeof document !== 'undefined' && Array.isArray(document.adoptedStyleSheets) && 'replace' in CSSStyleSheet.prototype;
var supportsModifyingAdoptedStyleSheets = false;
if (exports.SUPPORTS_CONSTRUCTABLE_STYLESHEETS) {
try {
document.adoptedStyleSheets.push();
supportsModifyingAdoptedStyleSheets = true;
}
catch (e) {
supportsModifyingAdoptedStyleSheets = false;
}
}
exports.SUPPORTS_MODIFYING_ADOPTED_STYLESHEETS = supportsModifyingAdoptedStyleSheets;
var _stylesheet;
var _global = {};
// Grab window.
try {
// Why the cast?
// if compiled/type checked in same program with `@fluentui/font-icons-mdl2` which extends `Window` on global
// ( check packages/font-icons-mdl2/src/index.ts ) the definitions don't match! Thus the need of this extra assertion
_global = (window || {});
}
catch (_a) {
/* leave as blank object */
}
var copyOldGlobalRules = function (stylesheet, inShadow, win, doc) {
var _a;
if (inShadow === void 0) { inShadow = false; }
if (!doc) {
// SSR
return;
}
var oldGlobalRules = doc.querySelectorAll('[data-merge-styles]');
if (oldGlobalRules) {
stylesheet.setConfig({
window: win,
inShadow: inShadow,
stylesheetKey: shadowConfig_1.GLOBAL_STYLESHEET_KEY,
});
for (var i = 0; i < oldGlobalRules.length; i++) {
var styleElem = oldGlobalRules[i];
styleElem.setAttribute('data-merge-styles-global', 'true');
var cssRules = ((_a = styleElem.sheet) === null || _a === void 0 ? void 0 : _a.cssRules) || [];
for (var j = 0; j < cssRules.length; j++) {
var rule = cssRules[j];
stylesheet.insertRule(rule.cssText);
}
}
}
};
var ShadowDomStylesheet = /** @class */ (function (_super) {
tslib_1.__extends(ShadowDomStylesheet, _super);
function ShadowDomStylesheet(config, serializedStylesheet) {
var _this = _super.call(this, config, serializedStylesheet) || this;
_this._onAddSheetCallbacks = [];
_this._sheetCounter = 0;
_this._adoptableSheets = new Map();
_global[shadowConfig_1.SHADOW_DOM_STYLESHEET_SETTING] = ShadowDomStylesheet;
return _this;
}
ShadowDomStylesheet.getInstance = function (shadowConfig) {
var sConfig = shadowConfig || shadowConfig_1.DEFAULT_SHADOW_CONFIG;
var stylesheetKey = sConfig.stylesheetKey || shadowConfig_1.GLOBAL_STYLESHEET_KEY;
var inShadow = sConfig.inShadow;
var win = sConfig.window || (typeof window !== 'undefined' ? window : undefined);
var global = (win || _global);
var doc = win ? win.document : typeof document !== 'undefined' ? document : undefined;
_stylesheet = global[Stylesheet_1.STYLESHEET_SETTING];
// When an app has multiple versions of Fluent v8 it is possible
// that an older version of Stylesheet is initialized before
// the version that supports shadow DOM. We check for this case
// and re-initialize the stylesheet in that case.
var oldStylesheetInitializedFirst = _stylesheet && !_stylesheet.getAdoptedSheets;
if (!_stylesheet ||
oldStylesheetInitializedFirst ||
(_stylesheet._lastStyleElement && _stylesheet._lastStyleElement.ownerDocument !== doc)) {
var fabricConfig = (global === null || global === void 0 ? void 0 : global.FabricConfig) || {};
var defaultMergeStyles = {
window: win,
inShadow: inShadow,
stylesheetKey: stylesheetKey,
};
fabricConfig.mergeStyles = fabricConfig.mergeStyles || {};
fabricConfig.mergeStyles = tslib_1.__assign(tslib_1.__assign({}, defaultMergeStyles), fabricConfig.mergeStyles);
var stylesheet = void 0;
if (oldStylesheetInitializedFirst) {
stylesheet = new ShadowDomStylesheet(fabricConfig.mergeStyles, JSON.parse(_stylesheet.serialize()));
copyOldGlobalRules(stylesheet, inShadow, win, doc);
}
else {
stylesheet = new ShadowDomStylesheet(fabricConfig.mergeStyles, fabricConfig.serializedStylesheet);
}
_stylesheet = stylesheet;
global[Stylesheet_1.STYLESHEET_SETTING] = _stylesheet;
}
else {
_stylesheet.setConfig({
window: win,
inShadow: inShadow,
stylesheetKey: stylesheetKey,
});
}
if (win) {
_stylesheet._getAdoptableStyleSheet(stylesheetKey);
}
return _stylesheet;
};
ShadowDomStylesheet.prototype.getAdoptedSheets = function () {
return this._adoptableSheets;
};
ShadowDomStylesheet.prototype.onAddSheet = function (callback) {
var _this = this;
this._onAddSheetCallbacks.push(callback);
return function () {
_this._onAddSheetCallbacks = _this._onAddSheetCallbacks.filter(function (cb) { return cb !== callback; });
};
};
ShadowDomStylesheet.prototype.insertRule = function (rule, preserve) {
var _a = this._config, injectionMode = _a.injectionMode, _b = _a.stylesheetKey, stylesheetKey = _b === void 0 ? shadowConfig_1.GLOBAL_STYLESHEET_KEY : _b;
var injectStyles = injectionMode !== Stylesheet_1.InjectionMode.none;
var addToConstructableStylesheet = stylesheetKey === shadowConfig_1.GLOBAL_STYLESHEET_KEY || !!this._adoptableSheets.has(stylesheetKey);
var constructableSheet = undefined;
if (injectStyles && addToConstructableStylesheet) {
constructableSheet = this._getAdoptableStyleSheet(stylesheetKey);
}
if (constructableSheet) {
this._insertRuleIntoSheet(constructableSheet, rule);
}
_super.prototype.insertRule.call(this, rule, preserve, stylesheetKey);
};
ShadowDomStylesheet.prototype._getCacheKey = function (key) {
var _a = this._config, _b = _a.inShadow, inShadow = _b === void 0 ? false : _b, _c = _a.stylesheetKey, currentStylesheetKey = _c === void 0 ? shadowConfig_1.GLOBAL_STYLESHEET_KEY : _c;
if (inShadow) {
return "__".concat(currentStylesheetKey, "__").concat(key);
}
return _super.prototype._getCacheKey.call(this, key);
};
ShadowDomStylesheet.prototype._createStyleElement = function () {
var styleElement = _super.prototype._createStyleElement.call(this);
if (this._config.stylesheetKey === shadowConfig_1.GLOBAL_STYLESHEET_KEY) {
styleElement.setAttribute('data-merge-styles-global', 'true');
}
return styleElement;
};
ShadowDomStylesheet.prototype._makeCSSStyleSheet = function () {
var win = this._config.window || window;
var sheet = undefined;
if (!exports.SUPPORTS_CONSTRUCTABLE_STYLESHEETS) {
var style = this._createStyleElement();
sheet = style.sheet;
}
else {
sheet = new win.CSSStyleSheet();
}
if (sheet) {
sheet.bucketName = 'merge-styles';
sheet.metadata = {
stylesheetKey: this._config.stylesheetKey || shadowConfig_1.GLOBAL_STYLESHEET_KEY,
sortOrder: this._sheetCounter++,
};
}
return sheet;
};
ShadowDomStylesheet.prototype._addAdoptableStyleSheet = function (key, sheet, queue) {
var _this = this;
if (queue === void 0) { queue = true; }
if (!this._adoptableSheets.has(key)) {
this._adoptableSheets.set(key, sheet);
var win = this._config.window;
if (queue && win) {
win.queueMicrotask(function () {
_this._onAddSheetCallbacks.forEach(function (callback) { return callback({ key: key, sheet: sheet }); });
});
}
}
};
ShadowDomStylesheet.prototype._getAdoptableStyleSheet = function (key) {
var sheet = this._adoptableSheets.get(key);
if (!sheet) {
sheet = this._makeCSSStyleSheet();
this._addAdoptableStyleSheet(key, sheet);
}
return sheet;
};
return ShadowDomStylesheet;
}(Stylesheet_1.Stylesheet));
exports.ShadowDomStylesheet = ShadowDomStylesheet;
});
//# sourceMappingURL=ShadowDomStylesheet.js.map
File diff suppressed because one or more lines are too long
+10
View File
@@ -0,0 +1,10 @@
import { IStyleOptions } from './IStyleOptions';
/**
* Sets the current RTL value.
*/
export declare function setRTL(isRTL: boolean): void;
/**
* Gets the current RTL value.
*/
export declare function getRTL(): boolean;
export declare function getStyleOptions(): IStyleOptions;
+43
View File
@@ -0,0 +1,43 @@
define(["require", "exports", "./shadowConfig"], function (require, exports, shadowConfig_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStyleOptions = exports.getRTL = exports.setRTL = void 0;
/**
* Sets the current RTL value.
*/
function setRTL(isRTL) {
if (_rtl !== isRTL) {
_rtl = isRTL;
}
}
exports.setRTL = setRTL;
/**
* Gets the current RTL value.
*/
function getRTL() {
if (_rtl === undefined) {
_rtl =
// eslint-disable-next-line no-restricted-globals
typeof document !== 'undefined' &&
// eslint-disable-next-line no-restricted-globals
!!document.documentElement &&
// eslint-disable-next-line no-restricted-globals
document.documentElement.getAttribute('dir') === 'rtl';
}
return _rtl;
}
exports.getRTL = getRTL;
// This has been split into 2 lines because it was working in Fabric due to the code being transpiled to es5, so this
// was converted to var while not working in Fluent that uses babel to transpile the code to be es6-like. Splitting the
// logic into two lines, however, allows it to work in both scenarios.
var _rtl;
_rtl = getRTL();
function getStyleOptions() {
return {
rtl: getRTL(),
shadowConfig: shadowConfig_1.DEFAULT_SHADOW_CONFIG,
};
}
exports.getStyleOptions = getStyleOptions;
});
//# sourceMappingURL=StyleOptionsState.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"StyleOptionsState.js","sourceRoot":"../src/","sources":["StyleOptionsState.ts"],"names":[],"mappings":";;;;IAGA;;OAEG;IACH,SAAgB,MAAM,CAAC,KAAc;QACnC,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC;YACnB,IAAI,GAAG,KAAK,CAAC;QACf,CAAC;IACH,CAAC;IAJD,wBAIC;IAED;;OAEG;IACH,SAAgB,MAAM;QACpB,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,IAAI;gBACF,iDAAiD;gBACjD,OAAO,QAAQ,KAAK,WAAW;oBAC/B,iDAAiD;oBACjD,CAAC,CAAC,QAAQ,CAAC,eAAe;oBAC1B,iDAAiD;oBACjD,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC;QAC3D,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAXD,wBAWC;IAED,qHAAqH;IACrH,uHAAuH;IACvH,sEAAsE;IACtE,IAAI,IAAa,CAAC;IAClB,IAAI,GAAG,MAAM,EAAE,CAAC;IAEhB,SAAgB,eAAe;QAC7B,OAAO;YACL,GAAG,EAAE,MAAM,EAAE;YACb,YAAY,EAAE,oCAAqB;SACpC,CAAC;IACJ,CAAC;IALD,0CAKC","sourcesContent":["import { IStyleOptions } from './IStyleOptions';\nimport { DEFAULT_SHADOW_CONFIG } from './shadowConfig';\n\n/**\n * Sets the current RTL value.\n */\nexport function setRTL(isRTL: boolean): void {\n if (_rtl !== isRTL) {\n _rtl = isRTL;\n }\n}\n\n/**\n * Gets the current RTL value.\n */\nexport function getRTL(): boolean {\n if (_rtl === undefined) {\n _rtl =\n // eslint-disable-next-line no-restricted-globals\n typeof document !== 'undefined' &&\n // eslint-disable-next-line no-restricted-globals\n !!document.documentElement &&\n // eslint-disable-next-line no-restricted-globals\n document.documentElement.getAttribute('dir') === 'rtl';\n }\n return _rtl;\n}\n\n// This has been split into 2 lines because it was working in Fabric due to the code being transpiled to es5, so this\n// was converted to var while not working in Fluent that uses babel to transpile the code to be es6-like. Splitting the\n// logic into two lines, however, allows it to work in both scenarios.\nlet _rtl: boolean;\n_rtl = getRTL();\n\nexport function getStyleOptions(): IStyleOptions {\n return {\n rtl: getRTL(),\n shadowConfig: DEFAULT_SHADOW_CONFIG,\n };\n}\n"]}
+207
View File
@@ -0,0 +1,207 @@
import { IStyle } from './IStyle';
import { SHADOW_DOM_STYLESHEET_SETTING } from './shadowConfig';
import type { ShadowConfig } from './shadowConfig';
export declare const InjectionMode: {
/**
* Avoids style injection, use getRules() to read the styles.
*/
none: 0;
/**
* Inserts rules using the insertRule api.
*/
insertNode: 1;
/**
* Appends rules using appendChild.
*/
appendChild: 2;
};
export type InjectionMode = (typeof InjectionMode)[keyof typeof InjectionMode];
/**
* CSP settings for the stylesheet
*/
export interface ICSPSettings {
/**
* Nonce to inject into script tag
*/
nonce?: string;
}
/**
* Stylesheet config.
*
* @public
*/
export interface IStyleSheetConfig {
/**
* Injection mode for how rules are inserted.
*/
injectionMode?: InjectionMode;
/**
* Default 'displayName' to use for a className.
* @defaultvalue 'css'
*/
defaultPrefix?: string;
/**
* Defines the default direction of rules for auto-rtlifying things.
* While typically this is represented as a DIR attribute in the markup,
* the DIR is not enough to control whether padding goes on the left or
* right. Use this to set the default direction when rules are registered.
*/
rtl?: boolean;
/**
* Default 'namespace' to attach before the className.
*/
namespace?: string;
/**
* CSP settings
*/
cspSettings?: ICSPSettings;
/**
* Callback executed when a rule is inserted.
* @deprecated Use `Stylesheet.onInsertRule` instead.
*/
onInsertRule?: (rule: string) => void;
/**
* Initial value for classnames cache. Key is serialized css rules associated with a classname.
*/
classNameCache?: {
[key: string]: string;
};
window?: Window;
inShadow?: boolean;
stylesheetKey?: string;
}
/**
* Representation of Stylesheet used for rehydration.
*/
export interface ISerializedStylesheet {
classNameToArgs: Stylesheet['_classNameToArgs'];
counter: Stylesheet['_counter'];
keyToClassName: Stylesheet['_keyToClassName'];
preservedRules: Stylesheet['_preservedRules'];
rules: Stylesheet['_rules'];
}
export declare const STYLESHEET_SETTING = "__stylesheet__";
declare global {
interface Document {
adoptedStyleSheets: CSSStyleSheet[];
}
}
export type WindowWithMergeStyles = (Window | {}) & {
[STYLESHEET_SETTING]?: Stylesheet;
[SHADOW_DOM_STYLESHEET_SETTING]?: typeof Stylesheet;
FabricConfig?: {
mergeStyles?: IStyleSheetConfig;
serializedStylesheet?: ISerializedStylesheet;
};
};
export type ExtendedCSSStyleSheet = CSSStyleSheet & {
bucketName: string;
metadata: Record<string, unknown>;
};
type InsertRuleArgs = {
key?: string;
sheet?: ExtendedCSSStyleSheet | null;
rule?: string;
};
export type InsertRuleCallback = ({ key, sheet, rule }: InsertRuleArgs) => void;
/**
* Represents the state of styles registered in the page. Abstracts
* the surface for adding styles to the stylesheet, exposes helpers
* for reading the styles registered in server rendered scenarios.
*
* @public
*/
export declare class Stylesheet {
protected _lastStyleElement?: HTMLStyleElement;
protected _config: IStyleSheetConfig;
private _styleElement?;
private _rules;
private _preservedRules;
private _counter;
private _keyToClassName;
private _onInsertRuleCallbacks;
private _onResetCallbacks;
private _classNameToArgs;
/**
* Gets the singleton instance.
*/
static getInstance(shadowConfig?: ShadowConfig): Stylesheet;
constructor(config?: IStyleSheetConfig, serializedStylesheet?: ISerializedStylesheet);
/**
* Serializes the Stylesheet instance into a format which allows rehydration on creation.
* @returns string representation of `ISerializedStylesheet` interface.
*/
serialize(): string;
/**
* Configures the stylesheet.
*/
setConfig(config?: IStyleSheetConfig): void;
/**
* Configures a reset callback.
*
* @param callback - A callback which will be called when the Stylesheet is reset.
* @returns function which when called un-registers provided callback.
*/
onReset(callback: Function): Function;
/**
* Configures an insert rule callback.
*
* @param callback - A callback which will be called when a rule is inserted.
* @returns function which when called un-registers provided callback.
*/
onInsertRule(callback: Function | InsertRuleCallback): Function;
/**
* Generates a unique classname.
*
* @param displayName - Optional value to use as a prefix.
*/
getClassName(displayName?: string): string;
/**
* Used internally to cache information about a class which was
* registered with the stylesheet.
*/
cacheClassName(className: string, key: string, args: IStyle[], rules: string[]): void;
/**
* Gets the appropriate classname given a key which was previously
* registered using cacheClassName.
*/
classNameFromKey(key: string): string | undefined;
/**
* Gets all classnames cache with the stylesheet.
*/
getClassNameCache(): {
[key: string]: string;
};
/**
* Gets the arguments associated with a given classname which was
* previously registered using cacheClassName.
*/
argsFromClassName(className: string): IStyle[] | undefined;
/**
* Gets the rules associated with a given classname which was
* previously registered using cacheClassName.
*/
insertedRulesFromClassName(className: string): string[] | undefined;
/**
* Inserts a css rule into the stylesheet.
* @param preserve - Preserves the rule beyond a reset boundary.
*/
insertRule(rule: string, preserve?: boolean, stylesheetKey?: string): void;
/**
* Gets all rules registered with the stylesheet; only valid when
* using InsertionMode.none.
*/
getRules(includePreservedRules?: boolean): string;
/**
* Resets the internal state of the stylesheet. Only used in server
* rendered scenarios where we're using InsertionMode.none.
*/
reset(): void;
resetKeys(): void;
protected _createStyleElement(): HTMLStyleElement;
protected _insertRuleIntoSheet(sheet: CSSStyleSheet | undefined | null, rule: string): boolean;
protected _getCacheKey(key: string): string;
private _getStyleElement;
private _findPlaceholderStyleTag;
}
export {};
+302
View File
@@ -0,0 +1,302 @@
define(["require", "exports", "tslib", "./shadowConfig"], function (require, exports, tslib_1, shadowConfig_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Stylesheet = exports.STYLESHEET_SETTING = exports.InjectionMode = void 0;
exports.InjectionMode = {
/**
* Avoids style injection, use getRules() to read the styles.
*/
none: 0,
/**
* Inserts rules using the insertRule api.
*/
insertNode: 1,
/**
* Appends rules using appendChild.
*/
appendChild: 2,
};
exports.STYLESHEET_SETTING = '__stylesheet__';
/**
* MSIE 11 doesn't cascade styles based on DOM ordering, but rather on the order that each style node
* is created. As such, to maintain consistent priority, IE11 should reuse a single style node.
*/
var REUSE_STYLE_NODE = typeof navigator !== 'undefined' && /rv:11.0/.test(navigator.userAgent);
var _global = {};
// Grab window.
try {
// Why the cast?
// if compiled/type checked in same program with `@fluentui/font-icons-mdl2` which extends `Window` on global
// ( check packages/font-icons-mdl2/src/index.ts ) the definitions don't match! Thus the need of this extra assertion
_global = (window || {});
}
catch (_a) {
/* leave as blank object */
}
var _stylesheet;
/**
* Represents the state of styles registered in the page. Abstracts
* the surface for adding styles to the stylesheet, exposes helpers
* for reading the styles registered in server rendered scenarios.
*
* @public
*/
var Stylesheet = /** @class */ (function () {
function Stylesheet(config, serializedStylesheet) {
var _a, _b, _c, _d, _e, _f;
this._rules = [];
this._preservedRules = [];
this._counter = 0;
this._keyToClassName = {};
this._onInsertRuleCallbacks = [];
this._onResetCallbacks = [];
this._classNameToArgs = {};
// If there is no document we won't have an element to inject into.
this._config = tslib_1.__assign({ injectionMode: typeof document === 'undefined' ? exports.InjectionMode.none : exports.InjectionMode.insertNode, defaultPrefix: 'css', namespace: undefined, cspSettings: undefined }, config);
this._classNameToArgs = (_a = serializedStylesheet === null || serializedStylesheet === void 0 ? void 0 : serializedStylesheet.classNameToArgs) !== null && _a !== void 0 ? _a : this._classNameToArgs;
this._counter = (_b = serializedStylesheet === null || serializedStylesheet === void 0 ? void 0 : serializedStylesheet.counter) !== null && _b !== void 0 ? _b : this._counter;
this._keyToClassName = (_d = (_c = this._config.classNameCache) !== null && _c !== void 0 ? _c : serializedStylesheet === null || serializedStylesheet === void 0 ? void 0 : serializedStylesheet.keyToClassName) !== null && _d !== void 0 ? _d : this._keyToClassName;
this._preservedRules = (_e = serializedStylesheet === null || serializedStylesheet === void 0 ? void 0 : serializedStylesheet.preservedRules) !== null && _e !== void 0 ? _e : this._preservedRules;
this._rules = (_f = serializedStylesheet === null || serializedStylesheet === void 0 ? void 0 : serializedStylesheet.rules) !== null && _f !== void 0 ? _f : this._rules;
}
/**
* Gets the singleton instance.
*/
Stylesheet.getInstance = function (shadowConfig) {
_stylesheet = _global[exports.STYLESHEET_SETTING];
if (_global[shadowConfig_1.SHADOW_DOM_STYLESHEET_SETTING]) {
return _global[shadowConfig_1.SHADOW_DOM_STYLESHEET_SETTING].getInstance(shadowConfig);
}
if (!_stylesheet || (_stylesheet._lastStyleElement && _stylesheet._lastStyleElement.ownerDocument !== document)) {
var fabricConfig = (_global === null || _global === void 0 ? void 0 : _global.FabricConfig) || {};
var stylesheet = new Stylesheet(fabricConfig.mergeStyles, fabricConfig.serializedStylesheet);
_stylesheet = stylesheet;
_global[exports.STYLESHEET_SETTING] = stylesheet;
}
return _stylesheet;
};
/**
* Serializes the Stylesheet instance into a format which allows rehydration on creation.
* @returns string representation of `ISerializedStylesheet` interface.
*/
Stylesheet.prototype.serialize = function () {
return JSON.stringify({
classNameToArgs: this._classNameToArgs,
counter: this._counter,
keyToClassName: this._keyToClassName,
preservedRules: this._preservedRules,
rules: this._rules,
});
};
/**
* Configures the stylesheet.
*/
Stylesheet.prototype.setConfig = function (config) {
this._config = tslib_1.__assign(tslib_1.__assign({}, this._config), config);
};
/**
* Configures a reset callback.
*
* @param callback - A callback which will be called when the Stylesheet is reset.
* @returns function which when called un-registers provided callback.
*/
Stylesheet.prototype.onReset = function (callback) {
var _this = this;
this._onResetCallbacks.push(callback);
return function () {
_this._onResetCallbacks = _this._onResetCallbacks.filter(function (cb) { return cb !== callback; });
};
};
/**
* Configures an insert rule callback.
*
* @param callback - A callback which will be called when a rule is inserted.
* @returns function which when called un-registers provided callback.
*/
Stylesheet.prototype.onInsertRule = function (callback) {
var _this = this;
this._onInsertRuleCallbacks.push(callback);
return function () {
_this._onInsertRuleCallbacks = _this._onInsertRuleCallbacks.filter(function (cb) { return cb !== callback; });
};
};
/**
* Generates a unique classname.
*
* @param displayName - Optional value to use as a prefix.
*/
Stylesheet.prototype.getClassName = function (displayName) {
var namespace = this._config.namespace;
var prefix = displayName || this._config.defaultPrefix;
return "".concat(namespace ? namespace + '-' : '').concat(prefix, "-").concat(this._counter++);
};
/**
* Used internally to cache information about a class which was
* registered with the stylesheet.
*/
Stylesheet.prototype.cacheClassName = function (className, key, args, rules) {
this._keyToClassName[this._getCacheKey(key)] = className;
this._classNameToArgs[className] = {
args: args,
rules: rules,
};
};
/**
* Gets the appropriate classname given a key which was previously
* registered using cacheClassName.
*/
Stylesheet.prototype.classNameFromKey = function (key) {
return this._keyToClassName[this._getCacheKey(key)];
};
/**
* Gets all classnames cache with the stylesheet.
*/
Stylesheet.prototype.getClassNameCache = function () {
return this._keyToClassName;
};
/**
* Gets the arguments associated with a given classname which was
* previously registered using cacheClassName.
*/
Stylesheet.prototype.argsFromClassName = function (className) {
var entry = this._classNameToArgs[className];
return entry && entry.args;
};
/**
* Gets the rules associated with a given classname which was
* previously registered using cacheClassName.
*/
Stylesheet.prototype.insertedRulesFromClassName = function (className) {
var entry = this._classNameToArgs[className];
return entry && entry.rules;
};
/**
* Inserts a css rule into the stylesheet.
* @param preserve - Preserves the rule beyond a reset boundary.
*/
Stylesheet.prototype.insertRule = function (rule, preserve, stylesheetKey) {
if (stylesheetKey === void 0) { stylesheetKey = shadowConfig_1.GLOBAL_STYLESHEET_KEY; }
var injectionMode = this._config.injectionMode;
var element = injectionMode !== exports.InjectionMode.none ? this._getStyleElement() : undefined;
if (preserve) {
this._preservedRules.push(rule);
}
if (element) {
switch (injectionMode) {
case exports.InjectionMode.insertNode:
this._insertRuleIntoSheet(element.sheet, rule);
break;
case exports.InjectionMode.appendChild:
element.appendChild(document.createTextNode(rule));
break;
}
}
else {
this._rules.push(rule);
}
// eslint-disable-next-line @typescript-eslint/no-deprecated
if (this._config.onInsertRule) {
// eslint-disable-next-line @typescript-eslint/no-deprecated
this._config.onInsertRule(rule);
}
this._onInsertRuleCallbacks.forEach(function (callback) {
return callback({ key: stylesheetKey, sheet: (element ? element.sheet : undefined), rule: rule });
});
};
/**
* Gets all rules registered with the stylesheet; only valid when
* using InsertionMode.none.
*/
Stylesheet.prototype.getRules = function (includePreservedRules) {
return (includePreservedRules ? this._preservedRules.join('') : '') + this._rules.join('');
};
/**
* Resets the internal state of the stylesheet. Only used in server
* rendered scenarios where we're using InsertionMode.none.
*/
Stylesheet.prototype.reset = function () {
this._rules = [];
this._counter = 0;
this._classNameToArgs = {};
this._keyToClassName = {};
this._onResetCallbacks.forEach(function (callback) { return callback(); });
};
// Forces the regeneration of incoming styles without totally resetting the stylesheet.
Stylesheet.prototype.resetKeys = function () {
this._keyToClassName = {};
};
Stylesheet.prototype._createStyleElement = function () {
var _a;
var doc = ((_a = this._config.window) === null || _a === void 0 ? void 0 : _a.document) || document;
var head = doc.head;
var styleElement = doc.createElement('style');
var nodeToInsertBefore = null;
styleElement.setAttribute('data-merge-styles', 'true');
var cspSettings = this._config.cspSettings;
if (cspSettings) {
if (cspSettings.nonce) {
styleElement.setAttribute('nonce', cspSettings.nonce);
}
}
if (this._lastStyleElement) {
// If the `nextElementSibling` is null, then the insertBefore will act as a regular append.
// https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore#Syntax
nodeToInsertBefore = this._lastStyleElement.nextElementSibling;
}
else {
var placeholderStyleTag = this._findPlaceholderStyleTag();
if (placeholderStyleTag) {
nodeToInsertBefore = placeholderStyleTag.nextElementSibling;
}
else {
nodeToInsertBefore = head.childNodes[0];
}
}
head.insertBefore(styleElement, head.contains(nodeToInsertBefore) ? nodeToInsertBefore : null);
this._lastStyleElement = styleElement;
return styleElement;
};
Stylesheet.prototype._insertRuleIntoSheet = function (sheet, rule) {
if (!sheet) {
return false;
}
try {
sheet.insertRule(rule, sheet.cssRules.length);
return true;
}
catch (e) {
// The browser will throw exceptions on unsupported rules (such as a moz prefix in webkit.)
// We need to swallow the exceptions for this scenario, otherwise we'd need to filter
// which could be slower and bulkier.
}
return false;
};
Stylesheet.prototype._getCacheKey = function (key) {
return key;
};
Stylesheet.prototype._getStyleElement = function () {
var _this = this;
if (!this._styleElement) {
this._styleElement = this._createStyleElement();
if (!REUSE_STYLE_NODE) {
// Reset the style element on the next frame.
var win = this._config.window || window;
win.requestAnimationFrame(function () {
_this._styleElement = undefined;
});
}
}
return this._styleElement;
};
Stylesheet.prototype._findPlaceholderStyleTag = function () {
var head = document.head;
if (head) {
return head.querySelector('style[data-merge-styles]');
}
return null;
};
return Stylesheet;
}());
exports.Stylesheet = Stylesheet;
});
//# sourceMappingURL=Stylesheet.js.map
File diff suppressed because one or more lines are too long
+3
View File
@@ -0,0 +1,3 @@
import type { ExtendedCSSStyleSheet } from './Stylesheet';
export declare const cloneCSSStyleSheet: (srcSheet: CSSStyleSheet, targetSheet: CSSStyleSheet) => CSSStyleSheet;
export declare const cloneExtendedCSSStyleSheet: (srcSheet: ExtendedCSSStyleSheet, targetSheet: ExtendedCSSStyleSheet) => ExtendedCSSStyleSheet;
+23
View File
@@ -0,0 +1,23 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.cloneExtendedCSSStyleSheet = exports.cloneCSSStyleSheet = void 0;
var cloneCSSStyleSheet = function (srcSheet, targetSheet) {
for (var i = 0; i < srcSheet.cssRules.length; i++) {
targetSheet.insertRule(srcSheet.cssRules[i].cssText, i);
}
return targetSheet;
};
exports.cloneCSSStyleSheet = cloneCSSStyleSheet;
var cloneExtendedCSSStyleSheet = function (srcSheet, targetSheet) {
var clone = (0, exports.cloneCSSStyleSheet)(srcSheet, targetSheet);
clone.bucketName = srcSheet.bucketName;
for (var _i = 0, _a = Object.keys(srcSheet.metadata); _i < _a.length; _i++) {
var key = _a[_i];
clone.metadata[key] = srcSheet.metadata[key];
}
return clone;
};
exports.cloneExtendedCSSStyleSheet = cloneExtendedCSSStyleSheet;
});
//# sourceMappingURL=cloneCSSStyleSheet.js.map
@@ -0,0 +1 @@
{"version":3,"file":"cloneCSSStyleSheet.js","sourceRoot":"../src/","sources":["cloneCSSStyleSheet.ts"],"names":[],"mappings":";;;;IAEO,IAAM,kBAAkB,GAAG,UAAC,QAAuB,EAAE,WAA0B;QACpF,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAClD,WAAW,CAAC,UAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;QAC1D,CAAC;QAED,OAAO,WAAW,CAAC;IACrB,CAAC,CAAC;IANW,QAAA,kBAAkB,sBAM7B;IAEK,IAAM,0BAA0B,GAAG,UACxC,QAA+B,EAC/B,WAAkC;QAElC,IAAM,KAAK,GAAG,IAAA,0BAAkB,EAAC,QAAQ,EAAE,WAAW,CAA0B,CAAC;QAEjF,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC,UAAU,CAAC;QACvC,KAAkB,UAA8B,EAA9B,KAAA,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAA9B,cAA8B,EAA9B,IAA8B,EAAE,CAAC;YAA9C,IAAM,GAAG,SAAA;YACZ,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC/C,CAAC;QAED,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAZW,QAAA,0BAA0B,8BAYrC","sourcesContent":["import type { ExtendedCSSStyleSheet } from './Stylesheet';\n\nexport const cloneCSSStyleSheet = (srcSheet: CSSStyleSheet, targetSheet: CSSStyleSheet): CSSStyleSheet => {\n for (let i = 0; i < srcSheet.cssRules.length; i++) {\n targetSheet.insertRule(srcSheet.cssRules[i].cssText, i);\n }\n\n return targetSheet;\n};\n\nexport const cloneExtendedCSSStyleSheet = (\n srcSheet: ExtendedCSSStyleSheet,\n targetSheet: ExtendedCSSStyleSheet,\n): ExtendedCSSStyleSheet => {\n const clone = cloneCSSStyleSheet(srcSheet, targetSheet) as ExtendedCSSStyleSheet;\n\n clone.bucketName = srcSheet.bucketName;\n for (const key of Object.keys(srcSheet.metadata)) {\n clone.metadata[key] = srcSheet.metadata[key];\n }\n\n return clone;\n};\n"]}
+56
View File
@@ -0,0 +1,56 @@
import { IStyleSet, IConcatenatedStyleSet } from './IStyleSet';
import { ObjectOnly } from './ObjectOnly';
import { ShadowConfig } from './shadowConfig';
type Missing = false | null | undefined;
type MissingOrShadowConfig = Missing | ShadowConfig;
/**
* Combine a set of styles together (but does not register css classes).
* @param styleSet - The first style set to be concatenated.
*/
export declare function concatStyleSets<TStyleSet>(styleSet: TStyleSet | Missing): IConcatenatedStyleSet<ObjectOnly<TStyleSet>>;
/**
* Combine a set of styles together (but does not register css classes).
* @param styleSet1 - The first style set to be concatenated.
* @param styleSet2 - The second style set to be concatenated.
*/
export declare function concatStyleSets<TStyleSet1, TStyleSet2>(styleSet1: TStyleSet1 | MissingOrShadowConfig, styleSet2: TStyleSet2 | Missing): IConcatenatedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2>>;
/**
* Combine a set of styles together (but does not register css classes).
* @param styleSet1 - The first style set to be concatenated.
* @param styleSet2 - The second style set to be concatenated.
* @param styleSet3 - The third style set to be concatenated.
*/
export declare function concatStyleSets<TStyleSet1, TStyleSet2, TStyleSet3>(styleSet1: TStyleSet1 | MissingOrShadowConfig, styleSet2: TStyleSet2 | Missing, styleSet3: TStyleSet3 | Missing): IConcatenatedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2> & ObjectOnly<TStyleSet3>>;
/**
* Combine a set of styles together (but does not register css classes).
* @param styleSet1 - The first style set to be concatenated.
* @param styleSet2 - The second style set to be concatenated.
* @param styleSet3 - The third style set to be concatenated.
* @param styleSet4 - The fourth style set to be concatenated.
*/
export declare function concatStyleSets<TStyleSet1, TStyleSet2, TStyleSet3, TStyleSet4>(styleSet1: TStyleSet1 | MissingOrShadowConfig, styleSet2: TStyleSet2 | Missing, styleSet3: TStyleSet3 | Missing, styleSet4: TStyleSet4 | Missing): IConcatenatedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2> & ObjectOnly<TStyleSet3> & ObjectOnly<TStyleSet4>>;
/**
* Combine a set of styles together (but does not register css classes).
* @param styleSet1 - The first style set to be concatenated.
* @param styleSet2 - The second style set to be concatenated.
* @param styleSet3 - The third style set to be concatenated.
* @param styleSet4 - The fourth style set to be concatenated.
* @param styleSet5 - The fifth set to be concatenated.
*/
export declare function concatStyleSets<TStyleSet1, TStyleSet2, TStyleSet3, TStyleSet4, TStyleSet5>(styleSet1: TStyleSet1 | MissingOrShadowConfig, styleSet2: TStyleSet2 | Missing, styleSet3: TStyleSet3 | Missing, styleSet4: TStyleSet4 | Missing, styleSet5: TStyleSet5 | Missing): IConcatenatedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2> & ObjectOnly<TStyleSet3> & ObjectOnly<TStyleSet4> & ObjectOnly<TStyleSet5>>;
/**
* Combine a set of styles together (but does not register css classes).
* @param styleSet1 - The first style set to be concatenated.
* @param styleSet2 - The second style set to be concatenated.
* @param styleSet3 - The third style set to be concatenated.
* @param styleSet4 - The fourth style set to be concatenated.
* @param styleSet5 - The fifth set to be concatenated.
* @param styleSet6 - The sixth set to be concatenated.
*/
export declare function concatStyleSets<TStyleSet1, TStyleSet2, TStyleSet3, TStyleSet4, TStyleSet5, TStyleSet6>(styleSet1: TStyleSet1 | MissingOrShadowConfig, styleSet2: TStyleSet2 | Missing, styleSet3: TStyleSet3 | Missing, styleSet4: TStyleSet4 | Missing, styleSet5: TStyleSet5 | Missing, styleSet6: TStyleSet6 | Missing): IConcatenatedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2> & ObjectOnly<TStyleSet3> & ObjectOnly<TStyleSet4> & ObjectOnly<TStyleSet5> & ObjectOnly<TStyleSet6>>;
/**
* Combine a set of styles together (but does not register css classes).
* @param styleSets - One or more stylesets to be merged (each param can also be falsy).
*/
export declare function concatStyleSets(...styleSets: (IStyleSet | MissingOrShadowConfig)[]): IConcatenatedStyleSet<any>;
export {};
+80
View File
@@ -0,0 +1,80 @@
define(["require", "exports", "tslib", "./shadowConfig"], function (require, exports, tslib_1, shadowConfig_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.concatStyleSets = void 0;
/**
* Combine a set of styles together (but does not register css classes).
* @param styleSets - One or more stylesets to be merged (each param can also be falsy).
*/
function concatStyleSets() {
var styleSets = [];
for (var _i = 0; _i < arguments.length; _i++) {
styleSets[_i] = arguments[_i];
}
if (styleSets &&
styleSets.length === 1 &&
styleSets[0] &&
!styleSets[0].subComponentStyles &&
!(0, shadowConfig_1.isShadowConfig)(styleSets[0])) {
return styleSets[0];
}
var mergedSet = {};
// We process sub component styles in two phases. First we collect them, then we combine them into 1 style function.
var workingSubcomponentStyles = {};
for (var _a = 0, styleSets_1 = styleSets; _a < styleSets_1.length; _a++) {
var currentSet = styleSets_1[_a];
if (currentSet && !(0, shadowConfig_1.isShadowConfig)(currentSet)) {
for (var prop in currentSet) {
if (currentSet.hasOwnProperty(prop)) {
if (prop === 'subComponentStyles' && currentSet.subComponentStyles !== undefined) {
// subcomponent styles - style functions or objects
var currentComponentStyles = currentSet.subComponentStyles;
for (var subCompProp in currentComponentStyles) {
if (currentComponentStyles.hasOwnProperty(subCompProp)) {
if (workingSubcomponentStyles.hasOwnProperty(subCompProp)) {
workingSubcomponentStyles[subCompProp].push(currentComponentStyles[subCompProp]);
}
else {
workingSubcomponentStyles[subCompProp] = [currentComponentStyles[subCompProp]];
}
}
}
continue;
}
// the as any casts below is a workaround for ts 2.8.
// todo: remove cast to any in ts 2.9.
var mergedValue = mergedSet[prop];
var currentValue = currentSet[prop];
if (mergedValue === undefined) {
mergedSet[prop] = currentValue;
}
else {
mergedSet[prop] = tslib_1.__spreadArray(tslib_1.__spreadArray([], (Array.isArray(mergedValue) ? mergedValue : [mergedValue]), true), (Array.isArray(currentValue) ? currentValue : [currentValue]), true);
}
}
}
}
}
if (Object.keys(workingSubcomponentStyles).length > 0) {
mergedSet.subComponentStyles = {};
var mergedSubStyles = mergedSet.subComponentStyles;
var _loop_1 = function (subCompProp) {
if (workingSubcomponentStyles.hasOwnProperty(subCompProp)) {
var workingSet_1 = workingSubcomponentStyles[subCompProp];
mergedSubStyles[subCompProp] = function (styleProps) {
return concatStyleSets.apply(void 0, workingSet_1.map(function (styleFunctionOrObject) {
return typeof styleFunctionOrObject === 'function' ? styleFunctionOrObject(styleProps) : styleFunctionOrObject;
}));
};
}
};
// now we process the subcomponent styles if there are any
for (var subCompProp in workingSubcomponentStyles) {
_loop_1(subCompProp);
}
}
return mergedSet;
}
exports.concatStyleSets = concatStyleSets;
});
//# sourceMappingURL=concatStyleSets.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,9 @@
import { IStyleSetBase } from './IStyleSet';
import { IStyleFunctionOrObject } from './IStyleFunction';
import { DeepPartialV2 as DeepPartial } from './DeepPartial';
/**
* Concatenates style sets into one, but resolves functional sets using the given props.
* @param styleProps - Props used to resolve functional sets.
* @param allStyles - Style sets, which can be functions or objects.
*/
export declare function concatStyleSetsWithProps<TStyleProps, TStyleSet extends IStyleSetBase>(styleProps: TStyleProps, ...allStyles: (IStyleFunctionOrObject<TStyleProps, TStyleSet> | undefined)[]): DeepPartial<TStyleSet>;
@@ -0,0 +1,36 @@
define(["require", "exports", "./concatStyleSets"], function (require, exports, concatStyleSets_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.concatStyleSetsWithProps = void 0;
/**
* Concatenates style sets into one, but resolves functional sets using the given props.
* @param styleProps - Props used to resolve functional sets.
* @param allStyles - Style sets, which can be functions or objects.
*/
function concatStyleSetsWithProps(styleProps) {
var allStyles = [];
for (var _i = 1; _i < arguments.length; _i++) {
allStyles[_i - 1] = arguments[_i];
}
var result = [];
for (var _a = 0, allStyles_1 = allStyles; _a < allStyles_1.length; _a++) {
var styles = allStyles_1[_a];
if (styles) {
result.push(typeof styles === 'function' ? styles(styleProps) : styles);
}
}
if (result.length === 1) {
return result[0];
}
else if (result.length) {
// cliffkoh: I cannot figure out how to avoid the cast to any here.
// It is something to do with the use of Omit in IStyleSet.
// It might not be necessary once Omit becomes part of lib.d.ts (when we remove our own Omit and rely on
// the official version).
return concatStyleSets_1.concatStyleSets.apply(void 0, result);
}
return {};
}
exports.concatStyleSetsWithProps = concatStyleSetsWithProps;
});
//# sourceMappingURL=concatStyleSetsWithProps.js.map
@@ -0,0 +1 @@
{"version":3,"file":"concatStyleSetsWithProps.js","sourceRoot":"../src/","sources":["concatStyleSetsWithProps.ts"],"names":[],"mappings":";;;;IAKA;;;;OAIG;IACH,SAAgB,wBAAwB,CACtC,UAAuB;QACvB,mBAA4E;aAA5E,UAA4E,EAA5E,qBAA4E,EAA5E,IAA4E;YAA5E,kCAA4E;;QAE5E,IAAM,MAAM,GAAkC,EAAE,CAAC;QACjD,KAAqB,UAAS,EAAT,uBAAS,EAAT,uBAAS,EAAT,IAAS,EAAE,CAAC;YAA5B,IAAM,MAAM,kBAAA;YACf,IAAI,MAAM,EAAE,CAAC;gBACX,MAAM,CAAC,IAAI,CAAC,OAAO,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YAC1E,CAAC;QACH,CAAC;QACD,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACxB,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC;QACnB,CAAC;aAAM,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC;YACzB,mEAAmE;YACnE,2DAA2D;YAC3D,yGAAyG;YACzG,yBAAyB;YACzB,OAAO,iCAAe,eAAI,MAAM,CAA2B,CAAC;QAC9D,CAAC;QAED,OAAO,EAA4B,CAAC;IACtC,CAAC;IArBD,4DAqBC","sourcesContent":["import { concatStyleSets } from './concatStyleSets';\nimport { IStyleSetBase } from './IStyleSet';\nimport { IStyleFunctionOrObject } from './IStyleFunction';\nimport { DeepPartialV2 as DeepPartial } from './DeepPartial';\n\n/**\n * Concatenates style sets into one, but resolves functional sets using the given props.\n * @param styleProps - Props used to resolve functional sets.\n * @param allStyles - Style sets, which can be functions or objects.\n */\nexport function concatStyleSetsWithProps<TStyleProps, TStyleSet extends IStyleSetBase>(\n styleProps: TStyleProps,\n ...allStyles: (IStyleFunctionOrObject<TStyleProps, TStyleSet> | undefined)[]\n): DeepPartial<TStyleSet> {\n const result: Array<DeepPartial<TStyleSet>> = [];\n for (const styles of allStyles) {\n if (styles) {\n result.push(typeof styles === 'function' ? styles(styleProps) : styles);\n }\n }\n if (result.length === 1) {\n return result[0];\n } else if (result.length) {\n // cliffkoh: I cannot figure out how to avoid the cast to any here.\n // It is something to do with the use of Omit in IStyleSet.\n // It might not be necessary once Omit becomes part of lib.d.ts (when we remove our own Omit and rely on\n // the official version).\n return concatStyleSets(...result) as DeepPartial<TStyleSet>;\n }\n\n return {} as DeepPartial<TStyleSet>;\n}\n"]}
+10
View File
@@ -0,0 +1,10 @@
import { IStyle, IStyleBaseArray } from './IStyle';
import { Stylesheet } from './Stylesheet';
/**
* Separates the classes and style objects. Any classes that are pre-registered
* args are auto expanded into objects.
*/
export declare function extractStyleParts(sheet: Stylesheet, ...args: (IStyle | IStyle[] | false | null | undefined)[]): {
classes: string[];
objects: IStyleBaseArray;
};
+55
View File
@@ -0,0 +1,55 @@
define(["require", "exports", "./shadowConfig"], function (require, exports, shadowConfig_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.extractStyleParts = void 0;
/**
* Separates the classes and style objects. Any classes that are pre-registered
* args are auto expanded into objects.
*/
function extractStyleParts(sheet) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
var classes = [];
var objects = [];
var stylesheet = sheet;
function _processArgs(argsList) {
for (var _i = 0, argsList_1 = argsList; _i < argsList_1.length; _i++) {
var arg = argsList_1[_i];
if (arg && !(0, shadowConfig_1.isShadowConfig)(arg)) {
if (typeof arg === 'string') {
if (arg.indexOf(' ') >= 0) {
_processArgs(arg.split(' '));
}
else {
var translatedArgs = stylesheet.argsFromClassName(arg);
if (translatedArgs) {
_processArgs(translatedArgs);
}
else {
// Avoid adding the same class twice.
if (classes.indexOf(arg) === -1) {
classes.push(arg);
}
}
}
}
else if (Array.isArray(arg)) {
_processArgs(arg);
}
else if (typeof arg === 'object') {
objects.push(arg);
}
}
}
}
_processArgs(args);
return {
classes: classes,
objects: objects,
};
}
exports.extractStyleParts = extractStyleParts;
});
//# sourceMappingURL=extractStyleParts.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"extractStyleParts.js","sourceRoot":"../src/","sources":["extractStyleParts.ts"],"names":[],"mappings":";;;;IAIA;;;OAGG;IACH,SAAgB,iBAAiB,CAC/B,KAAiB;QACjB,cAAyD;aAAzD,UAAyD,EAAzD,qBAAyD,EAAzD,IAAyD;YAAzD,6BAAyD;;QAKzD,IAAM,OAAO,GAAa,EAAE,CAAC;QAC7B,IAAM,OAAO,GAAS,EAAE,CAAC;QACzB,IAAM,UAAU,GAAG,KAAK,CAAC;QAEzB,SAAS,YAAY,CAAC,QAA+B;YACnD,KAAkB,UAAQ,EAAR,qBAAQ,EAAR,sBAAQ,EAAR,IAAQ,EAAE,CAAC;gBAAxB,IAAM,GAAG,iBAAA;gBACZ,IAAI,GAAG,IAAI,CAAC,IAAA,6BAAc,EAAC,GAAG,CAAC,EAAE,CAAC;oBAChC,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;wBAC5B,IAAI,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;4BAC1B,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;wBAC/B,CAAC;6BAAM,CAAC;4BACN,IAAM,cAAc,GAAG,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;4BAEzD,IAAI,cAAc,EAAE,CAAC;gCACnB,YAAY,CAAC,cAAc,CAAC,CAAC;4BAC/B,CAAC;iCAAM,CAAC;gCACN,qCAAqC;gCACrC,IAAI,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;oCAChC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gCACpB,CAAC;4BACH,CAAC;wBACH,CAAC;oBACH,CAAC;yBAAM,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;wBAC9B,YAAY,CAAC,GAAG,CAAC,CAAC;oBACpB,CAAC;yBAAM,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;wBACnC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;oBACpB,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;QAED,YAAY,CAAC,IAAI,CAAC,CAAC;QAEnB,OAAO;YACL,OAAO,SAAA;YACP,OAAO,SAAA;SACR,CAAC;IACJ,CAAC;IA5CD,8CA4CC","sourcesContent":["import { IStyle, IStyleBaseArray } from './IStyle';\nimport { Stylesheet } from './Stylesheet';\nimport { isShadowConfig } from './shadowConfig';\n\n/**\n * Separates the classes and style objects. Any classes that are pre-registered\n * args are auto expanded into objects.\n */\nexport function extractStyleParts(\n sheet: Stylesheet,\n ...args: (IStyle | IStyle[] | false | null | undefined)[]\n): {\n classes: string[];\n objects: IStyleBaseArray;\n} {\n const classes: string[] = [];\n const objects: {}[] = [];\n const stylesheet = sheet;\n\n function _processArgs(argsList: (IStyle | IStyle[])[]): void {\n for (const arg of argsList) {\n if (arg && !isShadowConfig(arg)) {\n if (typeof arg === 'string') {\n if (arg.indexOf(' ') >= 0) {\n _processArgs(arg.split(' '));\n } else {\n const translatedArgs = stylesheet.argsFromClassName(arg);\n\n if (translatedArgs) {\n _processArgs(translatedArgs);\n } else {\n // Avoid adding the same class twice.\n if (classes.indexOf(arg) === -1) {\n classes.push(arg);\n }\n }\n }\n } else if (Array.isArray(arg)) {\n _processArgs(arg);\n } else if (typeof arg === 'object') {\n objects.push(arg);\n }\n }\n }\n }\n\n _processArgs(args);\n\n return {\n classes,\n objects,\n };\n}\n"]}
+6
View File
@@ -0,0 +1,6 @@
import { IFontFace } from './IRawStyleBase';
/**
* Registers a font face.
* @public
*/
export declare function fontFace(font: IFontFace): void;
+22
View File
@@ -0,0 +1,22 @@
define(["require", "exports", "./StyleOptionsState", "./Stylesheet", "./styleToClassName"], function (require, exports, StyleOptionsState_1, Stylesheet_1, styleToClassName_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.fontFace = void 0;
/**
* Registers a font face.
* @public
*/
function fontFace(font) {
var stylesheet = Stylesheet_1.Stylesheet.getInstance();
var rule = (0, styleToClassName_1.serializeRuleEntries)((0, StyleOptionsState_1.getStyleOptions)(), font);
var className = stylesheet.classNameFromKey(rule);
if (className) {
return;
}
var name = stylesheet.getClassName();
stylesheet.insertRule("@font-face{".concat(rule, "}"), true);
stylesheet.cacheClassName(name, rule, [], ['font-face', rule]);
}
exports.fontFace = fontFace;
});
//# sourceMappingURL=fontFace.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"fontFace.js","sourceRoot":"../src/","sources":["fontFace.ts"],"names":[],"mappings":";;;;IAKA;;;OAGG;IACH,SAAgB,QAAQ,CAAC,IAAe;QACtC,IAAM,UAAU,GAAG,uBAAU,CAAC,WAAW,EAAE,CAAC;QAE5C,IAAM,IAAI,GAAG,IAAA,uCAAoB,EAAC,IAAA,mCAAe,GAAE,EAAE,IAAU,CAAC,CAAC;QAEjE,IAAM,SAAS,GAAG,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAEpD,IAAI,SAAS,EAAE,CAAC;YACd,OAAO;QACT,CAAC;QAED,IAAM,IAAI,GAAG,UAAU,CAAC,YAAY,EAAE,CAAC;QACvC,UAAU,CAAC,UAAU,CAAC,qBAAc,IAAI,MAAG,EAAE,IAAI,CAAC,CAAC;QACnD,UAAU,CAAC,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC;IACjE,CAAC;IAdD,4BAcC","sourcesContent":["import { IFontFace } from './IRawStyleBase';\nimport { getStyleOptions } from './StyleOptionsState';\nimport { Stylesheet } from './Stylesheet';\nimport { serializeRuleEntries } from './styleToClassName';\n\n/**\n * Registers a font face.\n * @public\n */\nexport function fontFace(font: IFontFace): void {\n const stylesheet = Stylesheet.getInstance();\n\n const rule = serializeRuleEntries(getStyleOptions(), font as {});\n\n const className = stylesheet.classNameFromKey(rule);\n\n if (className) {\n return;\n }\n\n const name = stylesheet.getClassName();\n stylesheet.insertRule(`@font-face{${rule}}`, true);\n stylesheet.cacheClassName(name, rule, [], ['font-face', rule]);\n}\n"]}
+11
View File
@@ -0,0 +1,11 @@
export interface IVendorSettings {
isWebkit?: boolean;
isMoz?: boolean;
isMs?: boolean;
isOpera?: boolean;
}
export declare function getVendorSettings(): IVendorSettings;
/**
* Sets the vendor settings for prefixing and vendor specific operations.
*/
export declare function setVendorSettings(vendorSettings?: IVendorSettings): void;
+41
View File
@@ -0,0 +1,41 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.setVendorSettings = exports.getVendorSettings = void 0;
var _vendorSettings;
function getVendorSettings() {
var _a;
if (!_vendorSettings) {
// eslint-disable-next-line no-restricted-globals
var doc = typeof document !== 'undefined' ? document : undefined;
var nav = typeof navigator !== 'undefined' ? navigator : undefined;
var userAgent = (_a = nav === null || nav === void 0 ? void 0 : nav.userAgent) === null || _a === void 0 ? void 0 : _a.toLowerCase();
if (!doc) {
_vendorSettings = {
isWebkit: true,
isMoz: true,
isOpera: true,
isMs: true,
};
}
else {
_vendorSettings = {
isWebkit: !!(doc && 'WebkitAppearance' in doc.documentElement.style),
isMoz: !!(userAgent && userAgent.indexOf('firefox') > -1),
isOpera: !!(userAgent && userAgent.indexOf('opera') > -1),
isMs: !!(nav && (/rv:11.0/i.test(nav.userAgent) || /Edge\/\d./i.test(navigator.userAgent))),
};
}
}
return _vendorSettings;
}
exports.getVendorSettings = getVendorSettings;
/**
* Sets the vendor settings for prefixing and vendor specific operations.
*/
function setVendorSettings(vendorSettings) {
_vendorSettings = vendorSettings;
}
exports.setVendorSettings = setVendorSettings;
});
//# sourceMappingURL=getVendorSettings.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"getVendorSettings.js","sourceRoot":"../src/","sources":["getVendorSettings.ts"],"names":[],"mappings":";;;;IAOA,IAAI,eAA4C,CAAC;IAEjD,SAAgB,iBAAiB;;QAC/B,IAAI,CAAC,eAAe,EAAE,CAAC;YACrB,iDAAiD;YACjD,IAAM,GAAG,GAAG,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;YACnE,IAAM,GAAG,GAAG,OAAO,SAAS,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;YACrE,IAAM,SAAS,GAAG,MAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,SAAS,0CAAE,WAAW,EAAE,CAAC;YAEhD,IAAI,CAAC,GAAG,EAAE,CAAC;gBACT,eAAe,GAAG;oBAChB,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,IAAI;oBACX,OAAO,EAAE,IAAI;oBACb,IAAI,EAAE,IAAI;iBACX,CAAC;YACJ,CAAC;iBAAM,CAAC;gBACN,eAAe,GAAG;oBAChB,QAAQ,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,kBAAkB,IAAI,GAAG,CAAC,eAAe,CAAC,KAAK,CAAC;oBACpE,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,IAAI,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;oBACzD,OAAO,EAAE,CAAC,CAAC,CAAC,SAAS,IAAI,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;oBACzD,IAAI,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;iBAC5F,CAAC;YACJ,CAAC;QACH,CAAC;QAED,OAAO,eAAe,CAAC;IACzB,CAAC;IAzBD,8CAyBC;IAED;;OAEG;IACH,SAAgB,iBAAiB,CAAC,cAAgC;QAChE,eAAe,GAAG,cAAc,CAAC;IACnC,CAAC;IAFD,8CAEC","sourcesContent":["export interface IVendorSettings {\n isWebkit?: boolean;\n isMoz?: boolean;\n isMs?: boolean;\n isOpera?: boolean;\n}\n\nlet _vendorSettings: IVendorSettings | undefined;\n\nexport function getVendorSettings(): IVendorSettings {\n if (!_vendorSettings) {\n // eslint-disable-next-line no-restricted-globals\n const doc = typeof document !== 'undefined' ? document : undefined;\n const nav = typeof navigator !== 'undefined' ? navigator : undefined;\n const userAgent = nav?.userAgent?.toLowerCase();\n\n if (!doc) {\n _vendorSettings = {\n isWebkit: true,\n isMoz: true,\n isOpera: true,\n isMs: true,\n };\n } else {\n _vendorSettings = {\n isWebkit: !!(doc && 'WebkitAppearance' in doc.documentElement.style),\n isMoz: !!(userAgent && userAgent.indexOf('firefox') > -1),\n isOpera: !!(userAgent && userAgent.indexOf('opera') > -1),\n isMs: !!(nav && (/rv:11.0/i.test(nav.userAgent) || /Edge\\/\\d./i.test(navigator.userAgent))),\n };\n }\n }\n\n return _vendorSettings;\n}\n\n/**\n * Sets the vendor settings for prefixing and vendor specific operations.\n */\nexport function setVendorSettings(vendorSettings?: IVendorSettings): void {\n _vendorSettings = vendorSettings;\n}\n"]}
+23
View File
@@ -0,0 +1,23 @@
export type { IStyle, IStyleBase, IStyleBaseArray } from './IStyle';
export type { IRawStyle } from './IRawStyle';
export type { IKeyframes } from './IKeyframes';
export type { IStyleFunction, IStyleFunctionOrObject } from './IStyleFunction';
export type { DeepPartial } from './DeepPartial';
export type { IConcatenatedStyleSet, IProcessedStyleSet, IStyleSet, IStyleSetBase, Omit } from './IStyleSet';
export type { ICSSRule, ICSSPixelUnitRule, IFontFace, IFontWeight, IRawFontStyle, IRawStyleBase, } from './IRawStyleBase';
export { mergeStyles, mergeCss } from './mergeStyles';
export { mergeStyleSets, mergeCssSets } from './mergeStyleSets';
export { concatStyleSets } from './concatStyleSets';
export { concatStyleSetsWithProps } from './concatStyleSetsWithProps';
export { fontFace } from './fontFace';
export { keyframes } from './keyframes';
export { InjectionMode, Stylesheet } from './Stylesheet';
export type { ICSPSettings, ISerializedStylesheet, IStyleSheetConfig, ExtendedCSSStyleSheet, InsertRuleCallback, } from './Stylesheet';
export { ShadowDomStylesheet, SUPPORTS_CONSTRUCTABLE_STYLESHEETS, SUPPORTS_MODIFYING_ADOPTED_STYLESHEETS, } from './ShadowDomStylesheet';
export type { AddSheetCallback } from './ShadowDomStylesheet';
export { setRTL } from './StyleOptionsState';
export type { ObjectOnly } from './ObjectOnly';
export { DEFAULT_SHADOW_CONFIG, GLOBAL_STYLESHEET_KEY, makeShadowConfig } from './shadowConfig';
export type { ShadowConfig } from './shadowConfig';
export { cloneCSSStyleSheet } from './cloneCSSStyleSheet';
import './version';
+24
View File
@@ -0,0 +1,24 @@
define(["require", "exports", "./mergeStyles", "./mergeStyleSets", "./concatStyleSets", "./concatStyleSetsWithProps", "./fontFace", "./keyframes", "./Stylesheet", "./ShadowDomStylesheet", "./StyleOptionsState", "./shadowConfig", "./cloneCSSStyleSheet", "./version"], function (require, exports, mergeStyles_1, mergeStyleSets_1, concatStyleSets_1, concatStyleSetsWithProps_1, fontFace_1, keyframes_1, Stylesheet_1, ShadowDomStylesheet_1, StyleOptionsState_1, shadowConfig_1, cloneCSSStyleSheet_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.cloneCSSStyleSheet = exports.makeShadowConfig = exports.GLOBAL_STYLESHEET_KEY = exports.DEFAULT_SHADOW_CONFIG = exports.setRTL = exports.SUPPORTS_MODIFYING_ADOPTED_STYLESHEETS = exports.SUPPORTS_CONSTRUCTABLE_STYLESHEETS = exports.ShadowDomStylesheet = exports.Stylesheet = exports.InjectionMode = exports.keyframes = exports.fontFace = exports.concatStyleSetsWithProps = exports.concatStyleSets = exports.mergeCssSets = exports.mergeStyleSets = exports.mergeCss = exports.mergeStyles = void 0;
Object.defineProperty(exports, "mergeStyles", { enumerable: true, get: function () { return mergeStyles_1.mergeStyles; } });
Object.defineProperty(exports, "mergeCss", { enumerable: true, get: function () { return mergeStyles_1.mergeCss; } });
Object.defineProperty(exports, "mergeStyleSets", { enumerable: true, get: function () { return mergeStyleSets_1.mergeStyleSets; } });
Object.defineProperty(exports, "mergeCssSets", { enumerable: true, get: function () { return mergeStyleSets_1.mergeCssSets; } });
Object.defineProperty(exports, "concatStyleSets", { enumerable: true, get: function () { return concatStyleSets_1.concatStyleSets; } });
Object.defineProperty(exports, "concatStyleSetsWithProps", { enumerable: true, get: function () { return concatStyleSetsWithProps_1.concatStyleSetsWithProps; } });
Object.defineProperty(exports, "fontFace", { enumerable: true, get: function () { return fontFace_1.fontFace; } });
Object.defineProperty(exports, "keyframes", { enumerable: true, get: function () { return keyframes_1.keyframes; } });
Object.defineProperty(exports, "InjectionMode", { enumerable: true, get: function () { return Stylesheet_1.InjectionMode; } });
Object.defineProperty(exports, "Stylesheet", { enumerable: true, get: function () { return Stylesheet_1.Stylesheet; } });
Object.defineProperty(exports, "ShadowDomStylesheet", { enumerable: true, get: function () { return ShadowDomStylesheet_1.ShadowDomStylesheet; } });
Object.defineProperty(exports, "SUPPORTS_CONSTRUCTABLE_STYLESHEETS", { enumerable: true, get: function () { return ShadowDomStylesheet_1.SUPPORTS_CONSTRUCTABLE_STYLESHEETS; } });
Object.defineProperty(exports, "SUPPORTS_MODIFYING_ADOPTED_STYLESHEETS", { enumerable: true, get: function () { return ShadowDomStylesheet_1.SUPPORTS_MODIFYING_ADOPTED_STYLESHEETS; } });
Object.defineProperty(exports, "setRTL", { enumerable: true, get: function () { return StyleOptionsState_1.setRTL; } });
Object.defineProperty(exports, "DEFAULT_SHADOW_CONFIG", { enumerable: true, get: function () { return shadowConfig_1.DEFAULT_SHADOW_CONFIG; } });
Object.defineProperty(exports, "GLOBAL_STYLESHEET_KEY", { enumerable: true, get: function () { return shadowConfig_1.GLOBAL_STYLESHEET_KEY; } });
Object.defineProperty(exports, "makeShadowConfig", { enumerable: true, get: function () { return shadowConfig_1.makeShadowConfig; } });
Object.defineProperty(exports, "cloneCSSStyleSheet", { enumerable: true, get: function () { return cloneCSSStyleSheet_1.cloneCSSStyleSheet; } });
});
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;;IAuBS,0GAAA,WAAW,OAAA;IAAE,uGAAA,QAAQ,OAAA;IAErB,gHAAA,cAAc,OAAA;IAAE,8GAAA,YAAY,OAAA;IAE5B,kHAAA,eAAe,OAAA;IAEf,oIAAA,wBAAwB,OAAA;IAExB,oGAAA,QAAQ,OAAA;IAER,sGAAA,SAAS,OAAA;IAET,2GAAA,aAAa,OAAA;IAAE,wGAAA,UAAU,OAAA;IAUhC,0HAAA,mBAAmB,OAAA;IACnB,yIAAA,kCAAkC,OAAA;IAClC,6IAAA,sCAAsC,OAAA;IAK/B,2GAAA,MAAM,OAAA;IAIN,qHAAA,qBAAqB,OAAA;IAAE,qHAAA,qBAAqB,OAAA;IAAE,gHAAA,gBAAgB,OAAA;IAG9D,wHAAA,kBAAkB,OAAA","sourcesContent":["export type { IStyle, IStyleBase, IStyleBaseArray } from './IStyle';\n\nexport type { IRawStyle } from './IRawStyle';\n\nexport type { IKeyframes } from './IKeyframes';\n\nexport type { IStyleFunction, IStyleFunctionOrObject } from './IStyleFunction';\n\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport type { DeepPartial } from './DeepPartial';\n\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport type { IConcatenatedStyleSet, IProcessedStyleSet, IStyleSet, IStyleSetBase, Omit } from './IStyleSet';\n\nexport type {\n ICSSRule,\n ICSSPixelUnitRule,\n IFontFace,\n IFontWeight,\n IRawFontStyle,\n IRawStyleBase,\n} from './IRawStyleBase';\n\nexport { mergeStyles, mergeCss } from './mergeStyles';\n\nexport { mergeStyleSets, mergeCssSets } from './mergeStyleSets';\n\nexport { concatStyleSets } from './concatStyleSets';\n\nexport { concatStyleSetsWithProps } from './concatStyleSetsWithProps';\n\nexport { fontFace } from './fontFace';\n\nexport { keyframes } from './keyframes';\n\nexport { InjectionMode, Stylesheet } from './Stylesheet';\nexport type {\n ICSPSettings,\n ISerializedStylesheet,\n IStyleSheetConfig,\n ExtendedCSSStyleSheet,\n InsertRuleCallback,\n} from './Stylesheet';\n\nexport {\n ShadowDomStylesheet,\n SUPPORTS_CONSTRUCTABLE_STYLESHEETS,\n SUPPORTS_MODIFYING_ADOPTED_STYLESHEETS,\n} from './ShadowDomStylesheet';\n\nexport type { AddSheetCallback } from './ShadowDomStylesheet';\n\nexport { setRTL } from './StyleOptionsState';\n\nexport type { ObjectOnly } from './ObjectOnly';\n\nexport { DEFAULT_SHADOW_CONFIG, GLOBAL_STYLESHEET_KEY, makeShadowConfig } from './shadowConfig';\nexport type { ShadowConfig } from './shadowConfig';\n\nexport { cloneCSSStyleSheet } from './cloneCSSStyleSheet';\n\nimport './version';\n"]}
+7
View File
@@ -0,0 +1,7 @@
import { IKeyframes } from './IKeyframes';
/**
* Registers keyframe definitions.
*
* @public
*/
export declare function keyframes(timeline: IKeyframes): string;
+30
View File
@@ -0,0 +1,30 @@
define(["require", "exports", "./StyleOptionsState", "./Stylesheet", "./styleToClassName"], function (require, exports, StyleOptionsState_1, Stylesheet_1, styleToClassName_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.keyframes = void 0;
/**
* Registers keyframe definitions.
*
* @public
*/
function keyframes(timeline) {
var stylesheet = Stylesheet_1.Stylesheet.getInstance();
var rulesArray = [];
for (var prop in timeline) {
if (timeline.hasOwnProperty(prop)) {
rulesArray.push(prop, '{', (0, styleToClassName_1.serializeRuleEntries)((0, StyleOptionsState_1.getStyleOptions)(), timeline[prop]), '}');
}
}
var rules = rulesArray.join('');
var className = stylesheet.classNameFromKey(rules);
if (className) {
return className;
}
var name = stylesheet.getClassName();
stylesheet.insertRule("@keyframes ".concat(name, "{").concat(rules, "}"), true);
stylesheet.cacheClassName(name, rules, [], ['keyframes', rules]);
return name;
}
exports.keyframes = keyframes;
});
//# sourceMappingURL=keyframes.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"keyframes.js","sourceRoot":"../src/","sources":["keyframes.ts"],"names":[],"mappings":";;;;IAKA;;;;OAIG;IACH,SAAgB,SAAS,CAAC,QAAoB;QAC5C,IAAM,UAAU,GAAG,uBAAU,CAAC,WAAW,EAAE,CAAC;QAC5C,IAAM,UAAU,GAAa,EAAE,CAAC;QAEhC,KAAK,IAAM,IAAI,IAAI,QAAQ,EAAE,CAAC;YAC5B,IAAI,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC;gBAClC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,IAAA,uCAAoB,EAAC,IAAA,mCAAe,GAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;YAC3F,CAAC;QACH,CAAC;QACD,IAAM,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAElC,IAAM,SAAS,GAAG,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAErD,IAAI,SAAS,EAAE,CAAC;YACd,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,IAAM,IAAI,GAAG,UAAU,CAAC,YAAY,EAAE,CAAC;QACvC,UAAU,CAAC,UAAU,CAAC,qBAAc,IAAI,cAAI,KAAK,MAAG,EAAE,IAAI,CAAC,CAAC;QAC5D,UAAU,CAAC,cAAc,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;QAEjE,OAAO,IAAI,CAAC;IACd,CAAC;IAtBD,8BAsBC","sourcesContent":["import { IKeyframes } from './IKeyframes';\nimport { getStyleOptions } from './StyleOptionsState';\nimport { Stylesheet } from './Stylesheet';\nimport { serializeRuleEntries } from './styleToClassName';\n\n/**\n * Registers keyframe definitions.\n *\n * @public\n */\nexport function keyframes(timeline: IKeyframes): string {\n const stylesheet = Stylesheet.getInstance();\n const rulesArray: string[] = [];\n\n for (const prop in timeline) {\n if (timeline.hasOwnProperty(prop)) {\n rulesArray.push(prop, '{', serializeRuleEntries(getStyleOptions(), timeline[prop]), '}');\n }\n }\n const rules = rulesArray.join('');\n\n const className = stylesheet.classNameFromKey(rules);\n\n if (className) {\n return className;\n }\n\n const name = stylesheet.getClassName();\n stylesheet.insertRule(`@keyframes ${name}{${rules}}`, true);\n stylesheet.cacheClassName(name, rules, [], ['keyframes', rules]);\n\n return name;\n}\n"]}
+109
View File
@@ -0,0 +1,109 @@
import { IStyleOptions } from './IStyleOptions';
import { IProcessedStyleSet, IStyleSet } from './IStyleSet';
import { ObjectOnly } from './ObjectOnly';
import { ShadowConfig } from './shadowConfig';
type Missing = false | null | undefined;
type MissingOrShadowConfig = Missing | ShadowConfig;
/**
* Takes in one or more style set objects, each consisting of a set of areas,
* each which will produce a class name. Using this is analogous to calling
* `mergeStyles` for each property in the object, but ensures we maintain the
* set ordering when multiple style sets are merged.
*
* @param styleSet - The first style set to be merged and reigstered.
*/
export declare function mergeStyleSets<TStyleSet>(styleSet: TStyleSet | Missing): IProcessedStyleSet<ObjectOnly<TStyleSet>>;
/**
* Takes in one or more style set objects, each consisting of a set of areas,
* each which will produce a class name. Using this is analogous to calling
* `mergeStyles` for each property in the object, but ensures we maintain the
* set ordering when multiple style sets are merged.
*
* @param styleSet1 - The first style set to be merged.
* @param styleSet2 - The second style set to be merged.
*/
export declare function mergeStyleSets<TStyleSet1, TStyleSet2>(styleSet1: TStyleSet1 | Missing, styleSet2: TStyleSet2 | Missing): IProcessedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2>>;
/**
* Takes in one or more style set objects, each consisting of a set of areas,
* each which will produce a class name. Using this is analogous to calling
* `mergeStyles` for each property in the object, but ensures we maintain the
* set ordering when multiple style sets are merged.
*
* @param styleSet1 - The first style set to be merged.
* @param styleSet2 - The second style set to be merged.
* @param styleSet3 - The third style set to be merged.
*/
export declare function mergeStyleSets<TStyleSet1, TStyleSet2, TStyleSet3>(styleSet1: TStyleSet1 | Missing, styleSet2: TStyleSet2 | Missing, styleSet3: TStyleSet3 | Missing): IProcessedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2> & ObjectOnly<TStyleSet3>>;
/**
* Takes in one or more style set objects, each consisting of a set of areas,
* each which will produce a class name. Using this is analogous to calling
* `mergeStyles` for each property in the object, but ensures we maintain the
* set ordering when multiple style sets are merged.
*
* @param styleSet1 - The first style set to be merged.
* @param styleSet2 - The second style set to be merged.
* @param styleSet3 - The third style set to be merged.
* @param styleSet4 - The fourth style set to be merged.
*/
export declare function mergeStyleSets<TStyleSet1, TStyleSet2, TStyleSet3, TStyleSet4>(styleSet1: TStyleSet1 | Missing, styleSet2: TStyleSet2 | Missing, styleSet3: TStyleSet3 | Missing, styleSet4: TStyleSet4 | Missing): IProcessedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2> & ObjectOnly<TStyleSet3> & ObjectOnly<TStyleSet4>>;
/**
* Takes in one or more style set objects, each consisting of a set of areas,
* each which will produce a class name. Using this is analogous to calling
* `mergeStyles` for each property in the object, but ensures we maintain the
* set ordering when multiple style sets are merged.
*
* @param styleSets - One or more style sets to be merged.
*/
export declare function mergeStyleSets(...styleSets: Array<IStyleSet | MissingOrShadowConfig>): IProcessedStyleSet<any>;
export declare function mergeStyleSets(shadowConfig: ShadowConfig, ...styleSets: Array<IStyleSet | Missing>): IProcessedStyleSet<any>;
/**
* Takes in one or more style set objects, each1consisting of a set of areas,
* each which will produce a class name. Using this is analogous to calling
* `mergeCss` for each property in the object, but ensures we maintain the
* set ordering when multiple style sets are merged.
*
* @param styleSets - One or more style sets to be merged.
* @param options - (optional) Options to use when creating rules.
*/
export declare function mergeCssSets<TStyleSet>(styleSets: [TStyleSet | Missing], options?: IStyleOptions): IProcessedStyleSet<ObjectOnly<TStyleSet>>;
/**
* Takes in one or more style set objects, each1consisting of a set of areas,
* each which will produce a class name. Using this is analogous to calling
* `mergeCss` for each property in the object, but ensures we maintain the
* set ordering when multiple style sets are merged.
*
* @param styleSets - One or more style sets to be merged.
* @param options - (optional) Options to use when creating rules.
*/
export declare function mergeCssSets<TStyleSet1, TStyleSet2>(styleSets: [TStyleSet1 | MissingOrShadowConfig, TStyleSet2 | Missing], options?: IStyleOptions): IProcessedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2>>;
/**
* Takes in one or more style set objects, each1consisting of a set of areas,
* each which will produce a class name. Using this is analogous to calling
* `mergeCss` for each property in the object, but ensures we maintain the
* set ordering when multiple style sets are merged.
*
* @param styleSets - One or more style sets to be merged.
* @param options - (optional) Options to use when creating rules.
*/
export declare function mergeCssSets<TStyleSet1, TStyleSet2, TStyleSet3>(styleSets: [TStyleSet1 | MissingOrShadowConfig, TStyleSet2 | Missing, TStyleSet3 | Missing], options?: IStyleOptions): IProcessedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2> & ObjectOnly<TStyleSet3>>;
/**
* Takes in one or more style set objects, each1consisting of a set of areas,
* each which will produce a class name. Using this is analogous to calling
* `mergeCss` for each property in the object, but ensures we maintain the
* set ordering when multiple style sets are merged.
*
* @param styleSets - One or more style sets to be merged.
* @param options - (optional) Options to use when creating rules.
*/
export declare function mergeCssSets<TStyleSet1, TStyleSet2, TStyleSet3, TStyleSet4>(styleSets: [TStyleSet1 | MissingOrShadowConfig, TStyleSet2 | Missing, TStyleSet3 | Missing, TStyleSet4 | Missing], options?: IStyleOptions): IProcessedStyleSet<ObjectOnly<TStyleSet1> & ObjectOnly<TStyleSet2> & ObjectOnly<TStyleSet3> & ObjectOnly<TStyleSet4>>;
/**
* Takes in one or more style set objects, each1consisting of a set of areas,
* each which will produce a class name. Using this is analogous to calling
* `mergeCss` for each property in the object, but ensures we maintain the
* set ordering when multiple style sets are merged.
*
* @param styleSets - One or more style sets to be merged.
* @param options - (optional) Options to use when creating rules.
*/
export declare function mergeCssSets<TStyleSet>(styleSet: [TStyleSet | Missing], options?: IStyleOptions): IProcessedStyleSet<ObjectOnly<TStyleSet>>;
export {};
+83
View File
@@ -0,0 +1,83 @@
define(["require", "exports", "tslib", "./concatStyleSets", "./extractStyleParts", "./StyleOptionsState", "./styleToClassName", "./shadowConfig", "./Stylesheet"], function (require, exports, tslib_1, concatStyleSets_1, extractStyleParts_1, StyleOptionsState_1, styleToClassName_1, shadowConfig_1, Stylesheet_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.mergeCssSets = exports.mergeStyleSets = void 0;
/**
* Takes in one or more style set objects, each consisting of a set of areas,
* each which will produce a class name. Using this is analogous to calling
* `mergeStyles` for each property in the object, but ensures we maintain the
* set ordering when multiple style sets are merged.
*
* @param styleSets - One or more style sets to be merged.
*/
function mergeStyleSets() {
var styleSets = [];
for (var _i = 0; _i < arguments.length; _i++) {
styleSets[_i] = arguments[_i];
}
return mergeCssSets(styleSets, (0, StyleOptionsState_1.getStyleOptions)());
}
exports.mergeStyleSets = mergeStyleSets;
/**
* Takes in one or more style set objects, each1consisting of a set of areas,
* each which will produce a class name. Using this is analogous to calling
* `mergeCss` for each property in the object, but ensures the
* set ordering when multiple style sets are merged.
*
* @param styleSets - One or more style sets to be merged.
* @param options - (optional) Options to use when creating rules.
*/
function mergeCssSets(styleSets, options) {
var classNameSet = { subComponentStyles: {} };
var shadowConfig = undefined;
var styleSet;
if ((0, shadowConfig_1.isShadowConfig)(styleSets[0])) {
shadowConfig = styleSets[0];
styleSet = styleSets[1];
}
else {
styleSet = styleSets[0];
}
shadowConfig !== null && shadowConfig !== void 0 ? shadowConfig : (shadowConfig = options === null || options === void 0 ? void 0 : options.shadowConfig);
var opts = tslib_1.__assign(tslib_1.__assign({}, options), { shadowConfig: shadowConfig });
if (!styleSet && styleSets.length <= 1) {
return { subComponentStyles: {} };
}
var sheet = Stylesheet_1.Stylesheet.getInstance(shadowConfig);
opts.stylesheet = sheet;
var concatenatedStyleSet = concatStyleSets_1.concatStyleSets.apply(void 0, styleSets);
var registrations = [];
for (var styleSetArea in concatenatedStyleSet) {
if (concatenatedStyleSet.hasOwnProperty(styleSetArea)) {
if (styleSetArea === 'subComponentStyles') {
classNameSet.subComponentStyles = concatenatedStyleSet.subComponentStyles || {};
continue;
}
else if (styleSetArea === '__shadowConfig__') {
continue;
}
var styles = concatenatedStyleSet[styleSetArea];
var _a = (0, extractStyleParts_1.extractStyleParts)(sheet, styles), classes = _a.classes, objects = _a.objects;
if (objects === null || objects === void 0 ? void 0 : objects.length) {
var registration = (0, styleToClassName_1.styleToRegistration)(opts || {}, { displayName: styleSetArea }, objects);
if (registration) {
registrations.push(registration);
classNameSet[styleSetArea] = classes.concat([registration.className]).join(' ');
}
}
else {
classNameSet[styleSetArea] = classes.join(' ');
}
}
}
for (var _i = 0, registrations_1 = registrations; _i < registrations_1.length; _i++) {
var registration = registrations_1[_i];
if (registration) {
(0, styleToClassName_1.applyRegistration)(registration, options === null || options === void 0 ? void 0 : options.specificityMultiplier, shadowConfig);
}
}
return classNameSet;
}
exports.mergeCssSets = mergeCssSets;
});
//# sourceMappingURL=mergeStyleSets.js.map
File diff suppressed because one or more lines are too long
+16
View File
@@ -0,0 +1,16 @@
import { IStyle, IStyleBaseArray } from './IStyle';
import { IStyleOptions } from './IStyleOptions';
import { ShadowConfig } from './shadowConfig';
type Missing = false | null | undefined;
type StyleArg = IStyle | IStyleBaseArray | Missing;
type StyleArgWithShadow = StyleArg | ShadowConfig;
export declare function mergeStyles(...args: StyleArg[]): string;
export declare function mergeStyles(shadowConfig: ShadowConfig, ...args: StyleArg[]): string;
/**
* Concatenation helper, which can merge class names together. Skips over falsey values.
* Accepts a set of options that will be used when calculating styles.
*
* @public
*/
export declare function mergeCss(args: StyleArgWithShadow | StyleArgWithShadow[], options?: IStyleOptions): string;
export {};
+40
View File
@@ -0,0 +1,40 @@
define(["require", "exports", "./extractStyleParts", "./shadowConfig", "./StyleOptionsState", "./Stylesheet", "./styleToClassName"], function (require, exports, extractStyleParts_1, shadowConfig_1, StyleOptionsState_1, Stylesheet_1, styleToClassName_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.mergeCss = exports.mergeStyles = void 0;
/**
* Concatenation helper, which can merge class names together. Skips over falsey values.
*
* @public
*/
function mergeStyles() {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return mergeCss(args, (0, StyleOptionsState_1.getStyleOptions)());
}
exports.mergeStyles = mergeStyles;
/**
* Concatenation helper, which can merge class names together. Skips over falsey values.
* Accepts a set of options that will be used when calculating styles.
*
* @public
*/
function mergeCss(args, options) {
var styleArgs = args instanceof Array ? args : [args];
var opts = options || {};
var hasShadowConfig = (0, shadowConfig_1.isShadowConfig)(styleArgs[0]);
if (hasShadowConfig) {
opts.shadowConfig = styleArgs[0];
}
opts.stylesheet = Stylesheet_1.Stylesheet.getInstance(opts.shadowConfig);
var _a = (0, extractStyleParts_1.extractStyleParts)(opts.stylesheet, styleArgs), classes = _a.classes, objects = _a.objects;
if (objects.length) {
classes.push((0, styleToClassName_1.styleToClassName)(opts, objects));
}
return classes.join(' ');
}
exports.mergeCss = mergeCss;
});
//# sourceMappingURL=mergeStyles.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"mergeStyles.js","sourceRoot":"../src/","sources":["mergeStyles.ts"],"names":[],"mappings":";;;;IAcA;;;;OAIG;IACH,SAAgB,WAAW;QAAC,cAAc;aAAd,UAAc,EAAd,qBAAc,EAAd,IAAc;YAAd,yBAAc;;QACxC,OAAO,QAAQ,CAAC,IAAI,EAAE,IAAA,mCAAe,GAAE,CAAC,CAAC;IAC3C,CAAC;IAFD,kCAEC;IAED;;;;;OAKG;IACH,SAAgB,QAAQ,CAAC,IAA+C,EAAE,OAAuB;QAC/F,IAAM,SAAS,GAAG,IAAI,YAAY,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QACxD,IAAM,IAAI,GAAG,OAAO,IAAI,EAAE,CAAC;QAC3B,IAAM,eAAe,GAAG,IAAA,6BAAc,EAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;QACrD,IAAI,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC,CAAC,CAAiB,CAAC;QACnD,CAAC;QACD,IAAI,CAAC,UAAU,GAAG,uBAAU,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACtD,IAAA,KAAuB,IAAA,qCAAiB,EAAC,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,EAAlE,OAAO,aAAA,EAAE,OAAO,aAAkD,CAAC;QAE3E,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;YACnB,OAAO,CAAC,IAAI,CAAC,IAAA,mCAAgB,EAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;QAChD,CAAC;QAED,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC3B,CAAC;IAfD,4BAeC","sourcesContent":["import { extractStyleParts } from './extractStyleParts';\nimport { IStyle, IStyleBaseArray } from './IStyle';\nimport { IStyleOptions } from './IStyleOptions';\nimport { isShadowConfig, ShadowConfig } from './shadowConfig';\nimport { getStyleOptions } from './StyleOptionsState';\nimport { Stylesheet } from './Stylesheet';\nimport { styleToClassName } from './styleToClassName';\n\ntype Missing = false | null | undefined;\ntype StyleArg = IStyle | IStyleBaseArray | Missing;\ntype StyleArgWithShadow = StyleArg | ShadowConfig;\n\nexport function mergeStyles(...args: StyleArg[]): string;\nexport function mergeStyles(shadowConfig: ShadowConfig, ...args: StyleArg[]): string;\n/**\n * Concatenation helper, which can merge class names together. Skips over falsey values.\n *\n * @public\n */\nexport function mergeStyles(...args: any[]): string {\n return mergeCss(args, getStyleOptions());\n}\n\n/**\n * Concatenation helper, which can merge class names together. Skips over falsey values.\n * Accepts a set of options that will be used when calculating styles.\n *\n * @public\n */\nexport function mergeCss(args: StyleArgWithShadow | StyleArgWithShadow[], options?: IStyleOptions): string {\n const styleArgs = args instanceof Array ? args : [args];\n const opts = options || {};\n const hasShadowConfig = isShadowConfig(styleArgs[0]);\n if (hasShadowConfig) {\n opts.shadowConfig = styleArgs[0] as ShadowConfig;\n }\n opts.stylesheet = Stylesheet.getInstance(opts.shadowConfig);\n const { classes, objects } = extractStyleParts(opts.stylesheet, styleArgs);\n\n if (objects.length) {\n classes.push(styleToClassName(opts, objects));\n }\n\n return classes.join(' ');\n}\n"]}
+9
View File
@@ -0,0 +1,9 @@
/**
* Renders a given string and returns both html and css needed for the html.
* @param onRender - Function that returns a string.
* @param namespace - Optional namespace to prepend to css classnames to avoid collisions.
*/
export declare function renderStatic(onRender: () => string, namespace?: string): {
html: string;
css: string;
};
+24
View File
@@ -0,0 +1,24 @@
define(["require", "exports", "./Stylesheet"], function (require, exports, Stylesheet_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.renderStatic = void 0;
/**
* Renders a given string and returns both html and css needed for the html.
* @param onRender - Function that returns a string.
* @param namespace - Optional namespace to prepend to css classnames to avoid collisions.
*/
function renderStatic(onRender, namespace) {
var stylesheet = Stylesheet_1.Stylesheet.getInstance();
stylesheet.setConfig({
injectionMode: Stylesheet_1.InjectionMode.none,
namespace: namespace,
});
stylesheet.reset();
return {
html: onRender(),
css: stylesheet.getRules(true),
};
}
exports.renderStatic = renderStatic;
});
//# sourceMappingURL=server.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"server.js","sourceRoot":"../src/","sources":["server.ts"],"names":[],"mappings":";;;;IAEA;;;;OAIG;IACH,SAAgB,YAAY,CAAC,QAAsB,EAAE,SAAkB;QACrE,IAAM,UAAU,GAAG,uBAAU,CAAC,WAAW,EAAE,CAAC;QAE5C,UAAU,CAAC,SAAS,CAAC;YACnB,aAAa,EAAE,0BAAa,CAAC,IAAI;YACjC,SAAS,WAAA;SACV,CAAC,CAAC;QACH,UAAU,CAAC,KAAK,EAAE,CAAC;QAEnB,OAAO;YACL,IAAI,EAAE,QAAQ,EAAE;YAChB,GAAG,EAAE,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC;SAC/B,CAAC;IACJ,CAAC;IAbD,oCAaC","sourcesContent":["import { InjectionMode, Stylesheet } from './Stylesheet';\n\n/**\n * Renders a given string and returns both html and css needed for the html.\n * @param onRender - Function that returns a string.\n * @param namespace - Optional namespace to prepend to css classnames to avoid collisions.\n */\nexport function renderStatic(onRender: () => string, namespace?: string): { html: string; css: string } {\n const stylesheet = Stylesheet.getInstance();\n\n stylesheet.setConfig({\n injectionMode: InjectionMode.none,\n namespace,\n });\n stylesheet.reset();\n\n return {\n html: onRender(),\n css: stylesheet.getRules(true),\n };\n}\n"]}
+11
View File
@@ -0,0 +1,11 @@
export interface ShadowConfig {
stylesheetKey: string;
inShadow: boolean;
window?: Window;
__isShadowConfig__: true;
}
export declare const GLOBAL_STYLESHEET_KEY = "__global__";
export declare const SHADOW_DOM_STYLESHEET_SETTING = "__shadow_dom_stylesheet__";
export declare const DEFAULT_SHADOW_CONFIG: ShadowConfig;
export declare const makeShadowConfig: (stylesheetKey: string, inShadow: boolean, window?: Window) => ShadowConfig;
export declare const isShadowConfig: (value: unknown) => value is ShadowConfig;
+33
View File
@@ -0,0 +1,33 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.isShadowConfig = exports.makeShadowConfig = exports.DEFAULT_SHADOW_CONFIG = exports.SHADOW_DOM_STYLESHEET_SETTING = exports.GLOBAL_STYLESHEET_KEY = void 0;
exports.GLOBAL_STYLESHEET_KEY = '__global__';
exports.SHADOW_DOM_STYLESHEET_SETTING = '__shadow_dom_stylesheet__';
exports.DEFAULT_SHADOW_CONFIG = {
stylesheetKey: exports.GLOBAL_STYLESHEET_KEY,
inShadow: false,
window: undefined,
__isShadowConfig__: true,
};
var makeShadowConfig = function (stylesheetKey, inShadow, window) {
return {
stylesheetKey: stylesheetKey,
inShadow: inShadow,
window: window,
__isShadowConfig__: true,
};
};
exports.makeShadowConfig = makeShadowConfig;
var isShadowConfig = function (value) {
if (!(value && isRecord(value))) {
return false;
}
return value.__isShadowConfig__ === true;
};
exports.isShadowConfig = isShadowConfig;
function isRecord(value) {
return value !== null && typeof value === 'object' && !Array.isArray(value);
}
});
//# sourceMappingURL=shadowConfig.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"shadowConfig.js","sourceRoot":"../src/","sources":["shadowConfig.ts"],"names":[],"mappings":";;;;IAQa,QAAA,qBAAqB,GAAG,YAAY,CAAC;IACrC,QAAA,6BAA6B,GAAG,2BAA2B,CAAC;IAE5D,QAAA,qBAAqB,GAAiB;QACjD,aAAa,EAAE,6BAAqB;QACpC,QAAQ,EAAE,KAAK;QACf,MAAM,EAAE,SAAS;QACjB,kBAAkB,EAAE,IAAI;KACzB,CAAC;IAEK,IAAM,gBAAgB,GAAG,UAAC,aAAqB,EAAE,QAAiB,EAAE,MAAe;QACxF,OAAO;YACL,aAAa,eAAA;YACb,QAAQ,UAAA;YACR,MAAM,QAAA;YACN,kBAAkB,EAAE,IAAI;SACzB,CAAC;IACJ,CAAC,CAAC;IAPW,QAAA,gBAAgB,oBAO3B;IAEK,IAAM,cAAc,GAAG,UAAC,KAAc;QAC3C,IAAI,CAAC,CAAC,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;YAChC,OAAO,KAAK,CAAC;QACf,CAAC;QAED,OAAO,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;IAC3C,CAAC,CAAC;IANW,QAAA,cAAc,kBAMzB;IAEF,SAAS,QAAQ,CAAC,KAAc;QAC9B,OAAO,KAAK,KAAK,IAAI,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAC9E,CAAC","sourcesContent":["// eslint-disable-next-line @typescript-eslint/naming-convention\nexport interface ShadowConfig {\n stylesheetKey: string;\n inShadow: boolean;\n window?: Window;\n __isShadowConfig__: true;\n}\n\nexport const GLOBAL_STYLESHEET_KEY = '__global__';\nexport const SHADOW_DOM_STYLESHEET_SETTING = '__shadow_dom_stylesheet__';\n\nexport const DEFAULT_SHADOW_CONFIG: ShadowConfig = {\n stylesheetKey: GLOBAL_STYLESHEET_KEY,\n inShadow: false,\n window: undefined,\n __isShadowConfig__: true,\n};\n\nexport const makeShadowConfig = (stylesheetKey: string, inShadow: boolean, window?: Window): ShadowConfig => {\n return {\n stylesheetKey,\n inShadow,\n window,\n __isShadowConfig__: true,\n };\n};\n\nexport const isShadowConfig = (value: unknown): value is ShadowConfig => {\n if (!(value && isRecord(value))) {\n return false;\n }\n\n return value.__isShadowConfig__ === true;\n};\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n return value !== null && typeof value === 'object' && !Array.isArray(value);\n}\n"]}
+22
View File
@@ -0,0 +1,22 @@
import { IStyle } from './IStyle';
import { Stylesheet } from './Stylesheet';
import { IStyleOptions } from './IStyleOptions';
import { ShadowConfig } from './shadowConfig';
export declare function serializeRuleEntries(options: IStyleOptions, ruleEntries: {
[key: string]: string | number;
}): string;
export interface IRegistration {
className: string;
key: string;
args: IStyle[];
rulesToInsert: string[];
}
export declare function styleToRegistration(options: IStyleOptions, ...args: IStyle[]): IRegistration | undefined;
/**
* Insert style to stylesheet.
* @param registration Style registration.
* @param specificityMultiplier Number of times classname selector is repeated in the css rule.
* This is to increase css specificity in case it's needed. Default to 1.
*/
export declare function applyRegistration(registration: IRegistration, specificityMultiplier?: number, shadowConfig?: ShadowConfig, sheet?: Stylesheet): void;
export declare function styleToClassName(options: IStyleOptions, ...args: IStyle[]): string;
+277
View File
@@ -0,0 +1,277 @@
define(["require", "exports", "tslib", "./Stylesheet", "./transforms/kebabRules", "./transforms/prefixRules", "./transforms/provideUnits", "./transforms/rtlifyRules", "./tokenizeWithParentheses"], function (require, exports, tslib_1, Stylesheet_1, kebabRules_1, prefixRules_1, provideUnits_1, rtlifyRules_1, tokenizeWithParentheses_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.styleToClassName = exports.applyRegistration = exports.styleToRegistration = exports.serializeRuleEntries = void 0;
var DISPLAY_NAME = 'displayName';
function getDisplayName(rules) {
var rootStyle = rules && rules['&'];
return rootStyle ? rootStyle.displayName : undefined;
}
var globalSelectorRegExp = /\:global\((.+?)\)/g;
/**
* Finds comma separated selectors in a :global() e.g. ":global(.class1, .class2, .class3)"
* and wraps them each in their own global ":global(.class1), :global(.class2), :global(.class3)"
*
* @param selectorWithGlobals The selector to process
* @returns The updated selector
*/
function expandCommaSeparatedGlobals(selectorWithGlobals) {
// We the selector does not have a :global() we can shortcut
if (!globalSelectorRegExp.test(selectorWithGlobals)) {
return selectorWithGlobals;
}
var replacementInfo = [];
var findGlobal = /\:global\((.+?)\)/g;
var match = null;
// Create a result list for global selectors so we can replace them.
while ((match = findGlobal.exec(selectorWithGlobals))) {
// Only if the found selector is a comma separated list we'll process it.
if (match[1].indexOf(',') > -1) {
replacementInfo.push([
match.index,
match.index + match[0].length,
// Wrap each of the found selectors in :global()
match[1]
.split(',')
.map(function (v) { return ":global(".concat(v.trim(), ")"); })
.join(', '),
]);
}
}
// Replace the found selectors with their wrapped variants in reverse order
return replacementInfo
.reverse()
.reduce(function (selector, _a) {
var matchIndex = _a[0], matchEndIndex = _a[1], replacement = _a[2];
var prefix = selector.slice(0, matchIndex);
var suffix = selector.slice(matchEndIndex);
return prefix + replacement + suffix;
}, selectorWithGlobals);
}
function isSelector(potentialSelector) {
return potentialSelector.indexOf(':global(') >= 0 || potentialSelector.indexOf(':') === 0;
}
function expandSelector(newSelector, currentSelector) {
if (newSelector.indexOf(':global(') >= 0) {
return newSelector.replace(globalSelectorRegExp, '$1');
}
else if (newSelector.indexOf(':host(') === 0) {
return newSelector;
}
else if (newSelector.indexOf(':') === 0) {
return currentSelector + newSelector;
}
else if (newSelector.indexOf('&') < 0) {
return currentSelector + ' ' + newSelector;
}
return newSelector;
}
function extractSelector(currentSelector, rules, selector, value, stylesheet) {
if (rules === void 0) { rules = { __order: [] }; }
if (selector.indexOf('@') === 0) {
selector = selector + '{' + currentSelector;
extractRules([value], rules, selector, stylesheet);
}
else if (selector.indexOf(',') > -1) {
expandCommaSeparatedGlobals(selector)
.split(',')
.map(function (s) { return s.trim(); })
.forEach(function (separatedSelector) {
return extractRules([value], rules, expandSelector(separatedSelector, currentSelector), stylesheet);
});
}
else {
extractRules([value], rules, expandSelector(selector, currentSelector), stylesheet);
}
}
function extractRules(args, rules, currentSelector, stylesheet) {
if (rules === void 0) { rules = { __order: [] }; }
if (currentSelector === void 0) { currentSelector = '&'; }
var currentRules = rules[currentSelector];
if (!currentRules) {
currentRules = {};
rules[currentSelector] = currentRules;
rules.__order.push(currentSelector);
}
for (var _i = 0, args_1 = args; _i < args_1.length; _i++) {
var arg = args_1[_i];
// If the arg is a string, we need to look up the class map and merge.
if (typeof arg === 'string') {
var expandedRules = stylesheet.argsFromClassName(arg);
if (expandedRules) {
extractRules(expandedRules, rules, currentSelector, stylesheet);
}
// Else if the arg is an array, we need to recurse in.
}
else if (Array.isArray(arg)) {
extractRules(arg, rules, currentSelector, stylesheet);
}
else {
for (var prop in arg) {
if (arg.hasOwnProperty(prop)) {
var propValue = arg[prop];
if (prop === 'selectors') {
// every child is a selector.
var selectors = arg.selectors;
for (var newSelector in selectors) {
if (selectors.hasOwnProperty(newSelector)) {
extractSelector(currentSelector, rules, newSelector, selectors[newSelector], stylesheet);
}
}
}
else if (typeof propValue === 'object' || isSelector(prop)) {
// prop is a selector.
if (propValue !== null && propValue !== undefined) {
extractSelector(currentSelector, rules, prop, propValue, stylesheet);
}
}
else {
if (propValue !== undefined) {
// Else, add the rule to the currentSelector.
if (prop === 'margin' || prop === 'padding') {
expandQuads(currentRules, prop, propValue);
}
else {
currentRules[prop] = propValue;
}
}
}
}
}
}
}
return rules;
}
function expandQuads(currentRules, name, value) {
var parts = typeof value === 'string' ? (0, tokenizeWithParentheses_1.tokenizeWithParentheses)(value) : [value];
if (parts.length === 0) {
parts.push(value);
}
if (parts[parts.length - 1] === '!important') {
// Remove !important from parts, and append it to each part individually
parts = parts.slice(0, -1).map(function (p) { return p + ' !important'; });
}
currentRules[name + 'Top'] = parts[0];
currentRules[name + 'Right'] = parts[1] || parts[0];
currentRules[name + 'Bottom'] = parts[2] || parts[0];
currentRules[name + 'Left'] = parts[3] || parts[1] || parts[0];
}
function getKeyForRules(options, rules) {
var serialized = [options.rtl ? 'rtl' : 'ltr'];
var hasProps = false;
for (var _i = 0, _a = rules.__order; _i < _a.length; _i++) {
var selector = _a[_i];
serialized.push(selector);
var rulesForSelector = rules[selector];
for (var propName in rulesForSelector) {
if (rulesForSelector.hasOwnProperty(propName) && rulesForSelector[propName] !== undefined) {
hasProps = true;
serialized.push(propName, rulesForSelector[propName]);
}
}
}
return hasProps ? serialized.join('') : undefined;
}
function repeatString(target, count) {
if (count <= 0) {
return '';
}
if (count === 1) {
return target;
}
return target + repeatString(target, count - 1);
}
function serializeRuleEntries(options, ruleEntries) {
if (!ruleEntries) {
return '';
}
var allEntries = [];
for (var entry in ruleEntries) {
if (ruleEntries.hasOwnProperty(entry) && entry !== DISPLAY_NAME && ruleEntries[entry] !== undefined) {
allEntries.push(entry, ruleEntries[entry]);
}
}
// Apply transforms.
for (var i = 0; i < allEntries.length; i += 2) {
(0, kebabRules_1.kebabRules)(allEntries, i);
(0, provideUnits_1.provideUnits)(allEntries, i);
(0, rtlifyRules_1.rtlifyRules)(options, allEntries, i);
(0, prefixRules_1.prefixRules)(allEntries, i);
}
// Apply punctuation.
for (var i = 1; i < allEntries.length; i += 4) {
allEntries.splice(i, 1, ':', allEntries[i], ';');
}
return allEntries.join('');
}
exports.serializeRuleEntries = serializeRuleEntries;
function styleToRegistration(options) {
var _a;
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
var stylesheet = (_a = options.stylesheet) !== null && _a !== void 0 ? _a : Stylesheet_1.Stylesheet.getInstance(options.shadowConfig);
var rules = extractRules(args, undefined, undefined, stylesheet);
var key = getKeyForRules(options, rules);
if (key) {
var registration = {
className: stylesheet.classNameFromKey(key),
key: key,
args: args,
};
if (!registration.className) {
registration.className = stylesheet.getClassName(getDisplayName(rules));
var rulesToInsert = [];
for (var _b = 0, _c = rules.__order; _b < _c.length; _b++) {
var selector = _c[_b];
rulesToInsert.push(selector, serializeRuleEntries(options, rules[selector]));
}
registration.rulesToInsert = rulesToInsert;
}
return registration;
}
return undefined;
}
exports.styleToRegistration = styleToRegistration;
/**
* Insert style to stylesheet.
* @param registration Style registration.
* @param specificityMultiplier Number of times classname selector is repeated in the css rule.
* This is to increase css specificity in case it's needed. Default to 1.
*/
function applyRegistration(registration, specificityMultiplier, shadowConfig, sheet) {
if (specificityMultiplier === void 0) { specificityMultiplier = 1; }
var stylesheet = sheet !== null && sheet !== void 0 ? sheet : Stylesheet_1.Stylesheet.getInstance(shadowConfig);
var className = registration.className, key = registration.key, args = registration.args, rulesToInsert = registration.rulesToInsert;
if (rulesToInsert) {
// rulesToInsert is an ordered array of selector/rule pairs.
for (var i = 0; i < rulesToInsert.length; i += 2) {
var rules = rulesToInsert[i + 1];
if (rules) {
var selector = rulesToInsert[i];
selector = selector.replace(/&/g, repeatString(".".concat(registration.className), specificityMultiplier));
// Insert. Note if a media query, we must close the query with a final bracket.
var processedRule = "".concat(selector, "{").concat(rules, "}").concat(selector.indexOf('@') === 0 ? '}' : '');
stylesheet.insertRule(processedRule);
}
}
stylesheet.cacheClassName(className, key, args, rulesToInsert);
}
}
exports.applyRegistration = applyRegistration;
function styleToClassName(options) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
var registration = styleToRegistration.apply(void 0, tslib_1.__spreadArray([options], args, false));
if (registration) {
applyRegistration(registration, options.specificityMultiplier, options.shadowConfig, options.stylesheet);
return registration.className;
}
return '';
}
exports.styleToClassName = styleToClassName;
});
//# sourceMappingURL=styleToClassName.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,14 @@
/**
* Split a string into tokens separated by whitespace, except all text within parentheses
* is treated as a single token (whitespace is ignored within parentheses).
*
* Unlike String.split(' '), multiple consecutive space characters are collapsed and
* removed from the returned array (including leading and trailing spaces).
*
* For example:
* `tokenizeWithParentheses("3px calc(var(--x) / 2) 9px 0 ")`
* => `["3px", "calc(var(--x) / 2)", "9px", "0"]`
*
* @returns The array of tokens. Returns an empty array if the string was empty or contained only whitespace.
*/
export declare function tokenizeWithParentheses(value: string): string[];
+52
View File
@@ -0,0 +1,52 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.tokenizeWithParentheses = void 0;
/**
* Split a string into tokens separated by whitespace, except all text within parentheses
* is treated as a single token (whitespace is ignored within parentheses).
*
* Unlike String.split(' '), multiple consecutive space characters are collapsed and
* removed from the returned array (including leading and trailing spaces).
*
* For example:
* `tokenizeWithParentheses("3px calc(var(--x) / 2) 9px 0 ")`
* => `["3px", "calc(var(--x) / 2)", "9px", "0"]`
*
* @returns The array of tokens. Returns an empty array if the string was empty or contained only whitespace.
*/
function tokenizeWithParentheses(value) {
var parts = [];
var partStart = 0;
var parens = 0;
for (var i = 0; i < value.length; i++) {
switch (value[i]) {
case '(':
parens++;
break;
case ')':
if (parens) {
parens--;
}
break;
case '\t':
case ' ':
if (!parens) {
// Add the new part if it's not an empty string
if (i > partStart) {
parts.push(value.substring(partStart, i));
}
partStart = i + 1;
}
break;
}
}
// Add the last part
if (partStart < value.length) {
parts.push(value.substring(partStart));
}
return parts;
}
exports.tokenizeWithParentheses = tokenizeWithParentheses;
});
//# sourceMappingURL=tokenizeWithParentheses.js.map
@@ -0,0 +1 @@
{"version":3,"file":"tokenizeWithParentheses.js","sourceRoot":"../src/","sources":["tokenizeWithParentheses.ts"],"names":[],"mappings":";;;;IAAA;;;;;;;;;;;;OAYG;IACH,SAAgB,uBAAuB,CAAC,KAAa;QACnD,IAAM,KAAK,GAAG,EAAE,CAAC;QACjB,IAAI,SAAS,GAAG,CAAC,CAAC;QAClB,IAAI,MAAM,GAAG,CAAC,CAAC;QAEf,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACtC,QAAQ,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;gBACjB,KAAK,GAAG;oBACN,MAAM,EAAE,CAAC;oBACT,MAAM;gBACR,KAAK,GAAG;oBACN,IAAI,MAAM,EAAE,CAAC;wBACX,MAAM,EAAE,CAAC;oBACX,CAAC;oBACD,MAAM;gBACR,KAAK,IAAI,CAAC;gBACV,KAAK,GAAG;oBACN,IAAI,CAAC,MAAM,EAAE,CAAC;wBACZ,+CAA+C;wBAC/C,IAAI,CAAC,GAAG,SAAS,EAAE,CAAC;4BAClB,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC;wBAC5C,CAAC;wBACD,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC;oBACpB,CAAC;oBACD,MAAM;YACV,CAAC;QACH,CAAC;QAED,oBAAoB;QACpB,IAAI,SAAS,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC;YAC7B,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;QACzC,CAAC;QAED,OAAO,KAAK,CAAC;IACf,CAAC;IAlCD,0DAkCC","sourcesContent":["/**\n * Split a string into tokens separated by whitespace, except all text within parentheses\n * is treated as a single token (whitespace is ignored within parentheses).\n *\n * Unlike String.split(' '), multiple consecutive space characters are collapsed and\n * removed from the returned array (including leading and trailing spaces).\n *\n * For example:\n * `tokenizeWithParentheses(\"3px calc(var(--x) / 2) 9px 0 \")`\n * => `[\"3px\", \"calc(var(--x) / 2)\", \"9px\", \"0\"]`\n *\n * @returns The array of tokens. Returns an empty array if the string was empty or contained only whitespace.\n */\nexport function tokenizeWithParentheses(value: string): string[] {\n const parts = [];\n let partStart = 0;\n let parens = 0;\n\n for (let i = 0; i < value.length; i++) {\n switch (value[i]) {\n case '(':\n parens++;\n break;\n case ')':\n if (parens) {\n parens--;\n }\n break;\n case '\\t':\n case ' ':\n if (!parens) {\n // Add the new part if it's not an empty string\n if (i > partStart) {\n parts.push(value.substring(partStart, i));\n }\n partStart = i + 1;\n }\n break;\n }\n }\n\n // Add the last part\n if (partStart < value.length) {\n parts.push(value.substring(partStart));\n }\n\n return parts;\n}\n"]}
@@ -0,0 +1 @@
export declare function kebabRules(rulePairs: (string | number)[], index: number): void;
+14
View File
@@ -0,0 +1,14 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.kebabRules = void 0;
var rules = {};
function kebabRules(rulePairs, index) {
var rule = rulePairs[index];
if (rule.charAt(0) !== '-') {
rulePairs[index] = rules[rule] = rules[rule] || rule.replace(/([A-Z])/g, '-$1').toLowerCase();
}
}
exports.kebabRules = kebabRules;
});
//# sourceMappingURL=kebabRules.js.map
@@ -0,0 +1 @@
{"version":3,"file":"kebabRules.js","sourceRoot":"../src/","sources":["transforms/kebabRules.ts"],"names":[],"mappings":";;;;IAAA,IAAM,KAAK,GAA8B,EAAE,CAAC;IAE5C,SAAgB,UAAU,CAAC,SAA8B,EAAE,KAAa;QACtE,IAAM,IAAI,GAAW,SAAS,CAAC,KAAK,CAAW,CAAC;QAEhD,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;YAC3B,SAAS,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;QAChG,CAAC;IACH,CAAC;IAND,gCAMC","sourcesContent":["const rules: { [key: string]: string } = {};\n\nexport function kebabRules(rulePairs: (string | number)[], index: number): void {\n const rule: string = rulePairs[index] as string;\n\n if (rule.charAt(0) !== '-') {\n rulePairs[index] = rules[rule] = rules[rule] || rule.replace(/([A-Z])/g, '-$1').toLowerCase();\n }\n}\n"]}
@@ -0,0 +1 @@
export declare function prefixRules(rulePairs: (string | number)[], index: number): void;
+31
View File
@@ -0,0 +1,31 @@
define(["require", "exports", "../getVendorSettings"], function (require, exports, getVendorSettings_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.prefixRules = void 0;
var autoPrefixNames = {
'user-select': 1,
};
function prefixRules(rulePairs, index) {
var vendorSettings = (0, getVendorSettings_1.getVendorSettings)();
var name = rulePairs[index];
if (autoPrefixNames[name]) {
var value = rulePairs[index + 1];
if (autoPrefixNames[name]) {
if (vendorSettings.isWebkit) {
rulePairs.push('-webkit-' + name, value);
}
if (vendorSettings.isMoz) {
rulePairs.push('-moz-' + name, value);
}
if (vendorSettings.isMs) {
rulePairs.push('-ms-' + name, value);
}
if (vendorSettings.isOpera) {
rulePairs.push('-o-' + name, value);
}
}
}
}
exports.prefixRules = prefixRules;
});
//# sourceMappingURL=prefixRules.js.map
@@ -0,0 +1 @@
{"version":3,"file":"prefixRules.js","sourceRoot":"../src/","sources":["transforms/prefixRules.ts"],"names":[],"mappings":";;;;IAEA,IAAM,eAAe,GAA8B;QACjD,aAAa,EAAE,CAAC;KACjB,CAAC;IAEF,SAAgB,WAAW,CAAC,SAA8B,EAAE,KAAa;QACvE,IAAM,cAAc,GAAG,IAAA,qCAAiB,GAAE,CAAC;QAE3C,IAAM,IAAI,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;QAE9B,IAAI,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC;YAC1B,IAAM,KAAK,GAAG,SAAS,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;YAEnC,IAAI,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC1B,IAAI,cAAc,CAAC,QAAQ,EAAE,CAAC;oBAC5B,SAAS,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,EAAE,KAAK,CAAC,CAAC;gBAC3C,CAAC;gBACD,IAAI,cAAc,CAAC,KAAK,EAAE,CAAC;oBACzB,SAAS,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,EAAE,KAAK,CAAC,CAAC;gBACxC,CAAC;gBACD,IAAI,cAAc,CAAC,IAAI,EAAE,CAAC;oBACxB,SAAS,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,EAAE,KAAK,CAAC,CAAC;gBACvC,CAAC;gBACD,IAAI,cAAc,CAAC,OAAO,EAAE,CAAC;oBAC3B,SAAS,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,EAAE,KAAK,CAAC,CAAC;gBACtC,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAvBD,kCAuBC","sourcesContent":["import { getVendorSettings } from '../getVendorSettings';\n\nconst autoPrefixNames: { [key: string]: number } = {\n 'user-select': 1,\n};\n\nexport function prefixRules(rulePairs: (string | number)[], index: number): void {\n const vendorSettings = getVendorSettings();\n\n const name = rulePairs[index];\n\n if (autoPrefixNames[name]) {\n const value = rulePairs[index + 1];\n\n if (autoPrefixNames[name]) {\n if (vendorSettings.isWebkit) {\n rulePairs.push('-webkit-' + name, value);\n }\n if (vendorSettings.isMoz) {\n rulePairs.push('-moz-' + name, value);\n }\n if (vendorSettings.isMs) {\n rulePairs.push('-ms-' + name, value);\n }\n if (vendorSettings.isOpera) {\n rulePairs.push('-o-' + name, value);\n }\n }\n }\n}\n"]}
@@ -0,0 +1 @@
export declare function provideUnits(rulePairs: (string | number)[], index: number): void;
+29
View File
@@ -0,0 +1,29 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.provideUnits = void 0;
var NON_PIXEL_NUMBER_PROPS = [
'column-count',
'font-weight',
'flex',
'flex-grow',
'flex-shrink',
'fill-opacity',
'opacity',
'order',
'z-index',
'zoom',
];
function provideUnits(rulePairs, index) {
var name = rulePairs[index];
var value = rulePairs[index + 1];
if (typeof value === 'number') {
var isNonPixelProp = NON_PIXEL_NUMBER_PROPS.indexOf(name) > -1;
var isVariableOrPrefixed = name.indexOf('--') > -1;
var unit = isNonPixelProp || isVariableOrPrefixed ? '' : 'px';
rulePairs[index + 1] = "".concat(value).concat(unit);
}
}
exports.provideUnits = provideUnits;
});
//# sourceMappingURL=provideUnits.js.map
@@ -0,0 +1 @@
{"version":3,"file":"provideUnits.js","sourceRoot":"../src/","sources":["transforms/provideUnits.ts"],"names":[],"mappings":";;;;IAAA,IAAM,sBAAsB,GAAG;QAC7B,cAAc;QACd,aAAa;QACb,MAAM;QACN,WAAW;QACX,aAAa;QACb,cAAc;QACd,SAAS;QACT,OAAO;QACP,SAAS;QACT,MAAM;KACP,CAAC;IAEF,SAAgB,YAAY,CAAC,SAA8B,EAAE,KAAa;QACxE,IAAM,IAAI,GAAG,SAAS,CAAC,KAAK,CAAW,CAAC;QACxC,IAAM,KAAK,GAAG,SAAS,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QAEnC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9B,IAAM,cAAc,GAAG,sBAAsB,CAAC,OAAO,CAAC,IAAc,CAAC,GAAG,CAAC,CAAC,CAAC;YAC3E,IAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;YACrD,IAAM,IAAI,GAAG,cAAc,IAAI,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YAEhE,SAAS,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,UAAG,KAAK,SAAG,IAAI,CAAE,CAAC;QAC3C,CAAC;IACH,CAAC;IAXD,oCAWC","sourcesContent":["const NON_PIXEL_NUMBER_PROPS = [\n 'column-count',\n 'font-weight',\n 'flex',\n 'flex-grow',\n 'flex-shrink',\n 'fill-opacity',\n 'opacity',\n 'order',\n 'z-index',\n 'zoom',\n];\n\nexport function provideUnits(rulePairs: (string | number)[], index: number): void {\n const name = rulePairs[index] as string;\n const value = rulePairs[index + 1];\n\n if (typeof value === 'number') {\n const isNonPixelProp = NON_PIXEL_NUMBER_PROPS.indexOf(name as string) > -1;\n const isVariableOrPrefixed = name.indexOf('--') > -1;\n const unit = isNonPixelProp || isVariableOrPrefixed ? '' : 'px';\n\n rulePairs[index + 1] = `${value}${unit}`;\n }\n}\n"]}
@@ -0,0 +1,6 @@
import { IStyleOptions } from '../IStyleOptions';
/**
* RTLifies the rulePair in the array at the current index. This mutates the array for performance
* reasons.
*/
export declare function rtlifyRules(options: IStyleOptions, rulePairs: (string | number)[], index: number): void;
+86
View File
@@ -0,0 +1,86 @@
define(["require", "exports"], function (require, exports) {
"use strict";
var _a;
Object.defineProperty(exports, "__esModule", { value: true });
exports.rtlifyRules = void 0;
var LEFT = 'left';
var RIGHT = 'right';
var NO_FLIP = '@noflip';
var NAME_REPLACEMENTS = (_a = {},
_a[LEFT] = RIGHT,
_a[RIGHT] = LEFT,
_a);
var VALUE_REPLACEMENTS = {
'w-resize': 'e-resize',
'sw-resize': 'se-resize',
'nw-resize': 'ne-resize',
};
/**
* RTLifies the rulePair in the array at the current index. This mutates the array for performance
* reasons.
*/
function rtlifyRules(options, rulePairs, index) {
if (options.rtl) {
var name_1 = rulePairs[index];
if (!name_1) {
return;
}
var value = rulePairs[index + 1];
if (typeof value === 'string' && value.indexOf(NO_FLIP) >= 0) {
rulePairs[index + 1] = value.replace(/\s*(?:\/\*\s*)?\@noflip\b(?:\s*\*\/)?\s*?/g, '');
}
else if (name_1.indexOf(LEFT) >= 0) {
rulePairs[index] = name_1.replace(LEFT, RIGHT);
}
else if (name_1.indexOf(RIGHT) >= 0) {
rulePairs[index] = name_1.replace(RIGHT, LEFT);
}
else if (String(value).indexOf(LEFT) >= 0) {
rulePairs[index + 1] = value.replace(LEFT, RIGHT);
}
else if (String(value).indexOf(RIGHT) >= 0) {
rulePairs[index + 1] = value.replace(RIGHT, LEFT);
}
else if (NAME_REPLACEMENTS[name_1]) {
rulePairs[index] = NAME_REPLACEMENTS[name_1];
}
else if (VALUE_REPLACEMENTS[value]) {
rulePairs[index + 1] = VALUE_REPLACEMENTS[value];
}
else {
switch (name_1) {
case 'margin':
case 'padding':
rulePairs[index + 1] = flipQuad(value);
break;
case 'box-shadow':
rulePairs[index + 1] = negateNum(value, 0);
break;
}
}
}
}
exports.rtlifyRules = rtlifyRules;
/**
* Given a string value in a space delimited format (e.g. "1 2 3 4"), negates a particular value.
*/
function negateNum(value, partIndex) {
var parts = value.split(' ');
var numberVal = parseInt(parts[partIndex], 10);
parts[0] = parts[0].replace(String(numberVal), String(numberVal * -1));
return parts.join(' ');
}
/**
* Given a string quad, flips the left and right values.
*/
function flipQuad(value) {
if (typeof value === 'string') {
var parts = value.split(' ');
if (parts.length === 4) {
return "".concat(parts[0], " ").concat(parts[3], " ").concat(parts[2], " ").concat(parts[1]);
}
}
return value;
}
});
//# sourceMappingURL=rtlifyRules.js.map
File diff suppressed because one or more lines are too long

Some files were not shown because too many files have changed in this diff Show More