@salty-css/react 0.1.0-feat-define-import.0 → 0.1.0-feat-turbopack.0

package/README.md

@@ -57,7 +57,6 @@ To get help with problems, [Join Salty CSS Discord server](https://discord.gg/R6
 - [defineVariables](#variables) - create CSS variables (tokens) that can be used in any styling function
 - [defineMediaQuery](#media-queries) - create CSS media queries and use them in any styling function
 - [defineTemplates](#templates) - create reusable templates that can be applied when same styles are used over and over again
-- [defineImport](#importing-additional-css) - pull in external CSS files (relative, public, node_modules, or URL)
 - [keyframes](#keyframes-animations) - create CSS keyframes animation that can be used and imported in any styling function
 
 ### Styling helpers & utility
@@ -320,49 +319,6 @@ Example usage:
 styled('div', { base: { textStyle: 'headline.large', card: '20px' } });
 ```
 
-## Importing additional CSS
-
-Use `defineImport` to pull in CSS that lives outside of Salty's authoring API — a reset stylesheet from npm, a Google Fonts URL, an asset in your app's `public/` folder, or a sibling `.css` file. The compiler turns each spec into an `@import` rule in the generated `saltygen/index.css`, so the imported stylesheets travel with the rest of your build.
-
-```ts
-// /styles/imports.css.ts
-import { defineImport } from '@salty-css/core/factories';
-
-export default defineImport(
-  // Relative to this file
-  './reset.css',
-  // From node_modules (bare specifier — same as Vite / native CSS @import)
-  'modern-normalize/modern-normalize.css',
-  // From node_modules (~ prefix — same resolver, webpack-style)
-  '~normalize.css/normalize.css',
-  // From your app's public/ folder (served at the host root)
-  '/fonts/inter.css',
-  // External URL
-  'https://fonts.googleapis.com/css2?family=Inter&display=swap',
-  // Object form — attach media or supports() conditions
-  { url: './print.css', media: 'print' },
-  { url: './p3.css', supports: 'color(display-p3 1 1 1)' }
-);
-```
-
-Path resolution:
-
-| Pattern                     | Behaviour                                                                                |
-| --------------------------- | ---------------------------------------------------------------------------------------- |
-| `http://`, `https://`, `//` | Emitted verbatim                                                                         |
-| Starts with `/`             | Public-folder URL — emitted verbatim, the browser resolves it against your host          |
-| Starts with `./` or `../`   | Resolved at build time relative to the file that called `defineImport`                   |
-| `~package/file.css`         | Stripped of the leading `~`, then resolved from `node_modules` and copied into the build |
-| `package/file.css` (bare)   | Same `node_modules` resolution as the `~` form                                           |
-
-All imports are placed inside a new `imports` cascade layer that sits **before** `reset`, `global`, `templates`, and your component styles. This means your own styles always win over third-party CSS you pull in — which is what most teams expect when they drop in something like `modern-normalize`.
-
-The full layer order in the generated `index.css` is:
-
-```css
-@layer imports, reset, global, templates, l0, l1, l2, l3, l4, l5, l6, l7, l8;
-```
-
 ## Keyframes animations
 
 ```ts
@@ -452,6 +408,8 @@ And note: steps 2 & 3 are just to show how get new components up and running, st
 - **Next.js 15:** In `next.config.ts` add import for salty plugin `import { withSaltyCss } from '@salty-css/next';` and then add `withSaltyCss` to wrap your nextConfig export like so `export default withSaltyCss(nextConfig);`
 - **Next.js 14 and older:** In `next.config.js` add import for salty plugin `const { withSaltyCss } = require('@salty-css/next');` and then add `withSaltyCss` to wrap your nextConfig export like so `module.exports = withSaltyCss(nextConfig);`
 
+Both Webpack and Turbopack are supported. `withSaltyCss` auto-detects which bundler Next.js is using (`next dev --turbopack` sets `process.env.TURBOPACK=1`), so no extra config is required. To force a specific bundler, pass `{ bundler: 'webpack' | 'turbopack' }` as the second argument.
+
 4. Make sure that `salty.config.ts` and `next.config.ts` are in the same folder!
 5. Build `saltygen` directory by running your app once or with cli `npx salty-css build [directory]`
 6. Import global styles from `saltygen/index.css` to some global css file with `@import 'insert_path_to_index_css';`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salty-css/react",
-  "version": "0.1.0-feat-define-import.0",
+  "version": "0.1.0-feat-turbopack.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./dist/index.d.ts",
@@ -78,7 +78,7 @@
     }
   },
   "dependencies": {
-    "@salty-css/core": "^0.1.0-feat-define-import.0",
+    "@salty-css/core": "^0.1.0-feat-turbopack.0",
     "clsx": ">=2.x",
     "react": ">=19.x || >=18.3.x"
   },