From 5113a1a24e0cced9df49563595f6f4ac74452c49 Mon Sep 17 00:00:00 2001 From: Ely Lucas Date: Tue, 26 Mar 2024 14:33:55 -0600 Subject: [PATCH] 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 | 2 -- packages/components/README.md | 8 -------- packages/components/cypress/support/component.ts | 2 -- packages/components/package.json | 4 +--- packages/components/rollup.config.mjs | 13 ------------- packages/components/src/components/Image/Image.css | 2 ++ packages/components/src/styles.ts | 1 - .../templates/react-vite-ts/src/App.tsx | 3 --- packages/test-app/src/Page.tsx | 1 - 9 files changed, 3 insertions(+), 33 deletions(-) delete mode 100644 packages/components/src/styles.ts diff --git a/.gitignore b/.gitignore index 252bcfc68..a076548aa 100644 --- a/.gitignore +++ b/.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 diff --git a/packages/components/README.md b/packages/components/README.md index d50b70cf7..dce6bf478 100644 --- a/packages/components/README.md +++ b/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`). diff --git a/packages/components/cypress/support/component.ts b/packages/components/cypress/support/component.ts index 7507e1575..395d40751 100644 --- a/packages/components/cypress/support/component.ts +++ b/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 diff --git a/packages/components/package.json b/packages/components/package.json index 9e9fc103e..eb6bfd745 100644 --- a/packages/components/package.json +++ b/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/**/*.*" ], diff --git a/packages/components/rollup.config.mjs b/packages/components/rollup.config.mjs index 559d8b117..65d470dc2 100644 --- a/packages/components/rollup.config.mjs +++ b/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' }], diff --git a/packages/components/src/components/Image/Image.css b/packages/components/src/components/Image/Image.css index e20348a54..32069aee3 100644 --- a/packages/components/src/components/Image/Image.css +++ b/packages/components/src/components/Image/Image.css @@ -1,3 +1,5 @@ +@import url('../variables.css'); + .cf-no-image { position: relative; } diff --git a/packages/components/src/styles.ts b/packages/components/src/styles.ts deleted file mode 100644 index 33a50d57b..000000000 --- a/packages/components/src/styles.ts +++ /dev/null @@ -1 +0,0 @@ -import './components/variables.css'; diff --git a/packages/create-experience-builder/templates/react-vite-ts/src/App.tsx b/packages/create-experience-builder/templates/react-vite-ts/src/App.tsx index 5a8b3a44f..dbcf8ccce 100644 --- a/packages/create-experience-builder/templates/react-vite-ts/src/App.tsx +++ b/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) diff --git a/packages/test-app/src/Page.tsx b/packages/test-app/src/Page.tsx index d472b7fa5..c54245d77 100644 --- a/packages/test-app/src/Page.tsx +++ b/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';