astro-css-components - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

utils.js

library.js

		@@ -0,1 +1,3 @@
		import { getCSSForComponent } from "./utils.js"

		const componentLibrary = {
		@@ -5,3 +7,7 @@ global: [],

		// Adding

		function addComponentForURL(url, component) {
		component = getCSSForComponent(component)

		if (!(url in componentLibrary)) {
		@@ -22,2 +28,16 @@ componentLibrary[url] = []

		function addGlobalComponent(component) {
		component = getCSSForComponent(component)

		const oldComponent = componentLibrary.global.findIndex((comp) => comp.name === component.name)

		if (oldComponent === -1) {
		componentLibrary.global.push(component)
		} else {
		componentLibrary.global[oldComponent] = component
		}
		}

		// Getting

		function getComponentsForURL(url) {
		@@ -34,12 +54,10 @@ return componentLibrary[url] \|\| []

		function addGlobalComponent(component) {
		const oldComponent = componentLibrary.global.findIndex((comp) => comp.name === component.name)
		// Debugging

		if (oldComponent === -1) {
		componentLibrary.global.push(component)
		} else {
		componentLibrary.global[oldComponent] = component
		}
		function logComponents() {
		console.log(componentLibrary)
		}

		export { addComponentForURL, getComponentsForURL, getComponentByName, addGlobalComponent }
		// Exporting

		export { addComponentForURL, addGlobalComponent, getComponentsForURL, getComponentByName, logComponents }

package.json

		{
		"name": "astro-css-components",
		"version": "0.2.0",
		"version": "0.3.0",
		"description": "CSS Components for Astro",
		@@ -5,0 +5,0 @@ "main": "index.js",

README.md

		@@ -35,3 +35,3 @@ # astro-css-components

		<!DOCTYPE html>QQ
		<!DOCTYPE html>
		<html lang="en">
		@@ -81,5 +81,9 @@ <head>

		OR

		- contentFile: File which contain your CSS, path must be relative from the root of your project

		Unless used with [global](#global), the component will be tied to the current URL

		Example:
		Examples:

		@@ -90,5 +94,9 @@ ```jsx

		```jsx
		<CSSComponent register={{ name: "code", contentFile: "src/theme/css/modules/code.css" }} />
		```

		#### global

		By adding this props, you can make the component global, this mean you can call it from everywhere using [getByName](#getByName)
		By adding this props, you can make the component global, this mean you can call it from everywhere using [getByName](#getbyname)

		@@ -101,5 +109,15 @@ Example:

		#### conditional

		By adding this props, you can only register the component when a certain condition is met

		Example:

		```jsx
		<CSSComponent register={{ name: "should-be-orange", content: ".should-be-orange {color: orange;}" conditional={page.loadCSSModules.includes("orange")} }} />
		```

		### getForURL

		Get the components for the current URL, this get all the components registered for the current URL, to get a specific component, use [getByName](#getByName)
		Get the components for the current URL, this get all the components registered for the current URL, to get a specific component, use [getByName](#getbyname)

		@@ -106,0 +124,0 @@ Example:

CSSComponent.astro

Sorry, the diff of this file is not supported yet

New alerts