.gitignore

@@ -1,9 +1,12 @@
-*.log
 .DS_Store
-node_modules
-dist
-storybook-static
+.idea
+.parcel-cache
 .tmp
+
 coverage
+dist
+node_modules
+storybook-static
+
+*.log
 *.tsbuildinfo
-.parcel-cache

.storybook/.babelrc.json

@@ -0,0 +1,4 @@
+{
+  "plugins": [["@compiled/babel-plugin", { "importReact": false }]],
+  "presets": ["@babel/preset-typescript", ["@babel/preset-react", { "runtime": "automatic" }]]
+}

.storybook/main.js

@@ -1,7 +1,7 @@
 module.exports = {
   addons: ['storybook-addon-performance/register', 'storybook-addon-pseudo-states'],
-  stories: ['../examples/stories/*.tsx'],
   core: {
     builder: 'webpack5',
   },
+  stories: ['../examples/stories/*.tsx'],
 };

examples/keyframes/globals.tsx

@@ -0,0 +1,37 @@
+export {};
+
+declare global {
+  interface Window {
+    runtime: {
+      blueToIndigo: {
+        from: string;
+        to: string;
+      };
+      coralToPink: {
+        from: string;
+        to: string;
+      };
+      purpleToSlateBlue: {
+        from: string;
+        to: string;
+      };
+    };
+  }
+}
+
+Object.assign(window, {
+  runtime: {
+    blueToIndigo: {
+      from: 'blue',
+      to: 'indigo',
+    },
+    coralToPink: {
+      from: 'coral',
+      to: 'pink',
+    },
+    purpleToSlateBlue: {
+      from: 'purple',
+      to: 'slateblue',
+    },
+  },
+});

examples/keyframes/object-call-expression.tsx

@@ -0,0 +1,12 @@
+import { keyframes } from '@compiled/react';
+
+export const fadeOut = keyframes({
+  from: {
+    color: 'coral',
+    opacity: 1,
+  },
+  to: {
+    color: 'pink',
+    opacity: 0,
+  },
+});

examples/keyframes/tagged-template-literal.tsx

@@ -0,0 +1,12 @@
+import { keyframes } from '@compiled/react';
+
+export const fadeOut = keyframes`
+  from {
+    color: coral;
+    opacity: 1;
+  }
+  to {
+    color: pink;
+    opacity: 0;
+  }
+`;

examples/packages/babel-component/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @private/babel-component
 
+## 0.0.5
+
+### Patch Changes
+
+- Updated dependencies [bcb2a68]
+- Updated dependencies [a7ab8e1]
+  - @compiled/react@0.7.0
+
 ## 0.0.4
 
 ### Patch Changes

examples/packages/babel-component/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@private/babel-component",
   "private": true,
