[MERGE] PR #8 - stylebucket/bugfix/css-func-escape-str

.devcontainer/Dockerfile

@@ -1,4 +1,9 @@
 FROM node:20
 
 # PNPM
-RUN npm install -g pnpm
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+
+# Install chromium Dependencies
+RUN pnpm dlx playwright install-deps chromium

.devcontainer/postcreate.sh

@@ -1,5 +1,12 @@
 #!/bin/bash
 
 # Used for DevContainer postCreateCommand
+
+# Install pnpm version specified in package.json files.
+corepack install
+
+# Install Packages
 pnpm install --frozen-lockfile
-pnpm exec playwright install chromium --with-deps
+
+# Install Chromium Browser to Project
+pnpm exec playwright install chromium

README.md

@@ -114,3 +114,25 @@ import { ids, colors } from './MyComponent.style';
 
 // rest of your component logic
 ```
+
+## Escaping Strings
+
+Certain characters in CSS need to be escaped (like `:` and `@`).
+However simply doing `\:` and `\@` isn't as straightforward as the
+escape will also apply in Javascript. Thus cancelling out the escape
+character. Below is a guide on where a double escape is needed.
+
+```typescript
+// dont, as '\' will be dropped
+const rootTag = '.@root';
+const rootTag = `.\@root`;
+
+// do
+const rootTag = '.\\@root';
+const rootTag = `.\\@root`;
+const rootTag = String.raw`.\@root`;
+
+// also works
+import { css } from '@stylebucket/css';
+const rootTag = css`.\@root`;
+```

package.json

@@ -8,14 +8,15 @@
     "url": "https://github.com/woodbrettm"
   },
   "license": "MIT",
+  "packageManager": "pnpm@8.15.8",
   "description": "Stylebucket core modules",
   "keywords": [
     "css-in-js",
     "css"
   ],
   "engines": {
     "node": ">=18.0.0",
-    "pnpm": ">=7.0.0"
+    "pnpm": ">=8.15.8"
   },
   "devDependencies": {
     "typescript": "5.3.3",
@@ -35,7 +36,6 @@
     "lint:biome": "biome lint .",
     "changeset:add": "changeset",
     "changeset:version": "changeset version",
-    "changeset:publish": "changeset publish",
-    "preinstall": "npx -y only-allow pnpm"
+    "changeset:publish": "changeset publish"
   }
 }

packages/compiler/package.json

@@ -4,6 +4,7 @@
   "version": "0.1.0",
   "type": "module",
   "license": "MIT",
+  "packageManager": "pnpm@8.15.8",
   "description": "Compiler for Stylebucket core.",
   "author": {
     "name": "Brett Wood",
@@ -21,7 +22,7 @@
   ],
   "engines": {
     "node": ">=18.0.0",
-    "pnpm": ">=7.0.0"
+    "pnpm": ">=8.15.8"
   },
   "main": "./build/main.js",
   "types": "./build/main.d.ts",
@@ -44,7 +45,8 @@
     "tsup": "8.0.1",
     "vitest": "1.1.3",
     "@types/css-tree": "2.3.4",
-    "@types/node": "20.10.6"
+    "@types/node": "20.10.6",
+    "@stylebucket/css": "workspace:*"
   },
   "scripts": {
     "test:unit": "vitest --run",

packages/compiler/src/parse.spec.ts

@@ -1,20 +1,27 @@
+import { css } from '@stylebucket/css';
+
 import { test, expect } from 'vitest';
 import { parseCss } from './parse';
 
 test('ParseCss With PostCSS Prop', () => {
 
-  const css = `
+  const styles = css`
     @media all and (min-width: 1200px) {
       .my-class {
         display: somePostCssFunction();
       }
+      .\@root {
+        font-size: 12px;
+      }
     }
   `;
 
   const exp = (''
-    + '@media all and (min-width: 1200px)'
-    + '{.my-class{display:somePostCssFunction()}}'
+    + '@media all and (min-width: 1200px){'
+    + '.my-class{display:somePostCssFunction()}'
+    + '.\\@root{font-size:12px}'
+    + '}'
   );
 
-  expect(parseCss(css).css).toBe(exp);
+  expect(parseCss(styles).css).toBe(exp);
 });

packages/css/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @stylebucket/css
 
