8000 Fix Interop Issue with Import and Custom Properties (#133) · marcalexiei/postcss-plugins@581678f · GitHub
Skip to content

Commit 581678f

Browse files
Antonio-LagunaAntonio-Laguna
authored
Fix Interop Issue with Import and Custom Properties (csstools#133)
* Creating test case * Fixing test * Removing synchronous code * Keeping the previous functionality
1 parent 0309cc8 commit 581678f

8 files changed

Lines changed: 107 additions & 4 deletions

File tree

‎package-lock.json‎

Lines changed: 64 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎plugins/postcss-custom-properties/.tape.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const importWithProps = require('./test/import');
2+
13
module.exports = {
24
'basic': {
35
message: 'supports basic usage'
@@ -311,5 +313,13 @@ module.exports = {
311313
options: {
312314
importFrom: {}
313315
}
316+
},
317+
'import': {
318+
message: 'supports "postcss-import"',
319+
options: {
320+
expect: 'import.expect.css',
321+
result: 'import.result.css'
322+
},
323+
plugin: importWithProps
314324
}
315325
};

‎plugins/postcss-custom-properties/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
},
3737
"devDependencies": {
3838
"postcss": "^8.3.6",
39+
"postcss-import": "^14.0.2",
3940
"postcss-tape": "^6.0.1"
4041
},
4142
"peerDependencies": {

‎plugins/postcss-custom-properties/src/index.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,12 @@ const creator = opts => {
2323

2424
return {
2525
postcssPlugin: 'postcss-custom-properties',
26-
prepare ({ root }) {
26+
prepare () {
2727
if (canReturnSyncFunction) {
28-
customProperties = getCustomPropertiesFromRoot(root, { preserve });
29-
3028
return {
29+
Once: (root) => {
30+
customProperties = getCustomPropertiesFromRoot(root, { preserve });
31+
},
3132
Declaration: (decl) => transformProperties(decl, customProperties, { preserve }),
3233
};
3334
} else {

‎plugins/postcss-custom-properties/test/import.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import "./imported-file.css";
2+
3+
a {
4+
color: var(--color);
5+
}

‎plugins/postcss-custom-properties/test/import.expect.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
:root {
2+
--color: blue;
3+
}
4+
5+
a {
6+
color: blue;
7+
color: var(--color);
8+
}

‎plugins/postcss-custom-properties/test/import.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
const postcssImport = require('postcss-import');
2+
3+
const importWithProps = () => {
4+
return {
5+
postcssPlugin: 'postcss-custom-properties (with postcss-import)',
6+
plugins: [postcssImport(), require('../dist/index.cjs')()],
7+
};
8+
};
9+
10+
importWithProps.postcss = true;
11+
12+
module.exports = importWithProps;

‎plugins/postcss-custom-properties/test/imported-file.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:root {
2+
--color: blue;
3+
}

0 commit comments

Comments
 (0)