-  "version": "0.0.4",
+  "version": "0.0.5",
   "main": "./dist/index.js",
   "scripts": {
     "build": "babel ./src --out-dir=./dist"
@@ -11,9 +11,9 @@
   },
   "devDependencies": {
     "@compiled/babel-plugin": "*",
-    "@babel/core": "^7.14.6",
-    "@babel/cli": "^7.14.5",
-    "@babel/preset-env": "^7.14.7",
+    "@babel/core": "^7.15.0",
+    "@babel/cli": "^7.14.8",
+    "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5"
   },
   "peerDependencies": {

examples/packages/parcel/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @private/parcel
 
+## 1.0.4
+
+### Patch Changes
+
+- Updated dependencies [bcb2a68]
+- Updated dependencies [a7ab8e1]
+  - @compiled/react@0.7.0
+
 ## 1.0.3
 
 ### Patch Changes

examples/packages/parcel/package.json

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

examples/packages/ssr/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @private/ssr
 
+## 1.0.4
+
+### Patch Changes
+
+- Updated dependencies [bcb2a68]
+- Updated dependencies [a7ab8e1]
+  - @compiled/react@0.7.0
+
 ## 1.0.3
 
 ### Patch Changes

examples/packages/ssr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@private/ssr",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "private": true,
   "scripts": {
     "start": "razzle start",

examples/packages/webpack/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @private/webpack
 
+## 1.0.4
+
+### Patch Changes
+
+- Updated dependencies [bcb2a68]
+- Updated dependencies [a7ab8e1]
+  - @compiled/react@0.7.0
+  - @private/babel-component@0.0.5
+  - @compiled/webpack-loader@0.6.16
+
 ## 1.0.3
 
 ### Patch Changes

examples/packages/webpack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@private/webpack",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "private": true,
   "scripts": {
     "start": "webpack serve --hot",
@@ -11,14 +11,14 @@
     "@compiled/webpack-loader": "*",
     "@private/babel-component": "*",
     "babel-loader": "^8.2.2",
-    "css-loader": "^5.2.4",
+    "css-loader": "^5.2.7",
     "css-minimizer-webpack-plugin": "^1.3.0",
-    "html-webpack-plugin": "^5.3.1",
+    "html-webpack-plugin": "^5.3.2",
     "mini-css-extract-plugin": "^1.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "style-loader": "^2.0.0",
-    "webpack": "^5.35.1",
-    "webpack-cli": "^4.6.0"
+    "webpack": "^5.52.1",
+    "webpack-cli": "^4.8.0"
   }
 }

examples/stories/conditional-rules-styled.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import { styled, css } from '@compiled/react';
+import { primary, secondary } from '../mixins/mixins';
+
+export default {
+  title: 'conditional rules/styled',
+};
+
+interface TextProps {
+  isPrimary?: boolean;
+  isBolded?: boolean;
+  isMaybe?: boolean;
+  children: React.ReactNode;
+}
+
+const TextWithTemplateLiteral = styled.span<TextProps>`
+  color: red;
+  ${(props) => (props.isPrimary || props.isBolded) && { color: 'blue' }};
+  ${(props) => props.isPrimary && { fontSize: '20px' }};
+`;
+
+const TextWithTernaryOperatorTemplateLiteral = styled.span<TextProps>`
+  color: ${(props) => (props.isPrimary ? 'blue' : 'red')};
+  font-weight: ${(props) =>
+    props.isPrimary && props.isMaybe ? (props.isBolded && 'bold') || 'normal' : 'light'};
+`;
+
+const TextWithObjectStyles = styled.span<TextProps>(
+  { color: 'red' },
+  (props) => props.isPrimary && { color: 'blue' },
+  (props) => props.isBolded && { fontWeight: 'bold' },
+  css`
+    text-transform: uppercase;
+  `
+);
+
+const TextWithTernaryAndBooleanObjectStyle = styled.span<TextProps>({ fontSize: '20px' }, (props) =>
+  props.isPrimary && props.isBolded ? { color: 'blue', fontWeight: 'bold' } : { color: 'red' }
+);
+
+const TextWithMixins = styled.span<TextProps>`
+  ${(props) => (props.isPrimary ? primary : secondary)};
+  padding: 10px;
+`;
+
+export const PrimaryTextWithTemplateLiteral = (): JSX.Element => {
+  return <TextWithTemplateLiteral isPrimary>Hello primary</TextWithTemplateLiteral>;
+};
+
+export const NotPrimaryTextWithTemplateLiteral = (): JSX.Element => {
+  return <TextWithTemplateLiteral>Hello secondary</TextWithTemplateLiteral>;
+};
+
+export const PrimaryTextWithTernaryOperatorTemplateLiteral = (): JSX.Element => {
+  return (
+    <TextWithTernaryOperatorTemplateLiteral isPrimary isMaybe>
+      Hello primary
+    </TextWithTernaryOperatorTemplateLiteral>
+  );
+};
+
+export const BoldedPrimaryTextWithTernaryOperatorTemplateLiteral = (): JSX.Element => {
+  return (
+    <TextWithTernaryOperatorTemplateLiteral isPrimary isMaybe isBolded>
+      Hello bolded primary
+    </TextWithTernaryOperatorTemplateLiteral>
+  );
+};
+
+export const NotPrimaryTextWithTernaryOperatorTemplateLiteral = (): JSX.Element => {
+  return (
+    <TextWithTernaryOperatorTemplateLiteral>Hello secondary</TextWithTernaryOperatorTemplateLiteral>
+  );
+};
+
+export const PrimaryTextWithObjectStyles = (): JSX.Element => {
+  return <TextWithObjectStyles isPrimary>Hello primary</TextWithObjectStyles>;
+};
+
+export const BoldedPrimaryTextWithObjectStyles = (): JSX.Element => {
+  return (
+    <TextWithObjectStyles isPrimary isBolded>
+      Hello bolded primary
+    </TextWithObjectStyles>
+  );
+};
+
+export const NotPrimaryTextWithObjectStyles = (): JSX.Element => {
+  return <TextWithObjectStyles>Hello secondary</TextWithObjectStyles>;
+};
+
+export const PrimaryTextWithTernaryAndBooleanObjectStyle = (): JSX.Element => {
+  return (
+    <TextWithTernaryAndBooleanObjectStyle isPrimary>
+      {' '}
+      Hello primary but not bolded. This should be red
+    </TextWithTernaryAndBooleanObjectStyle>
+  );
+};
+
+export const BoldedPrimaryTextWithTernaryAndBooleanObjectStyle = (): JSX.Element => {
+  return (
+    <TextWithTernaryAndBooleanObjectStyle isPrimary isBolded>
+      {' '}
+      Hello bolded primary
+    </TextWithTernaryAndBooleanObjectStyle>
+  );
+};
+
+export const NotPrimaryTextWithTernaryAndBooleanObjectStyle = (): JSX.Element => {
+  return (
+    <TextWithTernaryAndBooleanObjectStyle> Hello secondary</TextWithTernaryAndBooleanObjectStyle>
+  );
+};
+
+export const PrimaryTextWithMixins = (): JSX.Element => {
+  return <TextWithMixins isPrimary> Hello primary</TextWithMixins>;
+};
+
+export const SecondaryTextWithMixins = (): JSX.Element => {
+  return <TextWithMixins> Hello secondary</TextWithMixins>;
+};