diff --git a/package-lock.json b/package-lock.json index 8fe77d5..c4ab105 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "stylis-rtl", - "version": "1.0.0", + "version": "1.0.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -132,7 +132,6 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, "requires": { "color-convert": "^1.9.0" } @@ -1359,7 +1358,6 @@ "version": "2.4.1", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", - "dev": true, "requires": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -1479,7 +1477,6 @@ "version": "1.9.2", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.2.tgz", "integrity": "sha512-3NUJZdhMhcdPn8vJ9v2UQJoH0qqoGUkYTgFEPZaPjEtwmmKUfNV46zZmgB2M5M4DCEQHMaCfWHCxiBflLm04Tg==", - "dev": true, "requires": { "color-name": "1.1.1" } @@ -1487,8 +1484,7 @@ "color-name": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.1.tgz", - "integrity": "sha1-SxQVMEz1ACjqgWQ2Q72C6gWANok=", - "dev": true + "integrity": "sha1-SxQVMEz1ACjqgWQ2Q72C6gWANok=" }, "colors": { "version": "1.3.1", @@ -1838,8 +1834,7 @@ "escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", - "dev": true + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" }, "escodegen": { "version": "1.11.0", @@ -2187,6 +2182,27 @@ "locate-path": "^2.0.0" } }, + "findup": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/findup/-/findup-0.1.5.tgz", + "integrity": "sha1-itkpozk7rGJ5V6fl3kYjsGsOLOs=", + "requires": { + "colors": "~0.6.0-1", + "commander": "~2.1.0" + }, + "dependencies": { + "colors": { + "version": "0.6.2", + "resolved": "http://registry.npmjs.org/colors/-/colors-0.6.2.tgz", + "integrity": "sha1-JCP+ZnisDF2uiFLl0OW+CMmXq8w=" + }, + "commander": { + "version": "2.1.0", + "resolved": "http://registry.npmjs.org/commander/-/commander-2.1.0.tgz", + "integrity": "sha1-0SG7roYNmZKj1Re6lvVliOR8Z4E=" + } + } + }, "flow-bin": { "version": "0.78.0", "resolved": "https://registry.npmjs.org/flow-bin/-/flow-bin-0.78.0.tgz", @@ -3160,8 +3176,7 @@ "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=" }, "has-symbol-support-x": { "version": "1.4.2", @@ -4539,8 +4554,7 @@ "minimist": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" }, "mixin-deep": { "version": "1.3.1", @@ -4567,7 +4581,6 @@ "version": "0.5.1", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", - "dev": true, "requires": { "minimist": "0.0.8" } @@ -4998,6 +5011,23 @@ "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=", "dev": true }, + "postcss": { + "version": "6.0.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", + "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", + "requires": { + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" + } + } + }, "prelude-ls": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", @@ -5405,6 +5435,18 @@ "integrity": "sha512-OfWGQTb9vnwRjwtA2QwpG2ICclHC3pgXZO5xt8H2EfgDquO0qVdSb5T88L4qJVAEugbS56pAuV4XZM58UX8ulw==", "dev": true }, + "rtlcss": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-2.4.0.tgz", + "integrity": "sha512-hdjFhZ5FCI0ABOfyXOMOhBtwPWtANLCG7rOiOcRf+yi5eDdxmDjqBruWouEnwVdzfh/TWF6NNncIEsigOCFZOA==", + "requires": { + "chalk": "^2.3.0", + "findup": "^0.1.5", + "mkdirp": "^0.5.1", + "postcss": "^6.0.14", + "strip-json-comments": "^2.0.0" + } + }, "safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", @@ -5871,11 +5913,15 @@ "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=", "dev": true }, + "strip-json-comments": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", + "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=" + }, "supports-color": { "version": "5.4.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz", "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==", - "dev": true, "requires": { "has-flag": "^3.0.0" } diff --git a/package.json b/package.json index e2e70ea..505f9f0 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,6 @@ "jest": "^23.5.0" }, "dependencies": { - "cssjanus": "^1.3.0" + "rtlcss": "^2.4.0" } } diff --git a/src/stylis-rtl.js b/src/stylis-rtl.js index 16c85ce..68e469c 100644 --- a/src/stylis-rtl.js +++ b/src/stylis-rtl.js @@ -1,6 +1,7 @@ // @flow -import cssjanus from 'cssjanus' +// https://rtlcss.com/ +import rtlcss from 'rtlcss'; // https://github.com/thysultan/stylis.js#plugins const STYLIS_CONTEXTS = { @@ -10,13 +11,14 @@ const STYLIS_CONTEXTS = { PROPERTY: 1, SELECTOR_BLOCK: 2, AT_RULE: 3 -} +}; -export type StylisContextType = $Values -export const STYLIS_PROPERTY_CONTEXT = STYLIS_CONTEXTS.PROPERTY +export type StylisContextType = $Values; +// Using PREPARATION because comments are getting removed at the PROPERTY level. +export const STYLIS_PROPERTY_CONTEXT = STYLIS_CONTEXTS.PREPARATION; export default (context: StylisContextType, content: string): ?string => { if (context === STYLIS_PROPERTY_CONTEXT) { - return cssjanus.transform(content) + return rtlcss.process(content); } -} +}; diff --git a/src/stylis-rtl.test.js b/src/stylis-rtl.test.js index de527a9..649e2c8 100644 --- a/src/stylis-rtl.test.js +++ b/src/stylis-rtl.test.js @@ -1,33 +1,48 @@ // @flow -import stylisRtlPlugin, { STYLIS_PROPERTY_CONTEXT } from './stylis-rtl' +import stylisRtlPlugin, { STYLIS_PROPERTY_CONTEXT } from './stylis-rtl'; describe('Stylis RTL Plugin', () => { it('converts LTR to RTL', () => { expect( stylisRtlPlugin(STYLIS_PROPERTY_CONTEXT, 'padding-left: 2px;') - ).toEqual('padding-right: 2px;') + ).toEqual('padding-right: 2px;'); expect( stylisRtlPlugin(STYLIS_PROPERTY_CONTEXT, 'margin: 0 1px 0 2px;') - ).toEqual('margin: 0 2px 0 1px;') - }) + ).toEqual('margin: 0 2px 0 1px;'); + }); + + it('allows you to replace a value via inline comments', () => { + expect( + stylisRtlPlugin(STYLIS_PROPERTY_CONTEXT, 'font-size: 16px/*rtl:14px*/;') + ).toEqual('font-size: 14px;'); + }); it('allows you to skip rules via comments', () => { const input = ` margin: 0 2px 0 1px; - /* @noflip */ - margin: 0 1px 0 2px; + /*rtl:begin:ignore*/ + text-align:left; + /*rtl:end:ignore*/ /* just a regular comment */ margin: 0 2px 0 1px; - ` + `; const output = ` margin: 0 1px 0 2px; - /* @noflip */ - margin: 0 1px 0 2px; + text-align:left; /* just a regular comment */ margin: 0 1px 0 2px; - ` - expect(stylisRtlPlugin(STYLIS_PROPERTY_CONTEXT, input)).toEqual(output) - }) -}) + `; + expect(stylisRtlPlugin(STYLIS_PROPERTY_CONTEXT, input)).toEqual(output); + }); + + it('allows you to prepend a value via comments', () => { + expect( + stylisRtlPlugin( + STYLIS_PROPERTY_CONTEXT, + 'font-family: "Droid Sans", sans-serif/*rtl:prepend:"Droid Arabic Kufi",*/;' + ) + ).toEqual('font-family: "Droid Arabic Kufi","Droid Sans", sans-serif;'); + }); +});