@codingame/monaco-vscode-api 2.1.4 → 2.2.0-next.2

package/vscode/src/vs/workbench/contrib/mergeEditor/browser/view/editors/resultCodeEditorView.js

@@ -0,0 +1,195 @@
+import { __decorate, __param } from '../../../../../../../../../external/tslib/tslib.es6.js';
+import { reset } from '../../../../../../base/browser/dom.js';
+import { ActionBar } from '../../../../../../base/browser/ui/actionbar/actionbar.js';
+import { renderLabelWithIcons } from '../../../../../../base/browser/ui/iconLabel/iconLabels.js';
+import { CompareResult } from '../../../../../../base/common/arrays.js';
+import { BugIndicatingError } from '../../../../../../base/common/errors.js';
+import { toDisposable } from '../../../../../../base/common/lifecycle.js';
+import { MinimapPosition, OverviewRulerLane } from '../../../../../../editor/common/model.js';
+import { localizeWithPath } from '../../../../../../nls.js';
+import { MenuId } from '../../../../../../platform/actions/common/actions.js';
+import { IConfigurationService } from '../../../../../../platform/configuration/common/configuration.js';
+import { IContextKeyService } from '../../../../../../platform/contextkey/common/contextkey.js';
+import { IInstantiationService } from '../../../../../../platform/instantiation/common/instantiation.js';
+import { ILabelService } from '../../../../../../platform/label/common/label.js';
+import { LineRange } from '../../model/lineRange.js';
+import { join, applyObservableDecorations } from '../../utils.js';
+import { handledConflictMinimapOverViewRulerColor, unhandledConflictMinimapOverViewRulerColor } from '../colors.js';
+import { EditorGutter } from '../editorGutter.js';
+import { ctxIsMergeResultEditor } from '../../../common/mergeEditor.js';
+import { CodeEditorView, createSelectionsAutorun, TitleMenu } from './codeEditorView.js';
+import { derived } from '../../../../../../base/common/observableInternal/derived.js';
+import { autorunWithStore, autorun } from '../../../../../../base/common/observableInternal/autorun.js';
+let ResultCodeEditorView = class ResultCodeEditorView extends CodeEditorView {
+    constructor(viewModel, instantiationService, _labelService, configurationService) {
+        super(instantiationService, viewModel, configurationService);
+        this._labelService = _labelService;
+        this.decorations = derived(this, reader => {
+            const viewModel = this.viewModel.read(reader);
+            if (!viewModel) {
+                return [];
+            }
+            const model = viewModel.model;
+            const textModel = model.resultTextModel;
+            const result = ( new Array());
+            const baseRangeWithStoreAndTouchingDiffs = join(model.modifiedBaseRanges.read(reader), model.baseResultDiffs.read(reader), (baseRange, diff) => baseRange.baseRange.touches(diff.inputRange)
+                ? CompareResult.neitherLessOrGreaterThan
+                : LineRange.compareByStart(baseRange.baseRange, diff.inputRange));
+            const activeModifiedBaseRange = viewModel.activeModifiedBaseRange.read(reader);
+            const showNonConflictingChanges = viewModel.showNonConflictingChanges.read(reader);
+            for (const m of baseRangeWithStoreAndTouchingDiffs) {
+                const modifiedBaseRange = m.left;
+                if (modifiedBaseRange) {
+                    const blockClassNames = ['merge-editor-block'];
+                    let blockPadding = [0, 0, 0, 0];
+                    const isHandled = model.isHandled(modifiedBaseRange).read(reader);
+                    if (isHandled) {
+                        blockClassNames.push('handled');
+                    }
+                    if (modifiedBaseRange === activeModifiedBaseRange) {
+                        blockClassNames.push('focused');
+                        blockPadding = [0, 2, 0, 2];
+                    }
+                    if (modifiedBaseRange.isConflicting) {
+                        blockClassNames.push('conflicting');
+                    }
+                    blockClassNames.push('result');
+                    if (!modifiedBaseRange.isConflicting && !showNonConflictingChanges && isHandled) {
+                        continue;
+                    }
+                    const range = model.getLineRangeInResult(modifiedBaseRange.baseRange, reader);
+                    result.push({
+                        range: range.toInclusiveRangeOrEmpty(),
+                        options: {
+                            showIfCollapsed: true,
+                            blockClassName: blockClassNames.join(' '),
+                            blockPadding,
+                            blockIsAfterEnd: range.startLineNumber > textModel.getLineCount(),
+                            description: 'Result Diff',
+                            minimap: {
+                                position: MinimapPosition.Gutter,
+                                color: { id: isHandled ? handledConflictMinimapOverViewRulerColor : unhandledConflictMinimapOverViewRulerColor },
+                            },
+                            overviewRuler: modifiedBaseRange.isConflicting ? {
+                                position: OverviewRulerLane.Center,
+                                color: { id: isHandled ? handledConflictMinimapOverViewRulerColor : unhandledConflictMinimapOverViewRulerColor },
+                            } : undefined
+                        }
+                    });
+                }
+                if (!modifiedBaseRange || modifiedBaseRange.isConflicting) {
+                    for (const diff of m.rights) {
+                        const range = diff.outputRange.toInclusiveRange();
+                        if (range) {
+                            result.push({
+                                range,
+                                options: {
+                                    className: `merge-editor-diff result`,
+                                    description: 'Merge Editor',
+                                    isWholeLine: true,
+                                }
+                            });
+                        }
+                        if (diff.rangeMappings) {
+                            for (const d of diff.rangeMappings) {
+                                result.push({
+                                    range: d.outputRange,
+                                    options: {
+                                        className: `merge-editor-diff-word result`,
+                                        description: 'Merge Editor'
+                                    }
+                                });
+                            }
+                        }
+                    }
+                }
+            }
+            return result;
+        });
+        this.editor.invokeWithinContext(accessor => {
+            const contextKeyService = accessor.get(IContextKeyService);
+            const isMergeResultEditor = ctxIsMergeResultEditor.bindTo(contextKeyService);
+            isMergeResultEditor.set(true);
+            this._register(toDisposable(() => isMergeResultEditor.reset()));
+        });
+        this.htmlElements.gutterDiv.style.width = '5px';
+        this.htmlElements.root.classList.add(`result`);
+        this._register(autorunWithStore((reader, store) => {
+            if (this.checkboxesVisible.read(reader)) {
+                store.add(( new EditorGutter(this.editor, this.htmlElements.gutterDiv, {
+                    getIntersectingGutterItems: (range, reader) => [],
+                    createView: (item, target) => { throw new BugIndicatingError(); },
+                })));
+            }
+        }));
+        this._register(autorun(reader => {
+            const vm = this.viewModel.read(reader);
+            if (!vm) {
+                return;
+            }
+            this.editor.setModel(vm.model.resultTextModel);
+            reset(this.htmlElements.title, ...renderLabelWithIcons(( localizeWithPath(
+                'vs/workbench/contrib/mergeEditor/browser/view/editors/resultCodeEditorView',
+                'result',
+                'Result'
+            ))));
+            reset(this.htmlElements.description, ...renderLabelWithIcons(this._labelService.getUriLabel(vm.model.resultTextModel.uri, { relative: true })));
+        }));
+        const remainingConflictsActionBar = this._register(( new ActionBar(this.htmlElements.detail)));
+        this._register(autorun(reader => {
+            const vm = this.viewModel.read(reader);
+            if (!vm) {
+                return;
+            }
+            const model = vm.model;
+            if (!model) {
+                return;
+            }
+            const count = model.unhandledConflictsCount.read(reader);
+            const text = count === 1
+                ? ( localizeWithPath(
+                'vs/workbench/contrib/mergeEditor/browser/view/editors/resultCodeEditorView',
+                'mergeEditor.remainingConflicts',
+                '{0} Conflict Remaining',
+                count
+            ))
+                : ( localizeWithPath(
+                'vs/workbench/contrib/mergeEditor/browser/view/editors/resultCodeEditorView',
+                'mergeEditor.remainingConflict',
+                '{0} Conflicts Remaining ',
+                count
+            ));
+            remainingConflictsActionBar.clear();
+            remainingConflictsActionBar.push({
+                class: undefined,
+                enabled: count > 0,
+                id: 'nextConflict',
+                label: text,
+                run() {
+                    vm.model.telemetry.reportConflictCounterClicked();
+                    vm.goToNextModifiedBaseRange(m => !model.isHandled(m).get());
+                },
+                tooltip: count > 0
+                    ? ( localizeWithPath(
+                    'vs/workbench/contrib/mergeEditor/browser/view/editors/resultCodeEditorView',
+                    'goToNextConflict',
+                    'Go to next conflict'
+                ))
+                    : ( localizeWithPath(
+                    'vs/workbench/contrib/mergeEditor/browser/view/editors/resultCodeEditorView',
+                    'allConflictHandled',
+                    'All conflicts handled, the merge can be completed now.'
+                )),
+            });
+        }));
+        this._register(applyObservableDecorations(this.editor, this.decorations));
+        this._register(createSelectionsAutorun(this, (baseRange, viewModel) => viewModel.model.translateBaseRangeToResult(baseRange)));
+        this._register(instantiationService.createInstance(TitleMenu, MenuId.MergeInputResultToolbar, this.htmlElements.toolbar));
+    }
+};
+ResultCodeEditorView = ( __decorate([
+    ( __param(1, IInstantiationService)),
+    ( __param(2, ILabelService)),
+    ( __param(3, IConfigurationService))
+], ResultCodeEditorView));
+export { ResultCodeEditorView };