+## 0.1.1
+
+### Patch Changes
+
+- e2df2ef: Update CSS Function to Parsing Strings as Raw. Doing the following would previously result in the `\` being dropped from the final css produced. This is fixed.
+
+  ```typescript
+  export default css`
+    .Navbar {
+      &.\@root {
+        font-size: 12px;
+      }
+    }
+  `;
+  ```
+
+  Examples of when an extra escape is needed:
+
+  ```typescript
+  // dont, as '\' will be dropped
+  const rootTag = '.@root';
+  const rootTag = `.\@root`;
+
+  // do
+  const rootTag = '.\\@root';
+  const rootTag = `.\\@root`;
+  const rootTag = String.raw`.\@root`;
+
+  // also works
+  import { css } from '@stylebucket/css';
+  const rootTag = css`.\@root`;
+  ```
+
 ## 0.1.0
 
 ### Minor Changes

packages/css/package.json

@@ -1,9 +1,10 @@
 {
   "$schema": "https://json.schemastore.org/package",
   "name": "@stylebucket/css",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "license": "MIT",
+  "packageManager": "pnpm@8.15.8",
   "description": "CSS Package for Stylebucket core.",
   "author": {
     "name": "Brett Wood",
@@ -21,7 +22,7 @@
   ],
   "engines": {
     "node": ">=18.0.0",
-    "pnpm": ">=7.0.0"
+    "pnpm": ">=8.15.8"
   },
   "main": "./build/main.js",
   "types": "./build/main.d.ts",
@@ -37,8 +38,7 @@
   "devDependencies": {
     "typescript": "5.3.3",
     "tsup": "8.0.1",
-    "vitest": "1.1.3",
-    "@stylebucket/compiler": "workspace:*"
+    "vitest": "1.1.3"
   },
   "scripts": {
     "test:unit": "vitest --run",

packages/css/src/css.spec.ts

@@ -1,32 +1,38 @@
 import { test, expect } from 'vitest';
-import { parseCss } from '@stylebucket/compiler';
-
 import { css } from './css';
 
 const color = 'green';
+const size = 14;
 
 const styles = css`
 
   .test-class {
     color: ${color};
-    font-size: 12px;
+    font-size: ${size}px;
   }
 
   .another-test-class {
     background: ${color};
   }
 
+  /* Some CSS Comment */
+  .\@root {
+    font-size: 10px;
+  }
+
 `;
 
 test('css function', () => {
-
-  const expectRes = (''
-    + '.test-class{color:green;font-size:12px}'
-    + '.another-test-class{background:green}'
+  const stylesMinified = styles.replace(/\s/g,'');
+  const stylesMinifiedExpect = (''
+    + '.test-class{color:green;font-size:14px;}'
+    + '.another-test-class{background:green;}'
+    + '/*SomeCSSComment*/'
+    + '.\\@root{font-size:10px;}'
   );
-
-  const { css: parsed } = parseCss(styles);
-
-  expect(parsed).toBe(expectRes);
-
+  /* Need to double escape ('.\\') only for the test case
+     as we need to escape the escape in this string.
+     The css`` func only outputs a single escape
+     as written */
+  expect(stylesMinified).toBe(stylesMinifiedExpect);
 });

packages/css/src/css.ts

@@ -5,24 +5,5 @@ export function css
 )
 : string
 {
-  if (!Array.isArray(strings)) return '';
-  if (!strings.length) return '';
-
-  /*
-    String array is always 1 length longer than interpolations array
-    e.g. string, interp, string, interp, string, interp, string.
-    Always begins and ends with string.
-  */
-
-  let cssStr = '';
-  let index = 0;
-  cssStr += strings[0];
-
-  for (const interpolation of interpolations) {
-    cssStr += interpolation.toString();
-    index += 1;
-    cssStr += strings[index] ? strings[index] : '';
-  }
-
-  return cssStr;
+  return String.raw(strings, ...interpolations);
 }

packages/vite-plugin/package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "license": "MIT",
   "description": "Vite plugin for stylebucket",
+  "packageManager": "pnpm@8.15.8",
   "author": {
     "name": "Brett Wood",
     "url": "https://github.com/woodbrettm"
@@ -21,7 +22,7 @@
   ],
   "engines": {
     "node": ">=18.0.0",
-    "pnpm": ">=7.0.0"
+    "pnpm": ">=8.15.8"
   },
   "main": "./build/main.js",
   "types": "./build/main.d.ts",

playground/nuxt-play/package.json

@@ -2,6 +2,7 @@
   "name": "nuxt-play",
   "private": true,
   "type": "module",
+  "packageManager": "pnpm@8.15.8",
   "scripts": {
     "play:build": "nuxt build",
     "play:dev": "nuxt dev",

playground/vite-vanilla/package.json

@@ -2,6 +2,7 @@
   "name": "@stylebucket/core.playground.vite-vanilla",
   "private": true,
   "type": "module",
+  "packageManager": "pnpm@8.15.8",
   "scripts": {
     "play:dev": "vite",
     "play:build": "vite build",