feat(atomic): create atomize option, move postcss dep to @linaria/atomic

docs/CONFIGURATION.md

@@ -77,10 +77,16 @@ module.exports = {
   ];
   ```
 
+- `atomize: (cssText) => { className: string, cssText: string, property: string, }[]`
+
+  A function that will be used to split css text into an array of atoms (atoms have className, cssText and the property key defined for them)
+
+  To configure for use with `@linaria/atomic`, set this option to `atomize: require('@linaria/atomic').atomize`
+
 - `babelOptions: Object`
 
   If you need to specify custom babel configuration, you can pass them here. These babel options will be used by Linaria when parsing and evaluating modules.
-  
+
 - `resolveOptions: Object`
 
   By default, the loader will resolve modules using the `alias` and `modules`
@@ -151,7 +157,7 @@ After that, your `package.json` should look like the following:
 Now in your `preact.config.js`, we will modify the babel rule to use the necessary loaders and presets. Add the following:
 
 ```js
-export default config => {
+export default (config) => {
   const { options, ...babelLoaderRule } = config.module.rules[0]; // Get the babel rule and options
   options.presets.push('@babel/preset-react', '@linaria'); // Push the necessary presets
   config.module.rules[0] = {
@@ -160,15 +166,15 @@ export default config => {
     use: [
       {
         loader: 'babel-loader',
-        options
+        options,
       },
       {
         loader: '@linaria/webpack-loader',
         options: {
-          babelOptions: options // Pass the current babel options to linaria's babel instance
-        }
-      }
-    ]
+          babelOptions: options, // Pass the current babel options to linaria's babel instance
+        },
+      },
+    ],
   };
 };
 ```
@@ -265,7 +271,7 @@ exports.onCreateWebpackConfig = ({ actions, loaders, getConfig, stage }) => {
 
   config.module.rules = [
     ...config.module.rules.filter(
-      rule => String(rule.test) !== String(/\.js?$/)
+      (rule) => String(rule.test) !== String(/\.js?$/)
     ),
 
     {

packages/atomic/package.json

@@ -33,8 +33,11 @@
     "build": "yarn build:lib && yarn build:esm",
     "build:declarations": "tsc --emitDeclarationOnly --outDir types",
     "prepare": "yarn build && yarn build:declarations",
-    "test": "jest --config ../../jest.config.js --rootDir .",
     "typecheck": "tsc --noEmit --composite false",
     "watch": "yarn build --watch"
+  },
+  "dependencies": {
+    "@linaria/utils": "^3.0.0-beta.13",
+    "postcss": "^8.3.11"
   }
 }

packages/babel/src/utils/atomize.ts → packages/atomic/src/atomize.ts

@@ -1,5 +1,5 @@
 import postcss from 'postcss';
-import slugify from './slugify';
+import { slugify } from '@linaria/utils';
 
 export default function atomize(cssText: string) {
   const atomicRules: {

packages/atomic/src/index.ts

@@ -1,4 +1,6 @@
 export { default as css } from './css';
-export { default as cx } from './cx';
+export { default as atomize } from './atomize';
+export { cx } from '@linaria/utils';
+
 export type { CSSProperties } from './CSSProperties';
 export type { StyleCollectionObject } from './css';

packages/atomic/tsconfig.json

@@ -1,7 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "paths": {},
-    "rootDir": "src/"
-  }
+  "compilerOptions": { "paths": {}, "rootDir": "src/" },
+  "references": [{ "path": "../utils" }]
 }

packages/babel/__fixtures__/slugify.ts

@@ -1,3 +1,3 @@
-import slugify from '../src/utils/slugify';
+import { slugify } from '@linaria/utils';
 
 export default slugify;

packages/babel/__tests__/babel.test.ts

@@ -9,7 +9,10 @@ expect.addSnapshotSerializer(serializer);
 
 const transpile = async (
   input: string,
-  opts: Partial<StrictOptions> = { evaluate: false }
+  opts: Partial<StrictOptions> = {
+    evaluate: false,
+    atomize: require('@linaria/atomic').atomize,
+  }
 ) =>
   (await transformAsync(input, {
     babelrc: false,

packages/babel/package.json

@@ -39,6 +39,7 @@
     "watch": "yarn build --watch"
   },
   "devDependencies": {
+    "@linaria/atomic": "^3.0.0-beta.13",
     "@types/cosmiconfig": "^5.0.3",
     "@types/dedent": "^0.7.0",
     "dedent": "^0.7.0",
@@ -50,8 +51,8 @@
     "@babel/template": ">=7",
     "@linaria/core": "^3.0.0-beta.13",
     "@linaria/logger": "^3.0.0-beta.3",
+    "@linaria/utils": "^3.0.0-beta.13",
     "cosmiconfig": "^5.1.0",
-    "postcss": "^8.3.11",
     "source-map": "^0.7.3",
     "stylis": "^3.5.4"
   },

packages/babel/src/evaluators/templateProcessor.ts

@@ -22,7 +22,6 @@ import stripLines from '../utils/stripLines';
 import toCSS from '../utils/toCSS';
 import getLinariaComment from '../utils/getLinariaComment';
 import { Core } from '../babel';
-import atomize from '../utils/atomize';
 
 // Match any valid CSS units followed by a separator such as ;, newline etc.
 const unitRegex = new RegExp(`^(${units.join('|')})(;|,|\n| |\\))`);
@@ -300,6 +299,12 @@ export default function getTemplateProcessor(
     }
 
     if (type === 'atomic-css') {
+      const { atomize } = options;
+      if (!atomize) {
+        throw new Error(
+          'The atomic css API was detected, but an atomize function was not passed in the linaria configuration.'
+        );
+      }
       const atomicRules = atomize(cssText);
       atomicRules.forEach((rule) => {
         state.rules[`.${rule.className}`] = {

packages/babel/src/index.ts

@@ -9,6 +9,8 @@ import { debug } from '@linaria/logger';
 import type { PluginOptions } from './utils/loadOptions';
 import loadOptions from './utils/loadOptions';
 
+export { slugify } from '@linaria/utils';
+
 export * as EvalCache from './eval-cache';
 export { default as buildOptions } from './evaluators/buildOptions';
 export { default as JSXElement } from './evaluators/visitors/JSXElement';
@@ -25,7 +27,6 @@ export type { PluginOptions } from './utils/loadOptions';
 export { default as isNode } from './utils/isNode';
 export { default as getVisitorKeys } from './utils/getVisitorKeys';
 export { default as peek } from './utils/peek';
-export { default as slugify } from './utils/slugify';
 export { default as CollectDependencies } from './visitors/CollectDependencies';
 export { default as DetectStyledImportName } from './visitors/DetectStyledImportName';
 export { default as GenerateClassNames } from './visitors/GenerateClassNames';

packages/babel/src/types.ts

@@ -129,11 +129,18 @@ type ClassNameFn = (
   args: ClassNameSlugVars
 ) => string;
 
+type AtomizeFn = (cssText: string) => {
+  className: string;
+  cssText: string;
+  property: string;
+}[];
+
 export type StrictOptions = {
   classNameSlug?: string | ClassNameFn;
   displayName: boolean;
   evaluate: boolean;
   ignore?: RegExp;
+  atomize?: AtomizeFn;
   babelOptions: TransformOptions;
   rules: EvalRule[];
 };

packages/babel/src/visitors/GenerateClassNames.ts

@@ -6,12 +6,12 @@
  */
 
 import { basename, dirname, relative, extname, sep } from 'path';
+import { slugify } from '@linaria/utils';
 import type { ObjectProperty, TaggedTemplateExpression } from '@babel/types';
 import type { NodePath } from '@babel/traverse';
 import { debug } from '@linaria/logger';
 import type { ClassNameSlugVars, State, StrictOptions } from '../types';
 import toValidCSSIdentifier from '../utils/toValidCSSIdentifier';
-import slugify from '../utils/slugify';
 import getLinariaComment from '../utils/getLinariaComment';
 import getTemplateType from '../utils/getTemplateType';
 import { Core } from '../babel';

packages/babel/tsconfig.json

@@ -1,8 +1,9 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "paths": {},
-    "rootDir": "src/"
-  },
-  "references": [{ "path": "../core" }, { "path": "../logger" }]
+  "compilerOptions": { "paths": {}, "rootDir": "src/" },
+  "references": [
+    { "path": "../core" },
+    { "path": "../logger" },
+    { "path": "../utils" }
+  ]
 }