package/vscode/src/vs/workbench/contrib/mergeEditor/browser/view/fixedZoneWidget.js

@@ -0,0 +1,39 @@
+import { h } from '../../../../../base/browser/dom.js';
+import { Disposable } from '../../../../../base/common/lifecycle.js';
+import { Event } from '../../../../../base/common/event.js';
+class FixedZoneWidget extends Disposable {
+    static { this.counter = 0; }
+    constructor(editor, viewZoneAccessor, afterLineNumber, height, viewZoneIdsToCleanUp) {
+        super();
+        this.editor = editor;
+        this.overlayWidgetId = `fixedZoneWidget-${FixedZoneWidget.counter++}`;
+        this.widgetDomNode = h('div.fixed-zone-widget').root;
+        this.overlayWidget = {
+            getId: () => this.overlayWidgetId,
+            getDomNode: () => this.widgetDomNode,
+            getPosition: () => null
+        };
+        this.viewZoneId = viewZoneAccessor.addZone({
+            domNode: document.createElement('div'),
+            afterLineNumber: afterLineNumber,
+            heightInPx: height,
+            onComputedHeight: (height) => {
+                this.widgetDomNode.style.height = `${height}px`;
+            },
+            onDomNodeTop: (top) => {
+                this.widgetDomNode.style.top = `${top}px`;
+            }
+        });
+        viewZoneIdsToCleanUp.push(this.viewZoneId);
+        this._register(Event.runAndSubscribe(this.editor.onDidLayoutChange, () => {
+            this.widgetDomNode.style.left = this.editor.getLayoutInfo().contentLeft + 'px';
+        }));
+        this.editor.addOverlayWidget(this.overlayWidget);
+        this._register({
+            dispose: () => {
+                this.editor.removeOverlayWidget(this.overlayWidget);
+            },
+        });
+    }
+}
+export { FixedZoneWidget };

