├── .eslintignore ├── packages ├── tag-processor │ ├── src │ │ ├── index.ts │ │ └── types.ts │ ├── tsconfig.lib.json │ ├── .eslintrc.json │ ├── jest.config.js │ └── tsconfig.spec.json ├── transform │ ├── __fixtures__ │ │ ├── config-babel-options │ │ │ ├── code.ts │ │ │ ├── output.ts │ │ │ └── output.meta.json │ │ ├── error-on-undefined │ │ │ ├── tokens.ts │ │ │ └── fixture.ts │ │ ├── object-nesting │ │ │ ├── consts.ts │ │ │ ├── output.ts │ │ │ ├── output.meta.json │ │ │ └── code.ts │ │ ├── config-evaluation-rules │ │ │ ├── consts.ts │ │ │ ├── output.meta.json │ │ │ ├── output.ts │ │ │ └── code.ts │ │ ├── object-mixins │ │ │ ├── tokens.ts │ │ │ ├── code.ts │ │ │ └── output.ts │ │ ├── assets │ │ │ ├── blank.jpg │ │ │ ├── empty.jpg │ │ │ ├── output.meta.json │ │ │ ├── output.ts │ │ │ └── code.ts │ │ ├── function-mixin │ │ │ ├── tokens.ts │ │ │ ├── output.ts │ │ │ ├── code.ts │ │ │ ├── mixins.ts │ │ │ └── output.meta.json │ │ ├── object-imported-keys │ │ │ ├── consts.ts │ │ │ ├── output.ts │ │ │ ├── output.meta.json │ │ │ └── code.ts │ │ ├── object-variables │ │ │ ├── vars.ts │ │ │ ├── code.ts │ │ │ ├── output.ts │ │ │ └── output.meta.json │ │ ├── unsupported-css-properties │ │ │ ├── output.ts │ │ │ └── output.meta.json │ │ ├── import-alias │ │ │ ├── output.ts │ │ │ ├── code.ts │ │ │ └── output.meta.json │ │ ├── reset-styles │ │ │ ├── output.ts │ │ │ ├── code.ts │ │ │ └── output.meta.json │ │ ├── assets-reset-styles │ │ │ ├── blank.jpg │ │ │ ├── empty.jpg │ │ │ ├── output.ts │ │ │ ├── output.meta.json │ │ │ └── code.ts │ │ ├── reset-styles-at-rules │ │ │ ├── output.ts │ │ │ ├── code.ts │ │ │ └── output.meta.json │ │ ├── rules-with-metadata │ │ │ ├── output.ts │ │ │ ├── code.ts │ │ │ └── output.meta.json │ │ ├── assets-multiple-declarations │ │ │ ├── blank.jpg │ │ │ ├── empty.jpg │ │ │ ├── output.meta.json │ │ │ ├── output.ts │ │ │ └── code.ts │ │ ├── object-reset │ │ │ ├── output.meta.json │ │ │ ├── output.ts │ │ │ └── code.ts │ │ ├── tokens │ │ │ ├── tokens.ts │ │ │ ├── output.ts │ │ │ ├── code.ts │ │ │ └── output.meta.json │ │ ├── config-classname-hash-salt │ │ │ ├── code.ts │ │ │ ├── output.ts │ │ │ └── output.meta.json │ │ ├── import-custom-module │ │ │ ├── output.meta.json │ │ │ ├── output.ts │ │ │ └── code.ts │ │ ├── non-existing-module-call │ │ │ ├── output.meta.json │ │ │ ├── output.ts │ │ │ ├── code.ts │ │ │ └── module.ts │ │ ├── multiple-declarations │ │ │ ├── output.meta.json │ │ │ ├── output.ts │ │ │ └── code.ts │ │ ├── keyframes │ │ │ └── output.ts │ │ ├── object-sequence-expr │ │ │ ├── output.meta.json │ │ │ ├── output.ts │ │ │ └── code.ts │ │ ├── shared-mixins │ │ │ ├── code.ts │ │ │ ├── mixins.ts │ │ │ ├── output.meta.json │ │ │ └── output.ts │ │ ├── error-argument-count │ │ │ └── fixture.js │ │ ├── export-default │ │ │ ├── code.ts │ │ │ ├── output.ts │ │ │ └── output.meta.json │ │ ├── object │ │ │ ├── code.ts │ │ │ ├── output.ts │ │ │ └── output.meta.json │ │ ├── object-shorthands │ │ │ ├── code.ts │ │ │ ├── output.ts │ │ │ └── output.meta.json │ │ ├── object-computed-keys │ │ │ ├── code.ts │ │ │ ├── output.ts │ │ │ └── output.meta.json │ │ ├── at-rules │ │ │ ├── output.ts │ │ │ └── code.ts │ │ └── assets-urls │ │ │ └── output.ts │ ├── src │ │ ├── evaluation │ │ │ └── types.mts │ │ ├── types.mts │ │ └── index.mts │ └── CHANGELOG.md ├── webpack-extraction-plugin │ ├── __fixtures__ │ │ ├── webpack │ │ │ ├── empty │ │ │ │ ├── output.css │ │ │ │ ├── fs.json │ │ │ │ ├── output.ts │ │ │ │ └── code.ts │ │ │ ├── missing-calls │ │ │ │ ├── output.css │ │ │ │ ├── fs.json │ │ │ │ ├── code.ts │ │ │ │ └── output.ts │ │ │ ├── config-classname-hash-salt-empty │ │ │ │ ├── output.css │ │ │ │ ├── fs.json │ │ │ │ ├── code.ts │ │ │ │ └── output.ts │ │ │ ├── mixed │ │ │ │ ├── fs.json │ │ │ │ ├── output.css │ │ │ │ ├── code.ts │ │ │ │ └── output.ts │ │ │ ├── reset │ │ │ │ ├── fs.json │ │ │ │ ├── output.css │ │ │ │ ├── code.ts │ │ │ │ └── output.ts │ │ │ ├── basic-rules │ │ │ │ ├── fs.json │ │ │ │ └── output.css │ │ │ ├── multiple │ │ │ │ ├── fs.json │ │ │ │ └── output.css │ │ │ ├── reset-media │ │ │ │ ├── fs.json │ │ │ │ ├── output.css │ │ │ │ └── code.ts │ │ │ ├── style-buckets │ │ │ │ └── fs.json │ │ │ ├── assets │ │ │ │ ├── fs.json │ │ │ │ ├── output.css │ │ │ │ ├── blank.jpg │ │ │ │ ├── output.ts │ │ │ │ └── code.ts │ │ │ ├── rules-deduplication │ │ │ │ ├── fs.json │ │ │ │ └── output.css │ │ │ ├── with-chunks │ │ │ │ ├── chunkB.css │ │ │ │ ├── chunkA.css │ │ │ │ ├── fs.json │ │ │ │ ├── chunkA.ts │ │ │ │ ├── chunkB.ts │ │ │ │ └── output.css │ │ │ ├── config-classname-hash-salt │ │ │ │ ├── fs.json │ │ │ │ ├── output.css │ │ │ │ ├── output.ts │ │ │ │ └── code.ts │ │ │ ├── config-no-split-chunks │ │ │ │ ├── fs.json │ │ │ │ └── output.css │ │ │ ├── reset-assets │ │ │ │ ├── fs.json │ │ │ │ ├── output.css │ │ │ │ ├── blank.jpg │ │ │ │ ├── code.ts │ │ │ │ └── output.ts │ │ │ ├── with-css │ │ │ │ ├── fs.json │ │ │ │ ├── input.css │ │ │ │ ├── output.css │ │ │ │ └── code.ts │ │ │ ├── config-split-chunks │ │ │ │ ├── fs.json │ │ │ │ ├── output.css │ │ │ │ ├── chunkA.ts │ │ │ │ ├── chunkB.ts │ │ │ │ └── code.ts │ │ │ ├── unstable-keep-original-code │ │ │ │ ├── fs.json │ │ │ │ ├── output.css │ │ │ │ └── code.ts │ │ │ ├── assets-flip │ │ │ │ ├── fs.json │ │ │ │ ├── left.jpg │ │ │ │ ├── right.jpg │ │ │ │ ├── output.css │ │ │ │ ├── output.ts │ │ │ │ └── code.ts │ │ │ ├── config-name │ │ │ │ ├── fs.json │ │ │ │ ├── output.css │ │ │ │ └── code.ts │ │ │ ├── assets-multiple │ │ │ │ ├── fs.json │ │ │ │ ├── output.css │ │ │ │ ├── blank.jpg │ │ │ │ ├── empty.jpg │ │ │ │ ├── output.ts │ │ │ │ └── code.ts │ │ │ └── unstable-attach-to-main │ │ │ │ ├── fs.json │ │ │ │ ├── output.css │ │ │ │ ├── code.ts │ │ │ │ ├── output.ts │ │ │ │ └── codeB.ts │ │ └── babel │ │ │ ├── reset │ │ │ ├── output.ts │ │ │ └── code.ts │ │ │ ├── alias │ │ │ ├── output.ts │ │ │ └── code.ts │ │ │ ├── mixed │ │ │ ├── output.ts │ │ │ └── code.ts │ │ │ ├── multiple │ │ │ ├── output.ts │ │ │ └── code.ts │ │ │ └── basic │ │ │ └── output.ts │ ├── virtual-loader │ │ └── griffel.css │ ├── src │ │ ├── index.ts │ │ └── schema.ts │ ├── tsconfig.lib.json │ └── .eslintrc.json ├── jest-serializer │ ├── jest.setup.ts │ ├── tsconfig.lib.json │ ├── package.json │ └── .eslintrc.json ├── react │ ├── .storybook │ │ └── preview.js │ ├── bundle-size │ │ ├── __css.fixture.js │ │ ├── __styles.fixture.js │ │ ├── makeStyles.fixture.js │ │ ├── makeResetStyles.fixture.js │ │ └── makeStaticStyles.fixture.js │ ├── src │ │ ├── utils │ │ │ ├── canUseDOM.test.tsx │ │ │ ├── canUseDOM.ts │ │ │ └── canUseDOM-node.test.ts │ │ ├── useInsertionEffect.ts │ │ └── stories │ │ │ └── makeStyles.stories.tsx │ ├── .babelrc │ ├── tsconfig.storybook.json │ ├── jest.config.ts │ └── tsconfig.spec.json ├── shadow-dom │ ├── .storybook │ │ └── preview.js │ ├── src │ │ ├── index.ts │ │ └── types.ts │ ├── bundle-size │ │ └── createShadowDOMRenderer.fixture.js │ ├── .babelrc │ ├── jest.config.ts │ ├── .eslintrc.json │ ├── package.json │ ├── tsconfig.storybook.json │ └── tsconfig.spec.json ├── vite-plugin │ ├── src │ │ └── index.ts │ ├── __fixtures__ │ │ ├── aliases │ │ │ ├── color.ts │ │ │ ├── tokens.ts │ │ │ ├── index.html │ │ │ ├── output.ts │ │ │ └── code.ts │ │ └── object │ │ │ ├── tokens.ts │ │ │ ├── index.html │ │ │ └── code.ts │ ├── tsconfig.lib.json │ ├── .eslintrc.json │ └── package.json ├── babel-preset │ ├── __fixtures__ │ │ ├── error-on-undefined │ │ │ ├── tokens.ts │ │ │ └── fixture.ts │ │ ├── object-nesting │ │ │ ├── consts.ts │ │ │ └── code.ts │ │ ├── config-evaluation-rules │ │ │ ├── consts.ts │ │ │ ├── output.ts │ │ │ └── code.ts │ │ ├── object-mixins │ │ │ ├── tokens.ts │ │ │ └── code.ts │ │ ├── function-mixin │ │ │ ├── tokens.ts │ │ │ ├── code.ts │ │ │ ├── mixins.ts │ │ │ └── output.ts │ │ ├── assets │ │ │ ├── blank.jpg │ │ │ ├── empty.jpg │ │ │ └── code.ts │ │ ├── object-variables │ │ │ ├── vars.ts │ │ │ └── code.ts │ │ ├── object-imported-keys │ │ │ ├── consts.ts │ │ │ ├── code.ts │ │ │ └── output.ts │ │ ├── assets-reset-styles │ │ │ ├── blank.jpg │ │ │ ├── empty.jpg │ │ │ └── code.ts │ │ ├── assets-multiple-declarations │ │ │ ├── blank.jpg │ │ │ ├── empty.jpg │ │ │ ├── code.ts │ │ │ └── output.ts │ │ ├── error-config-babel-options │ │ │ └── fixture.ts │ │ ├── import-alias │ │ │ ├── code.ts │ │ │ └── output.ts │ │ ├── tokens │ │ │ ├── tokens.ts │ │ │ └── code.ts │ │ ├── unsupported-css-properties │ │ │ └── output.ts │ │ ├── reset-styles │ │ │ ├── code.ts │ │ │ └── output.ts │ │ ├── config-classname-hash-salt │ │ │ ├── code.ts │ │ │ └── output.ts │ │ ├── require-reset-styles │ │ │ ├── code.ts │ │ │ └── output.ts │ │ ├── shared-mixins │ │ │ ├── code.ts │ │ │ ├── mixins.ts │ │ │ └── output.ts │ │ ├── error-argument-count │ │ │ └── fixture.js │ │ ├── object │ │ │ └── code.ts │ │ ├── object-shorthands │ │ │ └── code.ts │ │ ├── import-custom-module │ │ │ ├── code.ts │ │ │ └── output.ts │ │ ├── multiple-declarations │ │ │ ├── code.ts │ │ │ └── output.ts │ │ ├── import-custom-name │ │ │ ├── code.ts │ │ │ └── output.ts │ │ ├── rules-with-metadata │ │ │ ├── code.ts │ │ │ └── output.ts │ │ ├── require │ │ │ ├── code.ts │ │ │ └── output.ts │ │ ├── non-existing-module-call │ │ │ ├── code.ts │ │ │ ├── output.ts │ │ │ └── module.ts │ │ ├── reset-styles-at-rules │ │ │ ├── code.ts │ │ │ └── output.ts │ │ ├── require-custom-module │ │ │ ├── code.ts │ │ │ └── output.ts │ │ ├── object-computed-keys │ │ │ └── code.ts │ │ ├── object-reset │ │ │ ├── code.ts │ │ │ └── output.ts │ │ ├── at-rules │ │ │ └── code.ts │ │ ├── object-sequence-expr │ │ │ ├── output.ts │ │ │ └── code.ts │ │ ├── config-babel-options │ │ │ ├── code.ts │ │ │ └── colorRenamePlugin.js │ │ └── duplicated-imports │ │ │ └── code.ts │ ├── tsconfig.lib.json │ └── src │ │ └── assets │ │ └── isAssetUrl.ts ├── webpack-loader │ ├── __fixtures__ │ │ ├── error-syntax │ │ │ ├── error.ts │ │ │ └── code.txt │ │ ├── webpack-aliases │ │ │ ├── color.ts │ │ │ ├── tokens.ts │ │ │ ├── code.ts │ │ │ └── output.ts │ │ ├── webpack-resolve-options │ │ │ ├── color.ts │ │ │ ├── code.ts │ │ │ └── output.ts │ │ ├── webpack-resolve-plugins │ │ │ ├── color.ts │ │ │ ├── fake-color.ts │ │ │ ├── tokens.ts │ │ │ ├── code.ts │ │ │ └── output.ts │ │ ├── webpack-inherit-resolve-options │ │ │ ├── color.jsx │ │ │ ├── code.ts │ │ │ └── output.ts │ │ ├── error-argument-count │ │ │ ├── error.ts │ │ │ └── code.ts │ │ ├── object │ │ │ ├── tokens.ts │ │ │ ├── code.ts │ │ │ └── output.ts │ │ ├── reset │ │ │ ├── tokens.ts │ │ │ ├── code.ts │ │ │ └── output.ts │ │ ├── error-config │ │ │ ├── error.ts │ │ │ └── code.ts │ │ ├── empty │ │ │ ├── code.ts │ │ │ └── output.ts │ │ ├── function │ │ │ ├── code.ts │ │ │ └── output.ts │ │ ├── config-classname-hash-salt │ │ │ ├── code.ts │ │ │ └── output.ts │ │ └── config-modules │ │ │ ├── code.ts │ │ │ └── output.ts │ ├── src │ │ └── index.ts │ ├── tsconfig.lib.json │ ├── .eslintrc.json │ └── jest.config.ts ├── eslint-plugin │ ├── .babelrc │ ├── src │ │ ├── utils │ │ │ └── getDocsUrl.ts │ │ └── configs │ │ │ └── recommended.ts │ ├── tsconfig.lib.json │ ├── .eslintrc.json │ ├── jest.config.ts │ ├── package.json │ └── tsconfig.spec.json ├── postcss-syntax │ ├── .babelrc │ ├── src │ │ ├── constants.ts │ │ ├── index.ts │ │ └── stringify.ts │ ├── tsconfig.lib.json │ ├── .eslintrc.json │ ├── jest.config.ts │ ├── package.json │ └── tsconfig.spec.json ├── devtools │ ├── public │ │ ├── content-script.js │ │ ├── icon16.png │ │ ├── icon48.png │ │ ├── icon128.png │ │ ├── devtools-page.html │ │ └── devtools-page.js │ ├── src │ │ ├── sourceMap │ │ │ └── index.ts │ │ └── ViewContext.ts │ ├── .storybook │ │ └── preview-head.html │ ├── .babelrc │ ├── package.json │ ├── webpack.config.js │ ├── jest.config.ts │ ├── jest.setup.js │ └── tsconfig.spec.json ├── style-types │ ├── .babelrc │ ├── src │ │ ├── legacy │ │ │ ├── README.md │ │ │ └── index.ts │ │ ├── index.ts │ │ └── shared.ts │ ├── README.md │ ├── jest.config.ts │ ├── .eslintrc.json │ ├── tsconfig.spec.json │ └── tsconfig.lib.json ├── next-extraction-plugin │ ├── src │ │ └── index.ts │ ├── tsconfig.lib.json │ ├── .eslintrc.json │ └── jest.config.ts ├── core │ ├── README.md │ ├── src │ │ ├── runtime │ │ │ ├── utils │ │ │ │ ├── types.ts │ │ │ │ ├── isLayerSelector.ts │ │ │ │ ├── isMediaQuerySelector.ts │ │ │ │ ├── isResetValue.ts │ │ │ │ ├── isSupportQuerySelector.ts │ │ │ │ ├── isContainerQuerySelector.ts │ │ │ │ ├── isNestedSelector.ts │ │ │ │ ├── trimSelector.ts │ │ │ │ ├── normalizeNestedProperty.ts │ │ │ │ ├── isObject.ts │ │ │ │ ├── generateCombinedMediaQuery.ts │ │ │ │ └── trimSelector.test.ts │ │ │ ├── warnings │ │ │ │ ├── logError.ts │ │ │ │ ├── logError-node.test.ts │ │ │ │ └── logError.test.ts │ │ │ ├── stylis │ │ │ │ ├── sortClassesInAtRulesPlugin.ts │ │ │ │ └── isAtRuleElement.ts │ │ │ └── compileStaticCSS.ts │ │ └── devtools │ │ │ ├── index.ts │ │ │ └── isDevToolsEnabled.ts │ ├── bundle-size │ │ ├── __styles.fixture.js │ │ ├── makeStyles.fixture.js │ │ ├── mergeClasses.fixture.js │ │ ├── shorthands.padding.fixture.js │ │ ├── __resetStyles.fixture.js │ │ └── makeResetStyles.fixture.js │ ├── .babelrc │ ├── jest.config.ts │ ├── tsconfig.spec.json │ └── tsconfig.lib.json └── webpack-plugin │ ├── tsconfig.lib.json │ └── src │ └── index.test.mts ├── babel.config.json ├── apps ├── benchmark │ ├── src │ │ ├── implementations │ │ │ ├── emotion │ │ │ │ ├── Provider.ts │ │ │ │ └── index.ts │ │ │ ├── css-modules │ │ │ │ ├── Provider.tsx │ │ │ │ ├── index.ts │ │ │ │ ├── View.tsx │ │ │ │ └── view-styles.css │ │ │ ├── styled-components │ │ │ │ ├── Provider.ts │ │ │ │ ├── index.ts │ │ │ │ └── View.tsx │ │ │ ├── griffel │ │ │ │ ├── Provider.tsx │ │ │ │ └── index.ts │ │ │ ├── griffel-reset │ │ │ │ ├── Provider.tsx │ │ │ │ └── index.ts │ │ │ ├── merge-styles-v7 │ │ │ │ ├── Provider.tsx │ │ │ │ └── index.ts │ │ │ ├── inline-styles │ │ │ │ ├── Provider.tsx │ │ │ │ └── index.ts │ │ │ ├── react-fela-with-plugins │ │ │ │ └── index.ts │ │ │ └── types.ts │ │ ├── components │ │ │ ├── index.ts │ │ │ └── Select.tsx │ │ └── index.tsx │ └── package.json └── website │ ├── docs │ └── react │ │ ├── api │ │ └── _category_.json │ │ ├── guides │ │ └── _category_.json │ │ ├── css-extraction │ │ └── _category_.json │ │ └── ahead-of-time-compilation │ │ └── _category_.json │ ├── static │ └── img │ │ └── griffel.png │ ├── babel.config.js │ ├── package.json │ ├── src │ ├── components │ │ ├── Playground │ │ │ ├── code │ │ │ │ ├── styles.js │ │ │ │ └── templates │ │ │ │ │ ├── make-reset-styles.js │ │ │ │ │ ├── global.js │ │ │ │ │ ├── nested.js │ │ │ │ │ ├── margin.js │ │ │ │ │ ├── padding.js │ │ │ │ │ ├── media.js │ │ │ │ │ ├── container.js │ │ │ │ │ ├── border.js │ │ │ │ │ ├── pseudo-elements.js │ │ │ │ │ └── pseudo-selectors.js │ │ │ └── webpackLoader.js │ │ └── OutputTitle │ │ │ └── index.tsx │ └── theme │ │ └── Footer │ │ └── index.tsx │ └── .eslintrc.json ├── ghdocs ├── images │ ├── griffel-dark.png │ └── griffel-light.png └── medias │ ├── fluentui-ep02-preview.gif │ └── fluentui-ep03-preview.gif ├── vitest.workspace.ts ├── e2e ├── rspack │ ├── src │ │ └── assets │ │ │ └── src │ │ │ ├── colors.js │ │ │ └── index.js │ ├── tsconfig.lib.json │ ├── README.md │ └── .eslintrc.json ├── typescript │ ├── README.md │ ├── src │ │ └── assets │ │ │ ├── tsconfig.fixture.json │ │ │ └── legacy │ │ │ └── tsconfig.fixture.json │ ├── tsconfig.lib.json │ └── .eslintrc.json ├── nextjs │ ├── README.md │ ├── tsconfig.lib.json │ ├── src │ │ └── snapshots │ │ │ └── output.css │ └── .eslintrc.json └── utils │ ├── tsconfig.lib.json │ ├── src │ ├── index.ts │ └── createTempDir.ts │ └── project.json ├── .devcontainer ├── Dockerfile └── devcontainer.json ├── typings ├── environment │ └── tsconfig.json ├── static-assets │ └── tsconfig.json └── tsconfig.json ├── .prettierignore ├── .prettierrc ├── .yarnrc.yml ├── jest.config.ts ├── .vscode └── extensions.json ├── tools └── update-shorthands │ ├── README.md │ ├── tsconfig.lib.json │ ├── src │ └── types.ts │ ├── .eslintrc.json │ └── jest.config.ts ├── change └── @griffel-webpack-plugin-initial.json ├── .editorconfig ├── .storybook ├── tsconfig.json └── main.js ├── beachball.config.js └── CODE_OF_CONDUCT.md /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | /packages/*/dist 3 | -------------------------------------------------------------------------------- /packages/tag-processor/src/index.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /babel.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "babelrcRoots": ["*"] 3 | } 4 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/config-babel-options/code.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/config-babel-options/output.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/empty/output.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/jest-serializer/jest.setup.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /packages/react/.storybook/preview.js: -------------------------------------------------------------------------------- 1 | export const tags = ['autodocs']; 2 | -------------------------------------------------------------------------------- /packages/shadow-dom/.storybook/preview.js: -------------------------------------------------------------------------------- 1 | export const tags = ['autodocs']; 2 | -------------------------------------------------------------------------------- /packages/vite-plugin/src/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from '@wyw-in-js/vite'; 2 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/missing-calls/output.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/vite-plugin/__fixtures__/aliases/color.ts: -------------------------------------------------------------------------------- 1 | export const blueColor = 'blue'; 2 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/empty/fs.json: -------------------------------------------------------------------------------- 1 | ["bundle.js"] 2 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/error-on-undefined/tokens.ts: -------------------------------------------------------------------------------- 1 | export const tokens = {}; 2 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/error-on-undefined/tokens.ts: -------------------------------------------------------------------------------- 1 | export const tokens = {}; 2 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object-nesting/consts.ts: -------------------------------------------------------------------------------- 1 | export const colorBlue = 'blue'; 2 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/object-nesting/consts.ts: -------------------------------------------------------------------------------- 1 | export const colorBlue = 'blue'; 2 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/missing-calls/fs.json: -------------------------------------------------------------------------------- 1 | ["bundle.js"] 2 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/config-evaluation-rules/consts.ts: -------------------------------------------------------------------------------- 1 | export const colorRed = 'red'; 2 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/config-evaluation-rules/consts.ts: -------------------------------------------------------------------------------- 1 | export const colorRed = 'red'; 2 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt-empty/output.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/mixed/fs.json: -------------------------------------------------------------------------------- 1 | ["bundle.js", "griffel.css"] 2 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/reset/fs.json: -------------------------------------------------------------------------------- 1 | ["bundle.js", "griffel.css"] 2 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/error-syntax/error.ts: -------------------------------------------------------------------------------- 1 | export default /Module build failed/; 2 | -------------------------------------------------------------------------------- /packages/webpack-loader/src/index.ts: -------------------------------------------------------------------------------- 1 | export { webpackLoader as default } from './webpackLoader'; 2 | -------------------------------------------------------------------------------- /packages/eslint-plugin/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [["@nx/js/babel", { "useBuiltIns": "usage" }]] 3 | } 4 | -------------------------------------------------------------------------------- /packages/postcss-syntax/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [["@nx/js/babel", { "useBuiltIns": "usage" }]] 3 | } 4 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/fs.json: -------------------------------------------------------------------------------- 1 | ["bundle.js", "griffel.css"] 2 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/multiple/fs.json: -------------------------------------------------------------------------------- 1 | ["bundle.js", "griffel.css"] 2 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/reset-media/fs.json: -------------------------------------------------------------------------------- 1 | ["bundle.js", "griffel.css"] 2 | -------------------------------------------------------------------------------- /apps/benchmark/src/implementations/emotion/Provider.ts: -------------------------------------------------------------------------------- 1 | import View from './View'; 2 | export default View; 3 | -------------------------------------------------------------------------------- /ghdocs/images/griffel-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/griffel/HEAD/ghdocs/images/griffel-dark.png -------------------------------------------------------------------------------- /packages/devtools/public/content-script.js: -------------------------------------------------------------------------------- 1 | window.sessionStorage.setItem('__GRIFFEL_DEVTOOLS__', 'enabled'); 2 | -------------------------------------------------------------------------------- /packages/devtools/src/sourceMap/index.ts: -------------------------------------------------------------------------------- 1 | export { loadOriginalSourceLoc } from './loadOriginalSourceLoc'; 2 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/missing-calls/code.ts: -------------------------------------------------------------------------------- 1 | export const foo = '__styles'; 2 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/style-buckets/fs.json: -------------------------------------------------------------------------------- 1 | ["bundle.js", "griffel.css"] 2 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/virtual-loader/griffel.css: -------------------------------------------------------------------------------- 1 | /** A fake CSS file, used for Rspack compat */ 2 | -------------------------------------------------------------------------------- /vitest.workspace.ts: -------------------------------------------------------------------------------- 1 | export default ['**/vite.config.{mjs,js,ts,mts}', '**/vitest.config.{mjs,js,ts,mts}']; 2 | -------------------------------------------------------------------------------- /apps/benchmark/src/implementations/css-modules/Provider.tsx: -------------------------------------------------------------------------------- 1 | import View from './View'; 2 | export default View; 3 | -------------------------------------------------------------------------------- /ghdocs/images/griffel-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/griffel/HEAD/ghdocs/images/griffel-light.png -------------------------------------------------------------------------------- /packages/style-types/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["annotate-pure-calls"], 3 | "presets": ["@nx/js/babel"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/style-types/src/legacy/README.md: -------------------------------------------------------------------------------- 1 | This folder contains types for legacy version of TypeScript (TS <4). 2 | -------------------------------------------------------------------------------- /packages/tag-processor/src/types.ts: -------------------------------------------------------------------------------- 1 | export type FileContext = { 2 | root: string; 3 | filename: string; 4 | }; 5 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/assets/fs.json: -------------------------------------------------------------------------------- 1 | ["blank.jpg", "bundle.js", "griffel.css"] 2 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt-empty/fs.json: -------------------------------------------------------------------------------- 1 | ["bundle.js"] 2 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/missing-calls/output.ts: -------------------------------------------------------------------------------- 1 | export const foo = '__styles'; 2 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/rules-deduplication/fs.json: -------------------------------------------------------------------------------- 1 | ["bundle.js", "griffel.css"] 2 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/chunkB.css: -------------------------------------------------------------------------------- 1 | .baz { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/webpack-aliases/color.ts: -------------------------------------------------------------------------------- 1 | const color = 'blue'; 2 | 3 | export default color; 4 | -------------------------------------------------------------------------------- /apps/benchmark/src/implementations/styled-components/Provider.ts: -------------------------------------------------------------------------------- 1 | import View from './View'; 2 | export default View; 3 | -------------------------------------------------------------------------------- /apps/website/docs/react/api/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "API", 3 | "collapsed": false, 4 | "position": 2 5 | } 6 | -------------------------------------------------------------------------------- /apps/website/static/img/griffel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/griffel/HEAD/apps/website/static/img/griffel.png -------------------------------------------------------------------------------- /e2e/rspack/src/assets/src/colors.js: -------------------------------------------------------------------------------- 1 | export const colors = { 2 | background: 'blue', 3 | foreground: 'red', 4 | }; 5 | -------------------------------------------------------------------------------- /packages/devtools/public/icon16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/griffel/HEAD/packages/devtools/public/icon16.png -------------------------------------------------------------------------------- /packages/devtools/public/icon48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/griffel/HEAD/packages/devtools/public/icon48.png -------------------------------------------------------------------------------- /packages/next-extraction-plugin/src/index.ts: -------------------------------------------------------------------------------- 1 | export { withGriffelCSSExtraction } from './lib/next-extraction-plugin'; 2 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt/fs.json: -------------------------------------------------------------------------------- 1 | ["bundle.js", "griffel.css"] 2 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/config-no-split-chunks/fs.json: -------------------------------------------------------------------------------- 1 | ["bundle.js", "griffel.css"] 2 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/fs.json: -------------------------------------------------------------------------------- 1 | ["blank.jpg", "bundle.js", "griffel.css"] 2 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/with-css/fs.json: -------------------------------------------------------------------------------- 1 | ["bundle.css", "bundle.js", "griffel.css"] 2 | -------------------------------------------------------------------------------- /apps/benchmark/src/implementations/griffel/Provider.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default React.Fragment; 4 | -------------------------------------------------------------------------------- /packages/devtools/public/icon128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/griffel/HEAD/packages/devtools/public/icon128.png -------------------------------------------------------------------------------- /packages/style-types/README.md: -------------------------------------------------------------------------------- 1 | # `@griffel/style-types` 2 | 3 | The package that contains types for Griffel's style system. 4 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/config-split-chunks/fs.json: -------------------------------------------------------------------------------- 1 | ["bundle.js", "griffel.css", "split.js"] 2 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-keep-original-code/fs.json: -------------------------------------------------------------------------------- 1 | ["bundle.js", "griffel.css"] 2 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/webpack-resolve-options/color.ts: -------------------------------------------------------------------------------- 1 | const color = 'blue'; 2 | 3 | export default color; 4 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/webpack-resolve-plugins/color.ts: -------------------------------------------------------------------------------- 1 | const color = 'blue'; 2 | 3 | export default color; 4 | -------------------------------------------------------------------------------- /.devcontainer/Dockerfile: -------------------------------------------------------------------------------- 1 | ARG VARIANT="20-bullseye" 2 | FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-${VARIANT} 3 | -------------------------------------------------------------------------------- /apps/benchmark/src/implementations/griffel-reset/Provider.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default React.Fragment; 4 | -------------------------------------------------------------------------------- /apps/website/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [require.resolve('@docusaurus/core/lib/babel/preset')], 3 | }; 4 | -------------------------------------------------------------------------------- /apps/website/docs/react/guides/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Guides", 3 | "collapsed": false, 4 | "position": 3 5 | } 6 | -------------------------------------------------------------------------------- /ghdocs/medias/fluentui-ep02-preview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/griffel/HEAD/ghdocs/medias/fluentui-ep02-preview.gif -------------------------------------------------------------------------------- /ghdocs/medias/fluentui-ep03-preview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/griffel/HEAD/ghdocs/medias/fluentui-ep03-preview.gif -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/assets-flip/fs.json: -------------------------------------------------------------------------------- 1 | ["bundle.js", "griffel.css", "left.jpg", "right.jpg"] 2 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/config-name/fs.json: -------------------------------------------------------------------------------- 1 | ["bundle.js", "griffel.6a29fbe5fff1646cc55d.css"] 2 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/webpack-resolve-plugins/fake-color.ts: -------------------------------------------------------------------------------- 1 | const color = 'red'; 2 | 3 | export default color; 4 | -------------------------------------------------------------------------------- /packages/vite-plugin/__fixtures__/object/tokens.ts: -------------------------------------------------------------------------------- 1 | export const tokens = { 2 | colorBrandStroke1: 'var(--colorBrandStroke1)', 3 | }; 4 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/fs.json: -------------------------------------------------------------------------------- 1 | ["blank.jpg", "bundle.js", "empty.jpg", "griffel.css"] 2 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-attach-to-main/fs.json: -------------------------------------------------------------------------------- 1 | ["bundle.js", "bundleB.js", "griffel.css"] 2 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/webpack-inherit-resolve-options/color.jsx: -------------------------------------------------------------------------------- 1 | const color = 'blue'; 2 | 3 | export default color; 4 | -------------------------------------------------------------------------------- /apps/benchmark/src/implementations/merge-styles-v7/Provider.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export default React.Fragment; 4 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object-mixins/tokens.ts: -------------------------------------------------------------------------------- 1 | export const tokens = { 2 | fontWeightRegular: 'var(--fontWeightRegular)', 3 | }; 4 | -------------------------------------------------------------------------------- /packages/vite-plugin/__fixtures__/aliases/tokens.ts: -------------------------------------------------------------------------------- 1 | export const tokens = { 2 | colorBrandStroke1: 'var(--colorBrandStroke1)', 3 | }; 4 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/error-argument-count/error.ts: -------------------------------------------------------------------------------- 1 | export default /makeStyles\(\) function accepts only a single param/; 2 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/object/tokens.ts: -------------------------------------------------------------------------------- 1 | export const tokens = { 2 | colorBrandStroke1: 'var(--colorBrandStroke1)', 3 | }; 4 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/reset/tokens.ts: -------------------------------------------------------------------------------- 1 | export const tokens = { 2 | colorBrandStroke1: 'var(--colorBrandStroke1)', 3 | }; 4 | -------------------------------------------------------------------------------- /typings/environment/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": {}, 4 | "include": ["*.d.ts"] 5 | } 6 | -------------------------------------------------------------------------------- /typings/static-assets/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": {}, 4 | "include": ["*.d.ts"] 5 | } 6 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Add files here to ignore them from prettier formatting 2 | 3 | /dist 4 | /coverage 5 | 6 | /.nx/cache 7 | /.nx/workspace-data -------------------------------------------------------------------------------- /apps/benchmark/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Select } from './Select'; 2 | export { default as ReportCard } from './ReportCard'; 3 | -------------------------------------------------------------------------------- /apps/website/docs/react/css-extraction/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "CSS extraction 🚧", 3 | "collapsed": false, 4 | "position": 5 5 | } 6 | -------------------------------------------------------------------------------- /e2e/typescript/README.md: -------------------------------------------------------------------------------- 1 | This test package was created to ensure that `@griffel/core` remains compatible with different Typescript versions. 2 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/object-mixins/tokens.ts: -------------------------------------------------------------------------------- 1 | export const tokens = { 2 | fontWeightRegular: 'var(--fontWeightRegular)', 3 | }; 4 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/config-babel-options/output.meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "usedProcessing": false, 3 | "usedVMForEvaluation": false 4 | } 5 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/with-css/input.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | color: red; 3 | } 4 | .bar { 5 | color: yellow; 6 | } 7 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/function-mixin/tokens.ts: -------------------------------------------------------------------------------- 1 | export const tokens = { 2 | colorBrandBackground: 'var(--colorBrandBackground)', 3 | }; 4 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/assets/blank.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/griffel/HEAD/packages/transform/__fixtures__/assets/blank.jpg -------------------------------------------------------------------------------- /packages/transform/__fixtures__/assets/empty.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/griffel/HEAD/packages/transform/__fixtures__/assets/empty.jpg -------------------------------------------------------------------------------- /packages/transform/__fixtures__/function-mixin/tokens.ts: -------------------------------------------------------------------------------- 1 | export const tokens = { 2 | colorBrandBackground: 'var(--colorBrandBackground)', 3 | }; 4 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/chunkA.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | color: red; 3 | } 4 | .bar { 5 | color: yellow; 6 | } 7 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/webpack-aliases/tokens.ts: -------------------------------------------------------------------------------- 1 | export const tokens = { 2 | colorBrandStroke1: 'var(--colorBrandStroke1)', 3 | }; 4 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "printWidth": 120, 4 | "singleQuote": true, 5 | "tabWidth": 2, 6 | "trailingComma": "all" 7 | } 8 | -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | compressionLevel: mixed 2 | 3 | enableGlobalCache: false 4 | 5 | nodeLinker: node-modules 6 | 7 | yarnPath: .yarn/releases/yarn-4.3.1.cjs 8 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/assets/blank.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/griffel/HEAD/packages/babel-preset/__fixtures__/assets/blank.jpg -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/assets/empty.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/griffel/HEAD/packages/babel-preset/__fixtures__/assets/empty.jpg -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/object-variables/vars.ts: -------------------------------------------------------------------------------- 1 | export const colorGreen = 'green'; 2 | 3 | export const theme = { 4 | black: '#000', 5 | }; 6 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object-imported-keys/consts.ts: -------------------------------------------------------------------------------- 1 | export const className = 'component-foo'; 2 | export const selector = '& .component-bar'; 3 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object-variables/vars.ts: -------------------------------------------------------------------------------- 1 | export const colorGreen = 'green'; 2 | 3 | export const theme = { 4 | black: '#000', 5 | }; 6 | -------------------------------------------------------------------------------- /packages/vite-plugin/__fixtures__/aliases/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/vite-plugin/__fixtures__/object/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/assets/output.css: -------------------------------------------------------------------------------- 1 | /** griffel.css **/ 2 | .fnwsaxv { 3 | background-image: url(blank.jpg); 4 | } 5 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/webpack-resolve-plugins/tokens.ts: -------------------------------------------------------------------------------- 1 | export const tokens = { 2 | colorBrandStroke1: 'var(--colorBrandStroke1)', 3 | }; 4 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/object-imported-keys/consts.ts: -------------------------------------------------------------------------------- 1 | export const className = 'component-foo'; 2 | export const selector = '& .component-bar'; 3 | -------------------------------------------------------------------------------- /packages/transform/src/evaluation/types.mts: -------------------------------------------------------------------------------- 1 | export interface EvaluationResult { 2 | confident: boolean; 3 | value?: unknown; 4 | error?: Error; 5 | } 6 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/config-name/output.css: -------------------------------------------------------------------------------- 1 | /** griffel.6a29fbe5fff1646cc55d.css **/ 2 | .fe3e8s9 { 3 | color: red; 4 | } 5 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/fs.json: -------------------------------------------------------------------------------- 1 | ["bundle.js", "chunkA.css", "chunkA.js", "chunkB.css", "chunkB.js", "griffel.css"] 2 | -------------------------------------------------------------------------------- /apps/website/docs/react/ahead-of-time-compilation/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Ahead-of-time compilation", 3 | "collapsed": false, 4 | "position": 4 5 | } 6 | -------------------------------------------------------------------------------- /jest.config.ts: -------------------------------------------------------------------------------- 1 | const { getJestProjectsAsync } = require('@nx/jest'); 2 | 3 | export default async () => ({ 4 | projects: await getJestProjectsAsync(), 5 | }); 6 | -------------------------------------------------------------------------------- /packages/core/README.md: -------------------------------------------------------------------------------- 1 | # `@griffel/core` 2 | 3 | DOM implementation of Griffel. Do not use this package directly, please use [`@griffel/react`](../react) instead. 4 | -------------------------------------------------------------------------------- /packages/core/src/runtime/utils/types.ts: -------------------------------------------------------------------------------- 1 | export type AtRules = { 2 | container: string; 3 | media: string; 4 | layer: string; 5 | supports: string; 6 | }; 7 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/unsupported-css-properties/output.ts: -------------------------------------------------------------------------------- 1 | import { __css } from '@griffel/react'; 2 | 3 | export const useStyles = __css({ root: {} }); 4 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/output.css: -------------------------------------------------------------------------------- 1 | /** griffel.css **/ 2 | .ra9m047 { 3 | background-image: url(blank.jpg); 4 | } 5 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/error-config/error.ts: -------------------------------------------------------------------------------- 1 | export default /Loader has been initialized using an options object that does not match the API schema/; 2 | -------------------------------------------------------------------------------- /packages/core/src/runtime/utils/isLayerSelector.ts: -------------------------------------------------------------------------------- 1 | export function isLayerSelector(property: string): boolean { 2 | return property.substr(0, 6) === '@layer'; 3 | } 4 | -------------------------------------------------------------------------------- /packages/react/bundle-size/__css.fixture.js: -------------------------------------------------------------------------------- 1 | import { __css } from '@griffel/react'; 2 | 3 | console.log(__css); 4 | 5 | export default { 6 | name: '__css', 7 | }; 8 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/import-alias/output.ts: -------------------------------------------------------------------------------- 1 | import { __css } from '@griffel/react'; 2 | 3 | export const useStyles = __css({ root: { sj55zd: 'fe3e8s9' } }); 4 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/reset-styles/output.ts: -------------------------------------------------------------------------------- 1 | import { __resetCSS } from '@griffel/react'; 2 | 3 | export const useStyles = __resetCSS('rjefjbm', 'r7z97ji'); 4 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/empty/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | export const useStyles = makeStyles({ 4 | root: {}, 5 | }); 6 | -------------------------------------------------------------------------------- /e2e/rspack/src/assets/src/index.js: -------------------------------------------------------------------------------- 1 | // @ts-expect-error It's a fake module resolved via aliases 2 | import { Component } from 'fake-module'; 3 | 4 | console.log(Component); 5 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/assets-reset-styles/blank.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/griffel/HEAD/packages/transform/__fixtures__/assets-reset-styles/blank.jpg -------------------------------------------------------------------------------- /packages/transform/__fixtures__/assets-reset-styles/empty.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/griffel/HEAD/packages/transform/__fixtures__/assets-reset-styles/empty.jpg -------------------------------------------------------------------------------- /packages/transform/__fixtures__/reset-styles-at-rules/output.ts: -------------------------------------------------------------------------------- 1 | import { __resetCSS } from '@griffel/react'; 2 | 3 | export const useStyles = __resetCSS('rjrhw4c', null); 4 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/assets-reset-styles/blank.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/griffel/HEAD/packages/babel-preset/__fixtures__/assets-reset-styles/blank.jpg -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/assets-reset-styles/empty.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/griffel/HEAD/packages/babel-preset/__fixtures__/assets-reset-styles/empty.jpg -------------------------------------------------------------------------------- /packages/core/src/runtime/utils/isMediaQuerySelector.ts: -------------------------------------------------------------------------------- 1 | export function isMediaQuerySelector(property: string): boolean { 2 | return property.substr(0, 6) === '@media'; 3 | } 4 | -------------------------------------------------------------------------------- /packages/react/bundle-size/__styles.fixture.js: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | 3 | console.log(__styles); 4 | 5 | export default { 6 | name: '__styles', 7 | }; 8 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/rules-with-metadata/output.ts: -------------------------------------------------------------------------------- 1 | import { __css } from '@griffel/react'; 2 | 3 | export const useStyles = __css({ media: { Bn3jx5e: 'ful25cn' } }); 4 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/unsupported-css-properties/output.meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "usedProcessing": true, 3 | "usedVMForEvaluation": false, 4 | "cssRulesByBucket": {} 5 | } 6 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/output.css: -------------------------------------------------------------------------------- 1 | /** griffel.css **/ 2 | .fp00rh9 { 3 | background-image: url(blank.jpg), url(empty.jpg); 4 | } 5 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/error-config/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | export const useStyles = makeStyles({ root: { color: 'red' } }); 4 | -------------------------------------------------------------------------------- /apps/benchmark/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@griffel/benchmark", 3 | "description": "Performance benchmarking app for Griffel", 4 | "private": true, 5 | "dependencies": {} 6 | } 7 | -------------------------------------------------------------------------------- /packages/core/src/runtime/utils/isResetValue.ts: -------------------------------------------------------------------------------- 1 | import { RESET } from '../../constants'; 2 | 3 | export function isResetValue(value: unknown) { 4 | return value === RESET; 5 | } 6 | -------------------------------------------------------------------------------- /packages/core/src/runtime/utils/isSupportQuerySelector.ts: -------------------------------------------------------------------------------- 1 | export function isSupportQuerySelector(property: string): boolean { 2 | return property.substr(0, 9) === '@supports'; 3 | } 4 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt-empty/code.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | 3 | export { __styles as useStyles }; 4 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/function/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | export const styles = makeStyles({ 4 | root: { color: 'red' }, 5 | }); 6 | -------------------------------------------------------------------------------- /packages/core/bundle-size/__styles.fixture.js: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/core'; 2 | 3 | console.log(__styles); 4 | 5 | export default { 6 | name: '__styles (makeStyles)', 7 | }; 8 | -------------------------------------------------------------------------------- /packages/shadow-dom/src/index.ts: -------------------------------------------------------------------------------- 1 | export { createShadowDOMRenderer } from './createShadowDOMRenderer'; 2 | export type { ExtendedCSSStyleSheet, GriffelShadowDOMRenderer } from './types'; 3 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/assets-multiple-declarations/blank.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/griffel/HEAD/packages/transform/__fixtures__/assets-multiple-declarations/blank.jpg -------------------------------------------------------------------------------- /packages/transform/__fixtures__/assets-multiple-declarations/empty.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/griffel/HEAD/packages/transform/__fixtures__/assets-multiple-declarations/empty.jpg -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/empty/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles, __css as _css } from '@griffel/react'; 2 | export const useStyles = _css({ 3 | root: {}, 4 | }); 5 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/empty/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | export const useStyles = __styles( 3 | { 4 | root: {}, 5 | }, 6 | {}, 7 | ); 8 | -------------------------------------------------------------------------------- /packages/core/bundle-size/makeStyles.fixture.js: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/core'; 2 | 3 | console.log(makeStyles); 4 | 5 | export default { 6 | name: 'makeStyles (runtime)', 7 | }; 8 | -------------------------------------------------------------------------------- /packages/core/bundle-size/mergeClasses.fixture.js: -------------------------------------------------------------------------------- 1 | import { mergeClasses } from '@griffel/core'; 2 | 3 | console.log(mergeClasses); 4 | 5 | export default { 6 | name: 'mergeClasses', 7 | }; 8 | -------------------------------------------------------------------------------- /packages/core/src/runtime/utils/isContainerQuerySelector.ts: -------------------------------------------------------------------------------- 1 | export function isContainerQuerySelector(property: string): boolean { 2 | return property.substring(0, 10) === '@container'; 3 | } 4 | -------------------------------------------------------------------------------- /packages/core/src/runtime/utils/isNestedSelector.ts: -------------------------------------------------------------------------------- 1 | const regex = /^(:|\[|>|&)/; 2 | 3 | export function isNestedSelector(property: string): boolean { 4 | return regex.test(property); 5 | } 6 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/assets/blank.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/griffel/HEAD/packages/webpack-extraction-plugin/__fixtures__/webpack/assets/blank.jpg -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt-empty/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles, __css as _css } from '@griffel/react'; 2 | export { __styles as useStyles }; 3 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-attach-to-main/output.css: -------------------------------------------------------------------------------- 1 | /** griffel.css **/ 2 | .fe3e8s9 { 3 | color: red; 4 | } 5 | .faf35ka:hover { 6 | color: red; 7 | } 8 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/assets-multiple-declarations/blank.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/griffel/HEAD/packages/babel-preset/__fixtures__/assets-multiple-declarations/blank.jpg -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/assets-multiple-declarations/empty.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/griffel/HEAD/packages/babel-preset/__fixtures__/assets-multiple-declarations/empty.jpg -------------------------------------------------------------------------------- /packages/react/bundle-size/makeStyles.fixture.js: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | console.log(makeStyles); 4 | 5 | export default { 6 | name: 'makeStyles (runtime)', 7 | }; 8 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/config-split-chunks/output.css: -------------------------------------------------------------------------------- 1 | /** griffel.css **/ 2 | .fcnqdeg { 3 | background-color: green; 4 | } 5 | .fe3e8s9 { 6 | color: red; 7 | } 8 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/rules-deduplication/output.css: -------------------------------------------------------------------------------- 1 | /** griffel.css **/ 2 | .fe3e8s9 { 3 | color: red; 4 | } 5 | .fcnqdeg { 6 | background-color: green; 7 | } 8 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/error-config-babel-options/fixture.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | export const useStyles = makeStyles({ 4 | root: { color: 'red' }, 5 | }); 6 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/import-alias/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles as createStyles } from '@griffel/react'; 2 | 3 | export const useStyles = createStyles({ 4 | root: { color: 'red' }, 5 | }); 6 | -------------------------------------------------------------------------------- /packages/core/bundle-size/shorthands.padding.fixture.js: -------------------------------------------------------------------------------- 1 | import { shorthands } from '@griffel/core'; 2 | 3 | console.log(shorthands); 4 | 5 | export default { 6 | name: 'shorthands.padding()', 7 | }; 8 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/import-alias/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles as createStyles } from '@griffel/react'; 2 | 3 | export const useStyles = createStyles({ 4 | root: { color: 'red' }, 5 | }); 6 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/assets-flip/left.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/griffel/HEAD/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-flip/left.jpg -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/assets-flip/right.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/griffel/HEAD/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-flip/right.jpg -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "nrwl.angular-console", 4 | "esbenp.prettier-vscode", 5 | "firsttris.vscode-jest-runner", 6 | "dbaeumer.vscode-eslint" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/tokens/tokens.ts: -------------------------------------------------------------------------------- 1 | export const tokens = { 2 | colorPaletteBlueBorder2: 'var(--colorPaletteBlueBorder2)', 3 | colorBrandBackground: 'var(--colorBrandBackground)', 4 | }; 5 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/unsupported-css-properties/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | export const useStyles = __styles( 3 | { 4 | root: {}, 5 | }, 6 | {}, 7 | ); 8 | -------------------------------------------------------------------------------- /packages/eslint-plugin/src/utils/getDocsUrl.ts: -------------------------------------------------------------------------------- 1 | export const getDocsUrl = (ruleName: string): string => 2 | `https://github.com/microsoft/griffel/tree/main/packages/eslint-plugin/src/rules/${ruleName}.md`; 3 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/import-alias/output.meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "usedProcessing": true, 3 | "usedVMForEvaluation": false, 4 | "cssRulesByBucket": { 5 | "d": [".fe3e8s9{color:red;}"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object-reset/output.meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "usedProcessing": true, 3 | "usedVMForEvaluation": true, 4 | "cssRulesByBucket": { 5 | "d": [".fe3e8s9{color:red;}"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/reset-styles/code.ts: -------------------------------------------------------------------------------- 1 | import { makeResetStyles } from '@griffel/react'; 2 | 3 | export const useStyles = makeResetStyles({ 4 | color: 'red', 5 | paddingLeft: '4px', 6 | }); 7 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/tokens/tokens.ts: -------------------------------------------------------------------------------- 1 | export const customTokens = { 2 | colorPaletteBlueBorder2: 'var(--colorPaletteBlueBorder2)', 3 | colorBrandBackground: 'var(--colorBrandBackground)', 4 | }; 5 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/babel/reset/output.ts: -------------------------------------------------------------------------------- 1 | import { __resetStyles, __resetCSS as _resetCSS } from '@griffel/react'; 2 | export const useClassName = _resetCSS('rjefjbm', 'r7z97ji'); 3 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/empty/code.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | 3 | export const useStyles = __styles( 4 | { 5 | root: {}, 6 | }, 7 | {}, 8 | ); 9 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/blank.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/griffel/HEAD/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/blank.jpg -------------------------------------------------------------------------------- /apps/website/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@griffel/website", 3 | "description": "Docusaurus has update notifier that checks presence of package.json file, if it's missing it throws", 4 | "private": true 5 | } 6 | -------------------------------------------------------------------------------- /e2e/nextjs/README.md: -------------------------------------------------------------------------------- 1 | This test package was created to ensure that CSS extraction remains compatible with Next.js. 2 | 3 | The test uses `@griffel/next-extraction-plugin` and the recommended config from our docs. 4 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/reset-styles/code.ts: -------------------------------------------------------------------------------- 1 | import { makeResetStyles } from '@griffel/react'; 2 | 3 | export const useStyles = makeResetStyles({ 4 | color: 'red', 5 | paddingLeft: '4px', 6 | }); 7 | -------------------------------------------------------------------------------- /packages/core/bundle-size/__resetStyles.fixture.js: -------------------------------------------------------------------------------- 1 | import { __resetStyles } from '@griffel/core'; 2 | 3 | console.log(__resetStyles); 4 | 5 | export default { 6 | name: '__resetStyles (makeResetStyles)', 7 | }; 8 | -------------------------------------------------------------------------------- /packages/core/bundle-size/makeResetStyles.fixture.js: -------------------------------------------------------------------------------- 1 | import { makeResetStyles } from '@griffel/core'; 2 | 3 | console.log(makeResetStyles); 4 | 5 | export default { 6 | name: 'makeResetStyles (runtime)', 7 | }; 8 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/blank.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/griffel/HEAD/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/blank.jpg -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/empty.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/griffel/HEAD/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/empty.jpg -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/src/index.ts: -------------------------------------------------------------------------------- 1 | export { GriffelCSSExtractionPlugin } from './GriffelCSSExtractionPlugin'; 2 | export type { GriffelCSSExtractionPluginOptions } from './GriffelCSSExtractionPlugin'; 3 | -------------------------------------------------------------------------------- /apps/benchmark/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { App } from './App'; 4 | import './App.css'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | -------------------------------------------------------------------------------- /e2e/utils/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "types": ["node", "environment"] 6 | }, 7 | "include": ["**/*.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/config-classname-hash-salt/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | export const useStyles = makeStyles({ 4 | root: { color: 'red', paddingLeft: '4px' }, 5 | }); 6 | -------------------------------------------------------------------------------- /packages/devtools/.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /packages/react/bundle-size/makeResetStyles.fixture.js: -------------------------------------------------------------------------------- 1 | import { makeResetStyles } from '@griffel/react'; 2 | 3 | console.log(makeResetStyles); 4 | 5 | export default { 6 | name: 'makeResetStyles (runtime)', 7 | }; 8 | -------------------------------------------------------------------------------- /packages/react/src/utils/canUseDOM.test.tsx: -------------------------------------------------------------------------------- 1 | import { canUseDOM } from './canUseDOM'; 2 | 3 | describe('canUseDOM', () => { 4 | it('returns "true"', () => { 5 | expect(canUseDOM()).toBe(true); 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/config-classname-hash-salt/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | export const useStyles = makeStyles({ 4 | root: { color: 'red', paddingLeft: '4px' }, 5 | }); 6 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/config-classname-hash-salt/output.ts: -------------------------------------------------------------------------------- 1 | import { __css } from '@griffel/react'; 2 | 3 | export const useStyles = __css({ root: { sj55zd: 'feohi3x', uwmqm3: ['f1rwgqon', 'f1tyzn0d'] } }); 4 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/import-custom-module/output.meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "usedProcessing": true, 3 | "usedVMForEvaluation": false, 4 | "cssRulesByBucket": { 5 | "d": [".fe3e8s9{color:red;}"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/config-classname-hash-salt/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | export const styles = makeStyles({ 4 | root: { color: 'red', paddingLeft: '10px' }, 5 | }); 6 | -------------------------------------------------------------------------------- /packages/react/bundle-size/makeStaticStyles.fixture.js: -------------------------------------------------------------------------------- 1 | import { makeStaticStyles } from '@griffel/react'; 2 | 3 | console.log(makeStaticStyles); 4 | 5 | export default { 6 | name: 'makeStaticStyles (runtime)', 7 | }; 8 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/config-evaluation-rules/output.meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "usedProcessing": true, 3 | "usedVMForEvaluation": true, 4 | "cssRulesByBucket": { 5 | "d": [".f163i14w{color:blue;}"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/config-evaluation-rules/output.ts: -------------------------------------------------------------------------------- 1 | import { __css } from '@griffel/react'; 2 | import { colorRed } from './consts'; 3 | 4 | export const useStyles = __css({ root: { sj55zd: 'f163i14w' } }); 5 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/non-existing-module-call/output.meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "usedProcessing": true, 3 | "usedVMForEvaluation": false, 4 | "cssRulesByBucket": { 5 | "d": [".fe3e8s9{color:red;}"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/core/src/runtime/utils/trimSelector.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Trims selectors to generate consistent hashes. 3 | */ 4 | export function trimSelector(selector: string): string { 5 | return selector.replace(/>\s+/g, '>'); 6 | } 7 | -------------------------------------------------------------------------------- /packages/devtools/public/devtools-page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /apps/benchmark/src/implementations/css-modules/index.ts: -------------------------------------------------------------------------------- 1 | import Box from './Box'; 2 | import Provider from './Provider'; 3 | import View from './View'; 4 | 5 | export default { 6 | Box, 7 | Provider, 8 | View, 9 | }; 10 | -------------------------------------------------------------------------------- /packages/core/src/runtime/warnings/logError.ts: -------------------------------------------------------------------------------- 1 | export function logError(...args: unknown[]): void { 2 | if (process.env.NODE_ENV !== 'production' && typeof document !== 'undefined') { 3 | console.error(...args); 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/reset/output.css: -------------------------------------------------------------------------------- 1 | /** griffel.css **/ 2 | .rjefjbm { 3 | color: red; 4 | padding-left: 4px; 5 | } 6 | .r7z97ji { 7 | color: red; 8 | padding-right: 4px; 9 | } 10 | -------------------------------------------------------------------------------- /packages/devtools/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@nx/react/babel", 5 | { 6 | "runtime": "classic", 7 | "useBuiltIns": "usage" 8 | } 9 | ] 10 | ], 11 | "plugins": [] 12 | } 13 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/object/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | import { tokens } from './tokens'; 3 | 4 | export const styles = makeStyles({ 5 | root: { color: tokens.colorBrandStroke1 }, 6 | }); 7 | -------------------------------------------------------------------------------- /e2e/nextjs/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "types": ["node", "environment"] 6 | }, 7 | "include": ["**/*.ts", "**/*.tsx", "**/*.js"] 8 | } 9 | -------------------------------------------------------------------------------- /e2e/rspack/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "types": ["node", "environment"] 6 | }, 7 | "include": ["**/*.ts", "**/*.tsx", "**/*.js"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/require-reset-styles/code.ts: -------------------------------------------------------------------------------- 1 | const react_make_styles_1 = require('@griffel/react'); 2 | 3 | export const useStyles = react_make_styles_1.makeResetStyles({ 4 | fontSize: '14px', 5 | lineHeight: 1, 6 | }); 7 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/multiple-declarations/output.meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "usedProcessing": true, 3 | "usedVMForEvaluation": false, 4 | "cssRulesByBucket": { 5 | "d": [".fka9v86{color:green;}", ".fe3e8s9{color:red;}"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/error-syntax/code.txt: -------------------------------------------------------------------------------- 1 | // This file is .txt intentionally to avoid Prettier formatting 2 | import { makeStyles } from '@griffel/react'; 3 | 4 | const styles = makeStyles({ 5 | root: { color: 'red' }, 6 | } 7 | -------------------------------------------------------------------------------- /e2e/rspack/README.md: -------------------------------------------------------------------------------- 1 | This test package was created to ensure that AOT & CSS extraction remains compatible with Rspack. 2 | 3 | The test uses `@griffel/webpack-loader` & `@griffel/webpack-extraction-plugin` and the recommended config from our docs. 4 | -------------------------------------------------------------------------------- /packages/react/src/utils/canUseDOM.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Verifies if an application can use DOM. 3 | */ 4 | export function canUseDOM(): boolean { 5 | return typeof window !== 'undefined' && !!(window.document && window.document.createElement); 6 | } 7 | -------------------------------------------------------------------------------- /packages/shadow-dom/bundle-size/createShadowDOMRenderer.fixture.js: -------------------------------------------------------------------------------- 1 | import { createShadowDOMRenderer } from '@griffel/shadow-dom'; 2 | 3 | console.log(createShadowDOMRenderer); 4 | 5 | export default { 6 | name: 'createShadowDOMRenderer', 7 | }; 8 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/keyframes/output.ts: -------------------------------------------------------------------------------- 1 | import { __css } from '@griffel/react'; 2 | 3 | export const useStyles = __css({ 4 | single: { Bv12yb3: ['f1g6ul6r', 'f1fp4ujf'] }, 5 | multiple: { Bv12yb3: ['f1e467oh', 'f1w9bd63'] }, 6 | }); 7 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/multiple-declarations/output.ts: -------------------------------------------------------------------------------- 1 | import { __css } from '@griffel/react'; 2 | 3 | export const useStyles1 = __css({ root: { sj55zd: 'fe3e8s9' } }); 4 | export const useStyles2 = __css({ root: { sj55zd: 'fka9v86' } }); 5 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object-imported-keys/output.ts: -------------------------------------------------------------------------------- 1 | import { __css } from '@griffel/react'; 2 | import { className, selector } from './consts'; 3 | 4 | export const useStyles = __css({ root: { B0egftl: 'f1wgwx3x', qhv8v2: 'fglt6ox' } }); 5 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/babel/alias/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles as _styles, __css as _css } from '@griffel/react'; 2 | export const useStyles = /*#__PURE__*/ _css({ 3 | root: { 4 | sj55zd: 'fe3e8s9', 5 | }, 6 | }); 7 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/with-css/output.css: -------------------------------------------------------------------------------- 1 | /** bundle.css **/ 2 | .foo { 3 | color: red; 4 | } 5 | .bar { 6 | color: yellow; 7 | } 8 | 9 | /** griffel.css **/ 10 | .fe3e8s9 { 11 | color: red; 12 | } 13 | -------------------------------------------------------------------------------- /e2e/typescript/src/assets/tsconfig.fixture.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["ES2019", "dom"], 4 | "isolatedModules": true, 5 | "moduleResolution": "node", 6 | "types": [] 7 | }, 8 | "include": ["*.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/shared-mixins/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | import { sharedStyles } from './mixins'; 3 | 4 | export const useStyles = makeStyles({ 5 | ...sharedStyles, 6 | icon: { color: 'red' }, 7 | }); 8 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object-sequence-expr/output.meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "usedProcessing": true, 3 | "usedVMForEvaluation": true, 4 | "cssRulesByBucket": { 5 | "h": [".f1cm6cy7:hover .fui-Switch:before{background-color:red;}"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/shared-mixins/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | import { sharedStyles } from './mixins'; 3 | 4 | export const useStyles = makeStyles({ 5 | ...sharedStyles, 6 | icon: { color: 'red' }, 7 | }); 8 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/shared-mixins/mixins.ts: -------------------------------------------------------------------------------- 1 | import type { GriffelStyle } from '@griffel/core'; 2 | 3 | export const sharedStyles: Record = { 4 | root: { display: 'flex' }, 5 | container: { display: 'grid' }, 6 | }; 7 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/assets-flip/output.css: -------------------------------------------------------------------------------- 1 | /** griffel.css **/ 2 | .ftcbn0w { 3 | background-image: url(left.jpg), url(right.jpg); 4 | } 5 | .f37sp7w { 6 | background-image: url(right.jpg), url(left.jpg); 7 | } 8 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/webpack-resolve-options/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | import color from './color'; 3 | 4 | export const styles = makeStyles({ 5 | root: { 6 | backgroundColor: color, 7 | }, 8 | }); 9 | -------------------------------------------------------------------------------- /e2e/typescript/src/assets/legacy/tsconfig.fixture.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["ES2019", "dom"], 4 | "isolatedModules": true, 5 | "moduleResolution": "node", 6 | "types": [] 7 | }, 8 | "include": ["*.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/error-argument-count/fixture.js: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | // This file is .js intentionally to avoid TS compiler errors 4 | export const useStyles = makeStyles({ root: { color: 'red' } }, 'foo'); 5 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/shared-mixins/mixins.ts: -------------------------------------------------------------------------------- 1 | import type { GriffelStyle } from '@griffel/core'; 2 | 3 | export const sharedStyles: Record = { 4 | root: { display: 'flex' }, 5 | container: { display: 'grid' }, 6 | }; 7 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/error-argument-count/fixture.js: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | // This file is .js intentionally to avoid TS compiler errors 4 | export const useStyles = makeStyles({ root: { color: 'red' } }, 'foo'); 5 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/export-default/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | export default makeStyles({ 4 | root: { color: 'red', paddingLeft: '4px' }, 5 | icon: { backgroundColor: 'green', marginLeft: '4px' }, 6 | }); 7 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/function-mixin/output.ts: -------------------------------------------------------------------------------- 1 | import { __css } from '@griffel/react'; 2 | import { createMixin } from './mixins'; 3 | 4 | export const useStyles = __css({ avatar: { sj55zd: 'f1817uup', mc9l5x: 'ftgm304', abs64n: 'fk73vx1' } }); 5 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | export const useStyles = makeStyles({ 4 | root: { color: 'red', paddingLeft: '4px' }, 5 | icon: { backgroundColor: 'green', marginLeft: '4px' }, 6 | }); 7 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt/output.css: -------------------------------------------------------------------------------- 1 | /** griffel.css **/ 2 | .feohi3x { 3 | color: red; 4 | } 5 | .f1rwgqon { 6 | padding-left: 4px; 7 | } 8 | .f1tyzn0d { 9 | padding-right: 4px; 10 | } 11 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/error-argument-count/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | // @ts-expect-error Invalid arguments for "makeStyles" function 4 | export const useStyles = makeStyles({ root: { color: 'red' } }, 'foo'); 5 | -------------------------------------------------------------------------------- /tools/update-shorthands/README.md: -------------------------------------------------------------------------------- 1 | This script updates `packages/core/src/runtime/shorthands.ts` file with MDN data that matches current verison of `csstype`. 2 | 3 | ### Usage 4 | 5 | ```sh 6 | yarn nx run @griffel/update-shorthands:generate 7 | ``` 8 | 9 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/function-mixin/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | import { createMixin } from './mixins'; 3 | 4 | export const useStyles = makeStyles({ 5 | avatar: createMixin({ display: 'block', opacity: '0' }), 6 | }); 7 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/object/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | export const useStyles = makeStyles({ 4 | root: { color: 'red', paddingLeft: '4px' }, 5 | icon: { backgroundColor: 'green', marginLeft: '4px' }, 6 | }); 7 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/require-reset-styles/output.ts: -------------------------------------------------------------------------------- 1 | const react_make_styles_1 = require('@griffel/react'); 2 | export const useStyles = react_make_styles_1.__resetStyles('r1qlvv59', null, [ 3 | '.r1qlvv59{font-size:14px;line-height:1;}', 4 | ]); 5 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/function-mixin/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | import { createMixin } from './mixins'; 3 | 4 | export const useStyles = makeStyles({ 5 | avatar: createMixin({ display: 'block', opacity: '0' }), 6 | }); 7 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/import-custom-module/output.ts: -------------------------------------------------------------------------------- 1 | // @ts-expect-error This module does not exist, but will be resolved via aliases 2 | import { __css } from 'custom-package'; 3 | 4 | export const useStyles = __css({ root: { sj55zd: 'fe3e8s9' } }); 5 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/non-existing-module-call/output.ts: -------------------------------------------------------------------------------- 1 | import { __css } from '@griffel/react'; 2 | import { createModule } from './module'; 3 | 4 | export const useStyles = __css({ container: { sj55zd: 'fe3e8s9' } }); 5 | 6 | createModule().baz(); 7 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/shared-mixins/output.meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "usedProcessing": true, 3 | "usedVMForEvaluation": true, 4 | "cssRulesByBucket": { 5 | "d": [".f22iagw{display:flex;}", ".f13qh94s{display:grid;}", ".fe3e8s9{color:red;}"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/reset/code.ts: -------------------------------------------------------------------------------- 1 | import { makeResetStyles } from '@griffel/react'; 2 | import { tokens } from './tokens'; 3 | 4 | export const useStyles = makeResetStyles({ 5 | color: tokens.colorBrandStroke1, 6 | paddingLeft: '4px', 7 | }); 8 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/webpack-inherit-resolve-options/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | import color from './color'; 3 | 4 | export const styles = makeStyles({ 5 | root: { 6 | backgroundColor: color, 7 | }, 8 | }); 9 | -------------------------------------------------------------------------------- /packages/core/src/runtime/utils/normalizeNestedProperty.ts: -------------------------------------------------------------------------------- 1 | export function normalizeNestedProperty(nestedProperty: string): string { 2 | if (nestedProperty.charAt(0) === '&') { 3 | return nestedProperty.slice(1); 4 | } 5 | 6 | return nestedProperty; 7 | } 8 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/assets-multiple-declarations/output.meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "usedProcessing": true, 3 | "usedVMForEvaluation": true, 4 | "cssRulesByBucket": { 5 | "d": [".f1a1fmuf{background-image:url(./blank.jpg),url(./empty.jpg);}"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/assets-multiple-declarations/output.ts: -------------------------------------------------------------------------------- 1 | import { __css } from '@griffel/react'; 2 | 3 | import blank from './blank.jpg'; 4 | import empty from './empty.jpg'; 5 | 6 | export const useStyles = __css({ root: { Bcmaq0h: 'f1a1fmuf' } }); 7 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/reset-styles/output.meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "usedProcessing": true, 3 | "usedVMForEvaluation": false, 4 | "cssRulesByBucket": { 5 | "r": [".rjefjbm{color:red;padding-left:4px;}", ".r7z97ji{color:red;padding-right:4px;}"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /apps/benchmark/src/implementations/emotion/index.ts: -------------------------------------------------------------------------------- 1 | import Box from './Box'; 2 | import Dot from './Dot'; 3 | import Provider from './Provider'; 4 | import View from './View'; 5 | 6 | export default { 7 | Box, 8 | Dot, 9 | Provider, 10 | View, 11 | }; 12 | -------------------------------------------------------------------------------- /apps/benchmark/src/implementations/griffel/index.ts: -------------------------------------------------------------------------------- 1 | import Box from './Box'; 2 | import View from './View'; 3 | import Dot from './Dot'; 4 | import Provider from './Provider'; 5 | 6 | export default { 7 | Box, 8 | View, 9 | Dot, 10 | Provider, 11 | }; 12 | -------------------------------------------------------------------------------- /apps/benchmark/src/implementations/inline-styles/Provider.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const InlineStylesProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { 4 | return <>{children}; 5 | }; 6 | 7 | export default InlineStylesProvider; 8 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/object-shorthands/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | export const useStyles = makeStyles({ 4 | root: { 5 | borderRight: `5px solid red /* @noflip */`, 6 | borderBottom: `5px solid red`, 7 | }, 8 | }); 9 | -------------------------------------------------------------------------------- /packages/core/src/runtime/utils/isObject.ts: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 2 | export function isObject(val: any): val is Record { 3 | return val != null && typeof val === 'object' && Array.isArray(val) === false; 4 | } 5 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/export-default/output.ts: -------------------------------------------------------------------------------- 1 | import { __css } from '@griffel/react'; 2 | 3 | export default __css({ 4 | root: { sj55zd: 'fe3e8s9', uwmqm3: ['fycuoez', 'f8wuabp'] }, 5 | icon: { De3pzq: 'fcnqdeg', Frg6f3: ['fjf1xye', 'f8zmjen'] }, 6 | }); 7 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object-imported-keys/output.meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "usedProcessing": true, 3 | "usedVMForEvaluation": true, 4 | "cssRulesByBucket": { 5 | "d": [".f1wgwx3x .component-bar{color:red;}", ".fglt6ox .component-foo{color:blue;}"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object-shorthands/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | export const useStyles = makeStyles({ 4 | root: { 5 | borderRight: `5px solid red /* @noflip */`, 6 | borderBottom: `5px solid red`, 7 | }, 8 | }); 9 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object-shorthands/output.ts: -------------------------------------------------------------------------------- 1 | import { __css } from '@griffel/react'; 2 | 3 | export const useStyles = __css({ 4 | root: { h3c5rm: 0, vrafjx: 0, Bekrc4i: 0, u1mtju: 'fq3r367', B9xav0g: 0, oivjwe: 0, Bn0qgzm: 0, Bgfg5da: 'f171p8tk' }, 5 | }); 6 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object/output.ts: -------------------------------------------------------------------------------- 1 | import { __css } from '@griffel/react'; 2 | 3 | export const useStyles = __css({ 4 | root: { sj55zd: 'fe3e8s9', uwmqm3: ['fycuoez', 'f8wuabp'] }, 5 | icon: { De3pzq: 'fcnqdeg', Frg6f3: ['fjf1xye', 'f8zmjen'] }, 6 | }); 7 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/mixed/output.css: -------------------------------------------------------------------------------- 1 | /** griffel.css **/ 2 | .rjefjbm { 3 | color: red; 4 | padding-left: 4px; 5 | } 6 | .r7z97ji { 7 | color: red; 8 | padding-right: 4px; 9 | } 10 | .fe3e8s9 { 11 | color: red; 12 | } 13 | -------------------------------------------------------------------------------- /apps/benchmark/src/implementations/griffel-reset/index.ts: -------------------------------------------------------------------------------- 1 | import Box from './Box'; 2 | import View from './View'; 3 | import Dot from './Dot'; 4 | import Provider from './Provider'; 5 | 6 | export default { 7 | Box, 8 | View, 9 | Dot, 10 | Provider, 11 | }; 12 | -------------------------------------------------------------------------------- /apps/benchmark/src/implementations/inline-styles/index.ts: -------------------------------------------------------------------------------- 1 | import Box from './Box'; 2 | import View from './View'; 3 | import Dot from './Dot'; 4 | import Provider from './Provider'; 5 | 6 | export default { 7 | Box, 8 | View, 9 | Dot, 10 | Provider, 11 | }; 12 | -------------------------------------------------------------------------------- /apps/benchmark/src/implementations/merge-styles-v7/index.ts: -------------------------------------------------------------------------------- 1 | import Box from './Box'; 2 | import View from './View'; 3 | import Dot from './Dot'; 4 | import Provider from './Provider'; 5 | 6 | export default { 7 | Box, 8 | View, 9 | Dot, 10 | Provider, 11 | }; 12 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/import-custom-module/code.ts: -------------------------------------------------------------------------------- 1 | // @ts-expect-error This module does not exist, but will be resolved via aliases 2 | import { makeStyles } from 'custom-package'; 3 | 4 | export const useStyles = makeStyles({ 5 | root: { color: 'red' }, 6 | }); 7 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/multiple-declarations/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | export const useStyles1 = makeStyles({ 4 | root: { color: 'red' }, 5 | }); 6 | export const useStyles2 = makeStyles({ 7 | root: { color: 'green' }, 8 | }); 9 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/reset-styles/output.ts: -------------------------------------------------------------------------------- 1 | import { __resetStyles } from '@griffel/react'; 2 | export const useStyles = __resetStyles('rjefjbm', 'r7z97ji', [ 3 | '.rjefjbm{color:red;padding-left:4px;}', 4 | '.r7z97ji{color:red;padding-right:4px;}', 5 | ]); 6 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/import-custom-module/code.ts: -------------------------------------------------------------------------------- 1 | // @ts-expect-error This module does not exist, but will be resolved via aliases 2 | import { makeStyles } from 'custom-package'; 3 | 4 | export const useStyles = makeStyles({ 5 | root: { color: 'red' }, 6 | }); 7 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/multiple-declarations/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | export const useStyles1 = makeStyles({ 4 | root: { color: 'red' }, 5 | }); 6 | export const useStyles2 = makeStyles({ 7 | root: { color: 'green' }, 8 | }); 9 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/rules-with-metadata/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | export const useStyles = makeStyles({ 4 | media: { 5 | '@media screen and (max-width: 100px)': { 6 | color: 'red', 7 | }, 8 | }, 9 | }); 10 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/code.ts: -------------------------------------------------------------------------------- 1 | import _asset from './blank.jpg'; 2 | import { __resetStyles } from '@griffel/react'; 3 | 4 | export const useClassName = __resetStyles('ra9m047', null, [`.ra9m047{background-image:url(${_asset});}`]); 5 | -------------------------------------------------------------------------------- /apps/benchmark/src/implementations/styled-components/index.ts: -------------------------------------------------------------------------------- 1 | import Box from './Box'; 2 | import Dot from './Dot'; 3 | import Provider from './Provider'; 4 | import View from './View'; 5 | 6 | export default { 7 | Box, 8 | Dot, 9 | Provider, 10 | View, 11 | }; 12 | -------------------------------------------------------------------------------- /change/@griffel-webpack-plugin-initial.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "minor", 3 | "comment": "feat: create @griffel/webpack-plugin package with boilerplate", 4 | "packageName": "@griffel/webpack-plugin", 5 | "email": "copilot@microsoft.com", 6 | "dependentChangeType": "patch" 7 | } 8 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/import-custom-name/code.ts: -------------------------------------------------------------------------------- 1 | // @ts-expect-error This module does not exist, but will be resolved via aliases 2 | import { createStyles } from 'custom-package'; 3 | 4 | export const useStyles = createStyles({ 5 | root: { color: 'red' }, 6 | }); 7 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/rules-with-metadata/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | export const useStyles = makeStyles({ 4 | media: { 5 | '@media screen and (max-width: 100px)': { 6 | color: 'red', 7 | }, 8 | }, 9 | }); 10 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object-nesting/output.ts: -------------------------------------------------------------------------------- 1 | import { __css } from '@griffel/react'; 2 | import { colorBlue } from './consts'; 3 | 4 | export const useStyles = __css({ 5 | root: { mc9l5x: 'f22iagw', Bi91k9c: 'faf35ka', Bb9khzn: 'f17t1d3d', Btk3f3y: 'fh8e7tb' }, 6 | }); 7 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/config-modules/code.ts: -------------------------------------------------------------------------------- 1 | // @ts-expect-error This is a fake module, will be resolved by Webpack aliases 2 | import { makeStyles } from 'react-make-styles'; 3 | 4 | export const styles = makeStyles({ 5 | root: { backgroundColor: 'red' }, 6 | }); 7 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/function/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | export const styles = __styles( 3 | { 4 | root: { 5 | sj55zd: 'fe3e8s9', 6 | }, 7 | }, 8 | { 9 | d: ['.fe3e8s9{color:red;}'], 10 | }, 11 | ); 12 | -------------------------------------------------------------------------------- /apps/benchmark/src/implementations/react-fela-with-plugins/index.ts: -------------------------------------------------------------------------------- 1 | import Box from './Box'; 2 | import Dot from './Dot'; 3 | import Provider from './Provider'; 4 | import View from './View'; 5 | 6 | export default { 7 | Box, 8 | Dot, 9 | Provider, 10 | View, 11 | }; 12 | -------------------------------------------------------------------------------- /e2e/typescript/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "types": ["node", "environment"] 6 | }, 7 | "include": ["**/*.ts", "**/*.js"], 8 | "exclude": ["src/assets/legacy/*"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/import-alias/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | export const useStyles = __styles( 3 | { 4 | root: { 5 | sj55zd: 'fe3e8s9', 6 | }, 7 | }, 8 | { 9 | d: ['.fe3e8s9{color:red;}'], 10 | }, 11 | ); 12 | -------------------------------------------------------------------------------- /packages/core/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["annotate-pure-calls"], 3 | "presets": ["@nx/js/babel"], 4 | "env": { 5 | "development": { 6 | "presets": ["@nx/react/babel"] 7 | }, 8 | "test": { 9 | "presets": ["@nx/react/babel"] 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/config-classname-hash-salt/output.meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "usedProcessing": true, 3 | "usedVMForEvaluation": false, 4 | "cssRulesByBucket": { 5 | "d": [".feohi3x{color:red;}", ".f1rwgqon{padding-left:4px;}", ".f1tyzn0d{padding-right:4px;}"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/function-mixin/mixins.ts: -------------------------------------------------------------------------------- 1 | import type { GriffelStyle } from '@griffel/core'; 2 | import { tokens } from './tokens'; 3 | 4 | export const createMixin = (rule: GriffelStyle): GriffelStyle => ({ 5 | color: tokens.colorBrandBackground, 6 | ...rule, 7 | }); 8 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/function-mixin/output.meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "usedProcessing": true, 3 | "usedVMForEvaluation": true, 4 | "cssRulesByBucket": { 5 | "d": [".f1817uup{color:var(--colorBrandBackground);}", ".ftgm304{display:block;}", ".fk73vx1{opacity:0;}"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/babel/reset/code.ts: -------------------------------------------------------------------------------- 1 | import { __resetStyles } from '@griffel/react'; 2 | export const useClassName = __resetStyles('rjefjbm', 'r7z97ji', [ 3 | '.rjefjbm{color:red;padding-left:4px;}', 4 | '.r7z97ji{color:red;padding-right:4px;}', 5 | ]); 6 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/config-split-chunks/chunkA.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | 3 | export default __styles( 4 | { 5 | root: { sj55zd: 'fe3e8s9' }, 6 | }, 7 | { 8 | d: ['.fe3e8s9{color:red;}'], 9 | }, 10 | ); 11 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/config-split-chunks/chunkB.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | 3 | export default __styles( 4 | { 5 | root: { sj55zd: 'fe3e8s9' }, 6 | }, 7 | { 8 | d: ['.fe3e8s9{color:red;}'], 9 | }, 10 | ); 11 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/function-mixin/mixins.ts: -------------------------------------------------------------------------------- 1 | import type { GriffelStyle } from '@griffel/core'; 2 | import { tokens } from './tokens'; 3 | 4 | export const createMixin = (rule: GriffelStyle): GriffelStyle => ({ 5 | color: tokens.colorBrandBackground, 6 | ...rule, 7 | }); 8 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/assets-reset-styles/output.ts: -------------------------------------------------------------------------------- 1 | import { __resetCSS } from '@griffel/react'; 2 | 3 | import blank from './blank.jpg'; 4 | import blankDuplicate from './blank.jpg'; 5 | import empty from './empty.jpg'; 6 | 7 | export const useStyles = __resetCSS('rqpsvrz', null); 8 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/reset/code.ts: -------------------------------------------------------------------------------- 1 | import { __resetStyles } from '@griffel/react'; 2 | export const useClassName = __resetStyles('rjefjbm', 'r7z97ji', [ 3 | '.rjefjbm{color:red;padding-left:4px;}', 4 | '.r7z97ji{color:red;padding-right:4px;}', 5 | ]); 6 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/reset/output.ts: -------------------------------------------------------------------------------- 1 | import { __resetStyles, __resetCSS as _resetCSS } from '@griffel/react'; 2 | export const useClassName = _resetCSS('rjefjbm', 'r7z97ji'); 3 | 4 | import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts'; 5 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/require/code.ts: -------------------------------------------------------------------------------- 1 | const react_make_styles_1 = require('@griffel/react'); 2 | 3 | export const useStyles = react_make_styles_1.makeStyles({ 4 | root: { 5 | fontSize: '14px', 6 | lineHeight: 1, 7 | }, 8 | }); 9 | 10 | console.log(useStyles); 11 | -------------------------------------------------------------------------------- /packages/shadow-dom/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["annotate-pure-calls"], 3 | "presets": ["@nx/js/babel"], 4 | "env": { 5 | "development": { 6 | "presets": ["@nx/react/babel"] 7 | }, 8 | "test": { 9 | "presets": ["@nx/react/babel"] 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object-reset/output.ts: -------------------------------------------------------------------------------- 1 | import { __css } from '@griffel/react'; 2 | 3 | export const RESET = 'DO_NOT_USE_DIRECTLY: @griffel/reset-value' as unknown as 'unset'; 4 | 5 | export const useStyles = __css({ root: { sj55zd: 'fe3e8s9', uwmqm3: 0 }, icon: { sj55zd: 0 } }); 6 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/reset-styles-at-rules/code.ts: -------------------------------------------------------------------------------- 1 | import { makeResetStyles } from '@griffel/react'; 2 | 3 | export const useStyles = makeResetStyles({ 4 | color: 'red', 5 | '@supports (display: flex)': { color: 'pink' }, 6 | '@media (min-width: 100px)': { color: 'blue' }, 7 | }); 8 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/tokens/output.ts: -------------------------------------------------------------------------------- 1 | import { __css } from '@griffel/react'; 2 | import { customTokens } from './tokens'; 3 | 4 | export const useStyles = __css({ 5 | root: { De3pzq: 'f1734hy', sj55zd: 'ff34w31', mc9l5x: 'f22iagw' }, 6 | rootPrimary: { sj55zd: 'f1817uup' }, 7 | }); 8 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/multiple/output.css: -------------------------------------------------------------------------------- 1 | /** griffel.css **/ 2 | .f1vilie2 { 3 | border: 3px solid red; 4 | } 5 | .f65sxns { 6 | background: green; 7 | } 8 | .fcnqdeg { 9 | background-color: green; 10 | } 11 | .fe3e8s9 { 12 | color: red; 13 | } 14 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-keep-original-code/output.css: -------------------------------------------------------------------------------- 1 | /** griffel.css **/ 2 | .rjefjbm { 3 | color: red; 4 | padding-left: 4px; 5 | } 6 | .r7z97ji { 7 | color: red; 8 | padding-right: 4px; 9 | } 10 | .fe3e8s9 { 11 | color: red; 12 | } 13 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/non-existing-module-call/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | import { createModule } from './module'; 3 | 4 | export const useStyles = makeStyles({ 5 | container: { 6 | color: 'red', 7 | }, 8 | }); 9 | 10 | createModule().baz(); 11 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/reset-styles-at-rules/code.ts: -------------------------------------------------------------------------------- 1 | import { makeResetStyles } from '@griffel/react'; 2 | 3 | export const useStyles = makeResetStyles({ 4 | color: 'red', 5 | '@supports (display: flex)': { color: 'pink' }, 6 | '@media (min-width: 100px)': { color: 'blue' }, 7 | }); 8 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/non-existing-module-call/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | import { createModule } from './module'; 3 | 4 | export const useStyles = makeStyles({ 5 | container: { 6 | color: 'red', 7 | }, 8 | }); 9 | 10 | createModule().baz(); 11 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/shared-mixins/output.ts: -------------------------------------------------------------------------------- 1 | import { __css } from '@griffel/react'; 2 | import { sharedStyles } from './mixins'; 3 | 4 | export const useStyles = __css({ 5 | root: { mc9l5x: 'f22iagw' }, 6 | container: { mc9l5x: 'f13qh94s' }, 7 | icon: { sj55zd: 'fe3e8s9' }, 8 | }); 9 | -------------------------------------------------------------------------------- /packages/devtools/public/devtools-page.js: -------------------------------------------------------------------------------- 1 | chrome.devtools.panels.elements.createSidebarPane('💅 Griffel', sidebarPanel => { 2 | sidebarPanel.setPage('index.html'); 3 | 4 | sidebarPanel.onShown.addListener(devtoolsWindow => { 5 | devtoolsWindow.postMessage({ visible: true }, '*'); 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /packages/vite-plugin/__fixtures__/object/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | import { tokens } from './tokens'; 3 | 4 | const styles = makeStyles({ 5 | root: { 6 | color: tokens.colorBrandStroke1, 7 | padding: '10px', 8 | }, 9 | }); 10 | 11 | console.log(styles); 12 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/assets/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles, __css as _css } from '@griffel/react'; 2 | export const useStyles = _css({ 3 | root: { 4 | Bcmaq0h: 'fnwsaxv', 5 | }, 6 | }); 7 | 8 | import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts'; 9 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/config-name/code.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | 3 | export const styles = __styles( 4 | { 5 | root: { 6 | sj55zd: 'fe3e8s9', 7 | }, 8 | }, 9 | { 10 | d: ['.fe3e8s9{color:red;}'], 11 | }, 12 | ); 13 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/config-no-split-chunks/output.css: -------------------------------------------------------------------------------- 1 | /** griffel.css **/ 2 | .fe3e8s9 { 3 | color: red; 4 | } 5 | .fycuoez { 6 | padding-left: 4px; 7 | } 8 | .f8wuabp { 9 | padding-right: 4px; 10 | } 11 | .fcnqdeg { 12 | background-color: green; 13 | } 14 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/require-custom-module/code.ts: -------------------------------------------------------------------------------- 1 | const react_make_styles_1 = require('custom-package'); 2 | 3 | export const useStyles = react_make_styles_1.makeStyles({ 4 | root: { 5 | fontSize: '14px', 6 | lineHeight: 1, 7 | }, 8 | }); 9 | 10 | console.log(useStyles); 11 | -------------------------------------------------------------------------------- /packages/react/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["annotate-pure-calls"], 3 | "presets": ["@nx/js/babel", "@babel/preset-react"], 4 | "env": { 5 | "development": { 6 | "presets": ["@nx/react/babel"] 7 | }, 8 | "test": { 9 | "presets": ["@nx/react/babel"] 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/assets-multiple-declarations/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | import blank from './blank.jpg'; 4 | import empty from './empty.jpg'; 5 | 6 | export const useStyles = makeStyles({ 7 | root: { backgroundImage: `url(${blank}), url(${empty})` }, 8 | }); 9 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/with-css/code.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | import './input.css'; 3 | 4 | export const styles1 = __styles( 5 | { 6 | root: { sj55zd: 'fe3e8s9' }, 7 | }, 8 | { 9 | d: ['.fe3e8s9{color:red;}'], 10 | }, 11 | ); 12 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/assets-multiple-declarations/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | import blank from './blank.jpg'; 4 | import empty from './empty.jpg'; 5 | 6 | export const useStyles = makeStyles({ 7 | root: { backgroundImage: `url(${blank}), url(${empty})` }, 8 | }); 9 | -------------------------------------------------------------------------------- /packages/core/src/runtime/utils/generateCombinedMediaQuery.ts: -------------------------------------------------------------------------------- 1 | export function generateCombinedQuery(currentMediaQuery: string, nestedMediaQuery: string): string { 2 | if (currentMediaQuery.length === 0) { 3 | return nestedMediaQuery; 4 | } 5 | 6 | return `${currentMediaQuery} and ${nestedMediaQuery}`; 7 | } 8 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/error-on-undefined/fixture.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | // @ts-expect-error This module does not have exported member 'colors' 3 | import { colors } from './tokens'; 4 | 5 | export const useClassesA = makeStyles({ 6 | root: { color: colors.foreground }, 7 | }); 8 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/babel/alias/code.ts: -------------------------------------------------------------------------------- 1 | import { __styles as _styles } from '@griffel/react'; 2 | export const useStyles = /*#__PURE__*/ _styles( 3 | { 4 | root: { 5 | sj55zd: 'fe3e8s9', 6 | }, 7 | }, 8 | { 9 | d: ['.fe3e8s9{color:red;}'], 10 | }, 11 | ); 12 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles, __css as _css } from '@griffel/react'; 2 | export const useStyles = _css({ 3 | root: { 4 | Bcmaq0h: 'fp00rh9', 5 | }, 6 | }); 7 | 8 | import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts'; 9 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/chunkA.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | import './chunkA.css'; 3 | 4 | export const styles = __styles( 5 | { 6 | root: { sj55zd: 'fe3e8s9' }, 7 | }, 8 | { 9 | d: ['.fe3e8s9{color:red;}'], 10 | }, 11 | ); 12 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/chunkB.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | import './chunkB.css'; 3 | 4 | export const styles = __styles( 5 | { 6 | root: { sj55zd: 'fe3e8s9' }, 7 | }, 8 | { 9 | d: ['.fe3e8s9{color:red;}'], 10 | }, 11 | ); 12 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/error-on-undefined/fixture.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | // @ts-expect-error This module does not have exported member 'colors' 3 | import { colors } from './tokens'; 4 | 5 | export const useClassesA = makeStyles({ 6 | root: { color: colors.foreground }, 7 | }); 8 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object-sequence-expr/output.ts: -------------------------------------------------------------------------------- 1 | import type { GriffelStyle } from '@griffel/react'; 2 | import { __css } from '@griffel/react'; 3 | 4 | const switchClassName = 'fui-Switch'; 5 | let _a: Record; 6 | 7 | export const useStyles = __css({ root: { ozcac4: 'f1cm6cy7' } }); 8 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/reset-media/output.css: -------------------------------------------------------------------------------- 1 | /** griffel.css **/ 2 | .rjrhw4c { 3 | color: red; 4 | } 5 | @supports (display: flex) { 6 | .rjrhw4c { 7 | color: pink; 8 | } 9 | } 10 | @media (min-width: 100px) { 11 | .rjrhw4c { 12 | color: blue; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-attach-to-main/code.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | 3 | export const useClasses = __styles( 4 | { 5 | root: { 6 | sj55zd: 'fe3e8s9', 7 | }, 8 | }, 9 | { 10 | d: ['.fe3e8s9{color:red;}'], 11 | }, 12 | ); 13 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object-computed-keys/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | const rootSlot = 'root'; 4 | 5 | export const useStyles = makeStyles({ 6 | [rootSlot]: { color: 'red', paddingLeft: '4px' }, 7 | [rootSlot + 'primary']: { backgroundColor: 'green', marginLeft: '4px' }, 8 | }); 9 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object-computed-keys/output.ts: -------------------------------------------------------------------------------- 1 | import { __css } from '@griffel/react'; 2 | 3 | const rootSlot = 'root'; 4 | 5 | export const useStyles = __css({ 6 | root: { sj55zd: 'fe3e8s9', uwmqm3: ['fycuoez', 'f8wuabp'] }, 7 | rootprimary: { De3pzq: 'fcnqdeg', Frg6f3: ['fjf1xye', 'f8zmjen'] }, 8 | }); 9 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object-reset/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | export const RESET = 'DO_NOT_USE_DIRECTLY: @griffel/reset-value' as unknown as 'unset'; 4 | 5 | export const useStyles = makeStyles({ 6 | root: { color: 'red', paddingLeft: RESET }, 7 | icon: { color: RESET }, 8 | }); 9 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/babel/mixed/output.ts: -------------------------------------------------------------------------------- 1 | import { __resetStyles, __styles, __resetCSS as _resetCSS, __css as _css } from '@griffel/react'; 2 | export const useClasses = _css({ 3 | root: { 4 | sj55zd: 'fe3e8s9', 5 | }, 6 | }); 7 | export const useClassName = _resetCSS('rjefjbm', 'r7z97ji'); 8 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/babel/multiple/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles, __css as _css } from '@griffel/react'; 2 | export const stylesA = _css({ 3 | root: { 4 | sj55zd: 'fe3e8s9', 5 | }, 6 | }); 7 | export const stylesB = _css({ 8 | root: { 9 | De3pzq: 'fcnqdeg', 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/assets-flip/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles, __css as _css } from '@griffel/react'; 2 | export const useStyles = _css({ 3 | root: { 4 | Bcmaq0h: ['ftcbn0w', 'f37sp7w'], 5 | }, 6 | }); 7 | 8 | import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts'; 9 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-attach-to-main/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles, __css as _css } from '@griffel/react'; 2 | export const useClasses = _css({ 3 | root: { 4 | sj55zd: 'fe3e8s9', 5 | }, 6 | }); 7 | 8 | import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts'; 9 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/object-computed-keys/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | const rootSlot = 'root'; 4 | 5 | export const useStyles = makeStyles({ 6 | [rootSlot]: { color: 'red', paddingLeft: '4px' }, 7 | [rootSlot + 'primary']: { backgroundColor: 'green', marginLeft: '4px' }, 8 | }); 9 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/object-imported-keys/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | import { className, selector } from './consts'; 3 | 4 | export const useStyles = makeStyles({ 5 | root: { 6 | [selector]: { color: 'red' }, 7 | [`& .${className}`]: { color: 'blue' }, 8 | }, 9 | }); 10 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/object-reset/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | export const RESET = 'DO_NOT_USE_DIRECTLY: @griffel/reset-value' as unknown as 'unset'; 4 | 5 | export const useStyles = makeStyles({ 6 | root: { color: 'red', paddingLeft: RESET }, 7 | icon: { color: RESET }, 8 | }); 9 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/reset-styles-at-rules/output.ts: -------------------------------------------------------------------------------- 1 | import { __resetStyles } from '@griffel/react'; 2 | export const useStyles = __resetStyles('rjrhw4c', null, { 3 | r: ['.rjrhw4c{color:red;}'], 4 | s: ['@supports (display: flex){.rjrhw4c{color:pink;}}', '@media (min-width: 100px){.rjrhw4c{color:blue;}}'], 5 | }); 6 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object-imported-keys/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | import { className, selector } from './consts'; 3 | 4 | export const useStyles = makeStyles({ 5 | root: { 6 | [selector]: { color: 'red' }, 7 | [`& .${className}`]: { color: 'blue' }, 8 | }, 9 | }); 10 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/output.ts: -------------------------------------------------------------------------------- 1 | import { __resetCSS as _resetCSS } from '@griffel/react'; 2 | import { __resetStyles } from '@griffel/react'; 3 | export const useClassName = _resetCSS('ra9m047', null); 4 | 5 | import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts'; 6 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-attach-to-main/codeB.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | 3 | export const useClasses = __styles( 4 | { 5 | root: { 6 | Bi91k9c: 'faf35ka', 7 | }, 8 | }, 9 | { 10 | h: ['.faf35ka:hover{color:red;}'], 11 | }, 12 | ); 13 | -------------------------------------------------------------------------------- /apps/website/src/components/Playground/code/styles.js: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/core'; 2 | 3 | export default makeStyles({ 4 | root: { 5 | backgroundColor: 'red', 6 | paddingLeft: '10px', 7 | '@media(forced-colors: active)': { 8 | border: '1px solid transparent', 9 | }, 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/at-rules/output.ts: -------------------------------------------------------------------------------- 1 | import { __css } from '@griffel/react'; 2 | 3 | export const useStyles = __css({ 4 | root: { 5 | wbkd2a: ['fgefjy', 'f1h4p6a1'], 6 | Dt0rau: ['f1h4p6a1', 'fgefjy'], 7 | k2kg1z: ['f1dyc5nu', 'f1kq3x14'], 8 | Blnc60a: ['f1kq3x14', 'f1dyc5nu'], 9 | }, 10 | }); 11 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/reset-styles-at-rules/output.meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "usedProcessing": true, 3 | "usedVMForEvaluation": false, 4 | "cssRulesByBucket": { 5 | "r": [".rjrhw4c{color:red;}"], 6 | "s": ["@supports (display: flex){.rjrhw4c{color:pink;}}", "@media (min-width: 100px){.rjrhw4c{color:blue;}}"] 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/object/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | import { tokens } from './tokens'; 3 | export const styles = __styles( 4 | { 5 | root: { 6 | sj55zd: 'fl9q5hc', 7 | }, 8 | }, 9 | { 10 | d: ['.fl9q5hc{color:var(--colorBrandStroke1);}'], 11 | }, 12 | ); 13 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/config-evaluation-rules/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | import { colorRed } from './consts'; 3 | export const useStyles = __styles( 4 | { 5 | root: { 6 | sj55zd: 'f163i14w', 7 | }, 8 | }, 9 | { 10 | d: ['.f163i14w{color:blue;}'], 11 | }, 12 | ); 13 | -------------------------------------------------------------------------------- /packages/core/src/devtools/index.ts: -------------------------------------------------------------------------------- 1 | export { injectDevTools } from './injectDevTools'; 2 | export { isDevToolsEnabled } from './isDevToolsEnabled'; 3 | export { debugData } from './store'; 4 | export { getSourceURLfromError } from './getSourceURLfromError'; 5 | 6 | export type { DebugCSSRules, DebugSequence, DebugResult } from './types'; 7 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/webpack-resolve-options/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | import color from './color'; 3 | export const styles = __styles( 4 | { 5 | root: { 6 | De3pzq: 'f1bh81bl', 7 | }, 8 | }, 9 | { 10 | d: ['.f1bh81bl{background-color:blue;}'], 11 | }, 12 | ); 13 | -------------------------------------------------------------------------------- /apps/website/src/components/Playground/code/templates/make-reset-styles.js: -------------------------------------------------------------------------------- 1 | import { makeResetStyles } from '@griffel/core'; 2 | 3 | export default makeResetStyles({ 4 | color: 'blue', 5 | margin: 0, 6 | ':hover': { color: 'teal' }, 7 | }); 8 | 9 | export const meta = { 10 | name: 'makeResetStyles', 11 | position: 10, 12 | }; 13 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/babel/basic/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles, __css as _css } from '@griffel/react'; 2 | export const styles = _css({ 3 | root: { 4 | sj55zd: 'fe3e8s9', 5 | uwmqm3: ['fycuoez', 'f8wuabp'], 6 | }, 7 | icon: { 8 | De3pzq: 'fcnqdeg', 9 | Bi91k9c: 'faf35ka', 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/reset-media/code.ts: -------------------------------------------------------------------------------- 1 | import { __resetStyles } from '@griffel/react'; 2 | export const useClassName = __resetStyles('rjrhw4c', null, { 3 | r: ['.rjrhw4c{color:red;}'], 4 | s: ['@supports (display: flex){.rjrhw4c{color:pink;}}', '@media (min-width: 100px){.rjrhw4c{color:blue;}}'], 5 | }); 6 | -------------------------------------------------------------------------------- /packages/postcss-syntax/src/constants.ts: -------------------------------------------------------------------------------- 1 | export const GRIFFEL_SLOT_RAW = 'griffel-slot'; 2 | export const GRIFFEL_SRC_RAW = 'griffel-src'; 3 | export const GRIFFEL_DECLARATOR_RAW = 'griffel-declarator'; 4 | export const GRIFFEL_SLOT_LOCATION_RAW = 'griffel-slot-location'; 5 | export const GRIFFEL_DECLARATOR_LOCATION_RAW = 'griffel-declarator-location'; 6 | -------------------------------------------------------------------------------- /packages/tag-processor/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "module": "commonjs", 5 | "outDir": "../../dist/out-tsc", 6 | "declaration": true, 7 | "types": ["node", "environment"] 8 | }, 9 | "exclude": ["**/*.spec.ts", "**/*.test.ts"], 10 | "include": ["**/*.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/reset/output.ts: -------------------------------------------------------------------------------- 1 | import { __resetStyles } from '@griffel/react'; 2 | import { tokens } from './tokens'; 3 | export const useStyles = __resetStyles('rgwtdav', 'r133dp1', [ 4 | '.rgwtdav{color:var(--colorBrandStroke1);padding-left:4px;}', 5 | '.r133dp1{color:var(--colorBrandStroke1);padding-right:4px;}', 6 | ]); 7 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/webpack-inherit-resolve-options/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | import color from './color'; 3 | export const styles = __styles( 4 | { 5 | root: { 6 | De3pzq: 'f1bh81bl', 7 | }, 8 | }, 9 | { 10 | d: ['.f1bh81bl{background-color:blue;}'], 11 | }, 12 | ); 13 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object-nesting/output.meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "usedProcessing": true, 3 | "usedVMForEvaluation": true, 4 | "cssRulesByBucket": { 5 | "d": [".f22iagw{display:flex;}", ".fh8e7tb .foo:hover{color:green;}"], 6 | "h": [".faf35ka:hover{color:red;}"], 7 | "f": [".f17t1d3d:focus:hover{color:blue;}"] 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /apps/website/src/components/Playground/code/templates/global.js: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/core'; 2 | 3 | export default makeStyles({ 4 | global: { 5 | ':global([data-global-style])': { 6 | border: '1px solid', 7 | }, 8 | }, 9 | }); 10 | 11 | export const meta = { 12 | name: 'Global styles', 13 | position: 9, 14 | }; 15 | -------------------------------------------------------------------------------- /apps/website/src/components/Playground/webpackLoader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Custom Webpack loader that removes "export const meta = {}" from code. 3 | * 4 | * @param {String} sourceCode 5 | * @return {String} 6 | */ 7 | module.exports = function webpackLoader(sourceCode) { 8 | return sourceCode.replace(/export const meta = {(.|\n)+};/, '').trim(); 9 | }; 10 | -------------------------------------------------------------------------------- /packages/react/src/utils/canUseDOM-node.test.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * @jest-environment node 3 | */ 4 | 5 | // 👆 this is intentionally to test in SSR like environment 6 | 7 | import { canUseDOM } from './canUseDOM'; 8 | 9 | describe('canUseDOM (node)', () => { 10 | it('returns "false"', () => { 11 | expect(canUseDOM()).toBe(false); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /tools/update-shorthands/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "declaration": false, 6 | "types": ["node", "environment"] 7 | }, 8 | "exclude": ["__fixtures__/*/*.ts", "**/*.spec.ts", "**/*.test.ts", "jest.config.ts"], 9 | "include": ["**/*.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /.storybook/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.base.json", 3 | "exclude": [ 4 | "../**/*.spec.js", 5 | "../**/*.test.js", 6 | "../**/*.spec.ts", 7 | "../**/*.test.ts", 8 | "../**/*.spec.tsx", 9 | "../**/*.test.tsx", 10 | "../**/*.spec.jsx", 11 | "../**/*.test.jsx" 12 | ], 13 | "include": ["../**/*"] 14 | } 15 | -------------------------------------------------------------------------------- /e2e/nextjs/src/snapshots/output.css: -------------------------------------------------------------------------------- 1 | .frolweh { 2 | border: 2px dashed #f0f; 3 | } 4 | .f4khpsj { 5 | border-radius: 5px; 6 | } 7 | .f165xgdd { 8 | gap: 5px; 9 | } 10 | .fbhmu18 { 11 | padding: 10px; 12 | } 13 | .f22iagw { 14 | display: flex; 15 | } 16 | .f1vx9l62 { 17 | flex-direction: column; 18 | } 19 | .f45u8dm { 20 | width: 200px; 21 | } 22 | -------------------------------------------------------------------------------- /packages/eslint-plugin/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "declaration": true, 6 | "module": "node16", 7 | "types": ["node", "environment"] 8 | }, 9 | "exclude": ["**/*.spec.ts", "**/*.test.ts", "jest.config.ts"], 10 | "include": ["**/*.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/assets/code.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | import _asset from './blank.jpg'; 3 | 4 | export const useStyles = __styles( 5 | { 6 | root: { 7 | Bcmaq0h: 'fnwsaxv', 8 | }, 9 | }, 10 | { 11 | d: [`.fnwsaxv{background-image:url(${_asset});}`], 12 | }, 13 | ); 14 | -------------------------------------------------------------------------------- /packages/core/jest.config.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | export default { 3 | displayName: 'core', 4 | preset: '../../jest.preset.js', 5 | transform: { 6 | '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }], 7 | }, 8 | moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'], 9 | coverageDirectory: '../../coverage/packages/core', 10 | }; 11 | -------------------------------------------------------------------------------- /packages/devtools/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@griffel/devtools", 3 | "version": "0.3.4", 4 | "description": "Griffel chrome devtools extension", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/microsoft/griffel" 9 | }, 10 | "devDependencies": { 11 | "@griffel/react": "^1.5.32" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/postcss-syntax/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "module": "commonjs", 5 | "outDir": "../../dist/out-tsc", 6 | "declaration": true, 7 | "types": ["node", "environment"] 8 | }, 9 | "exclude": ["**/*.spec.ts", "**/*.test.ts", "jest.config.ts"], 10 | "include": ["**/*.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /packages/vite-plugin/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "module": "ES2022", 5 | "outDir": "../../dist/out-tsc", 6 | "declaration": true, 7 | "types": ["node", "environment"] 8 | }, 9 | "exclude": ["__fixtures__/*/*.ts", "**/*.spec.ts", "**/*.test.ts"], 10 | "include": ["**/*.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /e2e/utils/src/index.ts: -------------------------------------------------------------------------------- 1 | export { compareSnapshots } from './compareSnapshots'; 2 | export { configureYarn } from './configureYarn'; 3 | export { copyAssets } from './copyAssets'; 4 | export { createTempDir } from './createTempDir'; 5 | export { packLocalPackage } from './packLocalPackage'; 6 | export { installPackages } from './installPackages'; 7 | export { sh } from './sh'; 8 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/import-custom-module/output.ts: -------------------------------------------------------------------------------- 1 | // @ts-expect-error This module does not exist, but will be resolved via aliases 2 | import { __styles } from 'custom-package'; 3 | export const useStyles = __styles( 4 | { 5 | root: { 6 | sj55zd: 'fe3e8s9', 7 | }, 8 | }, 9 | { 10 | d: ['.fe3e8s9{color:red;}'], 11 | }, 12 | ); 13 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/import-custom-name/output.ts: -------------------------------------------------------------------------------- 1 | // @ts-expect-error This module does not exist, but will be resolved via aliases 2 | import { __styles } from 'custom-package'; 3 | export const useStyles = __styles( 4 | { 5 | root: { 6 | sj55zd: 'fe3e8s9', 7 | }, 8 | }, 9 | { 10 | d: ['.fe3e8s9{color:red;}'], 11 | }, 12 | ); 13 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/non-existing-module-call/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | import { createModule } from './module'; 3 | export const useStyles = __styles( 4 | { 5 | container: { 6 | sj55zd: 'fe3e8s9', 7 | }, 8 | }, 9 | { 10 | d: ['.fe3e8s9{color:red;}'], 11 | }, 12 | ); 13 | createModule().baz(); 14 | -------------------------------------------------------------------------------- /packages/next-extraction-plugin/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "module": "commonjs", 5 | "outDir": "../../dist/out-tsc", 6 | "declaration": true, 7 | "types": ["node", "environment"] 8 | }, 9 | "exclude": ["**/*.spec.ts", "**/*.test.ts", "jest.config.ts"], 10 | "include": ["**/*.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /packages/postcss-syntax/src/index.ts: -------------------------------------------------------------------------------- 1 | import { parse } from './parse'; 2 | import { stringify } from './stringify'; 3 | 4 | export { parse, stringify }; 5 | export { createSyntax } from './createSyntax'; 6 | 7 | export default { 8 | parse, 9 | stringify, 10 | }; 11 | 12 | export { GRIFFEL_DECLARATOR_LOCATION_RAW, GRIFFEL_SLOT_LOCATION_RAW } from './constants'; 13 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/output.css: -------------------------------------------------------------------------------- 1 | /** chunkA.css **/ 2 | .foo { 3 | color: red; 4 | } 5 | .bar { 6 | color: yellow; 7 | } 8 | 9 | /** chunkB.css **/ 10 | .baz { 11 | color: blue; 12 | } 13 | 14 | /** griffel.css **/ 15 | .fcnqdeg { 16 | background-color: green; 17 | } 18 | .fe3e8s9 { 19 | color: red; 20 | } 21 | -------------------------------------------------------------------------------- /packages/shadow-dom/src/types.ts: -------------------------------------------------------------------------------- 1 | import type { GriffelRenderer, StyleBucketName } from '@griffel/core'; 2 | 3 | export type ExtendedCSSStyleSheet = CSSStyleSheet & { 4 | bucketName: StyleBucketName; 5 | metadata: Record; 6 | }; 7 | export type GriffelShadowDOMRenderer = GriffelRenderer & { 8 | adoptedStyleSheets: ExtendedCSSStyleSheet[]; 9 | }; 10 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object-variables/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | import { colorGreen, theme } from './vars'; 3 | 4 | const colorRed = 'red'; 5 | 6 | export const useStyles = makeStyles({ 7 | root: { color: colorRed, paddingLeft: '4px' }, 8 | icon: { color: theme.black, backgroundColor: colorGreen, marginLeft: '4px' }, 9 | }); 10 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/config-modules/output.ts: -------------------------------------------------------------------------------- 1 | // @ts-expect-error This is a fake module, will be resolved by Webpack aliases 2 | import { __styles } from 'react-make-styles'; 3 | export const styles = __styles( 4 | { 5 | root: { 6 | De3pzq: 'f3xbvq9', 7 | }, 8 | }, 9 | { 10 | d: ['.f3xbvq9{background-color:red;}'], 11 | }, 12 | ); 13 | -------------------------------------------------------------------------------- /apps/benchmark/src/implementations/css-modules/View.tsx: -------------------------------------------------------------------------------- 1 | import classnames from 'classnames'; 2 | import * as React from 'react'; 3 | 4 | import './view-styles.css'; 5 | 6 | const View: React.FC> = props => { 7 | return
; 8 | }; 9 | 10 | export default View; 11 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/object-variables/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | import { colorGreen, theme } from './vars'; 3 | 4 | const colorRed = 'red'; 5 | 6 | export const useStyles = makeStyles({ 7 | root: { color: colorRed, paddingLeft: '4px' }, 8 | icon: { color: theme.black, backgroundColor: colorGreen, marginLeft: '4px' }, 9 | }); 10 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/tokens/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | import { tokens } from './tokens'; 3 | 4 | export const useStyles = makeStyles({ 5 | root: { 6 | backgroundColor: 'black', 7 | color: tokens.colorPaletteBlueBorder2, 8 | display: 'flex', 9 | }, 10 | rootPrimary: { color: tokens.colorBrandBackground }, 11 | }); 12 | -------------------------------------------------------------------------------- /packages/jest-serializer/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "module": "commonjs", 5 | "outDir": "../../dist/out-tsc", 6 | "declaration": true, 7 | "types": ["node", "environment"] 8 | }, 9 | "exclude": ["**/*.spec.ts", "**/*.test.ts", "jest.config.ts", "jest.setup.ts"], 10 | "include": ["**/*.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /packages/shadow-dom/jest.config.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | export default { 3 | displayName: 'shadow-dom', 4 | preset: '../../jest.preset.js', 5 | transform: { 6 | '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }], 7 | }, 8 | moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'], 9 | coverageDirectory: '../../coverage/packages/shadow-dom', 10 | }; 11 | -------------------------------------------------------------------------------- /packages/babel-preset/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "module": "commonjs", 5 | "outDir": "../../dist/out-tsc", 6 | "declaration": true, 7 | "types": ["node", "environment"] 8 | }, 9 | "exclude": ["__fixtures__/**/*", "**/*.spec.ts", "**/*.test.ts", "jest.config.ts"], 10 | "include": ["**/*.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /packages/style-types/jest.config.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | export default { 3 | displayName: 'style-types', 4 | preset: '../../jest.preset.js', 5 | transform: { 6 | '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }], 7 | }, 8 | moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'], 9 | coverageDirectory: '../../coverage/packages/style-types', 10 | }; 11 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object-variables/output.ts: -------------------------------------------------------------------------------- 1 | import { __css } from '@griffel/react'; 2 | import { colorGreen, theme } from './vars'; 3 | 4 | const colorRed = 'red'; 5 | 6 | export const useStyles = __css({ 7 | root: { sj55zd: 'fe3e8s9', uwmqm3: ['fycuoez', 'f8wuabp'] }, 8 | icon: { sj55zd: 'fusgiwz', De3pzq: 'fcnqdeg', Frg6f3: ['fjf1xye', 'f8zmjen'] }, 9 | }); 10 | -------------------------------------------------------------------------------- /packages/transform/src/types.mts: -------------------------------------------------------------------------------- 1 | import type { Node } from 'oxc-parser'; 2 | 3 | export interface StyleCall { 4 | declaratorId: string; 5 | functionKind: 'makeStyles' | 'makeResetStyles'; 6 | argumentStart: number; 7 | argumentEnd: number; 8 | argumentCode: string; 9 | argumentNode: Node; 10 | callStart: number; 11 | callEnd: number; 12 | importId: string; 13 | } 14 | -------------------------------------------------------------------------------- /packages/webpack-loader/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "module": "commonjs", 5 | "outDir": "../../dist/out-tsc", 6 | "declaration": true, 7 | "types": ["node", "environment"] 8 | }, 9 | "exclude": ["__fixtures__/*/*.ts", "**/*.spec.ts", "**/*.test.ts", "jest.config.ts"], 10 | "include": ["**/*.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /apps/benchmark/src/implementations/types.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export interface BoxProps { 4 | color: 0 | 1 | 2 | 3 | 4 | 5; 5 | fixed: boolean; 6 | layout: 'column' | 'row'; 7 | outer: boolean; 8 | } 9 | 10 | export interface DotProps { 11 | size: number; 12 | x: number; 13 | y: number; 14 | children: React.ReactNode; 15 | color: string; 16 | } 17 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/assets-reset-styles/output.meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "usedProcessing": true, 3 | "usedVMForEvaluation": true, 4 | "cssRulesByBucket": { 5 | "r": [ 6 | ".rqpsvrz{background-image:url(./blank.jpg);}", 7 | ".rqpsvrz:hover{background-image:url(./blank.jpg);}", 8 | ".rqpsvrz:focus{background-image:url(./empty.jpg);}" 9 | ] 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/rules-with-metadata/output.meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "usedProcessing": true, 3 | "usedVMForEvaluation": false, 4 | "cssRulesByBucket": { 5 | "m": [ 6 | [ 7 | "@media screen and (max-width: 100px){.ful25cn{color:red;}}", 8 | { 9 | "m": "screen and (max-width: 100px)" 10 | } 11 | ] 12 | ] 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/output.css: -------------------------------------------------------------------------------- 1 | /** griffel.css **/ 2 | .f1vilie2 { 3 | border: 3px solid red; 4 | } 5 | .f65sxns { 6 | background: green; 7 | } 8 | .fe3e8s9 { 9 | color: red; 10 | } 11 | .fycuoez { 12 | padding-left: 4px; 13 | } 14 | .f8wuabp { 15 | padding-right: 4px; 16 | } 17 | .fcnqdeg { 18 | background-color: green; 19 | } 20 | -------------------------------------------------------------------------------- /packages/webpack-plugin/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "declaration": true, 6 | "types": ["node"] 7 | }, 8 | "include": ["src/**/*.ts", "src/**/*.mts"], 9 | "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.spec.tsx", "src/**/*.test.tsx"] 10 | } 11 | -------------------------------------------------------------------------------- /apps/benchmark/src/implementations/css-modules/view-styles.css: -------------------------------------------------------------------------------- 1 | .initial { 2 | align-items: stretch; 3 | border-width: 0; 4 | border-style: solid; 5 | box-sizing: border-box; 6 | display: flex; 7 | flex-basis: auto; 8 | flex-direction: column; 9 | flex-shrink: 0; 10 | margin: 0; 11 | padding: 0; 12 | position: relative; 13 | min-height: 0; 14 | min-width: 0; 15 | } 16 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/require/output.ts: -------------------------------------------------------------------------------- 1 | const react_make_styles_1 = require('@griffel/react'); 2 | export const useStyles = react_make_styles_1.__styles( 3 | { 4 | root: { 5 | Be2twd7: 'fses1vf', 6 | Bg96gwp: 'fp6vxd', 7 | }, 8 | }, 9 | { 10 | d: ['.fses1vf{font-size:14px;}', '.fp6vxd{line-height:1;}'], 11 | }, 12 | ); 13 | console.log(useStyles); 14 | -------------------------------------------------------------------------------- /packages/core/src/runtime/stylis/sortClassesInAtRulesPlugin.ts: -------------------------------------------------------------------------------- 1 | import type { Middleware } from 'stylis'; 2 | import { isAtRuleElement } from './isAtRuleElement'; 3 | 4 | export const sortClassesInAtRulesPlugin: Middleware = element => { 5 | if (isAtRuleElement(element) && Array.isArray(element.children)) { 6 | element.children.sort((a, b) => (a.props[0] > b.props[0] ? 1 : -1)); 7 | } 8 | }; 9 | -------------------------------------------------------------------------------- /packages/eslint-plugin/src/configs/recommended.ts: -------------------------------------------------------------------------------- 1 | export const recommendedConfig = { 2 | plugins: ['@griffel'], 3 | rules: { 4 | '@griffel/hook-naming': 'error', 5 | '@griffel/no-invalid-shorthand-argument': 'error', 6 | '@griffel/no-shorthands': 'error', 7 | '@griffel/pseudo-element-naming': 'error', 8 | '@griffel/no-deprecated-shorthands': 'error', 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/tokens/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | import { customTokens } from './tokens'; 3 | 4 | export const useStyles = makeStyles({ 5 | root: { 6 | backgroundColor: 'black', 7 | color: customTokens.colorPaletteBlueBorder2, 8 | display: 'flex', 9 | }, 10 | rootPrimary: { color: customTokens.colorBrandBackground }, 11 | }); 12 | -------------------------------------------------------------------------------- /packages/vite-plugin/__fixtures__/aliases/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | const styles = /* @__PURE__ */ __styles( 3 | { 4 | root: { 5 | De3pzq: 'f1bh81bl', 6 | sj55zd: 'fl9q5hc', 7 | }, 8 | }, 9 | { 10 | d: ['.f1bh81bl{background-color:blue;}', '.fl9q5hc{color:var(--colorBrandStroke1);}'], 11 | }, 12 | ); 13 | console.log(styles); 14 | -------------------------------------------------------------------------------- /packages/jest-serializer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@griffel/jest-serializer", 3 | "version": "1.1.34", 4 | "description": "Jest serializer for Griffel", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/microsoft/griffel" 9 | }, 10 | "dependencies": { 11 | "@griffel/core": "^1.19.2", 12 | "tslib": "^2.1.0" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/at-rules/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | export const useStyles = makeStyles({ 4 | root: { 5 | '@media (min-width: 600px)': { 6 | paddingLeft: '4px', 7 | paddingRight: '4px', 8 | }, 9 | '@supports (display: flex)': { 10 | paddingLeft: '4px', 11 | paddingRight: '4px', 12 | }, 13 | }, 14 | }); 15 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/tokens/output.meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "usedProcessing": true, 3 | "usedVMForEvaluation": true, 4 | "cssRulesByBucket": { 5 | "d": [ 6 | ".f1734hy{background-color:black;}", 7 | ".ff34w31{color:var(--colorPaletteBlueBorder2);}", 8 | ".f22iagw{display:flex;}", 9 | ".f1817uup{color:var(--colorBrandBackground);}" 10 | ] 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/webpack-plugin/src/index.test.mts: -------------------------------------------------------------------------------- 1 | import { describe, it, expect } from 'vitest'; 2 | 3 | describe('@griffel/webpack-plugin', () => { 4 | it('should export basic plugin structure', () => { 5 | // This is a placeholder test for the minimal webpack-plugin package 6 | // TODO: Replace with actual tests when implementation is added 7 | expect({}).toEqual({}); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/at-rules/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | export const useStyles = makeStyles({ 4 | root: { 5 | '@media (min-width: 600px)': { 6 | paddingLeft: '4px', 7 | paddingRight: '4px', 8 | }, 9 | '@supports (display: flex)': { 10 | paddingLeft: '4px', 11 | paddingRight: '4px', 12 | }, 13 | }, 14 | }); 15 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/object-nesting/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | import { colorBlue } from './consts'; 3 | 4 | export const useStyles = makeStyles({ 5 | root: { 6 | display: 'flex', 7 | 8 | ':hover': { color: 'red' }, 9 | ':focus': { ':hover': { color: colorBlue } }, 10 | 11 | '& .foo': { ':hover': { color: 'green' } }, 12 | }, 13 | }); 14 | -------------------------------------------------------------------------------- /packages/core/src/runtime/stylis/isAtRuleElement.ts: -------------------------------------------------------------------------------- 1 | import { LAYER, MEDIA, SUPPORTS } from 'stylis'; 2 | import type { Element } from 'stylis'; 3 | 4 | export function isAtRuleElement(element: Element): boolean { 5 | switch (element.type) { 6 | case '@container': 7 | case MEDIA: 8 | case SUPPORTS: 9 | case LAYER: 10 | return true; 11 | } 12 | 13 | return false; 14 | } 15 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/assets-urls/output.ts: -------------------------------------------------------------------------------- 1 | import { __css } from '@griffel/react'; 2 | 3 | export const useStyles = __css({ 4 | httpUrl: { Bcmaq0h: 'f405sdg' }, 5 | httpsUrl: { Bcmaq0h: 'fvpuk3z' }, 6 | httpsUrlWithQuotes: { Bcmaq0h: 'fcrzfig' }, 7 | dataUrl: { Bcmaq0h: 'f1b0d1k8' }, 8 | dataUrlQuotes: { Bcmaq0h: 'f15gfcnl' }, 9 | hashOnly: { Bhu2qc9: 'f1bk4c0y' }, 10 | }); 11 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object-nesting/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | import { colorBlue } from './consts'; 3 | 4 | export const useStyles = makeStyles({ 5 | root: { 6 | display: 'flex', 7 | 8 | ':hover': { color: 'red' }, 9 | ':focus': { ':hover': { color: colorBlue } }, 10 | 11 | '& .foo': { ':hover': { color: 'green' } }, 12 | }, 13 | }); 14 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/babel/mixed/code.ts: -------------------------------------------------------------------------------- 1 | import { __resetStyles, __styles } from '@griffel/react'; 2 | 3 | export const useClasses = __styles({ root: { sj55zd: 'fe3e8s9' } }, { d: ['.fe3e8s9{color:red;}'] }); 4 | 5 | export const useClassName = __resetStyles('rjefjbm', 'r7z97ji', [ 6 | '.rjefjbm{color:red;padding-left:4px;}', 7 | '.r7z97ji{color:red;padding-right:4px;}', 8 | ]); 9 | -------------------------------------------------------------------------------- /apps/website/src/components/Playground/code/templates/nested.js: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/core'; 2 | 3 | export default makeStyles({ 4 | nested: { 5 | '& span': { 6 | '& .p': { 7 | ':hover': { 8 | color: 'red', 9 | }, 10 | }, 11 | }, 12 | }, 13 | }); 14 | 15 | export const meta = { 16 | name: 'Nested selectors', 17 | position: 7, 18 | }; 19 | -------------------------------------------------------------------------------- /e2e/nextjs/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 7 | "rules": {} 8 | }, 9 | { 10 | "files": ["*.ts", "*.tsx"], 11 | "rules": {} 12 | }, 13 | { 14 | "files": ["*.js", "*.jsx"], 15 | "rules": {} 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /e2e/rspack/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 7 | "rules": {} 8 | }, 9 | { 10 | "files": ["*.ts", "*.tsx"], 11 | "rules": {} 12 | }, 13 | { 14 | "files": ["*.js", "*.jsx"], 15 | "rules": {} 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/require-custom-module/output.ts: -------------------------------------------------------------------------------- 1 | const react_make_styles_1 = require('custom-package'); 2 | export const useStyles = react_make_styles_1.__styles( 3 | { 4 | root: { 5 | Be2twd7: 'fses1vf', 6 | Bg96gwp: 'fp6vxd', 7 | }, 8 | }, 9 | { 10 | d: ['.fses1vf{font-size:14px;}', '.fp6vxd{line-height:1;}'], 11 | }, 12 | ); 13 | console.log(useStyles); 14 | -------------------------------------------------------------------------------- /packages/core/src/runtime/warnings/logError-node.test.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * @jest-environment node 3 | */ 4 | 5 | import { logError } from './logError'; 6 | 7 | describe('logError', () => { 8 | it('does not log in Node', () => { 9 | const spy = jest.spyOn(console, 'error').mockImplementation(); 10 | 11 | logError('An error occurred'); 12 | expect(spy).not.toHaveBeenCalled(); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/mixed/code.ts: -------------------------------------------------------------------------------- 1 | import { __resetStyles, __styles } from '@griffel/react'; 2 | 3 | export const useClasses = __styles({ root: { sj55zd: 'fe3e8s9' } }, { d: ['.fe3e8s9{color:red;}'] }); 4 | 5 | export const useClassName = __resetStyles('rjefjbm', 'r7z97ji', [ 6 | '.rjefjbm{color:red;padding-left:4px;}', 7 | '.r7z97ji{color:red;padding-right:4px;}', 8 | ]); 9 | -------------------------------------------------------------------------------- /e2e/typescript/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 7 | "rules": {} 8 | }, 9 | { 10 | "files": ["*.ts", "*.tsx"], 11 | "rules": {} 12 | }, 13 | { 14 | "files": ["*.js", "*.jsx"], 15 | "rules": {} 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/core/src/runtime/warnings/logError.test.ts: -------------------------------------------------------------------------------- 1 | import { logError } from './logError'; 2 | 3 | describe('logError', () => { 4 | it('logs in browser env', () => { 5 | const spy = jest.spyOn(console, 'error').mockImplementation(); 6 | 7 | logError('An error occurred'); 8 | expect(spy).toHaveBeenCalledTimes(1); 9 | expect(spy).toHaveBeenCalledWith('An error occurred'); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /packages/react/tsconfig.storybook.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "emitDecoratorMetadata": true, 5 | "moduleResolution": "bundler", 6 | "noEmit": true, 7 | "outDir": "" 8 | }, 9 | "exclude": ["src/**/*.spec.ts", "src/**/*.spec.js", "src/**/*.spec.tsx", "src/**/*.spec.jsx", "jest.config.ts"], 10 | "include": ["src/**/*", ".storybook/*.js"] 11 | } 12 | -------------------------------------------------------------------------------- /packages/style-types/src/index.ts: -------------------------------------------------------------------------------- 1 | export type { GriffelAnimation, GriffelStyle } from './makeStyles'; 2 | export type { GriffelResetStyle } from './makeResetStyles'; 3 | export type { GriffelStaticStyle, GriffelStaticStyles } from './makeStaticStyles'; 4 | 5 | export type { GriffelStylesCSSValue, ValueOrArray } from './shared'; 6 | export type { GriffelStylesUnsupportedCSSProperties } from './unsupported-properties'; 7 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles, __css as _css } from '@griffel/react'; 2 | export const useStyles = _css({ 3 | root: { 4 | sj55zd: 'feohi3x', 5 | uwmqm3: ['f1rwgqon', 'f1tyzn0d'], 6 | }, 7 | }); 8 | /*@griffel:classNameHashSalt "prefix"*/ 9 | 10 | import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts'; 11 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/mixed/output.ts: -------------------------------------------------------------------------------- 1 | import { __resetStyles, __styles, __resetCSS as _resetCSS, __css as _css } from '@griffel/react'; 2 | export const useClasses = _css({ 3 | root: { 4 | sj55zd: 'fe3e8s9', 5 | }, 6 | }); 7 | export const useClassName = _resetCSS('rjefjbm', 'r7z97ji'); 8 | 9 | import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts'; 10 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/object-mixins/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | import { flexStyles, gridStyles, typography } from './mixins'; 3 | 4 | export const useStyles = makeStyles({ 5 | root: flexStyles, 6 | label: typography.text, 7 | header: typography.header, 8 | 9 | icon: { ...flexStyles, color: 'red' }, 10 | image: { ...gridStyles('10px'), color: 'green' }, 11 | }); 12 | -------------------------------------------------------------------------------- /packages/devtools/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { composePlugins, withNx, withWeb } = require('@nx/webpack'); 2 | 3 | // Nx plugins for webpack. 4 | module.exports = composePlugins(withNx(), withWeb(), config => { 5 | // Note: This was added by an Nx migration. Webpack builds are required to have a corresponding Webpack config file. 6 | // See: https://nx.dev/recipes/webpack/webpack-config-setup 7 | return config; 8 | }); 9 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/assets/output.meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "usedProcessing": true, 3 | "usedVMForEvaluation": true, 4 | "cssRulesByBucket": { 5 | "d": [ 6 | ".fepo2lx{background-image:url(./blank.jpg);}", 7 | ".f18nilc4{background-image:url(\"./blank.jpg\");}", 8 | ".fsmjahx{background-image:url(./empty.jpg);}", 9 | ".f12vvth1{filter:url(./a.svg#a);}" 10 | ] 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/non-existing-module-call/module.ts: -------------------------------------------------------------------------------- 1 | type FakeModule = { 2 | foo: () => void; 3 | bar: () => void; 4 | baz: () => void; 5 | }; 6 | 7 | export function createModule(): FakeModule { 8 | return { 9 | foo: () => {}, 10 | bar: () => {}, 11 | // this implementation intentionally missing "baz" property to throw on calls in runtime 12 | } as unknown as FakeModule; 13 | } 14 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object-mixins/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | import { flexStyles, gridStyles, typography } from './mixins'; 3 | 4 | export const useStyles = makeStyles({ 5 | root: flexStyles, 6 | label: typography.text, 7 | header: typography.header, 8 | 9 | icon: { ...flexStyles, color: 'red' }, 10 | image: { ...gridStyles('10px'), color: 'green' }, 11 | }); 12 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/webpack-aliases/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | // @ts-expect-error This module will be resolved via aliases 3 | import color from 'non-existing-color-module'; 4 | 5 | import { tokens } from './tokens'; 6 | 7 | export const styles = makeStyles({ 8 | root: { 9 | backgroundColor: color, 10 | color: tokens.colorBrandStroke1, 11 | }, 12 | }); 13 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/webpack-resolve-plugins/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | import { tokens } from './tokens'; 3 | // @ts-expect-error This module will be resolved via aliases 4 | import color from 'non-existing-color-module'; 5 | 6 | export const styles = makeStyles({ 7 | root: { 8 | backgroundColor: color, 9 | color: tokens.colorBrandStroke1, 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/non-existing-module-call/module.ts: -------------------------------------------------------------------------------- 1 | type FakeModule = { 2 | foo: () => void; 3 | bar: () => void; 4 | baz: () => void; 5 | }; 6 | 7 | export function createModule(): FakeModule { 8 | return { 9 | foo: () => {}, 10 | bar: () => {}, 11 | // this implementation intentionally missing "baz" property to throw on calls in runtime 12 | } as unknown as FakeModule; 13 | } 14 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/object-imported-keys/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | import { className, selector } from './consts'; 3 | export const useStyles = __styles( 4 | { 5 | root: { 6 | B0egftl: 'f1wgwx3x', 7 | qhv8v2: 'fglt6ox', 8 | }, 9 | }, 10 | { 11 | d: ['.f1wgwx3x .component-bar{color:red;}', '.fglt6ox .component-foo{color:blue;}'], 12 | }, 13 | ); 14 | -------------------------------------------------------------------------------- /packages/devtools/jest.config.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | export default { 3 | displayName: 'devtools', 4 | preset: '../../jest.preset.js', 5 | transform: { 6 | '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }], 7 | }, 8 | moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'], 9 | coverageDirectory: '../../coverage/packages/devtools', 10 | setupFilesAfterEnv: ['./jest.setup.js'], 11 | }; 12 | -------------------------------------------------------------------------------- /packages/eslint-plugin/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 7 | "rules": {} 8 | }, 9 | { 10 | "files": ["*.ts", "*.tsx"], 11 | "rules": {} 12 | }, 13 | { 14 | "files": ["*.js", "*.jsx"], 15 | "rules": {} 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/jest-serializer/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 7 | "rules": {} 8 | }, 9 | { 10 | "files": ["*.ts", "*.tsx"], 11 | "rules": {} 12 | }, 13 | { 14 | "files": ["*.js", "*.jsx"], 15 | "rules": {} 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/postcss-syntax/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 7 | "rules": {} 8 | }, 9 | { 10 | "files": ["*.ts", "*.tsx"], 11 | "rules": {} 12 | }, 13 | { 14 | "files": ["*.js", "*.jsx"], 15 | "rules": {} 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/style-types/src/legacy/index.ts: -------------------------------------------------------------------------------- 1 | export type { GriffelAnimation, GriffelStyle } from './makeStyles'; 2 | export type { GriffelResetStyle } from './makeResetStyles'; 3 | export type { GriffelStaticStyle, GriffelStaticStyles } from './makeStaticStyles'; 4 | 5 | export type { GriffelStylesCSSValue, ValueOrArray } from '../shared'; 6 | export type { GriffelStylesUnsupportedCSSProperties } from '../unsupported-properties'; 7 | -------------------------------------------------------------------------------- /packages/tag-processor/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 7 | "rules": {} 8 | }, 9 | { 10 | "files": ["*.ts", "*.tsx"], 11 | "rules": {} 12 | }, 13 | { 14 | "files": ["*.js", "*.jsx"], 15 | "rules": {} 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/assets/output.ts: -------------------------------------------------------------------------------- 1 | import { __css } from '@griffel/react'; 2 | 3 | import blank from './blank.jpg'; 4 | import blankDuplicate from './blank.jpg'; 5 | import empty from './empty.jpg'; 6 | 7 | export const useStyles = __css({ 8 | rootA: { Bcmaq0h: 'fepo2lx' }, 9 | rootB: { Bcmaq0h: 'f18nilc4' }, 10 | rootC: { Bcmaq0h: 'fsmjahx' }, 11 | assetWithHash: { Bhu2qc9: 'f12vvth1' }, 12 | }); 13 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/code.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | import _asset from './blank.jpg'; 3 | import _asset2 from './empty.jpg'; 4 | 5 | export const useStyles = __styles( 6 | { 7 | root: { 8 | Bcmaq0h: 'fp00rh9', 9 | }, 10 | }, 11 | { 12 | d: [`.fp00rh9{background-image:url(${_asset}),url(${_asset2});}`], 13 | }, 14 | ); 15 | -------------------------------------------------------------------------------- /.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Griffel Container", 3 | "build": { 4 | "dockerfile": "Dockerfile", 5 | "args": { 6 | "VARIANT": "20-bullseye" 7 | } 8 | }, 9 | "settings": {}, 10 | "extensions": [ 11 | "nrwl.angular-console", 12 | "esbenp.prettier-vscode", 13 | "firsttris.vscode-jest-runner", 14 | "dbaeumer.vscode-eslint" 15 | ], 16 | "remoteUser": "node" 17 | } 18 | -------------------------------------------------------------------------------- /packages/core/src/runtime/utils/trimSelector.test.ts: -------------------------------------------------------------------------------- 1 | import { trimSelector } from './trimSelector'; 2 | 3 | describe('trimSelector', () => { 4 | it('trims ">"', () => { 5 | expect(trimSelector('>.foo')).toBe('>.foo'); 6 | expect(trimSelector('> .foo')).toBe('>.foo'); 7 | expect(trimSelector('> .foo')).toBe('>.foo'); 8 | 9 | expect(trimSelector('> .foo > .bar')).toBe('>.foo >.bar'); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /packages/next-extraction-plugin/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 7 | "rules": {} 8 | }, 9 | { 10 | "files": ["*.ts", "*.tsx"], 11 | "rules": {} 12 | }, 13 | { 14 | "files": ["*.js", "*.jsx"], 15 | "rules": {} 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/transform/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log - @griffel/transform 2 | 3 | This log was last generated on Mon, 03 Nov 2025 15:43:56 GMT and should not be manually modified. 4 | 5 | 6 | 7 | ## 1.1.0 8 | 9 | Mon, 03 Nov 2025 15:43:56 GMT 10 | 11 | ### Minor changes 12 | 13 | - Add initial @griffel/transform package boilerplate (copilot@github.com) 14 | - feat: add functionality (copilot@github.com) 15 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "module": "commonjs", 5 | "outDir": "../../dist/out-tsc", 6 | "declaration": true, 7 | "types": ["node", "environment"] 8 | }, 9 | "exclude": ["__fixtures__/**/*/*.ts", "**/*.spec.ts", "**/*.test.ts", "jest.config.ts"], 10 | "include": ["**/*.ts", "virtual-loader/index.js"] 11 | } 12 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | import { dirname, join } from 'node:path'; 2 | import { createRequire } from 'node:module'; 3 | 4 | const require = createRequire(import.meta.url); 5 | 6 | export default { 7 | core: {}, 8 | stories: [], 9 | addons: [getAbsolutePath('@storybook/addon-webpack5-compiler-babel')], 10 | }; 11 | 12 | function getAbsolutePath(value) { 13 | return dirname(require.resolve(join(value, 'package.json'))); 14 | } 15 | -------------------------------------------------------------------------------- /packages/react/jest.config.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | export default { 3 | displayName: 'react', 4 | preset: '../../jest.preset.js', 5 | transform: { 6 | '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }], 7 | }, 8 | globals: { 9 | IS_REACT_ACT_ENVIRONMENT: true, 10 | }, 11 | moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'], 12 | coverageDirectory: '../../coverage/packages/react', 13 | }; 14 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/config-evaluation-rules/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | import { colorRed } from './consts'; 3 | 4 | export const useStyles = makeStyles({ 5 | // This import has no sense, but it will prevent us from evaluation in AST by Babel 6 | // This fixture uses "sampleEvaluator.js" in transformPlugin's config so input we should get a different color 7 | root: { color: colorRed }, 8 | }); 9 | -------------------------------------------------------------------------------- /beachball.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | /** 4 | * @type {import('beachball').BeachballConfig} 5 | */ 6 | module.exports = { 7 | gitTags: false, 8 | ignorePatterns: [ 9 | '**/__fixtures__/**', 10 | '**/*.test.{ts,tsx}', 11 | '**/*.stories.tsx', 12 | '**/.eslintrc.json', 13 | '**/jest.config.js', 14 | '**/project.json', 15 | '**/README.md', 16 | ], 17 | hooks: require('./beachball.hooks'), 18 | }; 19 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/config-evaluation-rules/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | import { colorRed } from './consts'; 3 | 4 | export const useStyles = makeStyles({ 5 | // This import has no sense, but it will prevent us from evaluation in AST by Babel 6 | // This fixture uses "sampleEvaluator.js" in transformPlugin's config so input we should get a different color 7 | root: { color: colorRed }, 8 | }); 9 | -------------------------------------------------------------------------------- /packages/react/src/useInsertionEffect.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import * as React from 'react'; 4 | 5 | export const useInsertionEffect: typeof React.useInsertionEffect | undefined = 6 | // @ts-expect-error Hack to make sure that `useInsertionEffect` will not cause bundling issues in older React versions 7 | // eslint-disable-next-line no-useless-concat 8 | React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : undefined; 9 | -------------------------------------------------------------------------------- /packages/shadow-dom/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["plugin:@nx/react", "../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 7 | "rules": {} 8 | }, 9 | { 10 | "files": ["*.ts", "*.tsx"], 11 | "rules": {} 12 | }, 13 | { 14 | "files": ["*.js", "*.jsx"], 15 | "rules": {} 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/style-types/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["plugin:@nx/react", "../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 7 | "rules": {} 8 | }, 9 | { 10 | "files": ["*.ts", "*.tsx"], 11 | "rules": {} 12 | }, 13 | { 14 | "files": ["*.js", "*.jsx"], 15 | "rules": {} 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object/output.meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "usedProcessing": true, 3 | "usedVMForEvaluation": false, 4 | "cssRulesByBucket": { 5 | "d": [ 6 | ".fe3e8s9{color:red;}", 7 | ".fycuoez{padding-left:4px;}", 8 | ".f8wuabp{padding-right:4px;}", 9 | ".fcnqdeg{background-color:green;}", 10 | ".fjf1xye{margin-left:4px;}", 11 | ".f8zmjen{margin-right:4px;}" 12 | ] 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /e2e/utils/src/createTempDir.ts: -------------------------------------------------------------------------------- 1 | import * as tmp from 'tmp'; 2 | import * as logSymbols from 'log-symbols'; 3 | 4 | export function createTempDir(prefix: string) { 5 | // "Unsafe" means delete even if it still has files inside (our desired behavior) 6 | const tempDir = tmp.dirSync({ prefix, unsafeCleanup: true }).name; 7 | console.log(logSymbols.success, `Temporary directory created under ${tempDir}`); 8 | 9 | return tempDir; 10 | } 11 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/config-classname-hash-salt/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | export const useStyles = __styles( 3 | { 4 | root: { 5 | sj55zd: 'feohi3x', 6 | uwmqm3: ['f1rwgqon', 'f1tyzn0d'], 7 | }, 8 | }, 9 | { 10 | d: ['.feohi3x{color:red;}', '.f1rwgqon{padding-left:4px;}', '.f1tyzn0d{padding-right:4px;}'], 11 | }, 12 | ); 13 | /*@griffel:classNameHashSalt "prefix"*/ 14 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/object-reset/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | export const RESET = 'DO_NOT_USE_DIRECTLY: @griffel/reset-value' as unknown as 'unset'; 3 | export const useStyles = __styles( 4 | { 5 | root: { 6 | sj55zd: 'fe3e8s9', 7 | uwmqm3: 0, 8 | }, 9 | icon: { 10 | sj55zd: 0, 11 | }, 12 | }, 13 | { 14 | d: ['.fe3e8s9{color:red;}'], 15 | }, 16 | ); 17 | -------------------------------------------------------------------------------- /packages/core/src/runtime/compileStaticCSS.ts: -------------------------------------------------------------------------------- 1 | import type { GriffelStaticStyle } from '@griffel/style-types'; 2 | 3 | import { cssifyObject } from './utils/cssifyObject'; 4 | import { compileCSSRules } from './compileCSSRules'; 5 | 6 | export function compileStaticCSS(property: string, value: GriffelStaticStyle): string { 7 | const cssRule = `${property} {${cssifyObject(value)}}`; 8 | return compileCSSRules(cssRule, false)[0]; 9 | } 10 | -------------------------------------------------------------------------------- /packages/shadow-dom/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@griffel/shadow-dom", 3 | "version": "0.2.10", 4 | "description": "Shadow DOM implementation of Griffel Atomic CSS-in-JS", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/microsoft/griffel" 9 | }, 10 | "sideEffects": false, 11 | "dependencies": { 12 | "@griffel/core": "^1.19.2", 13 | "tslib": "^2.1.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/vite-plugin/__fixtures__/aliases/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | // @ts-expect-error This module will be resolved via aliases 3 | import { blueColor } from 'non-existing-color-module'; 4 | 5 | import { tokens } from './tokens'; 6 | 7 | const styles = makeStyles({ 8 | root: { 9 | backgroundColor: blueColor, 10 | color: tokens.colorBrandStroke1, 11 | }, 12 | }); 13 | 14 | console.log(styles); 15 | -------------------------------------------------------------------------------- /apps/website/src/components/OutputTitle/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { CogsIcon } from '../icons'; 4 | import styles from './styles.module.css'; 5 | 6 | const OutputTitle: React.FC<{ children: React.ReactNode }> = props => { 7 | return ( 8 |
9 | 10 | {props.children} 11 |
12 | ); 13 | }; 14 | 15 | export default OutputTitle; 16 | -------------------------------------------------------------------------------- /packages/babel-preset/src/assets/isAssetUrl.ts: -------------------------------------------------------------------------------- 1 | export function isAssetUrl(value: string): boolean { 2 | const url = value.replace(/^['|"]/, ''); 3 | const isRemoteUrl = 4 | url.startsWith('data:') || 5 | url.startsWith('http:') || 6 | url.startsWith('https:') || 7 | url.startsWith('//') /* Urls without protocol (use the same protocol as current page) */ || 8 | url.startsWith('#'); 9 | 10 | return !isRemoteUrl; 11 | } 12 | -------------------------------------------------------------------------------- /packages/react/src/stories/makeStyles.stories.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { makeStyles } from '../../src'; 3 | 4 | const useStyles = makeStyles({ 5 | root: { 6 | color: 'deeppink', 7 | }, 8 | }); 9 | 10 | export const MakeStyles = () => { 11 | const classes = useStyles(); 12 | 13 | return
no stories yet
; 14 | }; 15 | 16 | export default { 17 | title: 'MakeStyles', 18 | }; 19 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/export-default/output.meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "usedProcessing": true, 3 | "usedVMForEvaluation": false, 4 | "cssRulesByBucket": { 5 | "d": [ 6 | ".fe3e8s9{color:red;}", 7 | ".fycuoez{padding-left:4px;}", 8 | ".f8wuabp{padding-right:4px;}", 9 | ".fcnqdeg{background-color:green;}", 10 | ".fjf1xye{margin-left:4px;}", 11 | ".f8zmjen{margin-right:4px;}" 12 | ] 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/vite-plugin/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*", "__fixtures__/*/output.ts"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 7 | "rules": {} 8 | }, 9 | { 10 | "files": ["*.ts", "*.tsx"], 11 | "rules": {} 12 | }, 13 | { 14 | "files": ["*.js", "*.jsx"], 15 | "rules": {} 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/webpack-loader/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*", "__fixtures__/*/output.ts"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 7 | "rules": {} 8 | }, 9 | { 10 | "files": ["*.ts", "*.tsx"], 11 | "rules": {} 12 | }, 13 | { 14 | "files": ["*.js", "*.jsx"], 15 | "rules": {} 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/config-classname-hash-salt/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | export const styles = __styles( 3 | { 4 | root: { 5 | sj55zd: 'f3mwu0g', 6 | uwmqm3: ['f1rfztu6', 'f1h66kgv'], 7 | }, 8 | }, 9 | { 10 | d: ['.f3mwu0g{color:red;}', '.f1rfztu6{padding-left:10px;}', '.f1h66kgv{padding-right:10px;}'], 11 | }, 12 | ); 13 | /*@griffel:classNameHashSalt "prefix"*/ 14 | -------------------------------------------------------------------------------- /apps/website/src/components/Playground/code/templates/margin.js: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/core'; 2 | 3 | export default makeStyles({ 4 | one: { 5 | margin: '1px', 6 | }, 7 | two: { 8 | margin: '1px 2px', 9 | }, 10 | three: { 11 | margin: '1px 2px 3px', 12 | }, 13 | four: { 14 | margin: '1px 2px 3px 4px', 15 | }, 16 | }); 17 | 18 | export const meta = { 19 | name: 'Margin', 20 | position: 1, 21 | }; 22 | -------------------------------------------------------------------------------- /packages/tag-processor/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | displayName: 'tag-processor', 3 | preset: '../../jest.preset.js', 4 | globals: {}, 5 | transform: { 6 | '^.+\\.[tj]sx?$': [ 7 | 'ts-jest', 8 | { 9 | tsconfig: '/tsconfig.spec.json', 10 | }, 11 | ], 12 | }, 13 | moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'], 14 | coverageDirectory: '../../coverage/packages/tag-processor', 15 | }; 16 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/assets-reset-styles/code.ts: -------------------------------------------------------------------------------- 1 | import { makeResetStyles } from '@griffel/react'; 2 | 3 | import blank from './blank.jpg'; 4 | import blankDuplicate from './blank.jpg'; 5 | import empty from './empty.jpg'; 6 | 7 | export const useStyles = makeResetStyles({ 8 | backgroundImage: `url(${blank})`, 9 | ':hover': { backgroundImage: `url(${blankDuplicate})` }, 10 | ':focus': { backgroundImage: `url(${empty})` }, 11 | }); 12 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object-computed-keys/output.meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "usedProcessing": true, 3 | "usedVMForEvaluation": true, 4 | "cssRulesByBucket": { 5 | "d": [ 6 | ".fe3e8s9{color:red;}", 7 | ".fycuoez{padding-left:4px;}", 8 | ".f8wuabp{padding-right:4px;}", 9 | ".fcnqdeg{background-color:green;}", 10 | ".fjf1xye{margin-left:4px;}", 11 | ".f8zmjen{margin-right:4px;}" 12 | ] 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /apps/website/src/components/Playground/code/templates/padding.js: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/core'; 2 | 3 | export default makeStyles({ 4 | one: { 5 | padding: '1px', 6 | }, 7 | two: { 8 | padding: '1px 2px', 9 | }, 10 | three: { 11 | padding: '1px 2px 3px', 12 | }, 13 | four: { 14 | padding: '1px 2px 3px 4px', 15 | }, 16 | }); 17 | 18 | export const meta = { 19 | name: 'Padding', 20 | position: 2, 21 | }; 22 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/assets-reset-styles/code.ts: -------------------------------------------------------------------------------- 1 | import { makeResetStyles } from '@griffel/react'; 2 | 3 | import blank from './blank.jpg'; 4 | import blankDuplicate from './blank.jpg'; 5 | import empty from './empty.jpg'; 6 | 7 | export const useStyles = makeResetStyles({ 8 | backgroundImage: `url(${blank})`, 9 | ':hover': { backgroundImage: `url(${blankDuplicate})` }, 10 | ':focus': { backgroundImage: `url(${empty})` }, 11 | }); 12 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/rules-with-metadata/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | export const useStyles = __styles( 3 | { 4 | media: { 5 | Bn3jx5e: 'ful25cn', 6 | }, 7 | }, 8 | { 9 | m: [ 10 | [ 11 | '@media screen and (max-width: 100px){.ful25cn{color:red;}}', 12 | { 13 | m: 'screen and (max-width: 100px)', 14 | }, 15 | ], 16 | ], 17 | }, 18 | ); 19 | -------------------------------------------------------------------------------- /packages/devtools/jest.setup.js: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line import/no-extraneous-dependencies 2 | Object.assign(global, require('jest-chrome')); 3 | 4 | chrome.devtools.inspectedWindow.getResources.mockImplementation(cb => { 5 | cb([ 6 | { 7 | url: 'webpack://testscope/root/packages/test1/src/App.styles.js?42f2', 8 | type: 'sm-script', 9 | getContent: () => '', 10 | setContent: () => ({}), 11 | }, 12 | ]); 13 | }); 14 | -------------------------------------------------------------------------------- /packages/shadow-dom/tsconfig.storybook.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "jsx": "react", 5 | "emitDecoratorMetadata": true, 6 | "noPropertyAccessFromIndexSignature": false, 7 | "noEmit": true, 8 | "outDir": "" 9 | }, 10 | "exclude": ["src/**/*.spec.ts", "src/**/*.spec.js", "src/**/*.spec.tsx", "src/**/*.spec.jsx", "jest.config.ts"], 11 | "include": ["src/**/*", ".storybook/*.js"] 12 | } 13 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/src/schema.ts: -------------------------------------------------------------------------------- 1 | import type { JSONSchema7 } from 'json-schema'; 2 | 3 | export const configSchema: JSONSchema7 = { 4 | $schema: 'http://json-schema.org/schema', 5 | $id: 'webpackLoader-options', 6 | 7 | properties: { 8 | classNameHashSalt: { 9 | type: 'string', 10 | }, 11 | unstable_keepOriginalCode: { 12 | type: 'boolean', 13 | }, 14 | }, 15 | additionalProperties: false, 16 | }; 17 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/function-mixin/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | import { createMixin } from './mixins'; 3 | export const useStyles = __styles( 4 | { 5 | avatar: { 6 | sj55zd: 'f1817uup', 7 | mc9l5x: 'ftgm304', 8 | abs64n: 'fk73vx1', 9 | }, 10 | }, 11 | { 12 | d: ['.f1817uup{color:var(--colorBrandBackground);}', '.ftgm304{display:block;}', '.fk73vx1{opacity:0;}'], 13 | }, 14 | ); 15 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/object-sequence-expr/output.ts: -------------------------------------------------------------------------------- 1 | import type { GriffelStyle } from '@griffel/react'; 2 | import { __styles } from '@griffel/react'; 3 | const switchClassName = 'fui-Switch'; 4 | let _a: Record; 5 | export const useStyles = __styles( 6 | { 7 | root: { 8 | ozcac4: 'f1cm6cy7', 9 | }, 10 | }, 11 | { 12 | h: ['.f1cm6cy7:hover .fui-Switch:before{background-color:red;}'], 13 | }, 14 | ); 15 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*", "__fixtures__/**/*/output.ts"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 7 | "rules": {} 8 | }, 9 | { 10 | "files": ["*.ts", "*.tsx"], 11 | "rules": {} 12 | }, 13 | { 14 | "files": ["*.js", "*.jsx"], 15 | "rules": {} 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt/code.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | export const useStyles = __styles( 3 | { 4 | root: { 5 | sj55zd: 'feohi3x', 6 | uwmqm3: ['f1rwgqon', 'f1tyzn0d'], 7 | }, 8 | }, 9 | { 10 | d: ['.feohi3x{color:red;}', '.f1rwgqon{padding-left:4px;}', '.f1tyzn0d{padding-right:4px;}'], 11 | }, 12 | ); 13 | /*@griffel:classNameHashSalt "prefix"*/ 14 | -------------------------------------------------------------------------------- /packages/transform/src/index.mts: -------------------------------------------------------------------------------- 1 | // Re-exporting types from @linaria/babel-preset to avoid consumers having to install it directly 2 | 3 | export { default as shakerEvaluator } from '@linaria/shaker'; 4 | export { EvalCache, Module } from '@linaria/babel-preset'; 5 | 6 | export type { Evaluator, EvalRule } from '@linaria/babel-preset'; 7 | 8 | // Our APIs 9 | 10 | export { transformSync, type TransformOptions, type TransformResult } from './transformSync.mjs'; 11 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/multiple-declarations/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | export const useStyles1 = __styles( 3 | { 4 | root: { 5 | sj55zd: 'fe3e8s9', 6 | }, 7 | }, 8 | { 9 | d: ['.fe3e8s9{color:red;}'], 10 | }, 11 | ); 12 | export const useStyles2 = __styles( 13 | { 14 | root: { 15 | sj55zd: 'fka9v86', 16 | }, 17 | }, 18 | { 19 | d: ['.fka9v86{color:green;}'], 20 | }, 21 | ); 22 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object-shorthands/output.meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "usedProcessing": true, 3 | "usedVMForEvaluation": false, 4 | "cssRulesByBucket": { 5 | "d": [ 6 | [ 7 | ".fq3r367{border-right:5px solid red ;}", 8 | { 9 | "p": -1 10 | } 11 | ], 12 | [ 13 | ".f171p8tk{border-bottom:5px solid red;}", 14 | { 15 | "p": -1 16 | } 17 | ] 18 | ] 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /apps/website/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 7 | "rules": { 8 | "import/no-extraneous-dependencies": "off" 9 | } 10 | }, 11 | { 12 | "files": ["*.ts", "*.tsx"], 13 | "rules": {} 14 | }, 15 | { 16 | "files": ["*.js", "*.jsx"], 17 | "rules": {} 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /e2e/utils/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@griffel/e2e-utils", 3 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 4 | "sourceRoot": "e2e/utils/src", 5 | "projectType": "library", 6 | "targets": { 7 | "type-check": { 8 | "executor": "nx:run-commands", 9 | "options": { 10 | "cwd": "e2e/utils", 11 | "commands": [{ "command": "tsc -b --pretty" }] 12 | }, 13 | "outputs": [] 14 | } 15 | }, 16 | "tags": [] 17 | } 18 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/config-babel-options/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | const func = () => { 4 | // This assignment has no sense, but it will prevent us from evaluation in AST 5 | // This fixture uses "colorRenamePlugin.js" in transformPlugin's config so input we should get a different color 6 | const color = 'red'; 7 | 8 | return { color }; 9 | }; 10 | 11 | export const useStyles = makeStyles({ 12 | root: func(), 13 | }); 14 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object-variables/output.meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "usedProcessing": true, 3 | "usedVMForEvaluation": true, 4 | "cssRulesByBucket": { 5 | "d": [ 6 | ".fe3e8s9{color:red;}", 7 | ".fycuoez{padding-left:4px;}", 8 | ".f8wuabp{padding-right:4px;}", 9 | ".fusgiwz{color:#000;}", 10 | ".fcnqdeg{background-color:green;}", 11 | ".fjf1xye{margin-left:4px;}", 12 | ".f8zmjen{margin-right:4px;}" 13 | ] 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /typings/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.base.json", 3 | "compilerOptions": { 4 | "isolatedModules": true, 5 | "allowSyntheticDefaultImports": true, 6 | "skipLibCheck": false, 7 | "noEmit": true, 8 | "types": [] 9 | }, 10 | "include": [], 11 | "files": [], 12 | "references": [ 13 | { 14 | "path": "./environment/tsconfig.json" 15 | }, 16 | { 17 | "path": "./static-assets/tsconfig.json" 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /apps/benchmark/src/implementations/styled-components/View.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const View = styled.div` 4 | align-items: stretch; 5 | border-width: 0; 6 | border-style: solid; 7 | box-sizing: border-box; 8 | display: flex; 9 | flex-basis: auto; 10 | flex-direction: column; 11 | flex-shrink: 0; 12 | margin: 0; 13 | padding: 0; 14 | position: relative; 15 | min-height: 0; 16 | min-width: 0; 17 | `; 18 | 19 | export default View; 20 | -------------------------------------------------------------------------------- /apps/website/src/components/Playground/code/templates/media.js: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/core'; 2 | 3 | export default makeStyles({ 4 | root: { 5 | '@media(forced-colors: active)': { 6 | border: '1px solid transparent', 7 | }, 8 | 9 | '@media screen and (max-width: 468px)': { 10 | display: 'grid', 11 | gap: '1.5rem', 12 | }, 13 | }, 14 | }); 15 | 16 | export const meta = { 17 | name: 'Media queries', 18 | position: 8, 19 | }; 20 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/assets-multiple-declarations/output.ts: -------------------------------------------------------------------------------- 1 | import _asset2 from './empty.jpg'; 2 | import _asset from './blank.jpg'; 3 | import { __styles } from '@griffel/react'; 4 | import blank from './blank.jpg'; 5 | import empty from './empty.jpg'; 6 | export const useStyles = __styles( 7 | { 8 | root: { 9 | Bcmaq0h: 'fp00rh9', 10 | }, 11 | }, 12 | { 13 | d: [`.fp00rh9{background-image:url(${_asset}),url(${_asset2});}`], 14 | }, 15 | ); 16 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/assets/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | import blank from './blank.jpg'; 4 | import blankDuplicate from './blank.jpg'; 5 | import empty from './empty.jpg'; 6 | 7 | export const useStyles = makeStyles({ 8 | rootA: { backgroundImage: `url(${blank})` }, 9 | rootB: { backgroundImage: `url("${blankDuplicate}")` }, 10 | rootC: { backgroundImage: `url(${empty})` }, 11 | assetWithHash: { filter: 'url(./a.svg#a)' }, 12 | }); 13 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object-sequence-expr/code.ts: -------------------------------------------------------------------------------- 1 | import type { GriffelStyle } from '@griffel/react'; 2 | import { makeStyles } from '@griffel/react'; 3 | 4 | const switchClassName = 'fui-Switch'; 5 | let _a: Record; 6 | 7 | export const useStyles = makeStyles({ 8 | root: 9 | ((_a = {}), 10 | (_a[':hover .' + switchClassName] = { 11 | ':before': { 12 | backgroundColor: 'red', 13 | }, 14 | }), 15 | _a), 16 | }); 17 | -------------------------------------------------------------------------------- /packages/vite-plugin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@griffel/vite-plugin", 3 | "version": "0.1.14", 4 | "description": "Vite plugin for Griffel", 5 | "license": "MIT", 6 | "type": "module", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/microsoft/griffel" 10 | }, 11 | "dependencies": { 12 | "@wyw-in-js/vite": "^0.8.0" 13 | }, 14 | "peerDependencies": { 15 | "@griffel/tag-processor": "*", 16 | "vite": ">=4" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /tools/update-shorthands/src/types.ts: -------------------------------------------------------------------------------- 1 | export type MdnLonghandProperty = { 2 | computed: string; 3 | status: 'standard' | 'obsolete'; 4 | }; 5 | export type MdnShorthandProperty = Pick & { 6 | computed: string[]; 7 | }; 8 | 9 | export type MdnProperty = MdnLonghandProperty | MdnShorthandProperty; 10 | export type MdnData = Record; 11 | 12 | export type CSSShorthands = Record; 13 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Microsoft Open Source Code of Conduct 2 | 3 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). 4 | 5 | Resources: 6 | 7 | - [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) 8 | - [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) 9 | - Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns 10 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/assets/code.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/react'; 2 | 3 | import blank from './blank.jpg'; 4 | import blankDuplicate from './blank.jpg'; 5 | import empty from './empty.jpg'; 6 | 7 | export const useStyles = makeStyles({ 8 | rootA: { backgroundImage: `url(${blank})` }, 9 | rootB: { backgroundImage: `url("${blankDuplicate}")` }, 10 | rootC: { backgroundImage: `url(${empty})` }, 11 | assetWithHash: { filter: 'url(./a.svg#a)' }, 12 | }); 13 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/object-sequence-expr/code.ts: -------------------------------------------------------------------------------- 1 | import type { GriffelStyle } from '@griffel/react'; 2 | import { makeStyles } from '@griffel/react'; 3 | 4 | const switchClassName = 'fui-Switch'; 5 | let _a: Record; 6 | 7 | export const useStyles = makeStyles({ 8 | root: 9 | ((_a = {}), 10 | (_a[':hover .' + switchClassName] = { 11 | ':before': { 12 | backgroundColor: 'red', 13 | }, 14 | }), 15 | _a), 16 | }); 17 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/babel/multiple/code.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | 3 | export const stylesA = __styles( 4 | { 5 | root: { 6 | sj55zd: 'fe3e8s9', 7 | }, 8 | }, 9 | { 10 | d: ['.fe3e8s9{color:red;}'], 11 | }, 12 | ); 13 | 14 | export const stylesB = __styles( 15 | { 16 | root: { 17 | De3pzq: 'fcnqdeg', 18 | }, 19 | }, 20 | { 21 | d: ['.fcnqdeg{background-color:green;}'], 22 | }, 23 | ); 24 | -------------------------------------------------------------------------------- /packages/style-types/src/shared.ts: -------------------------------------------------------------------------------- 1 | export type GriffelStylesCSSValue = string | 0; 2 | 3 | /** 4 | * instead of using `CSS.PropertiesFallback` from csstype that remaps properties to `readonly` union we need to use our cutom Fallback mapped type in order to avoid type issues 5 | * @see https://github.com/frenic/csstype/blob/master/src/typescript.ts#L73 6 | */ 7 | export type Fallback = { [P in keyof T]: T[P] | NonNullable[] }; 8 | 9 | export type ValueOrArray = T | Array; 10 | -------------------------------------------------------------------------------- /packages/transform/__fixtures__/object-mixins/output.ts: -------------------------------------------------------------------------------- 1 | import { __css } from '@griffel/react'; 2 | import { flexStyles, gridStyles, typography } from './mixins'; 3 | 4 | export const useStyles = __css({ 5 | root: { mc9l5x: 'f22iagw', Beiy3e4: 'f1vx9l62' }, 6 | label: { Bhrd7zp: 'figsok6' }, 7 | header: { Bhrd7zp: 'f16wzh4i' }, 8 | icon: { mc9l5x: 'f22iagw', Beiy3e4: 'f1vx9l62', sj55zd: 'fe3e8s9' }, 9 | image: { mc9l5x: 'f13qh94s', a6qtfi: 'f85kjgz', sj55zd: 'fka9v86' }, 10 | }); 11 | -------------------------------------------------------------------------------- /apps/website/src/components/Playground/code/templates/container.js: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/core'; 2 | 3 | export default makeStyles({ 4 | root: { 5 | '@container (max-width: 468px)': { 6 | display: 'grid', 7 | gap: '1.5rem', 8 | }, 9 | 10 | '@container foo (max-width: 468px)': { 11 | display: 'grid', 12 | gap: '1.5rem', 13 | }, 14 | }, 15 | }); 16 | 17 | export const meta = { 18 | name: 'Container queries', 19 | position: 11, 20 | }; 21 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/shared-mixins/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | import { sharedStyles } from './mixins'; 3 | export const useStyles = __styles( 4 | { 5 | root: { 6 | mc9l5x: 'f22iagw', 7 | }, 8 | container: { 9 | mc9l5x: 'f13qh94s', 10 | }, 11 | icon: { 12 | sj55zd: 'fe3e8s9', 13 | }, 14 | }, 15 | { 16 | d: ['.f22iagw{display:flex;}', '.f13qh94s{display:grid;}', '.fe3e8s9{color:red;}'], 17 | }, 18 | ); 19 | -------------------------------------------------------------------------------- /packages/eslint-plugin/jest.config.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | export default { 3 | displayName: 'eslint-plugin', 4 | preset: '../../jest.preset.js', 5 | globals: {}, 6 | testEnvironment: 'node', 7 | transform: { 8 | '^.+\\.[tj]sx?$': [ 9 | 'ts-jest', 10 | { 11 | tsconfig: '/tsconfig.spec.json', 12 | }, 13 | ], 14 | }, 15 | moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'], 16 | coverageDirectory: '../../coverage/packages/eslint-plugin', 17 | }; 18 | -------------------------------------------------------------------------------- /apps/website/src/components/Playground/code/templates/border.js: -------------------------------------------------------------------------------- 1 | import { makeStyles, shorthands } from '@griffel/core'; 2 | 3 | export default makeStyles({ 4 | border: { 5 | border: '1px solid red', 6 | }, 7 | borderTop: { 8 | borderTop: '2px solid blue', 9 | }, 10 | borderColor: { 11 | ...shorthands.borderColor('red'), 12 | }, 13 | borderRadius: { 14 | borderRadius: '5px', 15 | }, 16 | }); 17 | 18 | export const meta = { 19 | name: 'Border', 20 | position: 3, 21 | }; 22 | -------------------------------------------------------------------------------- /packages/core/src/devtools/isDevToolsEnabled.ts: -------------------------------------------------------------------------------- 1 | export const isDevToolsEnabled: boolean = (() => { 2 | // Accessing "window.sessionStorage" causes an exception when third party cookies are blocked 3 | // https://stackoverflow.com/questions/30481516/iframe-in-chrome-error-failed-to-read-localstorage-from-window-access-deni 4 | try { 5 | return Boolean(typeof window !== 'undefined' && window.sessionStorage?.getItem('__GRIFFEL_DEVTOOLS__')); 6 | } catch (e) { 7 | return false; 8 | } 9 | })(); 10 | -------------------------------------------------------------------------------- /packages/core/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "module": "commonjs", 6 | "types": ["jest", "node", "environment"] 7 | }, 8 | "include": [ 9 | "**/*.test.ts", 10 | "**/*.spec.ts", 11 | "**/*.test.tsx", 12 | "**/*.spec.tsx", 13 | "**/*.test.js", 14 | "**/*.spec.js", 15 | "**/*.test.jsx", 16 | "**/*.spec.jsx", 17 | "**/*.d.ts", 18 | "jest.config.ts" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /packages/react/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "module": "commonjs", 6 | "types": ["jest", "node", "environment"] 7 | }, 8 | "include": [ 9 | "**/*.test.ts", 10 | "**/*.spec.ts", 11 | "**/*.test.tsx", 12 | "**/*.spec.tsx", 13 | "**/*.test.js", 14 | "**/*.spec.js", 15 | "**/*.test.jsx", 16 | "**/*.spec.jsx", 17 | "**/*.d.ts", 18 | "jest.config.ts" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/config-split-chunks/code.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | 3 | export const styles = __styles( 4 | { 5 | root: { 6 | Bi91k9c: 'faf35ka', 7 | }, 8 | }, 9 | { 10 | d: ['.fcnqdeg{background-color:green;}'], 11 | }, 12 | ); 13 | 14 | export async function loadStyles() { 15 | const stylesA = await import('./chunkA'); 16 | const stylesB = await import('./chunkB'); 17 | 18 | return [stylesA, stylesB]; 19 | } 20 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-keep-original-code/code.ts: -------------------------------------------------------------------------------- 1 | import { __resetStyles, __styles } from '@griffel/react'; 2 | 3 | export const useClasses = __styles( 4 | { 5 | root: { 6 | sj55zd: 'fe3e8s9', 7 | }, 8 | }, 9 | { 10 | d: ['.fe3e8s9{color:red;}'], 11 | }, 12 | ); 13 | 14 | export const useClassName = __resetStyles('rjefjbm', 'r7z97ji', [ 15 | '.rjefjbm{color:red;padding-left:4px;}', 16 | '.r7z97ji{color:red;padding-right:4px;}', 17 | ]); 18 | -------------------------------------------------------------------------------- /apps/benchmark/src/components/Select.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | interface SelectProps { 4 | children: React.ReactNode; 5 | label: string; 6 | } 7 | 8 | const Select: React.FC> = props => { 9 | const { children, label, ...rest } = props; 10 | return ( 11 |
12 | 13 | 14 |
15 | ); 16 | }; 17 | 18 | export default Select; 19 | -------------------------------------------------------------------------------- /apps/website/src/components/Playground/code/templates/pseudo-elements.js: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/core'; 2 | 3 | export default makeStyles({ 4 | before: { 5 | ':before': { 6 | content: '""', 7 | position: 'absolute', 8 | }, 9 | }, 10 | 11 | after: { 12 | ':after': { 13 | color: 'red', 14 | content: '""', 15 | position: 'absolute', 16 | }, 17 | }, 18 | }); 19 | 20 | export const meta = { 21 | name: 'Pseudo-elements', 22 | position: 5, 23 | }; 24 | -------------------------------------------------------------------------------- /apps/website/src/components/Playground/code/templates/pseudo-selectors.js: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@griffel/core'; 2 | 3 | export default makeStyles({ 4 | focus: { 5 | ':focus': { 6 | color: 'red', 7 | }, 8 | }, 9 | 10 | hover: { 11 | ':hover': { 12 | color: 'red', 13 | }, 14 | }, 15 | 16 | active: { 17 | ':active': { 18 | color: 'red', 19 | }, 20 | }, 21 | }); 22 | 23 | export const meta = { 24 | name: 'Pseudo-selectors', 25 | position: 4, 26 | }; 27 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/duplicated-imports/code.ts: -------------------------------------------------------------------------------- 1 | // @ts-expect-error This module does not exist, but will be resolved via aliases 2 | import { createStylesA } from 'custom-package'; 3 | // @ts-expect-error This module does not exist, but will be resolved via aliases 4 | import { createStylesB } from 'custom-package'; 5 | 6 | export const useClassesA = createStylesA({ 7 | root: { color: 'red' }, 8 | }); 9 | 10 | export const useClassesB = createStylesB({ 11 | root: { color: 'yellow' }, 12 | }); 13 | -------------------------------------------------------------------------------- /packages/core/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "types": ["node", "environment"] 6 | }, 7 | "exclude": [ 8 | "**/*.spec.ts", 9 | "**/*.test.ts", 10 | "**/*.spec.tsx", 11 | "**/*.test.tsx", 12 | "**/*.spec.js", 13 | "**/*.test.js", 14 | "**/*.spec.jsx", 15 | "**/*.test.jsx", 16 | "jest.config.ts" 17 | ], 18 | "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"] 19 | } 20 | -------------------------------------------------------------------------------- /packages/postcss-syntax/jest.config.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | export default { 3 | displayName: 'eslint-plugin', 4 | preset: '../../jest.preset.js', 5 | globals: {}, 6 | testEnvironment: 'node', 7 | transform: { 8 | '^.+\\.[tj]sx?$': [ 9 | 'ts-jest', 10 | { 11 | tsconfig: '/tsconfig.spec.json', 12 | }, 13 | ], 14 | }, 15 | moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'], 16 | coverageDirectory: '../../coverage/packages/eslint-plugin', 17 | }; 18 | -------------------------------------------------------------------------------- /packages/shadow-dom/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "module": "commonjs", 6 | "types": ["jest", "node", "environment"] 7 | }, 8 | "include": [ 9 | "**/*.test.ts", 10 | "**/*.spec.ts", 11 | "**/*.test.tsx", 12 | "**/*.spec.tsx", 13 | "**/*.test.js", 14 | "**/*.spec.js", 15 | "**/*.test.jsx", 16 | "**/*.spec.jsx", 17 | "**/*.d.ts", 18 | "jest.config.ts" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /packages/style-types/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "module": "commonjs", 6 | "types": ["jest", "node", "environment"] 7 | }, 8 | "include": [ 9 | "**/*.test.ts", 10 | "**/*.spec.ts", 11 | "**/*.test.tsx", 12 | "**/*.spec.tsx", 13 | "**/*.test.js", 14 | "**/*.spec.js", 15 | "**/*.test.jsx", 16 | "**/*.spec.jsx", 17 | "**/*.d.ts", 18 | "jest.config.ts" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /packages/tag-processor/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "jsx": "react", 5 | "outDir": "../../dist/out-tsc", 6 | "module": "commonjs", 7 | "types": ["jest", "node", "environment"] 8 | }, 9 | "include": [ 10 | "**/*.test.ts", 11 | "**/*.spec.ts", 12 | "**/*.test.tsx", 13 | "**/*.spec.tsx", 14 | "**/*.test.js", 15 | "**/*.spec.js", 16 | "**/*.test.jsx", 17 | "**/*.spec.jsx", 18 | "**/*.d.ts" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /packages/webpack-loader/jest.config.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | export default { 3 | displayName: 'webpack-loader', 4 | preset: '../../jest.preset.js', 5 | globals: {}, 6 | testEnvironment: 'node', 7 | transform: { 8 | '^.+\\.[tj]sx?$': [ 9 | 'ts-jest', 10 | { 11 | tsconfig: '/tsconfig.spec.json', 12 | }, 13 | ], 14 | }, 15 | moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'], 16 | coverageDirectory: '../../coverage/packages/webpack-loader', 17 | }; 18 | -------------------------------------------------------------------------------- /tools/update-shorthands/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*", "__fixtures__/*/output.ts"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 7 | "rules": { 8 | "import/no-extraneous-dependencies": "off" 9 | } 10 | }, 11 | { 12 | "files": ["*.ts", "*.tsx"], 13 | "rules": {} 14 | }, 15 | { 16 | "files": ["*.js", "*.jsx"], 17 | "rules": {} 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /packages/eslint-plugin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@griffel/eslint-plugin", 3 | "version": "2.0.1", 4 | "description": "ESLint plugin with lint rules for Griffel", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/microsoft/griffel" 9 | }, 10 | "dependencies": { 11 | "@typescript-eslint/utils": "^7.18.0", 12 | "csstype": "^3.1.3", 13 | "tslib": "^2.1.0" 14 | }, 15 | "peerDependencies": { 16 | "eslint": "^7.5.0 || ^8.0.0" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/eslint-plugin/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "module": "commonjs", 6 | "types": ["jest", "node", "environment"] 7 | }, 8 | "include": [ 9 | "**/*.test.ts", 10 | "**/*.spec.ts", 11 | "**/*.test.tsx", 12 | "**/*.spec.tsx", 13 | "**/*.test.js", 14 | "**/*.spec.js", 15 | "**/*.test.jsx", 16 | "**/*.spec.jsx", 17 | "**/*.d.ts", 18 | "jest.config.ts" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /packages/postcss-syntax/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@griffel/postcss-syntax", 3 | "version": "1.3.4", 4 | "description": "postcss syntax for Griffel", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/microsoft/griffel" 9 | }, 10 | "dependencies": { 11 | "@babel/core": "^7.23.2", 12 | "@griffel/babel-preset": "^1.7.0", 13 | "@babel/helper-plugin-utils": "^7.22.5", 14 | "postcss": "^8.4.29" 15 | }, 16 | "main": "./src/index.js" 17 | } 18 | -------------------------------------------------------------------------------- /packages/postcss-syntax/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "module": "commonjs", 6 | "types": ["jest", "node", "environment"] 7 | }, 8 | "include": [ 9 | "**/*.test.ts", 10 | "**/*.spec.ts", 11 | "**/*.test.tsx", 12 | "**/*.spec.tsx", 13 | "**/*.test.js", 14 | "**/*.spec.js", 15 | "**/*.test.jsx", 16 | "**/*.spec.jsx", 17 | "**/*.d.ts", 18 | "jest.config.ts" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /packages/style-types/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "types": ["node", "environment"] 6 | }, 7 | "exclude": [ 8 | "**/*.spec.ts", 9 | "**/*.test.ts", 10 | "**/*.spec.tsx", 11 | "**/*.test.tsx", 12 | "**/*.spec.js", 13 | "**/*.test.js", 14 | "**/*.spec.jsx", 15 | "**/*.test.jsx", 16 | "jest.config.ts" 17 | ], 18 | "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"] 19 | } 20 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/webpack-aliases/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | // @ts-expect-error This module will be resolved via aliases 3 | import color from 'non-existing-color-module'; 4 | import { tokens } from './tokens'; 5 | export const styles = __styles( 6 | { 7 | root: { 8 | De3pzq: 'f1bh81bl', 9 | sj55zd: 'fl9q5hc', 10 | }, 11 | }, 12 | { 13 | d: ['.f1bh81bl{background-color:blue;}', '.fl9q5hc{color:var(--colorBrandStroke1);}'], 14 | }, 15 | ); 16 | -------------------------------------------------------------------------------- /tools/update-shorthands/jest.config.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | export default { 3 | displayName: 'update-shorthands', 4 | preset: '../../jest.preset.js', 5 | globals: {}, 6 | testEnvironment: 'node', 7 | transform: { 8 | '^.+\\.[tj]sx?$': [ 9 | 'ts-jest', 10 | { 11 | tsconfig: '/tsconfig.spec.json', 12 | }, 13 | ], 14 | }, 15 | moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'], 16 | coverageDirectory: '../../coverage/tools/update-shorthands', 17 | }; 18 | -------------------------------------------------------------------------------- /packages/devtools/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "module": "commonjs", 6 | "types": ["chrome", "jest", "node", "environment"] 7 | }, 8 | "include": [ 9 | "**/*.test.ts", 10 | "**/*.spec.ts", 11 | "**/*.test.tsx", 12 | "**/*.spec.tsx", 13 | "**/*.test.js", 14 | "**/*.spec.js", 15 | "**/*.test.jsx", 16 | "**/*.spec.jsx", 17 | "**/*.d.ts", 18 | "jest.config.ts" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /packages/next-extraction-plugin/jest.config.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | export default { 3 | displayName: 'next-extraction-plugin', 4 | preset: '../../jest.preset.js', 5 | globals: {}, 6 | testEnvironment: 'node', 7 | transform: { 8 | '^.+\\.[tj]sx?$': [ 9 | 'ts-jest', 10 | { 11 | tsconfig: '/tsconfig.spec.json', 12 | }, 13 | ], 14 | }, 15 | moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'], 16 | coverageDirectory: '../../coverage/packages/next-extraction-plugin', 17 | }; 18 | -------------------------------------------------------------------------------- /packages/postcss-syntax/src/stringify.ts: -------------------------------------------------------------------------------- 1 | import type * as postcss from 'postcss'; 2 | import { GRIFFEL_SRC_RAW } from './constants'; 3 | 4 | export const stringify: postcss.Stringifier = root => { 5 | const originalSource = root.raw(GRIFFEL_SRC_RAW); 6 | if (originalSource) { 7 | return originalSource; 8 | } 9 | 10 | // TODO maybe we could generate some default Griffel file with all styles in one slot 11 | throw new Error('Griffel syntax stringifier can only stringify AST parsed with the custom syntax'); 12 | }; 13 | -------------------------------------------------------------------------------- /packages/webpack-extraction-plugin/__fixtures__/webpack/assets-flip/code.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | 3 | import _asset from './left.jpg'; 4 | import _asset2 from './right.jpg'; 5 | 6 | export const useStyles = __styles( 7 | { 8 | root: { 9 | Bcmaq0h: ['ftcbn0w', 'f37sp7w'], 10 | }, 11 | }, 12 | { 13 | d: [ 14 | `.ftcbn0w{background-image:url(${_asset}),url(${_asset2});}`, 15 | `.f37sp7w{background-image:url(${_asset2}),url(${_asset});}`, 16 | ], 17 | }, 18 | ); 19 | -------------------------------------------------------------------------------- /packages/webpack-loader/__fixtures__/webpack-resolve-plugins/output.ts: -------------------------------------------------------------------------------- 1 | import { __styles } from '@griffel/react'; 2 | import { tokens } from './tokens'; 3 | // @ts-expect-error This module will be resolved via aliases 4 | import color from 'non-existing-color-module'; 5 | export const styles = __styles( 6 | { 7 | root: { 8 | De3pzq: 'f1bh81bl', 9 | sj55zd: 'fl9q5hc', 10 | }, 11 | }, 12 | { 13 | d: ['.f1bh81bl{background-color:blue;}', '.fl9q5hc{color:var(--colorBrandStroke1);}'], 14 | }, 15 | ); 16 | -------------------------------------------------------------------------------- /apps/website/src/theme/Footer/index.tsx: -------------------------------------------------------------------------------- 1 | import { useThemeConfig } from '@docusaurus/theme-common'; 2 | import FooterLinks from '@theme/Footer/Links'; 3 | import * as React from 'react'; 4 | 5 | function Footer() { 6 | const { footer } = useThemeConfig(); 7 | 8 | if (!footer) { 9 | return null; 10 | } 11 | 12 | const { links } = footer; 13 | 14 | return ( 15 |
16 | 17 |
18 | ); 19 | } 20 | export default React.memo(Footer); 21 | -------------------------------------------------------------------------------- /packages/babel-preset/__fixtures__/config-babel-options/colorRenamePlugin.js: -------------------------------------------------------------------------------- 1 | // A small transformPlugin to test configuration options 2 | // Replaces all "red" strings with "blue" ones 3 | 4 | module.exports = function (babel) { 5 | const { types: t } = babel; 6 | 7 | return { 8 | name: 'color-rename-transformPlugin', 9 | visitor: { 10 | StringLiteral(path) { 11 | if (path.node.value === 'red') { 12 | path.replaceWith(t.StringLiteral('blue')); 13 | } 14 | }, 15 | }, 16 | }; 17 | }; 18 | -------------------------------------------------------------------------------- /packages/devtools/src/ViewContext.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export type ViewContextType = { 4 | highlightedClass: string; 5 | setHighlightedClass: React.Dispatch>; 6 | }; 7 | 8 | export const ViewContext = React.createContext({ 9 | highlightedClass: '', 10 | // eslint-disable-next-line @typescript-eslint/no-empty-function 11 | setHighlightedClass: () => {}, 12 | }); 13 | 14 | export function useViewContext() { 15 | return React.useContext(ViewContext); 16 | } 17 | --------------------------------------------------------------------------------