.flowconfig

@@ -10,11 +10,19 @@ packages/.*/*.js.flow
 .*/node_modules/.*
 
 [lints]
+deprecated-utility=warn
+unnecessary-optional-chain=warn
+implicit-inexact-object=error
+untyped-type-import=error
 
 [options]
+exact_by_default=true
 
 [strict]
+deprecated-type
+deprecated-utility
 nonstrict-import
+sketchy-null
 unclear-type
 unsafe-getters-setters
 untyped-import

.prettierrc

@@ -1,5 +1,5 @@
 {
-  "jsxBracketSameLine": true,
+  "bracketSameLine": true,
   "bracketSpacing": true,
   "semi": true,
   "tabWidth": 2,

.storybook/main.js

@@ -4,4 +4,6 @@ module.exports = {
     builder: 'webpack5',
   },
   stories: ['../examples/stories/*.tsx'],
+  // Workaround for https://github.com/storybookjs/storybook/issues/15336
+  typescript: { reactDocgen: false },
 };

examples/packages/babel-component/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @private/babel-component
 
+## 0.0.8
+
+### Patch Changes
+
+- Updated dependencies [4309aaa]
+  - @compiled/react@0.9.1
+
 ## 0.0.7
 
 ### Patch Changes

examples/packages/babel-component/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@private/babel-component",
   "private": true,