package/vscode/src/vs/workbench/contrib/mergeEditor/browser/view/lineAlignment.js

@@ -0,0 +1,126 @@
+import { compareBy } from '../../../../../base/common/arrays.js';
+import { assertFn, checkAdjacentItems } from '../../../../../base/common/assert.js';
+import { isDefined } from '../../../../../base/common/types.js';
+import { Position } from '../../../../../editor/common/core/position.js';
+import { Range } from '../../../../../editor/common/core/range.js';
+import { LengthObj } from '../../../../../editor/common/model/bracketPairsTextModelPart/bracketPairsTree/length.js';
+import { RangeMapping } from '../model/mapping.js';
+import { lengthOfRange, addLength, lengthBetweenPositions } from '../model/rangeUtils.js';
+function getAlignments(m) {
+    const equalRanges1 = toEqualRangeMappings(m.input1Diffs.flatMap(d => d.rangeMappings), m.baseRange.toRange(), m.input1Range.toRange());
+    const equalRanges2 = toEqualRangeMappings(m.input2Diffs.flatMap(d => d.rangeMappings), m.baseRange.toRange(), m.input2Range.toRange());
+    const commonRanges = splitUpCommonEqualRangeMappings(equalRanges1, equalRanges2);
+    let result = [];
+    result.push([m.input1Range.startLineNumber - 1, m.baseRange.startLineNumber - 1, m.input2Range.startLineNumber - 1]);
+    function isFullSync(lineAlignment) {
+        return lineAlignment.every((i) => i !== undefined);
+    }
+    for (const m of commonRanges) {
+        const lineAlignment = [m.output1Pos?.lineNumber, m.inputPos.lineNumber, m.output2Pos?.lineNumber];
+        const alignmentIsFullSync = isFullSync(lineAlignment);
+        let shouldAdd = true;
+        if (alignmentIsFullSync) {
+            const isNewFullSyncAlignment = !( result.some(r => isFullSync(r) && ( r.some((v, idx) => v !== undefined && v === lineAlignment[idx]))));
+            if (isNewFullSyncAlignment) {
+                result = result.filter(r => !( r.some((v, idx) => v !== undefined && v === lineAlignment[idx])));
+            }
+            shouldAdd = isNewFullSyncAlignment;
+        }
+        else {
+            const isNew = !( result.some(r => ( r.some((v, idx) => v !== undefined && v === lineAlignment[idx]))));
+            shouldAdd = isNew;
+        }
+        if (shouldAdd) {
+            result.push(lineAlignment);
+        }
+        else {
+            if (m.length.isGreaterThan(( new LengthObj(1, 0)))) {
+                result.push([
+                    m.output1Pos ? m.output1Pos.lineNumber + 1 : undefined,
+                    m.inputPos.lineNumber + 1,
+                    m.output2Pos ? m.output2Pos.lineNumber + 1 : undefined
+                ]);
+            }
+        }
+    }
+    const finalLineAlignment = [m.input1Range.endLineNumberExclusive, m.baseRange.endLineNumberExclusive, m.input2Range.endLineNumberExclusive];
+    result = result.filter(r => r.every((v, idx) => v !== finalLineAlignment[idx]));
+    result.push(finalLineAlignment);
+    assertFn(() => checkAdjacentItems(( result.map(r => r[0])).filter(isDefined), (a, b) => a < b)
+        && checkAdjacentItems(( result.map(r => r[1])).filter(isDefined), (a, b) => a <= b)
+        && checkAdjacentItems(( result.map(r => r[2])).filter(isDefined), (a, b) => a < b)
+        && result.every(alignment => alignment.filter(isDefined).length >= 2));
+    return result;
+}
+function toEqualRangeMappings(diffs, inputRange, outputRange) {
+    const result = [];
+    let equalRangeInputStart = inputRange.getStartPosition();
+    let equalRangeOutputStart = outputRange.getStartPosition();
+    for (const d of diffs) {
+        const equalRangeMapping = ( new RangeMapping(
+            Range.fromPositions(equalRangeInputStart, d.inputRange.getStartPosition()),
+            Range.fromPositions(equalRangeOutputStart, d.outputRange.getStartPosition())
+        ));
+        assertFn(() => lengthOfRange(equalRangeMapping.inputRange).equals(lengthOfRange(equalRangeMapping.outputRange)));
+        if (!equalRangeMapping.inputRange.isEmpty()) {
+            result.push(equalRangeMapping);
+        }
+        equalRangeInputStart = d.inputRange.getEndPosition();
+        equalRangeOutputStart = d.outputRange.getEndPosition();
+    }
+    const equalRangeMapping = ( new RangeMapping(
+        Range.fromPositions(equalRangeInputStart, inputRange.getEndPosition()),
+        Range.fromPositions(equalRangeOutputStart, outputRange.getEndPosition())
+    ));
+    assertFn(() => lengthOfRange(equalRangeMapping.inputRange).equals(lengthOfRange(equalRangeMapping.outputRange)));
+    if (!equalRangeMapping.inputRange.isEmpty()) {
+        result.push(equalRangeMapping);
+    }
+    return result;
+}
+function splitUpCommonEqualRangeMappings(equalRangeMappings1, equalRangeMappings2) {
+    const result = [];
+    const events = [];
+    for (const [input, rangeMappings] of [[0, equalRangeMappings1], [1, equalRangeMappings2]]) {
+        for (const rangeMapping of rangeMappings) {
+            events.push({
+                input: input,
+                start: true,
+                inputPos: rangeMapping.inputRange.getStartPosition(),
+                outputPos: rangeMapping.outputRange.getStartPosition()
+            });
+            events.push({
+                input: input,
+                start: false,
+                inputPos: rangeMapping.inputRange.getEndPosition(),
+                outputPos: rangeMapping.outputRange.getEndPosition()
+            });
+        }
+    }
+    events.sort(compareBy((m) => m.inputPos, Position.compare));
+    const starts = [undefined, undefined];
+    let lastInputPos;
+    for (const event of events) {
+        if (lastInputPos && ( starts.some(s => !!s))) {
+            const length = lengthBetweenPositions(lastInputPos, event.inputPos);
+            if (!length.isZero()) {
+                result.push({
+                    inputPos: lastInputPos,
+                    length,
+                    output1Pos: starts[0],
+                    output2Pos: starts[1]
+                });
+                if (starts[0]) {
+                    starts[0] = addLength(starts[0], length);
+                }
+                if (starts[1]) {
+                    starts[1] = addLength(starts[1], length);
+                }
+            }
+        }
+        starts[event.input] = event.start ? event.outputPos : undefined;
+        lastInputPos = event.inputPos;
+    }
+    return result;
+}
+export { getAlignments };

