@atlaskit/eslint-plugin-design-system 8.25.1 → 8.26.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.26.0
+
+### Minor Changes
+
+- [#71429](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/71429) [`457122c5d002`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/457122c5d002) - Add some ESLint rules from Compiled CSS-in-JS, and adapt them for the UI Styling Standard.
+
+  Rules added:
+
+  - `no-empty-styled-expression`: ban `styled({})` usages
+  - `no-exported-css` and `no-exported-keyframes`: ban `css` and `keyframes` function calls that are exported
+  - `no-invalid-css-map`: ban usages of the Compiled/`@atlaskit/css` `cssMap` function call that are not valid
+
+  Changes made:
+
+  - Add them to monorepo, modify to use the existing utility functions
+  - Add support for CSS-in-JS libraries other than Compiled (styled-components, Emotion, `@atlaskit/css`, etc.) and `xcss` where appropriate
+
+## 8.25.2
+
+### Patch Changes
+
+- [#71361](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/71361) [`0f3be2c76337`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0f3be2c76337) - `use-primitives` no longer reports elements that have empty style objects.
+
 ## 8.25.1
 
 ### Patch Changes

package/README.md

@@ -59,6 +59,10 @@ module.exports = {
 | <a href="./src/rules/no-deprecated-apis/README.md">no-deprecated-apis</a>                                         | Disallow using deprecated APIs.                                                                                                                                                                                                                                                                                     | Yes         |         |             |
 | <a href="./src/rules/no-deprecated-design-token-usage/README.md">no-deprecated-design-token-usage</a>             | Disallow using deprecated design tokens.                                                                                                                                                                                                                                                                            | Yes         | Yes     |             |
 | <a href="./src/rules/no-deprecated-imports/README.md">no-deprecated-imports</a>                                   | Disallow importing deprecated modules.                                                                                                                                                                                                                                                                              | Yes         |         |             |
+| <a href="./src/rules/no-empty-styled-expression/README.md">no-empty-styled-expression</a>                         | Forbids any styled expression to be used when passing empty arguments to styled.div() (or other JSX elements).                                                                                                                                                                                                      | Yes         |         |             |
+| <a href="./src/rules/no-exported-css/README.md">no-exported-css</a>                                               | Forbid exporting `css` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable.                                                                                                                                                              | Yes         |         |             |
+| <a href="./src/rules/no-exported-keyframes/README.md">no-exported-keyframes</a>                                   | Forbid exporting `keyframes` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable.                                                                                                                                                        | Yes         |         |             |
+| <a href="./src/rules/no-invalid-css-map/README.md">no-invalid-css-map</a>                                         | Checks the validity of a CSS map created through cssMap. This is intended to be used alongside TypeScript's type-checking.                                                                                                                                                                                          | Yes         |         |             |
 | <a href="./src/rules/no-margin/README.md">no-margin</a>                                                           | Disallow using the margin CSS property.                                                                                                                                                                                                                                                                             |             |         |             |
 | <a href="./src/rules/no-nested-styles/README.md">no-nested-styles</a>                                             | Disallows use of nested styles in `css` functions.                                                                                                                                                                                                                                                                  | Yes         |         |             |
 | <a href="./src/rules/no-physical-properties/README.md">no-physical-properties</a>                                 | Disallow physical properties and values in `css` function calls.                                                                                                                                                                                                                                                    |             | Yes     |             |

package/constellation/index/usage.mdx

@@ -23,6 +23,10 @@ This plugin contains rules that should be used when working with the [Atlassian
 | <a href="#no-deprecated-apis">no-deprecated-apis</a>                                         | Disallow using deprecated APIs.                                                                                                                                                                                                                                                                                     | Yes         |         |             |
 | <a href="#no-deprecated-design-token-usage">no-deprecated-design-token-usage</a>             | Disallow using deprecated design tokens.                                                                                                                                                                                                                                                                            | Yes         | Yes     |             |
 | <a href="#no-deprecated-imports">no-deprecated-imports</a>                                   | Disallow importing deprecated modules.                                                                                                                                                                                                                                                                              | Yes         |         |             |
+| <a href="#no-empty-styled-expression">no-empty-styled-expression</a>                         | Forbids any styled expression to be used when passing empty arguments to styled.div() (or other JSX elements).                                                                                                                                                                                                      | Yes         |         |             |
+| <a href="#no-exported-css">no-exported-css</a>                                               | Forbid exporting `css` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable.                                                                                                                                                              | Yes         |         |             |
+| <a href="#no-exported-keyframes">no-exported-keyframes</a>                                   | Forbid exporting `keyframes` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable.                                                                                                                                                        | Yes         |         |             |
+| <a href="#no-invalid-css-map">no-invalid-css-map</a>                                         | Checks the validity of a CSS map created through cssMap. This is intended to be used alongside TypeScript's type-checking.                                                                                                                                                                                          | Yes         |         |             |
 | <a href="#no-margin">no-margin</a>                                                           | Disallow using the margin CSS property.                                                                                                                                                                                                                                                                             |             |         |             |
 | <a href="#no-nested-styles">no-nested-styles</a>                                             | Disallows use of nested styles in `css` functions.                                                                                                                                                                                                                                                                  | Yes         |         |             |
 | <a href="#no-physical-properties">no-physical-properties</a>                                 | Disallow physical properties and values in `css` function calls.                                                                                                                                                                                                                                                    |             | Yes     |             |
@@ -583,6 +587,364 @@ module.exports = {
 };
 ```
 
+## no-empty-styled-expression
+
+Disallows/discourages passing empty arguments to any `styled` expression when using `@compiled/react`, as well as any other CSS-in-JS library defined through the `importSources` option.
+
+If Compiled is used in the file, passing an empty object or no object at all causes Compiled to build extra `div/span` elements, as opposed to simply using a `div`. This leads to reduced performance and is greatly discouraged. If a wrapper is necessary, opt to use a `div` or wrap it in the empty React fragment `<> <YourComponentHere></YourComponentHere> </>`.
+
+<h3>Examples</h3>
+
+#### Incorrect
+
+```tsx
+const EmptyStyledExpression = styled.div();
+
+const EmptyStyledExpressionArgument = styled.div({});
+
+const EmptyStyledExpressionArgument = styled.div([]);
+```
+
+#### Correct
+
+```tsx
+const Wrapper = styled.div({
+  backgroundColor: 'red',
+  MyComponent: {
+    backgroundColor: 'green',
+  },
+});
+```
+
+<h3>What to do instead?</h3>
+
+#### Use elements directly
+
+```diff
+- const Wrapper = styled.div({});
+
+   function App() {
+-    return <Wrapper>hello world</Wrapper>;
++    return <div>hello world</div>;
+  }
+```
+
+#### Use a React fragment
+
+```diff
+- const Wrapper = styled.div({});
+
+   function App() {
+-    return <Wrapper>hello world</Wrapper>;
++    return <>hello world</>;
+  }
+```
+
+<h3>Options</h3>
+
+#### importSources
+
+By default, this rule will check `styled` usages from `@compiled/react`. To check `styled` usages from other CSS-in-JS libraries, you can add the library's package name to `importSources`.
+
+`importSources` accepts an array of package names (strings). `styled` usages from `@compiled/react` will always be checked, regardless of the value of `importSources`.
+
+```tsx
+// [{ importSources: ['styled-components'] }]
+
+import styled from 'styled-components';
+
+// Invalid!
+const styles = styled({});
+```
+
+## no-exported-css
+
+Disallows `css` export declarations that originate from `@compiled/react` and `@atlaskit/css`, as well as any other CSS-in-JS library defined through the `importSources` option.
+
+In Compiled, exporting css declarations may result in unexpected errors when imported, because its value will be `null` at runtime. Additionally, co-locating css definitions with their usage is considered best practice in order to improve code readability and build performance.
+
+<h3>Examples</h3>
+
+#### Incorrect
+
+```tsx
+import { css } from '@compiled/react';
+
+export const styles = css({});
+
+export default css({});
+```
+
+#### Correct
+
+```tsx
+import { css } from '@compiled/react';
+
+const styles = css({});
+```
+
+<h3>Options</h3>
+
+#### importSources
+
+By default, this rule will check `css` usages from `@compiled/react` and `@atlaskit/css`. To check `css` usages from other CSS-in-JS libraries, you can add the library's package name to `importSources`.
+
+`importSources` accepts an array of package names (strings). `css` usages from `@compiled/react` and `@atlaskit/css` will always be checked, regardless of the value of `importSources`.
+
+```tsx
+// [{ importSources: ['@emotion/css'] }]
+
+import { css } from '@emotion/css';
+
+// Invalid!
+export const styles = css({});
+```
+
+## no-exported-keyframes
+
+Disallows `keyframes` export declarations that originate from `@compiled/react`, as well as any other CSS-in-JS library defined through the `importSources` option.
+
+In Compiled, exporting keyframes declarations may result in unexpected errors when imported, because its value will be `null` at runtime. Additionally, co-locating keyframes definitions with their usage is considered best practice in order to improve code readability and build performance.
+
+<h3>Examples</h3>
+
+<!-- To fill out -- tell us when this rule will mark violations. -->
+
+#### Incorrect
+
+```tsx
+import { keyframes } from '@compiled/react';
+
+export const animation = keyframes({});
+
+export default keyframes({});
+```
+
+#### Correct
+
+```tsx
+import { keyframes } from '@compiled/react';
+
+const animation = keyframes({});
+```
+
+<h3>Options</h3>
+
+#### importSources
+
+By default, this rule will check `keyframes` usages from `@compiled/react`. To check `keyframes` usages from other CSS-in-JS libraries, you can add the library's package name to `importSources`.
+
+`importSources` accepts an array of package names (strings). `keyframes` usages from `@compiled/react` will always be checked, regardless of the value of `importSources`.
+
+```tsx
+// [{ importSources: ['@emotion/css'] }]
+
+import { keyframes } from '@emotion/css';
+
+// Invalid!
+export const styles = keyframes({});
+```
+
+## no-invalid-css-map
+
+Ensure that all usages of the `cssMap` API are valid, and enforces the format of the object that is passed to `cssMap`.
+
+Please refer to the [Compiled documentation](https://compiledcssinjs.com/docs/api-cssmap) for more details and some examples.
+
+Note that this version of the `no-invalid-css-map` rule differs from `@compiled/eslint-plugin/no-invalid-css-map` in that this will apply to both `@compiled/react` and `@atlaskit/css`.
+
+This is intended to be used in conjunction with type checking (through TypeScript).
+
+<h3>Examples</h3>
+
+#### Incorrect
+
+```tsx
+import React from 'react';
+import { cssMap } from '@compiled/react';
+
+// cssMap needs to be declared in the top-most scope.
+// (not within a function, class, etc.)
+
+const Foo = () => {
+  const bar = cssMap({
+    danger: {
+      color: 'red',
+    },
+  });
+};
+```
+
+```tsx
+import React from 'react';
+import { cssMap } from '@compiled/react';
+import { importedVariable, importedFunction } from 'another-package';
+
+// Cannot use imported functions as values in cssMap.
+
+const myVariable = importedFunction();
+
+const styles = cssMap({
+  danger: {
+    // Both invalid because they rely on an imported function.
+    color: myVariable,
+    padding: importedFunction(),
+  },
+});
+```
+
+```tsx
+import React from 'react';
+import { cssMap } from '@compiled/react';
+
+// Cannot export usages of cssMap.
+// Any usages of cssMap must be in the same file.
+
+export const foo = cssMap({
+  danger: {
+    color: 'red',
+  },
+});
+```
+
+```tsx
+import React from 'react';
+import { cssMap } from '@compiled/react';
+import { token } from '@atlaskit/tokens';
+
+// Functions and object methods are not allowed as
+// values in cssMap.
+
+const styles = cssMap({
+  // Object method
+  get danger() {
+    return { color: '#123456' };
+  },
+});
+
+const styles2 = cssMap({
+  // Arrow function
+  danger: () => {
+    color: '#123456';
+  },
+});
+
+function customFunction(...args) {
+  return arguments.join('');
+}
+
+const styles3 = cssMap({
+  danger: {
+    // Locally defined function
+    color: customFunction('red', 'blue'),
+    backgroundColor: 'red',
+  },
+});
+```
+
+```tsx
+import React from 'react';
+import { cssMap } from '@compiled/react';
+
+// Spread elements ("...") cannot be used in cssMap.
+
+const base = {
+  success: {
+    color: 'green',
+  },
+};
+
+const bar = cssMap({
+  ...base,
+  danger: {
+    color: 'red',
+  },
+});
+```
+
+#### Correct
+
+```tsx
+import React from 'react';
+import { cssMap } from '@compiled/react';
+
+// Literals (strings, numbers, etc.) are used as values
+// in cssMap.
+
+const styles = cssMap({
+  danger: {
+    color: 'red',
+    backgroundColor: 'red',
+  },
+  success: {
+    color: 'green',
+    backgroundColor: 'green',
+  },
+});
+```
+
+```tsx
+import React from 'react';
+import { cssMap } from '@compiled/react';
+
+// A statically evaluable variable (known at build time)
+// is used here.
+
+const bap = 'blue';
+
+const styles = cssMap({
+  danger: {
+    color: bap,
+  },
+});
+```
+
+#### Options
+
+##### `allowedFunctionCalls`: [string, string][]
+
+Normally, this ESLint rule forbids all function calls from being used inside the `cssMap(...)` function call. For example, this would be invalid using default settings:
+
+```tsx
+import React from 'react';
+import { cssMap } from '@compiled/react';
+import { token } from '@atlaskit/tokens';
+
+const styles = cssMap({
+  danger: {
+    color: token('my-color'),
+    backgroundColor: 'red',
+  },
+  success: {
+    color: 'green',
+  },
+});
+```
+
+If you would like to whitelist certain functions (e.g. `token` from `@atlaskit/tokens`), you can include the names of the functions as part of the `allowedFunctionCalls` argument. Each function should be represented as a two-element array, with the first element being the package the function is from, and the second element being the name of the function.
+
+For example, with the below configuration, the above code example would be okay.
+
+```tsx
+// .eslintrc.js
+
+// ...
+      rules: {
+        '@atlaskit/eslint-plugin-design-system/no-invalid-css-map': [
+          'error',
+          {
+            allowedFunctionCalls: [
+              ['@atlaskit/tokens', 'token'],
+            ]
+          },
+        ],
+        // ...
+      },
+// ...
+```
+
+Please note that this ESLint rule only supports whitelisting imports in the form `import { myFunctionOrVariable } from 'my-package'`; we do not currently support whitelisting default imports, so `import myFunctionOrVariable from 'my-package'` would always be invalid when used in `cssMap`.
+
 ## no-margin
 
 Using margins to define spacing results in components that can't be readily reused in other contexts breaking the composition model.

package/dist/cjs/ast-nodes/object.js

@@ -54,12 +54,19 @@ var ASTObjectExpression = exports.Object = {
     return [fixer.remove(entry)];
   },
   /**
-   * Returns a only the property @type {Property['key']} like: `padding` from: `{ padding: '8px' }`.
+   * Returns only the property @type {Property['key']} like: `padding` from: `{ padding: '8px' }`.
+   * If you want the key/value pair, use `getEntryByPropertyName`.
    */
   getProperty: function getProperty(node, name) {
     var _ASTObjectExpression$;
     return (_ASTObjectExpression$ = ASTObjectExpression.getEntryByPropertyName(node, name)) === null || _ASTObjectExpression$ === void 0 ? void 0 : _ASTObjectExpression$.key;
   },
+  /**
+   * Gets the array of key/value pairs in an ObjectExpression.
+   */
+  getEntries: function getEntries(node) {
+    return node.properties;
+  },
   /**
    * Returns a only the property @type {Property['value']} like: `'8px` from: `{ padding: '8px' }`.
    *

package/dist/cjs/presets/all.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::5026ba2cb55b3c1bcacbfe7fb7728a6c>>
+ * @codegen <<SignedSource::914085544778f4543f43e3e30d0982e0>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -22,6 +22,10 @@ var _default = exports.default = {
     '@atlaskit/design-system/no-deprecated-apis': 'error',
     '@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
     '@atlaskit/design-system/no-deprecated-imports': 'error',
+    '@atlaskit/design-system/no-empty-styled-expression': 'warn',
+    '@atlaskit/design-system/no-exported-css': 'warn',
+    '@atlaskit/design-system/no-exported-keyframes': 'warn',
+    '@atlaskit/design-system/no-invalid-css-map': 'error',
     '@atlaskit/design-system/no-margin': 'warn',
     '@atlaskit/design-system/no-nested-styles': 'error',
     '@atlaskit/design-system/no-physical-properties': 'error',

package/dist/cjs/presets/recommended.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::839224bfab98c1ddf6018dec5320968e>>
+ * @codegen <<SignedSource::577269c832952ce359cde6a50f26f4e0>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -20,6 +20,10 @@ var _default = exports.default = {
     '@atlaskit/design-system/no-deprecated-apis': 'error',
     '@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
     '@atlaskit/design-system/no-deprecated-imports': 'error',
+    '@atlaskit/design-system/no-empty-styled-expression': 'warn',
+    '@atlaskit/design-system/no-exported-css': 'warn',
+    '@atlaskit/design-system/no-exported-keyframes': 'warn',
+    '@atlaskit/design-system/no-invalid-css-map': 'error',
     '@atlaskit/design-system/no-nested-styles': 'error',
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
     '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',

package/dist/cjs/rules/index.codegen.js

@@ -15,6 +15,10 @@ var _noCssTaggedTemplateExpression = _interopRequireDefault(require("./no-css-ta
 var _noDeprecatedApis = _interopRequireDefault(require("./no-deprecated-apis"));
 var _noDeprecatedDesignTokenUsage = _interopRequireDefault(require("./no-deprecated-design-token-usage"));
 var _noDeprecatedImports = _interopRequireDefault(require("./no-deprecated-imports"));
+var _noEmptyStyledExpression = _interopRequireDefault(require("./no-empty-styled-expression"));
+var _noExportedCss = _interopRequireDefault(require("./no-exported-css"));
+var _noExportedKeyframes = _interopRequireDefault(require("./no-exported-keyframes"));
+var _noInvalidCssMap = _interopRequireDefault(require("./no-invalid-css-map"));
 var _noMargin = _interopRequireDefault(require("./no-margin"));
 var _noNestedStyles = _interopRequireDefault(require("./no-nested-styles"));
 var _noPhysicalProperties = _interopRequireDefault(require("./no-physical-properties"));
@@ -30,7 +34,7 @@ var _usePrimitives = _interopRequireDefault(require("./use-primitives"));
 var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::a67afc33adf50db651edb1cf12e16ef3>>
+ * @codegen <<SignedSource::0a2d88c9772eb438048415f13550f592>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -44,6 +48,10 @@ var _default = exports.default = {
   'no-deprecated-apis': _noDeprecatedApis.default,
   'no-deprecated-design-token-usage': _noDeprecatedDesignTokenUsage.default,
   'no-deprecated-imports': _noDeprecatedImports.default,
+  'no-empty-styled-expression': _noEmptyStyledExpression.default,
+  'no-exported-css': _noExportedCss.default,
+  'no-exported-keyframes': _noExportedKeyframes.default,
+  'no-invalid-css-map': _noInvalidCssMap.default,
   'no-margin': _noMargin.default,
   'no-nested-styles': _noNestedStyles.default,
   'no-physical-properties': _noPhysicalProperties.default,

package/dist/cjs/rules/no-empty-styled-expression/index.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _createRule = require("../utils/create-rule");
+var _isSupportedImport = require("../utils/is-supported-import");
+var isEmptyStyledExpression = function isEmptyStyledExpression(node) {
+  var _node$arguments = (0, _slicedToArray2.default)(node.arguments, 1),
+    firstArg = _node$arguments[0];
+  if (node.arguments.length === 0) {
+    return true;
+  } else if (node.arguments.length === 1 && (firstArg === null || firstArg === void 0 ? void 0 : firstArg.type) === 'ArrayExpression') {
+    return firstArg.elements.length === 0;
+  } else if (node.arguments.length === 1 && (firstArg === null || firstArg === void 0 ? void 0 : firstArg.type) === 'ObjectExpression') {
+    return firstArg.properties.length === 0;
+  }
+  return false;
+};
+var createNoEmptyStyledExpressionRule = function createNoEmptyStyledExpressionRule(isEmptyStyledExpression, messageId) {
+  return function (context) {
+    var importSources = (0, _isSupportedImport.getImportSources)(context);
+    return {
+      'CallExpression[callee.type="MemberExpression"]': function CallExpressionCalleeTypeMemberExpression(node) {
+        var _context$getScope = context.getScope(),
+          references = _context$getScope.references;
+
+        // If we have styled.div(...), make sure `callee` only refers to the
+        // `styled` part instead of the whole `styled.div` expression.
+        var callee = node.callee.type === 'MemberExpression' ? node.callee.object : node.callee;
+        if (!(0, _isSupportedImport.isStyled)(callee, references, importSources)) {
+          return;
+        }
+        if (!isEmptyStyledExpression(node)) {
+          return;
+        }
+        context.report({
+          messageId: messageId,
+          node: node
+        });
+      }
+    };
+  };
+};
+var noEmptyStyledExpressionRule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'no-empty-styled-expression',
+    docs: {
+      description: 'Forbids any styled expression to be used when passing empty arguments to styled.div() (or other JSX elements).',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      unexpected: 'Found an empty expression, or empty object argument passed to `styled` function call. This unnecessarily causes a major performance penalty - please use a plain JSX element or a React fragment instead (e.g. `<div>Hello</div>` or `<>Hello</>`).'
+    },
+    type: 'problem',
+    schema: [{
+      type: 'object',
+      properties: {
+        importSources: {
+          type: 'array',
+          items: [{
+            type: 'string'
+          }]
+        }
+      },
+      additionalProperties: false
+    }]
+  },
+  create: createNoEmptyStyledExpressionRule(isEmptyStyledExpression, 'unexpected')
+});
+var _default = exports.default = noEmptyStyledExpressionRule;

package/dist/cjs/rules/no-exported-css/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _main = require("../utils/create-no-exported-rule/main");
+var _createRule = require("../utils/create-rule");
+var _isSupportedImport = require("../utils/is-supported-import");
+var noExportedCssRule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'no-exported-css',
+    type: 'problem',
+    docs: {
+      description: 'Forbid exporting `css` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      unexpected: "`css` can't be exported - this will cause unexpected behaviour at runtime. Instead, please move your `css(...)` code to the same file where these styles are being used."
+    },
+    schema: [{
+      type: 'object',
+      properties: {
+        importSources: {
+          type: 'array',
+          items: [{
+            type: 'string'
+          }]
+        }
+      },
+      additionalProperties: false
+    }]
+  },
+  create: (0, _main.createNoExportedRule)(_isSupportedImport.isCss, 'unexpected')
+});
+var _default = exports.default = noExportedCssRule;

package/dist/cjs/rules/no-exported-keyframes/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _main = require("../utils/create-no-exported-rule/main");
+var _createRule = require("../utils/create-rule");
+var _isSupportedImport = require("../utils/is-supported-import");
+var noExportedKeyframesRule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'no-exported-keyframes',
+    type: 'problem',
+    docs: {
+      description: 'Forbid exporting `keyframes` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      unexpected: "`keyframes` can't be exported - this will cause unexpected behaviour at runtime. Instead, please move your `keyframes(...)` code to the same file where these styles are being used."
+    },
+    schema: [{
+      type: 'object',
+      properties: {
+        importSources: {
+          type: 'array',
+          items: [{
+            type: 'string'
+          }]
+        }
+      },
+      additionalProperties: false
+    }]
+  },
+  create: (0, _main.createNoExportedRule)(_isSupportedImport.isKeyframes, 'unexpected')
+});
+var _default = exports.default = noExportedKeyframesRule;