@stylexjs/shared 0.1.0-beta.2 → 0.1.0-beta.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (5) hide show
  1. package/package.json +5 -2
  2. package/.babelrc +0 -16
  3. package/__tests__/stylex-create-test.js +0 -386
  4. package/__tests__/stylex-keyframes-test.js +0 -59
  5. package/tsconfig.json +0 -103
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stylexjs/shared",
3
- "version": "0.1.0-beta.2",
3
+ "version": "0.1.0-beta.4",
4
4
  "description": "Shared Code for Stylex compile and runtime.",
5
5
  "main": "lib/index.js",
6
6
  "repository": "https://www.github.com/facebookexternal/stylex",
@@ -20,5 +20,8 @@
20
20
  "snapshotFormat": {
21
21
  "printBasicPrototype": false
22
22
  }
23
- }
23
+ },
24
+ "files": [
25
+ "lib/*"
26
+ ]
24
27
  }
package/.babelrc DELETED
@@ -1,16 +0,0 @@
1
- {
2
- "assumptions": {
3
- "iterableIsArray": true
4
- },
5
- "presets": [
6
- ["@babel/preset-env", {
7
- "exclude": [
8
- "@babel/plugin-transform-typeof-symbol"
9
- ],
10
- "targets": "defaults"
11
- }],
12
- "@babel/preset-flow",
13
- "@babel/preset-react"
14
- ]
15
- }
16
-
package/__tests__/stylex-create-test.js DELETED
@@ -1,386 +0,0 @@
1
- /**
2
- * Copyright (c) Meta Platforms, Inc. and affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @flow strict-local
8
- *
9
- */
10
-
11
- import styleXCreate from '../src/stylex-create';
12
-
13
- describe('stylex-create-test', () => {
14
- test('color:red', () => {
15
- expect(
16
- styleXCreate({
17
- default: {
18
- backgroundColor: 'red',
19
- color: 'blue',
20
- },
21
- })
22
- ).toMatchInlineSnapshot(`
23
- [
24
- {
25
- "default": {
26
- "backgroundColor": "xrkmrrc",
27
- "color": "xju2f9n",
28
- },
29
- },
30
- {
31
- "xju2f9n": {
32
- "ltr": ".xju2f9n{color:blue}",
33
- "priority": 1,
34
- "rtl": null,
35
- },
36
- "xrkmrrc": {
37
- "ltr": ".xrkmrrc{background-color:red}",
38
- "priority": 1,
39
- "rtl": null,
40
- },
41
- },
42
- ]
43
- `);
44
- });
45
-
46
- test('padding shorthand', () => {
47
- expect(
48
- styleXCreate({
49
- short: {
50
- padding: 'calc((100% - 50px) * 0.5) var(--rightpadding, 20px)',
51
- paddingTop: 0,
52
- },
53
- })
54
- ).toMatchInlineSnapshot(`
55
- [
56
- {
57
- "short": {
58
- "paddingBottom": "x18xuxqe",
59
- "paddingEnd": "xcrpjku",
60
- "paddingStart": "xyv1419",
61
- "paddingTop": "xexx8yu",
62
- },
63
- },
64
- {
65
- "x18xuxqe": {
66
- "ltr": ".x18xuxqe{padding-bottom:calc((100% - 50px) * .5)}",
67
- "priority": 1,
68
- "rtl": null,
69
- },
70
- "xcrpjku": {
71
- "ltr": ".xcrpjku{padding-right:var(--rightpadding,20px)}",
72
- "priority": 1,
73
- "rtl": ".xcrpjku{padding-left:var(--rightpadding,20px)}",
74
- },
75
- "xexx8yu": {
76
- "ltr": ".xexx8yu{padding-top:0}",
77
- "priority": 1,
78
- "rtl": null,
79
- },
80
- "xyv1419": {
81
- "ltr": ".xyv1419{padding-left:var(--rightpadding,20px)}",
82
- "priority": 1,
83
- "rtl": ".xyv1419{padding-right:var(--rightpadding,20px)}",
84
- },
85
- },
86
- ]
87
- `);
88
- });
89
-
90
- test('transforms style object with custom property', () => {
91
- expect(
92
- styleXCreate({
93
- default: {
94
- '--background-color': 'red',
95
- },
96
- })
97
- ).toMatchInlineSnapshot(`
98
- [
99
- {
100
- "default": {
101
- "--background-color": "xgau0yw",
102
- },
103
- },
104
- {
105
- "xgau0yw": {
106
- "ltr": ".xgau0yw{--background-color:red}",
107
- "priority": 1,
108
- "rtl": null,
109
- },
110
- },
111
- ]
112
- `);
113
- });
114
-
115
- test('transforms style object with custom propety as value', () => {
116
- expect(
117
- styleXCreate({
118
- default: {
119
- '--final-color': 'var(--background-color)',
120
- },
121
- })
122
- ).toMatchInlineSnapshot(`
123
- [
124
- {
125
- "default": {
126
- "--final-color": "x13tgbkp",
127
- },
128
- },
129
- {
130
- "x13tgbkp": {
131
- "ltr": ".x13tgbkp{--final-color:var(--background-color)}",
132
- "priority": 1,
133
- "rtl": null,
134
- },
135
- },
136
- ]
137
- `);
138
- });
139
-
140
- test('transforms multiple namespaces', () => {
141
- expect(
142
- styleXCreate({
143
- default: {
144
- backgroundColor: 'red',
145
- },
146
-
147
- default2: {
148
- color: 'blue',
149
- },
150
- })
151
- ).toMatchInlineSnapshot(`
152
- [
153
- {
154
- "default": {
155
- "backgroundColor": "xrkmrrc",
156
- },
157
- "default2": {
158
- "color": "xju2f9n",
159
- },
160
- },
161
- {
162
- "xju2f9n": {
163
- "ltr": ".xju2f9n{color:blue}",
164
- "priority": 1,
165
- "rtl": null,
166
- },
167
- "xrkmrrc": {
168
- "ltr": ".xrkmrrc{background-color:red}",
169
- "priority": 1,
170
- "rtl": null,
171
- },
172
- },
173
- ]
174
- `);
175
- });
176
-
177
- test('does not transform attr() value', () => {
178
- expect(
179
- styleXCreate({
180
- default: {
181
- content: 'attr(some-attribute)',
182
- },
183
- })
184
- ).toMatchInlineSnapshot(`
185
- [
186
- {
187
- "default": {
188
- "content": "xd71okc",
189
- },
190
- },
191
- {
192
- "xd71okc": {
193
- "ltr": ".xd71okc{content:attr(some-attribute)}",
194
- "priority": 1,
195
- "rtl": null,
196
- },
197
- },
198
- ]
199
- `);
200
- });
201
-
202
- test('transforms nested pseudo-class to CSS', () => {
203
- expect(
204
- styleXCreate({
205
- default: {
206
- ':hover': {
207
- backgroundColor: 'red',
208
- color: 'blue',
209
- },
210
- },
211
- })
212
- ).toMatchInlineSnapshot(`
213
- [
214
- {
215
- "default": {
216
- ":hover_backgroundColor": "x1gykpug",
217
- ":hover_color": "x17z2mba",
218
- },
219
- },
220
- {
221
- "x17z2mba": {
222
- "ltr": ".x17z2mba:hover{color:blue}",
223
- "priority": 8,
224
- "rtl": null,
225
- },
226
- "x1gykpug": {
227
- "ltr": ".x1gykpug:hover{background-color:red}",
228
- "priority": 8,
229
- "rtl": null,
230
- },
231
- },
232
- ]
233
- `);
234
- });
235
-
236
- // This API will not launch as an array, but internally we can continue to use arrays
237
- test('transforms array values as fallbacks', () => {
238
- expect(
239
- styleXCreate({
240
- default: {
241
- position: ['sticky', 'fixed'],
242
- },
243
- })
244
- ).toMatchInlineSnapshot(`
245
- [
246
- {
247
- "default": {
248
- "position": "x1ruww2u",
249
- },
250
- },
251
- {
252
- "x1ruww2u": {
253
- "ltr": ".x1ruww2u{position:sticky;position:fixed}",
254
- "priority": 1,
255
- "rtl": null,
256
- },
257
- },
258
- ]
259
- `);
260
- });
261
-
262
- test('tranforms valid shorthands', () => {
263
- expect(
264
- styleXCreate({
265
- default: {
266
- overflow: 'hidden',
267
- borderStyle: 'dashed',
268
- borderWidth: 1,
269
- },
270
- })
271
- ).toMatchInlineSnapshot(`
272
- [
273
- {
274
- "default": {
275
- "borderBottomStyle": "xpvcztv",
276
- "borderBottomWidth": "xso031l",
277
- "borderEndStyle": "x157eodl",
278
- "borderEndWidth": "xm81vs4",
279
- "borderStartStyle": "x1q04ism",
280
- "borderStartWidth": "xy80clv",
281
- "borderTopStyle": "xlya59e",
282
- "borderTopWidth": "x178xt8z",
283
- "overflowX": "x6ikm8r",
284
- "overflowY": "x10wlt62",
285
- },
286
- },
287
- {
288
- "x10wlt62": {
289
- "ltr": ".x10wlt62{overflow-y:hidden}",
290
- "priority": 1,
291
- "rtl": null,
292
- },
293
- "x157eodl": {
294
- "ltr": ".x157eodl{border-right-style:dashed}",
295
- "priority": 1,
296
- "rtl": ".x157eodl{border-left-style:dashed}",
297
- },
298
- "x178xt8z": {
299
- "ltr": ".x178xt8z{border-top-width:1px}",
300
- "priority": 1,
301
- "rtl": null,
302
- },
303
- "x1q04ism": {
304
- "ltr": ".x1q04ism{border-left-style:dashed}",
305
- "priority": 1,
306
- "rtl": ".x1q04ism{border-right-style:dashed}",
307
- },
308
- "x6ikm8r": {
309
- "ltr": ".x6ikm8r{overflow-x:hidden}",
310
- "priority": 1,
311
- "rtl": null,
312
- },
313
- "xlya59e": {
314
- "ltr": ".xlya59e{border-top-style:dashed}",
315
- "priority": 1,
316
- "rtl": null,
317
- },
318
- "xm81vs4": {
319
- "ltr": ".xm81vs4{border-right-width:1px}",
320
- "priority": 1,
321
- "rtl": ".xm81vs4{border-left-width:1px}",
322
- },
323
- "xpvcztv": {
324
- "ltr": ".xpvcztv{border-bottom-style:dashed}",
325
- "priority": 1,
326
- "rtl": null,
327
- },
328
- "xso031l": {
329
- "ltr": ".xso031l{border-bottom-width:1px}",
330
- "priority": 1,
331
- "rtl": null,
332
- },
333
- "xy80clv": {
334
- "ltr": ".xy80clv{border-left-width:1px}",
335
- "priority": 1,
336
- "rtl": ".xy80clv{border-right-width:1px}",
337
- },
338
- },
339
- ]
340
- `);
341
- });
342
-
343
- test('transforms media queries', () => {
344
- expect(
345
- styleXCreate({
346
- default: {
347
- backgroundColor: 'red',
348
- '@media (min-width: 1000px)': {
349
- backgroundColor: 'blue',
350
- },
351
-
352
- '@media (min-width: 2000px)': {
353
- backgroundColor: 'purple',
354
- },
355
- },
356
- })
357
- ).toMatchInlineSnapshot(`
358
- [
359
- {
360
- "default": {
361
- "@media (min-width: 1000px)_backgroundColor": "xc445zv",
362
- "@media (min-width: 2000px)_backgroundColor": "x1ssfqz5",
363
- "backgroundColor": "xrkmrrc",
364
- },
365
- },
366
- {
367
- "x1ssfqz5": {
368
- "ltr": "@media (min-width: 2000px){.x1ssfqz5.x1ssfqz5{background-color:purple}}",
369
- "priority": 2,
370
- "rtl": null,
371
- },
372
- "xc445zv": {
373
- "ltr": "@media (min-width: 1000px){.xc445zv.xc445zv{background-color:blue}}",
374
- "priority": 2,
375
- "rtl": null,
376
- },
377
- "xrkmrrc": {
378
- "ltr": ".xrkmrrc{background-color:red}",
379
- "priority": 1,
380
- "rtl": null,
381
- },
382
- },
383
- ]
384
- `);
385
- });
386
- });
package/__tests__/stylex-keyframes-test.js DELETED
@@ -1,59 +0,0 @@
1
- /**
2
- * Copyright (c) Meta Platforms, Inc. and affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @flow strict-local
8
- *
9
- */
10
-
11
- import styleXKeyframes from '../src/stylex-keyframes';
12
-
13
- describe('stylex-keyframes test', () => {
14
- test('converts keyframes to CSS', () => {
15
- expect(
16
- styleXKeyframes({
17
- from: {
18
- backgroundColor: 'red',
19
- },
20
-
21
- to: {
22
- backgroundColor: 'blue',
23
- },
24
- })
25
- ).toMatchInlineSnapshot(`
26
- [
27
- "xbopttm-B",
28
- {
29
- "ltr": "@keyframes xbopttm-B{from{background-color:red;}to{background-color:blue;}}",
30
- "priority": 1,
31
- "rtl": null,
32
- },
33
- ]
34
- `);
35
- });
36
-
37
- test('generates RTL-specific keyframes', () => {
38
- expect(
39
- styleXKeyframes({
40
- from: {
41
- start: 0,
42
- },
43
-
44
- to: {
45
- start: 500,
46
- },
47
- })
48
- ).toMatchInlineSnapshot(`
49
- [
50
- "x1lvx8r0-B",
51
- {
52
- "ltr": "@keyframes x1lvx8r0-B{from{left:0;}to{left:500px;}}",
53
- "priority": 1,
54
- "rtl": "@keyframes x1lvx8r0-B{from{right:0;}to{right:500px;}}",
55
- },
56
- ]
57
- `);
58
- });
59
- });
package/tsconfig.json DELETED
@@ -1,103 +0,0 @@
1
- {
2
- "compilerOptions": {
3
- /* Visit https://aka.ms/tsconfig to read more about this file */
4
-
5
- /* Projects */
6
- // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
7
- // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
8
- // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */
9
- // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */
10
- // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
11
- // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
12
-
13
- /* Language and Environment */
14
- "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
15
- // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
16
- // "jsx": "preserve", /* Specify what JSX code is generated. */
17
- // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */
18
- // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
19
- // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
20
- // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
21
- // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
22
- // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
23
- // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
24
- // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
25
- // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
26
-
27
- /* Modules */
28
- "module": "commonjs", /* Specify what module code is generated. */
29
- "rootDir": "./src", /* Specify the root folder within your source files. */
30
- // "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */
31
- // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
32
- // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
33
- // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
34
- // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */
35
- // "types": [], /* Specify type package names to be included without being referenced in a source file. */
36
- // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
37
- // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */
38
- // "resolveJsonModule": true, /* Enable importing .json files. */
39
- // "noResolve": true, /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
40
-
41
- /* JavaScript Support */
42
- // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
43
- // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
44
- // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
45
-
46
- /* Emit */
47
- "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
48
- "declarationMap": true, /* Create sourcemaps for d.ts files. */
49
- // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
50
- "sourceMap": true, /* Create source map files for emitted JavaScript files. */
51
- // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
52
- "outDir": "./lib", /* Specify an output folder for all emitted files. */
53
- // "removeComments": true, /* Disable emitting comments. */
54
- // "noEmit": true, /* Disable emitting files from a compilation. */
55
- // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
56
- // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */
57
- // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
58
- // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
59
- // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
60
- // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
61
- // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
62
- // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
63
- // "newLine": "crlf", /* Set the newline character for emitting files. */
64
- // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
65
- // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */
66
- // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
67
- // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */
68
- // "declarationDir": "./", /* Specify the output directory for generated declaration files. */
69
- // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
70
-
71
- /* Interop Constraints */
72
- "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
73
- // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
74
- "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
75
- // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
76
- "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
77
-
78
- /* Type Checking */
79
- "strict": true, /* Enable all strict type-checking options. */
80
- "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
81
- "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */
82
- "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
83
- "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
84
- "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
85
- "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */
86
- "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */
87
- "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
88
- // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */
89
- // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */
90
- // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
91
- "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
92
- "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
93
- // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */
94
- "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
95
- "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */
96
- // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
97
- // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
98
-
99
- /* Completeness */
100
- // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
101
- "skipLibCheck": true /* Skip type checking all .d.ts files. */
102
- }
103
- }