package/vscode/src/vs/workbench/contrib/mergeEditor/browser/view/media/mergeEditor.css.js

@@ -0,0 +1,4 @@
+import n from '../../../../../../../../../external/rollup-plugin-styles/dist/runtime/inject-css.js';
+var css = ".monaco-workbench .merge-editor .code-view>.header{align-content:center;display:flex;height:30px;overflow:hidden;padding:0 10px}.monaco-workbench .merge-editor .code-view>.header>span{align-self:center;overflow:hidden;padding-right:6px;text-overflow:ellipsis;white-space:nowrap}.monaco-workbench .merge-editor .code-view>.header>span.title{flex-shrink:0}.monaco-workbench .merge-editor .code-view>.header>span.description{align-items:center;color:var(--vscode-descriptionForeground);display:flex;flex-shrink:0;font-size:12px}.monaco-workbench .merge-editor .code-view.result>.header>.description{display:inline;flex-shrink:1}.monaco-workbench .merge-editor .code-view.result>.header>.detail,.monaco-workbench .merge-editor .code-view.result>.header>.toolbar{flex-shrink:0}.monaco-workbench .merge-editor .code-view>.header>span.description .codicon{color:var(--vscode-descriptionForeground);font-size:14px}.monaco-workbench .merge-editor .code-view>.header>span.detail{color:var(--vscode-descriptionForeground);font-size:12px;margin-left:auto}.monaco-workbench .merge-editor .code-view>.header>span.detail .codicon{font-size:13px}.monaco-workbench .merge-editor .code-view.input>.header>span.detail:before{content:\"•\";opacity:.5;padding-right:3px}.monaco-workbench .merge-editor .code-view.input>.header>span.detail{margin-left:0}.monaco-workbench .merge-editor .code-view.input>.header>span.toolbar{flex-shrink:0;margin-left:auto}.monaco-workbench .merge-editor .code-view>.container{display:flex;flex-direction:row}.monaco-workbench .merge-editor .code-view>.container>.gutter{flex-grow:0;flex-shrink:0;overflow:hidden;position:relative;width:24px}.monaco-workbench .merge-editor .merge-editor-diff{background-color:var(--vscode-mergeEditor-change-background)}.monaco-workbench .merge-editor .merge-editor-diff-word{background-color:var(--vscode-mergeEditor-change-word-background)}.monaco-workbench .merge-editor .merge-editor-block:not(.handled):not(.focused){border:1px solid var(--vscode-mergeEditor-conflict-unhandledUnfocused-border)}.monaco-workbench .merge-editor .merge-editor-block:not(.handled).focused{border:2px solid var(--vscode-mergeEditor-conflict-unhandledFocused-border)}.monaco-workbench .merge-editor .merge-editor-block.handled:not(.focused){border:1px solid var(--vscode-mergeEditor-conflict-handledUnfocused-border)}.monaco-workbench .merge-editor .merge-editor-block.handled.focused{border:1px solid var(--vscode-mergeEditor-conflict-handledFocused-border)}.merge-editor-block.use-simplified-decorations.input.i1,.monaco-workbench .merge-editor .merge-editor-simplified.input.i1{background-color:var(--vscode-mergeEditor-conflict-input1-background)}.merge-editor-block.use-simplified-decorations.input.i2,.monaco-workbench .merge-editor .merge-editor-simplified.input.i2{background-color:var(--vscode-mergeEditor-conflict-input2-background)}.gutter.monaco-editor>div{position:absolute}.merge-accept-gutter-marker{margin-left:4px;width:28px}.merge-accept-gutter-marker .background{height:100%;position:absolute;width:50%}.merge-accept-gutter-marker.multi-line.focused .background{border:2px solid var(--vscode-mergeEditor-conflict-unhandledFocused-border);border-right:0}.merge-accept-gutter-marker.multi-line .background{border:2px solid var(--vscode-mergeEditor-conflict-unhandledUnfocused-border);border-bottom-left-radius:3px;border-right:0;border-top-left-radius:3px}.merge-accept-gutter-marker.multi-line.handled.focused .background{border:2px solid var(--vscode-mergeEditor-conflict-handledFocused-border);border-right:0}.merge-accept-gutter-marker.multi-line.handled .background{border:2px solid var(--vscode-checkbox-border);border-right:0}.focused .accept-conflict-group.monaco-custom-toggle{border:1px solid var(--vscode-mergeEditor-conflict-unhandledFocused-border)}.accept-conflict-group.monaco-custom-toggle{border:1px solid var(--vscode-mergeEditor-conflict-unhandledUnfocused-border)}.handled.focused .accept-conflict-group.monaco-custom-toggle{border:1px solid var(--vscode-mergeEditor-conflict-handledFocused-border)}.handled .accept-conflict-group.monaco-custom-toggle{border:1px solid var(--vscode-checkbox-border)}.merge-accept-gutter-marker.multi-line .background{left:8px;width:10px}.merge-accept-gutter-marker .checkbox{position:absolute;width:100%}.accept-conflict-group.monaco-custom-toggle{background-color:var(--vscode-checkbox-border);background-size:16px!important;border-radius:3px;height:18px;margin-left:0;margin-right:0;opacity:1;padding:0;width:18px}.merge-accept-gutter-marker .checkbox-background{background:var(--vscode-editor-background);display:flex}.conflict-zone-root{align-content:center;align-items:center;background-color:var(--vscode-mergeEditor-change-background);border:1px solid var(--vscode-mergeEditor-conflict-unhandledUnfocused-border);display:flex;height:90%}.conflict-zone-root .dots{margin:0 10px}.conflict-zone-root pre{display:\"inline\";font-family:var(--monaco-monospace-font)}.conflict-zone-root .text{align-items:center;background:var(--vscode-mergeEditor-conflictingLines-background);display:flex;height:100%;margin-left:auto;overflow:hidden;padding:0 8px;white-space:nowrap}.focused.conflict-zone .conflict-zone-root{border:1px solid var(--vscode-mergeEditor-conflict-unhandledFocused-border)}.merge-editor-conflict-actions{color:var(--vscode-editorCodeLens-foreground);display:inline-block;margin:0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.merge-editor-conflict-actions>a,.merge-editor-conflict-actions>span{user-select:none;-webkit-user-select:none;white-space:nowrap}.merge-editor-conflict-actions>a{text-decoration:none}.merge-editor-conflict-actions>a:hover{cursor:pointer}.merge-editor-conflict-actions>a:hover,.merge-editor-conflict-actions>a:hover .codicon{color:var(--vscode-editorLink-activeForeground)!important}.merge-editor-conflict-actions .codicon{color:currentColor!important;color:var(--vscode-editorCodeLens-foreground);vertical-align:middle}.merge-editor-conflict-actions>a:hover .codicon:before{cursor:pointer}.fixed-zone-widget{width:100%}.merge-editor-diff-empty-word.base{border-left:3px solid var(--vscode-mergeEditor-changeBase-word-background);margin-left:3px}.merge-editor-diff-empty-word.input{border-left:3px solid var(--vscode-mergeEditor-change-word-background);margin-left:3px}.merge-editor-diff-word.base{background-color:var(--vscode-mergeEditor-changeBase-word-background)}.merge-editor-diff.base{background-color:var(--vscode-mergeEditor-changeBase-background)}";
+n(css,{});
+export { css, css as default };