-  "version": "0.0.7",
+  "version": "0.0.8",
   "main": "./dist/index.js",
   "scripts": {
     "build": "babel ./src --out-dir=./dist"
@@ -11,10 +11,10 @@
   },
   "devDependencies": {
     "@compiled/babel-plugin": "*",
-    "@babel/core": "^7.15.8",
-    "@babel/cli": "^7.15.7",
-    "@babel/preset-env": "^7.15.8",
-    "@babel/preset-react": "^7.14.5"
+    "@babel/core": "^7.16.0",
+    "@babel/cli": "^7.16.0",
+    "@babel/preset-env": "^7.16.0",
+    "@babel/preset-react": "^7.16.0"
   },
   "peerDependencies": {
     "react": "^17.0.1"

examples/packages/module-a/index.d.ts

@@ -9,9 +9,7 @@ export const objectStyles: {
   backgroundColor: (bgColor?: string) => string | undefined;
 };
 
-export const colorMixin: (
-  radius: number
-) => {
+export const colorMixin: (radius: number) => {
   color: string;
   backgroundColor: string;
   borderRadius: number;

examples/packages/parcel-resolver-alias/CHANGELOG.md

@@ -1,6 +1,14 @@
 # @compiled/parcel-resolver-alias
 
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies [4309aaa]
+  - @compiled/react@0.9.1
+
 ## 0.0.1
+
 ### Patch Changes
 
 - 0b60ae1: Add placeholder resolver example

examples/packages/parcel-resolver-alias/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/parcel-resolver-alias",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": true,
   "main": "dist/index.js",
   "dependencies": {

examples/packages/parcel/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @compiled/parcel-app
 
+## 1.0.7
+
+### Patch Changes
+
+- Updated dependencies [4309aaa]
+  - @compiled/react@0.9.1
+
 ## 1.0.6
 
 ### Patch Changes

examples/packages/parcel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/parcel-app",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "private": true,
   "scripts": {
     "start": "parcel serve ./src/index.html --open --no-cache",

examples/packages/ssr/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @private/ssr
 
+## 1.0.7
+
+### Patch Changes
+
+- Updated dependencies [4309aaa]
+  - @compiled/react@0.9.1
+
 ## 1.0.6
 
 ### Patch Changes

examples/packages/ssr/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@private/ssr",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "private": true,
   "scripts": {
     "start": "razzle start",
     "build": "razzle build",
     "start:prod": "NODE_ENV=production node build/server.js"
   },
   "dependencies": {
-    "@babel/helper-builder-react-jsx": "^7.15.4",
+    "@babel/helper-builder-react-jsx": "^7.16.0",
     "@babel/helper-builder-react-jsx-experimental": "^7.12.11",
     "@compiled/react": "*",
     "express": "4.17.1",

examples/packages/webpack/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @compiled/webpack-app
 
+## 1.0.8
+
+### Patch Changes
+
+- Updated dependencies [4309aaa]
+  - @compiled/react@0.9.1
+  - @private/babel-component@0.0.8
+  - @compiled/webpack-loader@0.7.2
+
+## 1.0.7
+
+### Patch Changes
+
+- @compiled/webpack-loader@0.7.1
+
 ## 1.0.6
 
 ### Patch Changes

examples/packages/webpack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/webpack-app",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "private": true,
   "scripts": {
     "start": "webpack serve --hot",
@@ -10,15 +10,15 @@
     "@compiled/react": "*",
     "@compiled/webpack-loader": "*",
     "@private/babel-component": "*",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^8.2.3",
     "css-loader": "^5.2.7",
     "css-minimizer-webpack-plugin": "^1.3.0",
-    "html-webpack-plugin": "^5.3.2",
+    "html-webpack-plugin": "^5.5.0",
     "mini-css-extract-plugin": "^1.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "style-loader": "^2.0.0",
-    "webpack": "^5.58.1",
-    "webpack-cli": "^4.9.0"
+    "webpack": "^5.61.0",
+    "webpack-cli": "^4.9.1"
   }
 }

examples/stories/conditional-rules-styled.tsx

@@ -28,6 +28,15 @@ const TextWithTernaryOperatorTemplateLiteral = styled.span<TextProps>`
     props.isPrimary && props.isMaybe ? (props.isBolded && 'bold') || 'normal' : 'light'};
 `;
 
+const TextWithNestedTernaryOperatorTemplateLiteralCssVariable = styled.span<TextProps>`
+  color: ${(props) => (props.isPrimary ? (props.isMaybe ? 'orange' : 'blue') : 'red')};
+`;
+
+const TextWithNestedTernaryOperatorTemplateLiteral = styled.span<TextProps>`
+  ${(props) =>
+    props.isPrimary ? (props.isMaybe ? 'color: orange' : 'color: blue') : 'color: red'};
+`;
+
 const TextWithObjectStyles = styled.span<TextProps>(
   { color: 'red' },
   (props) => props.isPrimary && { color: 'blue' },
@@ -41,6 +50,16 @@ const TextWithTernaryAndBooleanObjectStyle = styled.span<TextProps>({ fontSize:
   props.isPrimary && props.isBolded ? { color: 'blue', fontWeight: 'bold' } : { color: 'red' }
 );
 
+const TextWithNestedTernaryAndBooleanObjectStyle = styled.span<TextProps>(
+  { fontSize: '20px' },
+  (props) =>
+    props.isPrimary
+      ? props.isBolded
+        ? { color: 'blue', fontWeight: 'bold' }
+        : { color: 'blue' }
+      : { color: 'red' }
+);
+
 const TextWithMixins = styled.span<TextProps>`
   ${(props) =>
     props.isPrimary ? primaryTaggedTemplateExpression : secondaryTaggedTemplateExpression};
@@ -72,6 +91,10 @@ const KeyValueString = styled.div<TextProps>`
   ${(props) => (props.isPrimary ? 'color: green' : `color: red`)};
 `;
 
+const NoValuePath = styled.div<TextProps>`
+  ${(props) => (props.isPrimary ? undefined : 'color: red')}
+`;
+
 export const PrimaryTextWithTemplateLiteral = (): JSX.Element => {
   return <TextWithTemplateLiteral isPrimary>Hello primary</TextWithTemplateLiteral>;
 };
@@ -102,6 +125,73 @@ export const NotPrimaryTextWithTernaryOperatorTemplateLiteral = (): JSX.Element
   );
 };
 
+export const PrimaryTextWithNestedTernaryOperatorTemplateLiteralCssVariable = (): JSX.Element => {
+  return (
+    <TextWithNestedTernaryOperatorTemplateLiteralCssVariable isPrimary>
+      Hello primary (blue)
+    </TextWithNestedTernaryOperatorTemplateLiteralCssVariable>
+  );
+};
+
+export const PrimaryMaybeTextWithNestedTernaryOperatorTemplateLiteralCssVariable =
+  (): JSX.Element => {
+    return (
+      <TextWithNestedTernaryOperatorTemplateLiteralCssVariable isPrimary isMaybe>
+        Hello primary maybe (orange)
+      </TextWithNestedTernaryOperatorTemplateLiteralCssVariable>
+    );
+  };
+
+export const NotPrimaryTextWithNestedTernaryOperatorTemplateLiteralCssVariable =
+  (): JSX.Element => {
+    return (
+      <TextWithNestedTernaryOperatorTemplateLiteralCssVariable>
+        Hello secondary (red)
+      </TextWithNestedTernaryOperatorTemplateLiteralCssVariable>
+    );
+  };
+
+export const NotPrimaryMaybeTextWithNestedTernaryOperatorTemplateLiteralCssVariable =
+  (): JSX.Element => {
+    return (
+      <TextWithNestedTernaryOperatorTemplateLiteralCssVariable isMaybe>
+        Hello secondary (red)
+      </TextWithNestedTernaryOperatorTemplateLiteralCssVariable>
+    );
+  };
+
+export const PrimaryTextWithNestedTernaryOperatorTemplateLiteral = (): JSX.Element => {
+  return (
+    <TextWithNestedTernaryOperatorTemplateLiteral isPrimary>
+      Hello primary (blue)
+    </TextWithNestedTernaryOperatorTemplateLiteral>
+  );
+};
+
+export const PrimaryMaybeTextWithNestedTernaryOperatorTemplateLiteral = (): JSX.Element => {
+  return (
+    <TextWithNestedTernaryOperatorTemplateLiteral isPrimary isMaybe>
+      Hello primary maybe (orange)
+    </TextWithNestedTernaryOperatorTemplateLiteral>
+  );
+};
+
+export const NotPrimaryTextWithNestedTernaryOperatorTemplateLiteral = (): JSX.Element => {
+  return (
+    <TextWithNestedTernaryOperatorTemplateLiteral>
+      Hello secondary (red)
+    </TextWithNestedTernaryOperatorTemplateLiteral>
+  );
+};
+
+export const NotPrimaryMaybeTextWithNestedTernaryOperatorTemplateLiteral = (): JSX.Element => {
+  return (
+    <TextWithNestedTernaryOperatorTemplateLiteral isMaybe>
+      Hello secondary (red)
+    </TextWithNestedTernaryOperatorTemplateLiteral>
+  );
+};
+
 export const PrimaryTextWithObjectStyles = (): JSX.Element => {
   return <TextWithObjectStyles isPrimary>Hello primary</TextWithObjectStyles>;
 };
@@ -142,6 +232,43 @@ export const NotPrimaryTextWithTernaryAndBooleanObjectStyle = (): JSX.Element =>
   );
 };
 
+export const PrimaryTextWithNestedTernaryAndBooleanObjectStyle = (): JSX.Element => {
+  return (
+    <TextWithNestedTernaryAndBooleanObjectStyle isPrimary>
+      {' '}
+      Hello primary but not bolded. This should be blue.
+    </TextWithNestedTernaryAndBooleanObjectStyle>
+  );
+};
+
+export const BoldedPrimaryNestedTextWithTernaryAndBooleanObjectStyle = (): JSX.Element => {
+  return (
+    <TextWithNestedTernaryAndBooleanObjectStyle isPrimary isBolded>
+      {' '}
+      Hello bolded primary. This should be blue.
+    </TextWithNestedTernaryAndBooleanObjectStyle>
+  );
+};
+
+export const NotPrimaryTextWithNestedTernaryAndBooleanObjectStyle = (): JSX.Element => {
+  return (
+    // should not render bold since it is not also primary
+    <TextWithNestedTernaryAndBooleanObjectStyle isBolded>
+      {' '}
+      Hello secondary
+    </TextWithNestedTernaryAndBooleanObjectStyle>
+  );
+};
+
+export const NotPrimaryNotBoldedTextWithNestedTernaryAndBooleanObjectStyle = (): JSX.Element => {
+  return (
+    <TextWithNestedTernaryAndBooleanObjectStyle>
+      {' '}
+      Hello secondary
+    </TextWithNestedTernaryAndBooleanObjectStyle>
+  );
+};
+
 export const PrimaryTextWithMixins = (): JSX.Element => {
   return <TextWithMixins isPrimary>Hello primary</TextWithMixins>;
 };
@@ -175,3 +302,12 @@ export const TextWithKeyValueString = (): JSX.Element => (
     <KeyValueString isPrimary={false}>color: red</KeyValueString>
   </div>
 );
+
+export const ConditionWithNoValuePath = (): JSX.Element => {
+  return (
+    <div>
+      <NoValuePath isPrimary>Primary path with no given CSS</NoValuePath>
+      <NoValuePath>Secondary path with CSS</NoValuePath>
+    </div>
+  );
+};

examples/stories/css-prop-static-object.tsx

@@ -82,3 +82,19 @@ export const ObjectLiteralMapWithKeys = (): JSX.Element => (
     ))}
   </div>
 );
+
+export const ObjectExpressionDisabledSameLine = (): JSX.Element => (
+  <h1
+    css={{ color: 'red' }} // @compiled-disable-line transform-css-prop
+  >
+    Black text
+  </h1>
+);
+
+export const ObjectExpressionDisabledNextLine = (): JSX.Element => (
+  <h1
+    // @compiled-disable-next-line transform-css-prop
+    css={{ color: 'red' }}>
+    Black text
+  </h1>
+);