Components: Add styles package for new style system

packages/components/src/ui/create-styles/create-compiler/create-compiler.js

@@ -7,15 +7,13 @@ import mitt from 'mitt';
 /**
  * Internal dependencies
  */
-import { RootStore } from '../css-custom-properties';
 import { createCSS } from './create-css';
 import { createPlugins } from './plugins';
 import { breakpoints, generateInterpolationName } from './utils';
 
 const defaultOptions = {
 	key: 'css',
 	specificityLevel: 1,
-	rootStore: new RootStore(),
 };
 
 /* eslint-disable jsdoc/valid-types */
@@ -32,26 +30,24 @@ const defaultOptions = {
  * @typedef {import('create-emotion').Options & {
  *	key?: string,
  *	specificityLevel?: number,
- *	rootStore: import('../css-custom-properties').RootStore
  * }} CreateCompilerOptions
  */
 
 /**
  * @param {CreateCompilerOptions} options
  * @return {Compiler} The compiler.
  */
-export function createCompiler( options ) {
+export function createCompiler( options = {} ) {
 	const mergedOptions = {
 		...defaultOptions,
 		...options,
 	};
 
-	const { key, rootStore, specificityLevel } = mergedOptions;
+	const { key, specificityLevel } = mergedOptions;
 
 	const defaultPlugins = createPlugins( {
 		key,
 		specificityLevel,
-		rootStore,
 	} );
 
 	if ( options.stylisPlugins ) {

packages/components/src/ui/create-styles/create-compiler/plugins/index.js

@@ -6,30 +6,19 @@ import cssGridPlugin from 'styled-griddie';
 /**
  * Internal dependencies
  */
-import cssVariablesPlugin from './css-variables';
 import specificityPlugin from './extra-specificity';
 
-const isProd = process.env.NODE_ENV === 'production';
-
 /**
  * A collection of custom Stylis plugins to enhance the way the compiler (Emotion)
  * generates selectors and CSS rules.
  *
  * @param {Object} options
  * @param {number} [options.specificityLevel=7]
  * @param {string} [options.key='css']
- * @param {boolean} [options.skipSupportedBrowsers]
- * @param {import('../../css-custom-properties').RootStore} [options.rootStore]
  * @return {import('@emotion/stylis').Plugin[]} The list of stylis plugins.
  */
-export function createPlugins( {
-	specificityLevel = 1,
-	key = 'css',
-	rootStore,
-	skipSupportedBrowsers = isProd,
-} ) {
+export function createPlugins( { specificityLevel = 1, key = 'css' } ) {
 	return [
-		cssVariablesPlugin( { skipSupportedBrowsers, rootStore } ),
 		specificityPlugin( { level: specificityLevel, key } ),
 		// @ts-ignore styled-griddie imports StylisPlugin from `styled-components` which has different types from the actual one we're using here
 		cssGridPlugin,

packages/components/src/ui/create-styles/create-style-system/create-style-system.js

@@ -2,7 +2,6 @@
  * Internal dependencies
  */
 import { createCompiler } from '../create-compiler';
-import { createRootStore } from '../css-custom-properties';
 import { createCoreElement } from './create-core-element';
 import { createCoreElements } from './create-core-elements';
 import { createStyledComponents } from './create-styled-components';
@@ -28,7 +27,6 @@ const defaultOptions = DEFAULT_STYLE_SYSTEM_OPTIONS;
  * @property {(value: keyof (TConfig & TDarkConfig & THCConfig & TDarkHCConfig) | TGeneratedTokens) => string} get The primary function to retrieve Style system variables.
  * @property {import('./polymorphic-component').CreateStyled} styled A set of styled components.
  * @property {import('react').ComponentType} View The base <View /> component.
- * @property {import('../css-custom-properties').RootStore} rootStore The root store.
  */
 
 /**
@@ -84,16 +82,10 @@ export function createStyleSystem( options = defaultOptions ) {
 		highContrastModeConfig,
 	} );
 
-	const rootStore = createRootStore( globalStyles.globalVariables );
-	rootStore.setState( globalStyles.globalVariables );
-
 	/**
 	 * Compiler (Custom Emotion instance).
 	 */
-	const compiler = createCompiler( {
-		...compilerOptions,
-		rootStore,
-	} );
+	const compiler = createCompiler( compilerOptions );
 	const { css, cx } = compiler;
 
 	/**
@@ -142,7 +134,6 @@ export function createStyleSystem( options = defaultOptions ) {
 		) => `var(${ createToken( key.toString() ) })`,
 		styled,
 		View,
-		rootStore,
 	};
 
 	return styleSystem;