fix(components)!: removing styles.css file from components (#526)

BREAKING CHANGE:
If you were previously importing styles.css from '@contentful/experiences-components-react' you no longer need to do so. This file is no longer built and can be removed safely from any apps that were importing it.

.gitignore

@@ -35,8 +35,6 @@ vite.config.ts.timestamp-*
 tmp/
 
 .vercel
-# Ignore built styles.css file in packages/components
-/packages/components/styles.css
 
 # Ingore .nx local files
 .nx

packages/components/README.md

@@ -38,14 +38,6 @@ npm install @contentful/experiences-components-react
 
 By default, the components are unstyled. This allows you to style the components to match your brand and design system. If you want a set of default styles to get started, see below.
 
-### Including default styles
-
-A set of optional, default styles are included with the components. To include them, import the `styles.css` file from the `@contentful/experiences-components-react` package:
-
-```jsx
-import '@contentful/experiences-components-react/styles.css';
-```
-
 ### Adding custom styles
 
 Each component has a css class that you can use to add your own styles. The classes are named in the style of `cf-{component-name}` (ie `cf-button`).

packages/components/cypress/support/component.ts

@@ -19,8 +19,6 @@ import './commands';
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 
-import '../../src/styles';
-
 import { mount } from 'cypress/react18';
 
 // Augment the Cypress namespace to include type definitions for

packages/components/package.json

@@ -10,13 +10,12 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "style": "./styles.css",
   "type": "module",
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
   "scripts": {
-    "clean": "rimraf dist && rimraf styles.css",
+    "clean": "rimraf dist",
     "predev": "npm run clean",
     "dev": "rollup -c ./rollup.config.mjs --watch --environment DEV",
     "prebuild": "npm run clean",
@@ -32,7 +31,6 @@
   "license": "MIT",
   "files": [
     "readme.md",
-    "styles.css",
     "package.json",
     "dist/**/*.*"
   ],

packages/components/rollup.config.mjs

@@ -30,19 +30,6 @@ export default [
     ],
     external: [/node_modules\/(?!tslib.*)/],
   },
-  {
-    input: 'src/styles.ts',
-    output: [
-      {
-        file: './styles.css',
-      },
-    ],
-    plugins: [
-      postcss({
-        extract: true,
-      }),
-    ],
-  },
   {
     input: 'src/index.ts',
     output: [{ file: 'dist/index.d.ts', format: 'es' }],

packages/components/src/components/Image/Image.css

@@ -1,3 +1,5 @@
+@import url('../variables.css');
+
 .cf-no-image {
   position: relative;
 }

packages/create-experience-builder/templates/react-vite-ts/src/App.tsx

@@ -3,9 +3,6 @@ import { createClient } from 'contentful';
 import { useFetchBySlug, ExperienceRoot } from '@contentful/experiences-sdk-react';
 import './App.css';
 
-// Import the styles for the default components
-import '@contentful/experiences-components-react/styles.css';
-
 const experienceTypeId = import.meta.env.VITE_CTFL_EXPERIENCE_TYPE_ID; //Content type id for the experience
 const localeCode = 'en-US'; //Locale code for the experience (could be dynamic)
 

packages/test-app/src/Page.tsx

@@ -1,6 +1,5 @@
 import './eb-config';
 import { useParams } from 'react-router-dom';
-import '@contentful/experiences-components-react/styles.css';
 import './styles.css';
 import { ExperienceRoot, useFetchBySlug } from '@contentful/experiences-sdk-react';
 import { useContentfulClient } from './hooks/useContentfulClient';